:root {
            --color-primary: #ff6a00;
            --color-primary-dark: #e55f00;
            --color-success: #10b981;
            --color-warning: #fbbf24;
            --color-danger: #ef4444;
            --color-text: #1f2937;
            --color-text-light: #6b7280;
            --color-border: #e5e7eb;
            --color-bg: #f5f5f5;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--color-bg);
            color: var(--color-text);
            line-height: 1.5;
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 5px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* Global utilities */
        .container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        button {
            font-family: inherit;
        }
        
        /* Toast Notifications */
        .toast-container {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .toast {
            min-width: 300px;
            background: #fff;
            padding: 16px 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 12px;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        .toast-success {
            border-left: 4px solid var(--color-success);
        }
        
        .toast-error {
            border-left: 4px solid var(--color-danger);
        }
        
        .toast-warning {
            border-left: 4px solid var(--color-warning);
        }
        
        .toast-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .toast-content {
            flex: 1;
        }
        
        .toast-title {
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .toast-message {
            font-size: 14px;
            color: var(--color-text-light);
        }
        
        .toast-close {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 20px;
            color: var(--color-text-light);
            padding: 0;
            width: 24px;
            height: 24px;
        }
        
        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        
        .loading-overlay.active {
            display: flex;
        }
        
        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* mağaza profili üçün yüngül vurğu */
.seller-card.store { box-shadow: 0 6px 20px rgba(16,185,129,.12); border:1px solid #d1fae5; }


  .mb-badge{
  background: red;
  color: #fff;
  font-size: 13px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  border-radius: 50%;
}
/* ===== Footer like screenshot ===== */
.av-footer{
  background:#1f2937;
  color:#e5e7eb;
  margin-top:60px;
}
.avf-wrap{
  
  margin: 0 auto;
  padding: 34px 18px 18px;
}
.avf-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr 1.3fr 1fr;
  gap: 26px;
  align-items:start;
}

.avf-logo{
  font-weight: 900;
  font-size: 22px;
  color:#10b981;
  letter-spacing:.2px;
  margin-top:2px;
}

.avf-title{
  font-weight: 500;
  font-size: 20px;
  color:#ffffff;
  line-height:1.4;
  margin: 6px 0 12px;
}

.avf-link{
  display:block;
  text-decoration:none;
  color:#9ca3af;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
}
.avf-link:hover{ color:#e5e7eb; }

.avf-contact{ margin-top: 4px; }
.avf-contact-row{
  display:flex;
  align-items:center;
  gap:10px;
  color:#9ca3af;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.9;
}
.avf-contact-row i{ font-size:18px; color:#9ca3af; }

.avf-socials{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 44px);
  gap: 14px;
}
.avf-soc{
  width:44px; height:44px;
  border-radius:12px;
  background:#374151;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  color:#fff;
  font-size: 20px;
}
.avf-soc:hover{ filter: brightness(1.06); }

.avf-lang .avf-title{ text-align:left; }
.avf-lang{ justify-self:start; }
.avf-lang-row{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#9ca3af;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.9;
}
.avf-lang-row:hover{ color:#e5e7eb; }
.avf-flag{
  width:28px;
  height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  border-radius:4px;
  border:none;
  overflow:hidden;
  box-shadow:none;
  background:transparent;
}
.avf-flag svg{
  width:100%;
  height:100%;
  display:block;
}

.avf-note{
  margin-top: 18px;
  color:#9ca3af;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
}

.avf-line{
  height:1px;
  background:#374151;
  margin: 16px 0 14px;
}

.avf-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.avf-copy{
  color:#9ca3af;
  font-weight: 600;
  font-size: 16px;
}

.avf-payments{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.avf-payments img{
  height: 22px;
  width: auto;
  opacity: .95;
}

/* Mobile layout closer to screenshot */
@media (max-width: 768px){
    .avf-payments{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  width:100%;
}
.avf-payments img{
     width:100%;
}
    .av-footer{
        padding-bottom: 100px;
    }
  .avf-grid{
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .avf-brand{ grid-column: 1 / -1; }
  .avf-logo{ font-size: 26px; }
}
@media (max-width: 420px){
  .avf-grid{ grid-template-columns: 1fr; }
  .avf-socials{ grid-template-columns: repeat(3, 48px); }
  .avf-payments img{ height: 20px; }
  .avf-lang{
    width:100%;
    justify-self:start;
  }
  .avf-lang .avf-title{
    text-align:left;
  }
  .avf-lang-row{
    justify-content:flex-start;
  }
}


 .header-link-msg{ position:relative; }
    .badge-msg{
        position:absolute;
        top:-6px; right:-10px;
        background:#ff5000; color:#fff;
        border-radius:999px;
        padding:1px 6px;
        font-size:11px;
        line-height:1;
    }

    /* =========================
       DESKTOP THEME TOGGLE (Sun/Moon pill)
       ========================= */
    .theme-toggle{
        display:flex;
        align-items:center;
        gap:0;
        padding:4px;
        border-radius:999px;
        border:1px solid #e5e7eb;
        background:#fff;
        box-shadow:0 1px 2px rgba(0,0,0,.04);
        height:40px;
    }
    .theme-toggle-btn{
        width:44px;
        height:32px;
        border:none;
        background:transparent;
        border-radius:999px;
        display:grid;
        place-items:center;
        cursor:pointer;
        color:#111827;
        transition:background .15s ease, color .15s ease;
    }
    .theme-toggle-btn i{ font-size:18px; }

    /* active side */
    .theme-toggle-btn.is-active{
        background:#f6e7a9; /* light mode highlight default */
    }

    /* dark theme pill base */
    [data-theme="dark"] .theme-toggle{
        background:#111827;
        border-color:#374151;
    }
    [data-theme="dark"] .theme-toggle-btn{
        color:#f9fafb;
    }
    [data-theme="dark"] .theme-toggle-btn.is-active{
        background:#ffffff;     /* screendəki kimi ağ highlight */
        color:#111827;
    }

    /* Desktop toggle hidden on mobile */
    @media (max-width: 991px){
        .theme-toggle{
            display:none !important;
        }
    }

    /* ======= USER DROPDOWN (Desktop) ======= */
    .user-dropdown{ position:relative; }
    .user-trigger{
        display:flex;
        align-items:center;
        gap:8px;
        padding:6px 12px;
        border:1px solid #e5e7eb;
        border-radius:999px;
        background:#fff;
        cursor:pointer;
        transition:all .15s ease;
        height:40px;
    }
    .user-trigger:hover{ background:#f9fafb; border-color:#d1d5db; }
    .user-trigger.open{ background:#f3f4f6; border-color:#10b981; }

    .user-avatar{
        width:32px; height:32px;
        border-radius:50%;
        overflow:hidden;
        display:flex; align-items:center; justify-content:center;
        background:#f3f4f6;
        flex-shrink:0;
    }
    .user-avatar img{ width:100%; height:100%; object-fit:cover; }
    .user-avatar-fallback{ font-size:18px; color:#6b7280; }

    .user-trigger-icon{
        font-size:14px;
        color:#6b7280;
        transition:transform .15s ease;
    }
    .user-trigger.open .user-trigger-icon{ transform:rotate(180deg); }

    /* Dropdown menu */
    .user-menu{
        position:absolute;
        top:calc(100% + 8px);
        right:0;
        width:260px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:12px;
        box-shadow:0 10px 25px rgba(0,0,0,.1);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:all .2s ease;
        z-index:100;
        overflow:hidden;
    }
    .user-dropdown.open .user-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    /* User info header */
    .user-menu-header{
        padding:14px 16px;
        border-bottom:1px solid #f0f0f0;
        background:#f9fafb;
    }
    .user-menu-info{ display:flex; align-items:center; gap:10px; }
    .user-menu-avatar{
        width:44px; height:44px;
        border-radius:50%;
        overflow:hidden;
        display:flex; align-items:center; justify-content:center;
        background:#e5e7eb;
        flex-shrink:0;
    }
    .user-menu-avatar img{ width:100%; height:100%; object-fit:cover; }
    .user-menu-avatar-fallback{ font-size:24px; color:#6b7280; }

    .user-menu-details{ flex:1; min-width:0; }
    .user-menu-phone{ font-weight:600; font-size:14px; color:#111827; }
    .user-menu-id{ font-size:12px; color:#6b7280; margin-top:2px; }

    /* Menu items */
    .user-menu-body{ padding:8px 0; }
    .user-menu-item{
        display:flex; align-items:center; gap:10px;
        padding:10px 16px;
        text-decoration:none;
        color:#374151;
        font-size:14px;
        transition:background .12s ease;
    }
    .user-menu-item:hover{ background:#f9fafb; }
    .user-menu-item i{ font-size:16px; color:#6b7280; width:20px; flex-shrink:0; }

    .user-menu-divider{ height:1px; background:#e5e7eb; margin:8px 0; }

    .user-menu-logout{
        display:flex; align-items:center; gap:10px;
        width:100%;
        padding:10px 16px;
        border:none;
        background:transparent;
        text-align:left;
        color:#dc2626;
        font-size:14px;
        cursor:pointer;
        transition:background .12s ease;
    }
    .user-menu-logout:hover{ background:#fef2f2; }
    .user-menu-logout i{ font-size:16px; width:20px; flex-shrink:0; }

    /* Hide user dropdown on mobile */
    @media (max-width: 991px){
        .user-dropdown{ display:none !important; }
    }

    /* ======= USER DROPDOWN BACKDROP (Desktop) ======= */
    .user-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.35);
      z-index: 1080;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }
    .user-backdrop.is-open{
      opacity: 1;
      pointer-events: auto;
    }
    .user-dropdown{ position: relative; z-index: 1; }
    .user-dropdown.open{ z-index: 1090; }
    .user-menu{ z-index: 1091; }

    /* ======= Mobile drawer (side menu) ======= */
    .sm-drawer{
        position:fixed;
        inset:0;
        height:100vh;
        z-index:1050;
        display:flex;
        align-items:stretch;
        pointer-events:none;
        opacity:0;
        transition:opacity .2s ease;
    }
    .sm-drawer.active{
        opacity:1;
        pointer-events:auto;
        z-index:999999;
    }
    .sm-overlay{ flex:1 1 auto; background:rgba(0,0,0,.35); }
    .sm-panel{
        width:80%;
        max-width:260px;
        height:100%;
        max-height:100vh;
        background:#fff;
        box-shadow:2px 0 16px rgba(0,0,0,.2);
        transform:translateX(-100%);
        transition:transform .23s ease;
        position:relative;
        display:flex;
        flex-direction:column;
        border-radius:0 12px 12px 0;
        overflow:hidden;
    }
    .sm-drawer.active .sm-panel{ transform:translateX(0); }

    .sm-profile{
        padding:14px 16px;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#f9fafb;
        margin-top:10px;
    }
    .sm-close{
        position:absolute;
        top:-7px;
        right:10px;
        border:none;
        background:transparent;
        font-size:18px;
        line-height:1;
    }
    .sm-profile-link{
        display:flex;
        align-items:center;
        gap:10px;
        text-decoration:none;
        color:inherit;
    }
    .sm-avatar{
        width:40px;
        height:40px;
        border-radius:50%;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#f3f4f6;
        flex-shrink:0;
    }
    .sm-avatar img{ width:100%; height:100%; object-fit:cover; }
    .sm-avatar-fallback{ font-size:22px; }
    .sm-profile-lines{ display:flex; flex-direction:column; }
    .sm-profile-name{ font-weight:600; font-size:15px; }
    .sm-profile-sub{ font-size:13px; opacity:.7; }

    .sm-nav{
        padding:4px 0 12px;
        overflow-y:auto;
        flex:1 1 auto;
    }
    .sm-item,
    .sm-item-btn{
        width:100%;
        padding:11px 16px;
        display:flex;
        align-items:center;
        gap:10px;
        border:none;
        background:transparent;
        text-align:left;
        font-size:15px;
        text-decoration:none;
        color:#111827;
        box-shadow:none;
    }
    .sm-item i,
    .sm-item-btn i{ font-size:18px; flex-shrink:0; }
    .sm-item:active,
    .sm-item-btn:active{ background:#f5f5f5; }
    .sm-form{ margin:0; padding:0; }

    /* Mobile theme row (ONLY mobile) */
    .sm-dark{
        justify-content:space-between;
        gap:0;
    }
    .sm-dark-main{ display:flex; align-items:center; gap:10px; }
    .sm-switch{
        position:relative;
        width:46px;
        height:26px;
        border-radius:999px;
        background:#e5e7eb;
        flex-shrink:0;
        cursor:pointer;
        transition:background .18s ease;
        margin-left:12px;
        box-sizing:border-box;
    }
    .sm-knob{
        position:absolute;
        top:3px; left:3px;
        width:20px; height:20px;
        border-radius:50%;
        background:#fff;
        box-shadow:0 1px 3px rgba(0,0,0,.3);
        transform:translateX(0);
        transition:transform .18s ease;
    }
    [data-theme="dark"] .sm-switch{ background:#16a34a; }
    [data-theme="dark"] .sm-knob{ transform:translateX(20px); }

    /* ✅ mobile drawer theme row hidden on desktop */
    @media (min-width: 992px){
        #smDarkToggle{ display:none !important; }
    }

    .sm-contact-panel{
        position:absolute;
        inset:0;
        background:#fff;
        display:none;
        flex-direction:column;
    }
    .sm-contact-panel.active{ display:flex; }
    .sm-contact-header{
        display:flex;
        align-items:center;
        gap:8px;
        padding:12px 16px;
        border-bottom:1px solid #f0f0f0;
    }
    .sm-back-btn{
        border:none;
        background:transparent;
        padding:4px;
        font-size:20px;
        line-height:1;
    }
    .sm-contact-title{ font-size:18px; font-weight:600; }
    .sm-contact-body{
        padding-top:4px;
        overflow-y:auto;
        flex:1 1 auto;
    }