/**
 * Hyde Shortcodes — sitewide CSS
 *
 * Styles for [hyde_clock], [hyde_notifications], [hyde_user_menu] when
 * placed in the WoodMart theme header (or any theme region) outside the
 * portal app shell.
 *
 * Specificity strategy: every rule uses `!important` because these
 * shortcodes drop into arbitrary theme markup (WoodMart's header
 * builder, Avada's header, custom child themes) where ambient styles
 * routinely set color, background, padding, and z-index on `button`,
 * `a`, and `svg` selectors. Without !important, the bell renders as an
 * invisible white square because the theme inherits a transparent or
 * white text color into our SVG's currentColor, and the dropdown can
 * paint behind sticky-header layers that ship `z-index: 999`. This is
 * the same hard-won pattern the portal's `.va-` styles use for the
 * exact same reason.
 *
 * Positioning strategy: dropdowns use `position: fixed` and are
 * positioned at click time by JS, NOT `position: absolute`. The reason
 * is that WoodMart wraps the header in nested flex containers, several
 * of which set `overflow: hidden` and `position: relative` on
 * intermediate ancestors. An absolute-positioned child finds the
 * nearest positioned ancestor as its container — which for us was a
 * 36px-wide flex cell, clipping the dropdown. Fixed positioning escapes
 * the ancestor chain entirely.
 *
 * @since 2.17.20
 */

/* ===========================================================
   v2.17.23 — WoodMart wrapper containment
   ===========================================================
   When the WoodMart header builder hosts our shortcodes via its
   "Shortcode" or "Text/HTML" element, it wraps each shortcode in
   <div class="wd-header-text reset-last-child whb-...">. WoodMart's
   own theme CSS gives `.wd-header-text` a flex-grow behavior so it
   expands to fill the column — which is fine for actual text
   ("Free Shipping" promos, etc.) but with our compact icons inside,
   the wrapper grabs all available column space and pushes neighbor
   icons (search, account, wishlist, cart) leftward toward the logo.
   We force the wrapper to size to its content when it contains any
   of our shortcodes. Confirmed via diagnostic build v2.17.22 — the
   wrapper class is consistent across all three shortcodes.

   :has() support: 95%+ of browsers as of 2025 (Chrome 105+, Safari
   15.4+, Firefox 121+). The JS fallback in hyde-shortcodes.js walks
   up the ancestor chain at boot time and applies the same fix
   inline for any browser that doesn't support :has(). Together they
   cover essentially everyone. */

.wd-header-text:has(.hyde-bell-wrap),
.wd-header-text:has(.hyde-user-wrap),
.wd-header-text:has(.hyde-clock),
.wd-header-text:has(.hyde-login-link) {
    flex:       0 0 auto !important;
    flex-grow:  0        !important;
    flex-shrink:0        !important;
    flex-basis: auto     !important;
    width:      auto     !important;
    min-width:  0        !important;
    max-width:  none     !important;
}

/* Backup class the JS fallback adds when it walks up to find the
   WoodMart wrapper — same containment, just triggered without :has(). */
.wd-header-text.hyde-contained {
    flex:       0 0 auto !important;
    flex-grow:  0        !important;
    flex-shrink:0        !important;
    flex-basis: auto     !important;
    width:      auto     !important;
    min-width:  0        !important;
    max-width:  none     !important;
}

/* ===========================================================
   v2.18.4 — auth-state visibility class
   ===========================================================
   The JS auth resolver (assets/js/hyde-shortcodes.js) toggles this
   class on the four shortcode wrappers (clock, bell, user menu,
   login link) based on the resolved viewer's actual login state.

   These rules need to BEAT the per-shortcode `display: ...
   !important` rules elsewhere in this file (which exist to win the
   specificity fight against WoodMart's own theme styles). To do
   that, we use a more-specific compound selector for each
   shortcode: e.g. `.hyde-login-link.hyde-hidden` is more specific
   than `.hyde-login-link` alone, so even though both have
   `!important`, the compound selector wins. */
.hyde-clock.hyde-hidden,
.hyde-bell-wrap.hyde-hidden,
.hyde-user-wrap.hyde-hidden,
.hyde-login-link.hyde-hidden {
    display: none !important;
}

/* ===========================================================
   Shared
   =========================================================== */

.hyde-clock,
.hyde-bell-wrap,
.hyde-bell-wrap *,
.hyde-user-wrap,
.hyde-user-wrap * {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-sizing: border-box !important;
}

/* ===========================================================
   [hyde_clock]
   =========================================================== */

.hyde-clock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.hyde-clock-date,
.hyde-clock-time,
.hyde-clock-sep {
    display: inline-block !important;
}

