/* ============================================================
   header.css - Modern Header (Refined) - Pink Theme
   Compatible with existing HTML structure
   ============================================================ */

:root{
  --primary:#667EEA;
  --secondary:#764BA2;
  --text:#2d3748;
  --muted:#718096;
  --border:#fce8ec;
  --bg:#ffffff;
  --bg-soft:#fff5f7;
  --pink-light:#ffe8ee;
  --pink-medium:#ffd6e0;
  --pink-warm:#fec8d6;
  --radius:16px;
  --radius-pill:999px;
  --shadow:0 8px 24px rgba(102,126,234,.08);
  --shadow-hover:0 12px 28px rgba(118,75,162,.16);
  --transition:.28s ease;
}

*{box-sizing:border-box}

/* Top Bar */
.top-bar{
  background:var(--pink-light);
  border-bottom:1px solid var(--border);
  padding:8px 0;
  font:500 13px OpenCartFarsi,Tahoma,sans-serif;
}

.top-bar-inner,
.top-bar-left,
.top-bar-right{
  display:flex;
  align-items:center;
}

.top-bar-inner{
  justify-content:space-between;
  gap:16px;
}

.top-bar-left{gap:12px;flex-wrap:wrap;}

.top-links{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:6px;
  flex-wrap:wrap;
}

.top-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border-radius:var(--radius-pill);
  color:var(--muted);
  text-decoration:none;
  transition:all var(--transition);
}

.top-link:hover{
  color:var(--primary);
  background:rgba(102,126,234,.08);
  transform:translateY(-1px);
}

.top-link .fa{
  width:16px;
  text-align:center;
  transition:inherit;
}

.top-link:hover .fa{color:var(--primary);}
.top-link-arrow{font-size:10px;margin-right:2px;}

/* Header */
.main-header{
  background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink-medium) 50%, var(--pink-warm) 100%);
  padding:18px 0;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}

.main-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.header-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.header-logo-img{
  display:block;
  max-height:60px;
  width:auto;
  transition:transform var(--transition);
}

.header-logo:hover .header-logo-img{
  transform:scale(1.03);
}

.header-logo-text{
  margin:0;
  font-size:24px;
  font-weight:700;
}

.header-logo-text a{
  color:var(--text);
  text-decoration:none;
  transition:color var(--transition);
}

.header-logo-text a:hover{color:var(--secondary);}

.header-search{
  flex:1;
  min-width:220px;
  max-width:560px;
}

.header-search .search-wrapper{
  width:100%;
  margin:0;
}

.header-cart{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

/* Tablet */
@media (max-width:991px){
  .top-bar-inner{
    flex-direction:column;
    gap:8px;
  }

  .top-bar-left,
  .top-bar-right,
  .top-links{
    justify-content:center;
    width:100%;
  }

  .top-link-text{display:none;}

  .main-header-inner{
    flex-wrap:wrap;
    gap:14px;
  }

  .header-logo{order:1;}
  .header-cart{order:2;}
  .header-search{
    order:3;
    flex:0 0 100%;
    max-width:100%;
  }
}

/* Mobile */
@media (max-width:480px){

  .top-bar{
    padding:6px 0;
    font-size:12px;
  }

  .top-link{
    padding:6px 9px;
  }

  .top-link-arrow{display:none;}

  .main-header{
    padding:12px 0;
    background: linear-gradient(145deg, var(--pink-light) 0%, var(--pink-medium) 100%);
  }

  .main-header-inner{
    gap:10px;
  }

  .header-logo-img{
    max-height:46px;
  }

  .header-search{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* Extra Small */
@media (max-width:360px){

  .header-logo-img{
    max-height:38px;
  }

  .top-link{
    padding:5px 7px;
    font-size:11px;
  }
}