/* ==========================================================================
   Al Afifah — site overrides
   --------------------------------------------------------------------------
   Loaded LAST in header.php so it wins over style.css / responsive.css.
   Scope is limited to the header + mobile drawer.

   Fixes:
   - responsive.css:264 hides `.header-area .theme-btn` below 767px, which
     removed the "Place an Order" CTA and the Logout button on phones.
   - The mobile drawer's action-bar carried no account actions at all.
   - main.js binds `.overlay` for tap-outside-to-close, but no such element
     existed in the markup.
   ========================================================================== */

/* ------------------------------------------------------- Header actions -- */

.header-area .header-right-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-user {
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-cta__short {
  display: none;
}

.header-area .header-right-content .header-logout {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.header-area .header-right-content .header-logout:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

/* --------------------------------------------------- Mobile nav trigger -- */

/* The template gave this a Bootstrap `col-6`, so the hamburger reserved half
   the header width and squeezed the CTA. It only needs its own width. */
.header-area .mobile-nav-bar {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
  margin-left: 4px;
}

.header-area .mobile-nav-bar #hamburger {
  color: #fff;
}

/* ---------------------------------------------------- Drawer: account -- */

.sidebar-auth {
  margin-top: 26px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.sidebar-auth__greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #fff;
}

.sidebar-auth__avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffd500;
  color: #263866;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-auth__meta {
  min-width: 0;
}

.sidebar-auth__hello {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.3;
}

.sidebar-auth__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `.action-bar a` is `display:block; margin-top:12px` in style.css — these
   buttons need their own box, so the shared rule is re-stated here. */
.sidebar-auth .sidebar-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 13px 16px;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: 0.2s;
}

.sidebar-auth .sidebar-btn:last-child {
  margin-bottom: 0 !important;
}

.sidebar-auth .sidebar-btn i {
  margin-right: 0;
  font-size: 17px;
}

.sidebar-auth .sidebar-btn--primary {
  background: #ffd500;
  color: #263866 !important;
  border-color: #ffd500;
}

.sidebar-auth .sidebar-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: #263866 !important;
}

.sidebar-auth .sidebar-btn--outline {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5);
}

.sidebar-auth .sidebar-btn--outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.sidebar-auth .sidebar-btn--danger:hover {
  background: #dc3545;
  border-color: #dc3545;
}

/* Drawer needs bottom breathing room now that it holds more content. */
.mobile-nav {
  padding-bottom: 40px;
}

.action-bar {
  margin-top: 30px;
}

/* ------------------------------------------------------------- Overlay -- */

/* `.header-area .navigation` is position:relative with z-index:9, which makes
   it a stacking context. `.mobile-nav` lives inside it, so its z-index:9999 is
   resolved *within* that context and the drawer effectively paints at 9 —
   underneath a body-level overlay. Lifting the context above the overlay is
   what lets the open drawer sit on top of the backdrop. */
.header-area .navigation {
  z-index: 9990;
}

/* style.css already defines `.overlay` (an absolutely-positioned hero tint at
   z-index:-1) and `.overlay.active`. The base rule below neutralises the hero
   variant for this body-level element. */
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 9980;
}

/* background-color and z-index are repeated here on purpose. style.css:774
   sets `.overlay.active { background-color:#000; opacity:.5; z-index:99 }` at
   specificity (0,2,0); a declaration on the plain `.overlay` selector (0,1,0)
   loses to it, which combined solid black with the opacity:1 below and blacked
   out the whole page instead of dimming it. Matching the specificity — and
   loading after style.css — is what makes these win. */
.overlay.active {
  background-color: rgba(15, 23, 42, 0.55);
  opacity: 1;
  visibility: visible;
  z-index: 9980;
}

/* ---------------------------------------------------------- Responsive -- */

@media only screen and (max-width: 991px) {
  /* Full name eats the width the CTA needs; it stays available in the
     drawer, which shows the complete greeting. */
  .header-user {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  /* Undo responsive.css:264 — but only for the header CTA, so other
     `.theme-btn` instances the template hides on purpose stay hidden. */
  .header-area .header-right-content .header-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    font-size: 13.5px;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
  }

  .header-cta__full {
    display: none;
  }

  .header-cta__short {
    display: inline;
  }

  /* Logout would crowd a 360px header; the drawer carries it instead. */
  .header-area .header-right-content .header-logout {
    display: none !important;
  }

  .header-area .header-inner-box .logo {
    padding-right: 12px;
  }

  .header-area .header-inner-box .logo img {
    max-height: 42px;
    width: auto;
  }

  .header-area .header-right-content {
    gap: 8px;
  }
}

@media only screen and (max-width: 380px) {
  .header-area .header-right-content .header-cta {
    padding: 10px 13px;
    font-size: 12.5px;
  }

  .header-area .header-inner-box .logo img {
    max-height: 36px;
  }

  .mobile-nav {
    width: 285px;
  }
}