/* =========================================================
   Q CEYLON GLASS UI (v5)
   Goal:
   - Keep what already looks amazing (glass cards, header glass)
   - Make EVERY button match the hero slider gold + glass style
   - Gold accents for icons + key font elements (prices, active nav)
   ========================================================= */

/* ---------- Brand tokens (tune here) ---------- */
:root{
  --gold1:#f6d365;
  --gold2:#d4af37;
  --gold3:#b88900;

  --goldText:#1a1406;
  --goldGlow: rgba(212,175,55,.35);

  --ink-dark:#111;
  --ink-light:rgba(255,255,255,.92);

  --glass-dark: rgba(20,20,20,.28);
  --glass-border: rgba(255,255,255,.18);
}

/* =========================================================
   1) STICKY HEADER FIX (WOODMART)
   ========================================================= */
.whb-header,
.site-header,
.whb-header-sticky,
.whb-sticked{ z-index: 99999 !important; }

.whb-sticked .whb-header,
.whb-header-sticky{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  width: 100%;
}

body.admin-bar .whb-sticked .whb-header,
body.admin-bar .whb-header-sticky{ top: 32px !important; }
@media (max-width:782px){
  body.admin-bar .whb-sticked .whb-header,
  body.admin-bar .whb-header-sticky{ top: 46px !important; }
}

.website-wrapper,
.main-page-wrapper,
.wd-page-wrapper{ transform: none !important; }

/* =========================================================
   2) HEADER: GLASS + SPACING (premium, not flat)
   ========================================================= */
.whb-header .whb-main-header{ padding: 10px 0 !important; }

.whb-row.whb-general-header{
  background: var(--glass-dark) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  border-radius: 18px !important;
  margin: 0 14px !important;
  padding: 8px 8px !important;
}
@media (max-width: 1024px){
  .whb-row.whb-general-header{ margin: 0 10px !important; border-radius: 16px !important; }
}
@media (max-width: 768px){
  .whb-row.whb-general-header{ margin: 0 8px !important; padding: 6px 6px !important; border-radius: 14px !important; }
}

/* Keep header items readable */
.whb-row.whb-general-header,
.whb-row.whb-general-header a,
.whb-row.whb-general-header .nav-link-text,
.whb-row.whb-general-header .wd-tools-text,
.whb-row.whb-general-header .wd-tools-icon,
.whb-row.whb-general-header .wd-cart-number,
.whb-row.whb-general-header .wd-cart-subtotal{
  color: var(--ink-light) !important;
}

/* Gold accent on active/hover menu */
.whb-row.whb-general-header .wd-nav-main > li.current-menu-item > a,
.whb-row.whb-general-header .wd-nav-main > li > a:hover{
  color: var(--gold2) !important;
  text-decoration-color: rgba(212,175,55,.85) !important;
}

/* =========================================================
   3) UNIFIED BUTTON SYSTEM (SITE-WIDE)
   - Primary buttons = GOLD (matches hero slider)
   - Secondary/outlined buttons = GLASS TRANSPARENT
   ========================================================= */

/* Primary (default solid) */
button,
.button,
.btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  background: linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold3)) !important;
  color: var(--goldText) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 14px 32px rgba(0,0,0,.22) !important;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

button:hover,
.button:hover,
.btn:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
input[type="submit"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 18px 40px rgba(0,0,0,.26) !important;
}

/* Secondary (bordered / alt) → glass transparent */
.btn.btn-style-bordered,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.elementor-button.elementor-size-sm.is-outline,
.elementor-button.glass-btn-outline{
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: var(--ink-light) !important;
  border: 1px solid rgba(212,175,55,.75) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
}
.btn.btn-style-bordered:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background: rgba(255,255,255,.20) !important;
}

/* Keep CTA padding consistent */
.btn,
.elementor-button,
.woocommerce a.button{
  padding: 12px 26px !important;
}

/* =========================================================
   4) WOODMART SLIDER BUTTONS (explicit, keep consistent)
   ========================================================= */
.wd-slide .wd-button-wrapper .btn,
.wd-slider .wd-button-wrapper .btn{
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-weight: 900 !important;
}

/* Primary in slider */
.wd-slide .btn.btn-style-default,
.wd-slider .btn.btn-style-default{
  background: linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold3)) !important;
  color: var(--goldText) !important;
}

/* Secondary in slider */
.wd-slide .btn.btn-style-bordered,
.wd-slider .btn.btn-style-bordered{
  background: rgba(255,255,255,.14) !important;
  color: var(--ink-light) !important;
  border: 1px solid rgba(212,175,55,.75) !important;
}

/* =========================================================
   5) ICONS + GOLD ACCENT FONTS (site-wide)
   ========================================================= */

/* Header tool icons (search, wishlist, account, cart) */
.whb-row.whb-general-header .wd-tools-icon,
.whb-row.whb-general-header .wd-tools-icon:before{
  color: var(--gold2) !important;
}

/* If icons are SVG, make them follow currentColor */
.whb-row.whb-general-header svg,
.wd-tools-icon svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Price amounts → gold */
.woocommerce-Price-amount,
.price,
.product-grid-item .price,
.wd-product .price{
  color: var(--gold2) !important;
  font-weight: 800;
}

/* Small accent links (hover) */
a:hover{
  text-decoration-color: rgba(212,175,55,.65);
}

/* Optional helper classes you can use anywhere */
.gold-text{ color: var(--gold2) !important; }
.gold-icon{ color: var(--gold2) !important; }

/* =========================================================
   7) MOBILE STICKY FOOTER NAV (WoodMart toolbar)
   Markup: <div class="wd-toolbar ..."> ... (Shop/Wishlist/Cart/My account)
   ========================================================= */

.wd-toolbar{
  background: rgba(20,20,20,.30) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 -18px 40px rgba(0,0,0,.22);
}

/* Give it “floating pill” feel on mobile */
@media (max-width: 1024px){
  .wd-toolbar{
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    border-radius: 18px !important;
    padding: 6px 2px !important;
  }
}

/* Icon + label colors */
.wd-toolbar .wd-tools-icon,
.wd-toolbar .wd-tools-icon:before{
  color: var(--gold2) !important;
}
.wd-toolbar .wd-toolbar-label{
  color: rgba(255,255,255,.88) !important;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Active item highlight (subtle gold glow) */
.wd-toolbar .wd-tools-element a{
  border-radius: 14px;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wd-toolbar .wd-tools-element a:hover,
.wd-toolbar .wd-tools-element.wd-active a{
  background: rgba(255,255,255,.10) !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,.25);
  transform: translateY(-1px);
}

/* Ensure SVG icons follow currentColor */
.wd-toolbar svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =========================================================
   8) HEADER MY ACCOUNT DROPDOWN – FIX “BLANK/NO TEXT”
   ========================================================= */

.whb-row.whb-general-header .wd-dropdown,
.whb-row.whb-general-header .wd-dropdown-menu,
.whb-row.whb-general-header .login-dropdown,
.whb-row.whb-general-header .my-account-with-dropdown .wd-dropdown{
  background: rgba(20,20,20,.70) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
}

.whb-row.whb-general-header .wd-dropdown a,
.whb-row.whb-general-header .wd-dropdown-menu a,
.whb-row.whb-general-header .login-dropdown a,
.whb-row.whb-general-header .my-account-with-dropdown .wd-dropdown a{
  color: rgba(255,255,255,.92) !important;
}

.whb-row.whb-general-header .wd-dropdown li + li{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.whb-row.whb-general-header .wd-dropdown a:hover{
  color: var(--gold2) !important;
}