/*
 * Compiled stylesheet: header.css
 * Shared by views:
 *   - app/Views/front/includes/loginheader.php
 *   - app/Views/front/includes/tailwind_header.php
 */

[x-cloak] { display: none !important; }

    /* ── Top Ribbon ── */
    .gs-ribbon {
      background: #2C1A12;
      color: #fff;
      font-size: 12.5px;
      padding: 7px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .gs-ribbon a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
    .gs-ribbon a:hover { color: #FFA559; }
    .gs-ribbon-left  { display: flex; align-items: center; gap: 18px; }
    .gs-ribbon-right { display: flex; align-items: center; gap: 14px; }
    .gs-donate-btn { background: #B76E2E !important; color: #fff !important; padding: 4px 16px; border-radius: 999px; font-weight: 600; font-size: 12.5px; }
    .gs-donate-btn:hover { background: #9B5A24 !important; }

    /* ── Navbar ── */
    .gs-nav { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.07); border-bottom: 1px solid #f0ece8; }
    .gs-nav-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
      height: 66px; gap: 8px;
    }

    /* Logo */
    .gs-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .gs-logo-icon { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#B76E2E,#2C1A12); display: flex; align-items: center; justify-content: center; }
    .gs-logo-icon i { color: #fff; font-size: 18px; }
    .gs-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
    .gs-logo-text span:first-child  { font-size: 15px; font-weight: 700; color: #2C1A12; }
    .gs-logo-text span:last-child   { font-size: 10px; color: #B76E2E; font-weight: 500; letter-spacing: .04em; }

    /* Nav links */
    .gs-nav-links { display: flex; align-items: center; gap: 2px; }

    .gs-nav-link {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 8px 11px; border-radius: 8px;
      font-size: 13.5px; font-weight: 500; color: #4b3a2e;
      text-decoration: none; background: none; border: none; cursor: pointer;
      transition: background .18s, color .18s; white-space: nowrap;
    }
    .gs-nav-link:hover,
    .gs-nav-link.active { color: #B76E2E; background: #fdf3eb; }
    .gs-nav-link i.menu-icon { font-size: 13px; opacity: .7; }
    .gs-nav-link:hover i.menu-icon,
    .gs-nav-link.active i.menu-icon { opacity: 1; }
    .gs-nav-link .fa-chevron-down { font-size: 9px; margin-left: 1px; opacity: .5; transition: transform .2s; }

    /* Dropdown */
    .gs-dropdown-wrap { position: relative; }
    .gs-dropdown-wrap:hover .fa-chevron-down { transform: rotate(180deg); }
    .gs-dropdown {
      display: none; position: absolute; top: 100%; left: 0;
      background: #fff; border: .5px solid #e8e0d8; border-radius: 12px;
      min-width: 195px; padding: 6px 0;
      box-shadow: 0 8px 24px rgba(44,26,18,.10); z-index: 200;
    }
    .gs-dropdown-wrap:hover .gs-dropdown { display: block; }
    .gs-dropdown a {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 16px; font-size: 13px; color: #4b3a2e;
      text-decoration: none; transition: background .15s, color .15s;
    }
    .gs-dropdown a i { font-size: 13px; color: #B76E2E; width: 16px; text-align: center; }
    .gs-dropdown a:hover { background: #fdf3eb; color: #B76E2E; }

    /* Action bar */
    .gs-actions { display: flex; align-items: center; gap: 6px; }
    .gs-divider { width: 1px; height: 22px; background: #e0d6cc; margin: 0 2px; }

    .gs-btn-login {
      padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
      color: #4b3a2e; text-decoration: none;
      border: .5px solid #e0d6cc; transition: all .18s;
    }
    .gs-btn-login:hover { background: #fdf3eb; color: #B76E2E; border-color: #B76E2E; }

    .gs-btn-join {
      background: #2C1A12; color: #fff !important; padding: 7px 18px;
      border-radius: 999px; font-size: 13.5px; font-weight: 600;
      text-decoration: none; transition: background .18s; border: none; cursor: pointer;
    }
    .gs-btn-join:hover { background: #B76E2E; }

    /* Icon buttons (cart, language) */
    .gs-icon-btn {
      position: relative; width: 36px; height: 36px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      border: .5px solid #e0d6cc; background: none; cursor: pointer;
      transition: all .18s; text-decoration: none; color: #4b3a2e;
    }
    .gs-icon-btn:hover { background: #fdf3eb; border-color: #B76E2E; color: #B76E2E; }
    .gs-icon-btn i { font-size: 15px; }
    .gs-cart-badge {
      position: absolute; top: -5px; right: -5px;
      background: #B76E2E; color: #fff; font-size: 9px; font-weight: 700;
      width: 17px; height: 17px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid #fff; line-height: 1;
    }

    /* Language dropdown */
    .gs-lang-wrap { position: relative; }
    .gs-lang-dropdown {
      display: none; position: absolute; top: 100%; right: 0;
      background: #fff; border: .5px solid #e8e0d8; border-radius: 10px;
      padding: 6px 0; min-width: 140px;
      box-shadow: 0 8px 24px rgba(44,26,18,.10); z-index: 300;
    }
    .gs-lang-wrap:hover .gs-lang-dropdown { display: block; }
    .gs-lang-dropdown a {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 14px; font-size: 13px; color: #4b3a2e;
      text-decoration: none; transition: background .15s;
    }
    .gs-lang-dropdown a:hover { background: #fdf3eb; color: #B76E2E; }

    /* ── Mobile menu ── */
    .gs-mobile-menu {
      border-top: 1px solid #f0ece8;
      padding: 12px 20px 20px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .gs-mobile-link {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px; border-radius: 8px;
      font-size: 14px; font-weight: 500; color: #4b3a2e;
      text-decoration: none; transition: background .15s, color .15s;
    }
    .gs-mobile-link i.menu-icon { font-size: 14px; color: #B76E2E; width: 18px; }
    .gs-mobile-link:hover,
    .gs-mobile-link.active { background: #fdf3eb; color: #B76E2E; }
    .gs-mobile-sub { padding-left: 38px; display: flex; flex-direction: column; gap: 2px; }
    .gs-mobile-sub a {
      padding: 7px 10px; font-size: 13.5px; color: #4b3a2e;
      border-radius: 6px; text-decoration: none;
      transition: background .15s, color .15s;
    }
    .gs-mobile-sub a:hover { background: #fdf3eb; color: #B76E2E; }
    .gs-mobile-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 12px; }