.hyde-clock-date { color: #1d1d1f !important; }
.hyde-clock-sep  { color: #c8c8cc !important; font-weight: 400 !important; }
.hyde-clock-time {
    color: #b5872a !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ===========================================================
   [hyde_notifications]
   =========================================================== */

.hyde-bell-wrap {
    position: relative !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.hyde-bell {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #1d1d1f !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: background 0.15s ease !important;
    line-height: 1 !important;
    font-size: 0 !important;
    text-decoration: none !important;
}
.hyde-bell:hover      { background: rgba(0, 0, 0, 0.05) !important; }
.hyde-bell:focus      { outline: 2px solid rgba(181, 135, 42, 0.4) !important; outline-offset: 2px !important; }
.hyde-bell.has-unseen { color: #b5872a !important; }

/* Force the SVG visible regardless of host theme color inheritance.
   WoodMart's header sometimes inherits transparent / white into nested
   SVGs that rely on currentColor — which is what made the bell render
   as a blank white square. Hard-set on path elements directly. */
.hyde-bell svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    overflow: visible !important;
}
.hyde-bell svg path {
    stroke: currentColor !important;
    fill: none !important;
}

.hyde-bell-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: #c74040 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
    border: 1.5px solid #fff !important;
    box-sizing: content-box !important;
    pointer-events: none !important;
}

/* Dropdown — fixed positioning. JS sets top/left at open time. */
.hyde-bell-menu {
    position: fixed !important;
    width: 340px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #e5e5e7 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    z-index: 999999 !important;
    padding: 8px 0 !important;
    color: #1d1d1f !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.hyde-bell-menu-header {
    padding: 8px 16px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #8e8e93 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.hyde-bell-menu-empty {
    padding: 32px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #8e8e93 !important;
    line-height: 1.6 !important;
}

.hyde-bell-item {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    padding: 12px 16px 12px 13px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
    color: #1d1d1f !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}
.hyde-bell-item:hover     { background: #fafafa !important; }
.hyde-bell-item.is-unseen { background: #fffaf0 !important; }

.hyde-bell-item-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.4 !important;
}

.hyde-bell-item-ref {
    font-size: 11px !important;
    color: #8e8e93 !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.hyde-bell-item-msg {
    font-size: 12px !important;
    color: #3c3c43 !important;
    line-height: 1.5 !important;
    margin: 0 0 6px 0 !important;
}

.hyde-bell-item-when {
    font-size: 11px !important;
    color: #8e8e93 !important;
    line-height: 1.3 !important;
}

/* ===========================================================
   [hyde_user_menu]
   =========================================================== */

.hyde-user-wrap {
    position: relative !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.hyde-user-avatar {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    box-shadow: none !important;
    background: #b5872a !important;
    background-color: #b5872a !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
}
.hyde-user-avatar:hover { filter: brightness(1.05) !important; }
.hyde-user-avatar:focus { outline: 2px solid rgba(181, 135, 42, 0.4) !important; outline-offset: 2px !important; }
.hyde-user-avatar span {
    line-height: 1 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

.hyde-user-menu {
    position: fixed !important;
    width: 240px !important;
    background: #fff !important;
    border: 1px solid #e5e5e7 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    z-index: 999999 !important;
    padding: 8px !important;
    color: #1d1d1f !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.hyde-user-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    padding: 8px 10px 2px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.hyde-user-email {
    font-size: 11px !important;
    color: #8e8e93 !important;
    padding: 0 10px 8px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    margin: 0 !important;
}

.hyde-user-divider {
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
    margin: 6px 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.hyde-user-item {
    display: block !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: background 0.12s ease !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
.hyde-user-item:hover   { background: #f5f5f7 !important; color: #1d1d1f !important; }
.hyde-user-danger       { color: #c74040 !important; }
.hyde-user-danger:hover { color: #c74040 !important; }

/* ===========================================================
   [hyde_login]
   ===========================================================
   v2.18.7 — Grey circle placeholder for logged-out visitors.
   Same dimensions as the gold logged-in avatar (32px circle) so
   the header doesn't reflow when auth state changes. Subtle
   grey + person icon to signal "this is your account slot, sign
   in to fill it". Clickable: routes to the portal page where the
   auth card renders. Visually quiet — should NOT compete with
   primary header CTAs (search, cart, etc.).

   Earlier (v2.18.0–v2.18.6): rendered as a "Sign in" text link
   with arrow icon. Replaced because the text label crowded the
   header on narrower viewports and the layout shifted between
   logged-in (32px circle) and logged-out (icon+text) states. */

.hyde-login-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
}
.hyde-login-link:focus  { outline: none !important; }
.hyde-login-link:focus-visible {
    outline: 2px solid rgba(181, 135, 42, 0.4) !important;
    outline-offset: 2px !important;
}
.hyde-login-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #e5e5e7 !important;
    transition: background 0.15s ease !important;
}
.hyde-login-link:hover .hyde-login-circle {
    background: #d8d8db !important;
}
.hyde-login-link svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
    fill: none !important;
}

/* WoodMart wrapper containment also covers .hyde-login-link
   (added to the :has() selector list at the top of this file). */

/* ===========================================================
   Mobile / narrow header gracefully
   =========================================================== */

@media (max-width: 640px) {
    .hyde-clock-date,
    .hyde-clock-sep   { display: none !important; }
    .hyde-bell-menu,
    .hyde-user-menu   { width: calc(100vw - 32px) !important; }
}