/* GAMelo component styles — WooCommerce elements are targeted via their real
   markup classes and wrapped/adapted here, never by overriding core templates
   unless a hook cannot achieve the same result. */

/* Header layout: forced LTR flex flow (logo far left, actions far right)
   to match the reference layout exactly, independent of the page's RTL
   reading direction. The Arabic nav labels and search placeholder keep
   their own RTL text direction below — only the row's left/right
   placement is fixed. */
.gm-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gm-border);
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  color: var(--gm-text);
  direction: ltr;
}
.gm-logo{ font-family: var(--gm-font-display); font-weight: 900; font-size: 20px; color: var(--gm-blue-1); flex-shrink: 0; }
.gm-logo img{ display:block; height:36px; width:auto; }
.gm-nav a.current-menu-item, .gm-nav .current-menu-item a{ color: var(--gm-blue-1); font-weight: 800; }

.gm-btn-primary{
  display: inline-block; background: var(--gm-gradient); color: #fff !important;
  font-weight: 800; padding: 13px 24px; border-radius: var(--gm-radius-md);
  font-size: 14px; border: none; text-align: center;
}
.gm-btn-ghost{
  display: inline-block; border: 1px solid var(--gm-border); color: var(--gm-text) !important;
  padding: 13px 24px; border-radius: var(--gm-radius-md); font-weight: 700; font-size: 14px;
}

.gm-badge{ display:inline-flex; align-self:flex-start; flex-shrink:0; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:7px; }
.gm-badge.instant{ background: var(--gm-blue-1); color:#fff; }
.gm-badge.new{ background: var(--gm-blue-1); color:#fff; }
.gm-badge.best{ background: var(--gm-green); color:#03150E; }
.gm-badge.manual{ background: var(--gm-amber); color:#1A1200; }
.gm-badge.discount{ background: var(--gm-red); color:#fff; }
.gm-badge.wholesale{ background: var(--gm-green); color:#03150E; }

/* Shop-loop card badge cluster — sits over the thumbnail image. Stacks the
   discount badge above the status badge (best/instant/manual) rather than
   letting them collide, since a product can legitimately have both at once. */
.gm-prod-badges{
  position:absolute; top:10px; left:10px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
}

/* WooCommerce product loop — targets real WC classes */
/* Product grid — flexbox, not CSS Grid. FIX (confirmed via live device
   screenshot): some real-world mobile browsers (particularly in-app
   WebViews like Messenger/Facebook's embedded browser) either don't
   support CSS Grid or apply it inconsistently, causing everything to
   stack into a single column. Flexbox with flex-basis produces the exact
   same 2-column layout but works reliably across every browser engine. */
ul.products{ display:flex !important; flex-wrap:wrap; gap:14px; list-style:none; padding:0 16px; margin:0; }
ul.products li.product{ flex: 1 1 calc(50% - 7px); max-width: calc(50% - 7px); min-width: 140px; }
ul.products li.product{
  background: linear-gradient(180deg, var(--gm-elevated), var(--gm-surface));
  border:1px solid var(--gm-border); border-radius: var(--gm-radius-lg);
  overflow:hidden; padding:0 !important; margin:0 !important; position:relative;
  box-shadow: 0 10px 24px -18px rgba(0,0,0,0.5);
}
ul.products li.product::before{
  content:''; position:absolute; top:0; right:0; left:0; height:2px; background:var(--gm-gradient);
  opacity:0; transition:opacity .25s ease;
}

/* Wishlist heart overlay */
.gm-wishlist-heart{
  position:absolute; top:10px; right:10px; z-index:3; width:28px; height:28px; border-radius:50%;
  background:rgba(11,15,34,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff; line-height:1;
}
.gm-wishlist-heart.active{ color:var(--gm-red); }

/* Rating stars (real WooCommerce data) */
.gm-prod-rating{ display:flex; align-items:center; gap:6px; padding:0 12px; margin-top:4px; }
.gm-prod-rating .star-rating{ font-size:11px; width:70px; }
.gm-prod-rating-count{ font-size:10px; color:var(--gm-muted); }

/* Stock indicator */
.gm-prod-stock{ padding:6px 12px 0; font-size:10px; font-weight:700; }
.gm-prod-stock .in-stock{ color:var(--gm-green); }
.gm-prod-stock .out-stock{ color:var(--gm-red, #FF2E4D); }
.gm-prod-stock .low-stock{ color:var(--gm-amber); }
ul.products li.product:hover::before{ opacity:1; }
ul.products li.product img{ height:104px; object-fit:cover; width:100%; }
ul.products li.product .woocommerce-loop-product__title{
  font-size:12.5px; font-weight:800; padding:12px 12px 2px; margin:0; line-height:1.4;
  color: var(--gm-text);
}
.gm-prod-meta-row{ padding:10px 12px 0; font-size:10px; color:var(--gm-muted); font-weight:700; display:flex; align-items:center; gap:5px; }
.gm-prod-meta-row .dot{ opacity:.6; }
ul.products li.product .price{
  font-family: var(--gm-font-display); font-weight:800; font-size:14.5px; padding: 6px 12px 12px;
  color: var(--gm-text);
}
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .price del{ color: var(--gm-muted); font-size:11px; opacity:.75; }

/* Single product */
.single-product div.product .price{ font-family:var(--gm-font-display); font-weight:900; font-size:24px; }
.single-product div.product .gm-region-notice{
  background: rgba(27,168,196,0.08); border:1px solid rgba(27,168,196,0.25);
  border-radius:12px; padding:12px 14px; font-size:12px; color:var(--gm-muted); margin:14px 0;
}

/* Cart / Checkout minimal adaptation */
table.shop_table{ border-color: var(--gm-border) !important; background: transparent; }
table.shop_table th, table.shop_table td{ border-color: var(--gm-border) !important; color: var(--gm-text); }
.woocommerce-checkout #payment{ background: var(--gm-elevated) !important; border:1px solid var(--gm-border) !important; border-radius: var(--gm-radius-lg); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
  background: var(--gm-surface); border:1px solid var(--gm-border); color: var(--gm-text); border-radius: var(--gm-radius-md);
}

/* Wallet widget */
.gm-wallet-card{
  background: linear-gradient(135deg, #10306B, var(--gm-blue-1));
  border-radius: var(--gm-radius-xl); padding:20px; color:#fff;
}
.gm-wallet-balance{ font-family: var(--gm-font-display); font-weight:900; font-size:28px; }

/* =====================================================================
   ACCOUNT / ORDER DETAIL UTILITIES
   FIX (found during audit): view-order.php, checkout/thankyou.php, and
   template-track-order.php all reference these classes (order detail card,
   meta row, back link, customer-note list) but none of them had ANY
   matching CSS — every order-detail page a customer sees after checkout
   (the exact "did my payment go through?" moment) was rendering as
   unstyled, default browser HTML.
   ===================================================================== */
.gm-admin-card{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:16px; margin-bottom:16px; }
.gm-admin-card h3{ font-size:13.5px; font-weight:800; margin-bottom:10px; }
.gm-delivery-notes-card{ border-color: var(--gm-blue-1); }
.gm-delivery-notes-text{ font-size:13px; line-height:1.8; color: var(--gm-text); white-space:pre-line; margin:0; }
.gm-admin-meta-row{ display:flex; gap:20px; flex-wrap:wrap; }
.gm-admin-meta-row--gap20{ margin-bottom:20px; }
.gm-admin-meta-row > div{ font-size:12.5px; }
.gm-admin-meta-row .label, .gm-admin-meta-row span:first-child{ font-size:10.5px; color:var(--gm-muted); display:block; margin-bottom:2px; }
.gm-admin-back-link{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--gm-muted); margin-bottom:14px; }
.gm-admin-back-link:hover{ color:var(--gm-text); }
.gm-admin-notes{ display:flex; flex-direction:column; gap:10px; }
.gm-admin-note{ background:var(--gm-elevated); border-radius:var(--gm-radius-md); padding:10px 12px; font-size:12.5px; line-height:1.7; position:relative; }
.gm-admin-note .date{ display:block; margin-top:6px; font-size:10px; color:var(--gm-muted); }
.gm-admin-flash{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:12.5px; }
.gm-admin-flash.warning{ background:rgba(255,46,77,0.12); color:var(--gm-red); border:1px solid rgba(255,46,77,0.3); }

/* Order status pills — mapped to our custom + core statuses */
.gm-order-status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; margin-bottom:16px; }
.gm-order-status .dot{ width:7px; height:7px; border-radius:50%; }
.gm-order-status.pending .dot{ background: var(--gm-amber); }
.gm-order-status.processing .dot{ background: var(--gm-blue-1); }
.gm-order-status.completed .dot{ background: var(--gm-green); }
.gm-order-status.failed .dot{ background: var(--gm-red); }

/* Account-info collection form (birth date/username/email/password) shown
   on the thank-you page and order-view page for "requires account info"
   products — see Gamelo_Account_Info in the plugin. */
.gm-account-info-block{
  background: var(--gm-surface); border:1px solid var(--gm-border); border-radius: var(--gm-radius-lg);
  padding:20px; margin:20px 0;
}
/* FIX: the checkout-page copy of this block (render_checkout_fields() in
   Gamelo_Account_Info) titles itself with <h3>, not <h2> like the order/
   thank-you page copy — this rule was previously "h2" only, so on checkout
   that heading fell back to unstyled browser-default text. Both variants
   are covered now. */
.gm-account-info-block h2, .gm-account-info-block h3{ font-size:16px; margin:0 0 6px; }
.gm-account-info-note{ font-size:12.5px; color:var(--gm-muted); margin:0 0 16px; }
.gm-account-info-form{ border-top:1px solid var(--gm-border); padding-top:16px; margin-top:16px; }
.gm-account-info-form:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.gm-account-info-form h4{ font-size:13.5px; margin:0 0 12px; }
.gm-account-info-form label{ display:block; font-size:12px; font-weight:700; margin-bottom:10px; }
.gm-account-info-form input{
  display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--gm-border);
  border-radius: var(--gm-radius-md); background: var(--gm-elevated); color: var(--gm-text); font-size:13px; font-family:inherit;
}
.gm-account-info-security-note{ font-size:11px; color:var(--gm-muted); margin:4px 0 12px; }

/* Checkout-page variant: reads as a normal checkout section (matching
   .gm-checkout-section spacing/typography) instead of a separate card with
   its own background dropped into the flow. */
.gm-account-info-block--checkout{
  background:none; border:none; border-radius:0; padding:0; margin:0 0 22px;
}
.gm-account-info-block--checkout h3{
  font-size:13.5px; font-weight:800; margin:0 0 10px;
}
.gm-account-info-form--checkout{
  background: var(--gm-elevated); border:1px solid var(--gm-border); border-radius: var(--gm-radius-lg);
  padding:16px; margin-top:12px;
}
.gm-account-info-form--checkout:first-of-type{ border-top:1px solid var(--gm-border); padding-top:16px; margin-top:12px; }
.gm-account-info-form--checkout input{ background: var(--gm-surface); }

/* =====================================================================
   MISSING IN v1.0.0 — every class below is referenced by header.php,
   footer.php, front-page.php, template-parts/hero.php, and the account
   tab templates in gamelo-core, but had no matching CSS at all. Without
   this block the homepage/header/footer/hero/category grid/wishlist/
   downloads pages would all render as unstyled, default browser HTML —
   arguably a worse first impression than a "generic WooCommerce" look,
   since it wouldn't look like a finished site at all.
   ===================================================================== */

.gm-nav{ display:flex; gap:22px; font-size:14px; font-weight:600; color: var(--gm-muted); direction: rtl; }
.gm-nav ul{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; }
.gm-nav li{ list-style:none; }
.gm-nav a:hover{ color: var(--gm-text); }
.gm-header-actions{ display:flex; align-items:center; gap:16px; font-size:14px; }
.gm-header-actions a{ display:flex; align-items:center; gap:4px; }

.gm-theme-toggle{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:var(--gm-elevated); border:1px solid var(--gm-border);
  cursor:pointer; font-size:15px; padding:0; line-height:1;
}
.gm-theme-toggle:hover{ background:var(--gm-surface); }

.gm-currency-switcher{
  background:var(--gm-elevated); border:1px solid var(--gm-border); color:var(--gm-text); border-radius:var(--gm-radius-pill);
  padding:5px 10px; font-size:11.5px; font-weight:700; cursor:pointer; direction:ltr;
}
.gm-price-converted{ display:block; font-size:11px; color:var(--gm-muted); font-weight:600; margin-top:2px; }
.gm-currency-notice{
  background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:10px 14px; font-size:12px; color:var(--gm-muted); margin-bottom:14px;
}

/* Live search */
.gm-search-wrap{ position:relative; flex:1; max-width:460px; margin:0 12px; }
.gm-search-form{ margin:0; }
.gm-search-ic{ position:absolute; top:50%; right:12px; transform:translateY(-50%); font-size:12px; opacity:.6; }
.gm-search-input{
  width:100%; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-pill);
  padding:9px 36px 9px 14px; color:var(--gm-text); font-size:12.5px; font-family:var(--gm-font-body);
}
.gm-search-results{
  position:absolute; top:calc(100% + 8px); right:0; left:0; background:var(--gm-elevated); border:1px solid var(--gm-border);
  border-radius:var(--gm-radius-lg); box-shadow:0 16px 32px -12px rgba(0,0,0,0.5); z-index:60; max-height:340px; overflow-y:auto;
}
.gm-search-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--gm-border); }
.gm-search-row:last-child{ border-bottom:none; }
.gm-search-row.active, .gm-search-row:hover{ background:rgba(29,111,235,0.08); }
.gm-search-row img{ width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--gm-surface); }
.gm-search-row-info{ flex:1; min-width:0; }
.gm-search-row-name{ font-size:12px; font-weight:700; color:var(--gm-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-search-row-platform{ font-size:10px; color:var(--gm-blue-1); margin-top:2px; }
.gm-search-row-price{ font-family:var(--gm-font-display); font-weight:800; font-size:12px; flex-shrink:0; }
.gm-search-empty{ padding:16px; text-align:center; font-size:12px; color:var(--gm-muted); }
@media (max-width: 780px){ .gm-search-wrap{ max-width:none; order:10; flex-basis:100%; margin:10px 0 0; } .gm-header{ flex-wrap:wrap; } .gm-nav{ display:none; } }
@media (max-width: 780px){
  .gm-header-actions{ gap:8px; }
  .gm-currency-switcher{ font-size:10px; padding:4px 6px; }
}
@media (max-width: 400px){
  /* Safety net: even if every control's individual width estimate is off
     on some device, this guarantees the header row itself can never clip
     or overlap — worst case is a few px of horizontal scroll within just
     the actions cluster, not a broken page. */
  .gm-header-actions{ flex-wrap:nowrap; max-width:60vw; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .gm-header-actions::-webkit-scrollbar{ display:none; }
}

/* Hamburger button — mobile only */
.gm-hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px; cursor:pointer; }
.gm-hamburger span{ width:20px; height:2px; background:var(--gm-text); border-radius:2px; }
@media (max-width: 780px){ .gm-hamburger{ display:flex; order:-1; } }

/* Mobile off-canvas drawer */
.gm-drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.gm-drawer-overlay.open{ opacity:1; pointer-events:auto; }
.gm-mobile-drawer{
  position:fixed; top:0; bottom:0; right:0; width:82%; max-width:320px; background:var(--gm-elevated);
  border-left:1px solid var(--gm-border); z-index:95; transform:translateX(100%); transition:transform .28s ease;
  overflow-y:auto; padding-bottom:24px;
}
.gm-mobile-drawer.open{ transform:translateX(0); }
.gm-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 16px; border-bottom:1px solid var(--gm-border); }
.gm-drawer-close{ background:var(--gm-surface); border:1px solid var(--gm-border); color:var(--gm-text); width:32px; height:32px; border-radius:50%; font-size:14px; cursor:pointer; }
.gm-drawer-section{ padding:14px 10px; border-bottom:1px solid var(--gm-border); }
.gm-drawer-label{ font-size:10.5px; color:var(--gm-muted); font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:0 10px 8px; }
.gm-mobile-drawer a{ display:flex; align-items:center; gap:10px; padding:12px 10px; font-size:13.5px; font-weight:700; color:var(--gm-text); border-radius:10px; }
.gm-mobile-drawer a:active{ background:var(--gm-surface); }
.gm-drawer-cat-ic{ width:22px; height:22px; border-radius:6px; background:var(--gm-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; flex-shrink:0; }
.gm-drawer-cat-count{ margin-right:auto; font-size:10.5px; color:var(--gm-muted); font-weight:500; }

/* ===================================================================
   Hero — main banner (character photo) + two stacked side banners
   (gift cards / wallet top-up), matching the reference layout: one
   large hero spanning both side-banner rows, side column stacked in a
   1:1 split. Mobile: hero full width, then the two side banners as an
   equal-width row underneath (no horizontal overflow). Desktop: 2fr/1fr
   grid with fixed hero height so the two side cards line up exactly
   against the hero's top/bottom edge.
   =================================================================== */
.gm-hero-wrap{ padding:16px; }
.gm-hero-grid{ display:flex; flex-direction:column; gap:12px; }
.gm-hero-side{ display:flex; gap:12px; }

.gm-hero-main{
  position:relative; overflow:hidden; border-radius: var(--gm-radius-xl);
  min-height:280px; background: var(--gm-hero-bg-gradient);
  border:1px solid var(--gm-border);
  display:flex; align-items:center; direction:ltr;
}
.gm-hero-character-img{
  position:absolute; z-index:1; bottom:0; right:6%; height:104%; width:auto; max-width:48%;
  object-fit:contain; object-position:bottom;
  -webkit-mask-image: linear-gradient(to top, black 88%, transparent 100%);
  mask-image: linear-gradient(to top, black 88%, transparent 100%);
}
/* FIX (real bug from user screenshot: character looked "washed out"/ghostly):
   .gm-hero-main is deliberately forced direction:ltr above regardless of
   page direction (see comment on that rule — content always sits left,
   character always sits right, to match the reference layout exactly).
   A separate html[dir="rtl"] override here was flipping the scrim's white
   side to the RIGHT — directly on top of the character instead of behind
   the text — which is what was making the character nearly invisible.
   Since the box's internal layout never actually changes with page
   direction, there is no RTL case to handle: one rule, always correct. */
.gm-hero-main-scrim{
  position:absolute; inset:0; z-index:1;
  background: var(--gm-hero-scrim-gradient);
}
.gm-hero-main-content{ position:relative; z-index:2; padding:26px 22px; max-width:62%; direction:rtl; text-align:right; }
.gm-hero-brand{ margin-bottom:14px; }
.gm-hero-brand-img{ height:46px; width:auto; display:block; }
.gm-hero-brand-name{ font-family: var(--gm-font-display); font-weight:900; font-size:20px; color: var(--gm-blue-1); direction:ltr; display:inline-block; }
.gm-hero-brand img{ max-height:32px; width:auto; }

.gm-hero-main h1{
  font-size:24px; line-height:1.2; font-weight:900; font-family: var(--gm-font-display);
  margin: 0 0 16px; color: var(--gm-text);
}
.gm-hero-h1-sub{ display:block; color: var(--gm-blue-1); font-size:18px; margin-top:4px; }

.gm-hero-platform-row{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; direction:ltr; }
.gm-hero-platform-ic{
  width:32px; height:32px; border-radius:9px; flex-shrink:0; display:block;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,0.5);
}

.gm-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* Standalone eyebrow pill — used on non-hero pages (e.g. template-deals.php)
   for a small "limited time offer" style label. */
.gm-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  color: var(--gm-blue-1); background: rgba(29,111,235,0.1); border:1px solid rgba(29,111,235,0.3);
  padding:6px 14px; border-radius: var(--gm-radius-pill); margin-bottom:16px;
}

.gm-hero-side{ flex-direction:row; }
.gm-hero-side-card{
  position:relative; flex:1; overflow:hidden; border-radius: var(--gm-radius-xl);
  padding:18px 16px; min-height:130px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end;
  background-color: var(--gm-blue-2); background-size: cover; background-position: center;
}
.gm-hero-side-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(120deg, rgba(16,48,107,0.88), rgba(29,111,235,0.88));
}
.gm-hero-side-card--wallet::before{
  background: linear-gradient(120deg, rgba(11,31,82,0.88), rgba(11,79,203,0.88));
}
.gm-hero-side-icons, .gm-hero-side-icon-badge, .gm-hero-side-card h3, .gm-hero-side-cta{ position:relative; z-index:1; }
.gm-hero-side-icons{ display:flex; gap:6px; margin-bottom:10px; direction:ltr; }
.gm-hero-side-ic{ width:22px; height:22px; border-radius:7px; display:block; }
.gm-hero-side-icon-badge{
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px;
}
.gm-hero-side-card h3{ font-size:14px; font-weight:800; line-height:1.4; margin:0 0 10px; }
.gm-hero-side-cta{
  display:inline-block; align-self:flex-start; background:#fff; color:var(--gm-blue-2) !important;
  font-weight:800; font-size:11.5px; padding:8px 16px; border-radius: var(--gm-radius-md);
}

.gm-section{ padding: 28px 0; }
.gm-section-title{
  font-size:19px; font-weight:900; font-family: var(--gm-font-display); color: var(--gm-text);
  padding: 0 16px; margin: 0 0 16px;
}
.gm-empty-note{ padding: 0 16px; color: var(--gm-muted); font-size:13px; }

.gm-cat-grid{
  display:flex; flex-wrap:wrap; gap:10px; padding: 0 16px;
}
.gm-cat-grid > *{ flex: 1 1 calc(33.333% - 7px); max-width: calc(33.333% - 7px); min-width:96px; }
@media (min-width: 640px){ .gm-cat-grid > *{ flex-basis: calc(25% - 8px); max-width: calc(25% - 8px); } }
.gm-cat-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background: var(--gm-surface); border:1px solid var(--gm-border); border-radius: var(--gm-radius-lg);
  padding: 20px 8px 16px; color: var(--gm-text); box-shadow: 0 6px 16px -14px rgba(0,0,0,0.35);
}
.gm-cat-icon{
  width:38px; height:38px; border-radius:50%; background-color: rgba(29,111,235,0.1); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:var(--gm-blue-1);
}
.gm-cat-name{ font-size:11px; font-weight:700; }
.gm-cat-count{ font-size:9.5px; color: var(--gm-muted); }
.gm-cat-card--more .gm-cat-count{ color: var(--gm-blue-1); font-weight:700; }
/* FIX: the original inline "grid-template-columns:1fr 1fr" here had zero
   effect — .gm-cat-grid is a flexbox container, not CSS Grid, so it was
   silently ignored and the 404 suggestions were falling back to the
   default 3/4-column flex-basis. Setting flex-basis directly is what
   actually produces the intended 2-column layout. */
.gm-cat-grid--2col > *{ flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
.gm-cat-card--start{ text-align:right; align-items:flex-start; }
.gm-cat-name--sm{ font-size:12px; }

/* 404 page */
.gm-404-hero{ padding:56px 16px 20px; text-align:center; }
.gm-404-code{
  font-family:var(--gm-font-display); font-weight:900; font-size:72px; line-height:1;
  background:var(--gm-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px;
}
.gm-404-title{ font-size:22px; font-weight:900; margin-bottom:10px; }
.gm-404-desc{ color:var(--gm-muted); font-size:13px; max-width:320px; margin:0 auto 22px; line-height:1.7; }
.gm-404-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Fallback single post/page template */
.gm-index-article{ padding:0 16px 24px; }
.gm-index-article .gm-page-content{ font-size:14px; }

.gm-add-btn{
  display:flex !important; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius: var(--gm-radius-sm); background: var(--gm-gradient) !important;
  color:#fff !important; font-weight:900; font-size:16px; line-height:1; text-decoration:none !important;
  transition: transform .15s ease;
}
.gm-add-btn--done{ transform: scale(1.15); background: var(--gm-green) !important; }
.gm-prod-bottom{ display:flex; align-items:center; justify-content:space-between; padding: 0 12px 12px; }
.gm-prod-thumb{ position:relative; }
.gm-prod-thumb-link{ display:block; }

/* FIX (live bug report): a broken/missing <img> was showing its alt text
   and a broken-image icon, overflowing the fixed-height thumb container and
   making the card look like it had duplicated, broken text. This clips any
   broken image to the intended box size no matter what, and ensures a real
   image always fills it properly via object-fit rather than stretching. */
.gm-prod-thumb, ul.products li.product .gm-prod-thumb { overflow:hidden; height:96px; }
.gm-prod-thumb img, ul.products li.product .gm-prod-thumb img {
  width:100% !important; height:100% !important; object-fit:cover;
  display:block !important; font-size:0; /* collapses alt-text box on load failure in most browsers */
}

.gm-footer{
  padding: 32px 16px 20px; border-top:1px solid var(--gm-border); margin-top:32px;
  text-align:center; color: var(--gm-muted); font-size:12px;
}
.gm-footer-links{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.gm-whatsapp{
  display:inline-flex; align-items:center; gap:8px; background:#22C55E; color:#06210F !important;
  font-weight:800; padding:11px 20px; border-radius: var(--gm-radius-md); margin-bottom:16px; font-size:13px;
}
.gm-whatsapp--inline{ margin-bottom:0; }
.gm-copyright{ margin:0; }

/* Footer "need help" column */
.gm-footer-whatsapp-number{ font-size:15px; font-weight:800; direction:ltr; text-align:right; margin-bottom:8px; }
.gm-footer-whatsapp-hint{ font-size:11.5px; color:var(--gm-muted); margin-bottom:12px; }
.gm-footer-contact-link{ font-size:12.5px; color:var(--gm-muted); }

/* My account — edit account form */
.gm-account-subheading{ font-size:13.5px; font-weight:800; margin:22px 0 14px; }

.gm-delivered-code{
  background: var(--gm-surface); border:1.5px dashed var(--gm-border); border-radius: var(--gm-radius-md);
  padding:12px 14px; margin:10px 0; font-size:13px;
}
.gm-delivered-code code{ font-family: var(--gm-font-mono); }

.gm-wallet-label{ font-size:11px; opacity:.85; margin-bottom:6px; }

.gm-wishlist-grid.products{ grid-template-columns: repeat(2, 1fr) !important; }
.gm-remove-wish{
  display:block; text-align:center; font-size:11px; color: var(--gm-red) !important;
  padding: 8px 12px 12px; font-weight:700;
}

.gm-downloads-list{ display:flex; flex-direction:column; gap:10px; }
.gm-download-row{
  background: var(--gm-surface); border:1px solid var(--gm-border); border-radius: var(--gm-radius-lg);
  padding:14px; display:flex; flex-direction:column; gap:6px;
}
.gm-download-name{ font-weight:700; font-size:13px; }
.gm-download-order{ font-size:11px; color: var(--gm-muted); }
.gm-download-order a{ color: inherit; text-decoration:underline; }
.gm-download-code code{ font-family: var(--gm-font-mono); background: var(--gm-elevated); padding:4px 8px; border-radius:6px; }
.gm-download-status{ font-size:12px; font-weight:700; }
.gm-download-row--delivered{ border-inline-start:3px solid var(--gm-green); }
.gm-download-row--delivered .gm-download-status{ color: var(--gm-green); }
.gm-download-row--pending{ border-inline-start:3px solid var(--gm-amber); }
.gm-download-row--pending .gm-download-status{ color: var(--gm-amber); }

/* My Account nav — WooCommerce's own markup, restyled to fit the dark theme
   rather than left with default browser link styling. */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.woocommerce-MyAccount-navigation li a{
  display:inline-block; padding:9px 16px; border-radius: var(--gm-radius-pill);
  background: var(--gm-surface); border:1px solid var(--gm-border); font-size:12.5px; font-weight:700;
}
.woocommerce-MyAccount-navigation li.is-active a{ background: var(--gm-gradient); border-color: transparent; color:#fff; }

/* =====================================================================
   DEEP OVERRIDE — Single Product / Cart / Checkout (replaces default
   WooCommerce visual identity entirely; see content-single-product.php,
   cart/cart.php, checkout/form-checkout.php, checkout/review-order.php)
   ===================================================================== */

/* ---- Product page ---- */
.gm-product-page{ padding-bottom: 24px; }
.gm-pp-gallery{
  position:relative; background: linear-gradient(150deg,#F1F2F5,#E7E8EC);
  min-height:230px; display:flex; align-items:center; justify-content:center;
}
.gm-pp-gallery .gm-badge{ position:absolute; top:14px; z-index:2; }
.gm-pp-gallery .gm-badge.instant, .gm-pp-gallery .gm-badge.manual{ right:14px; }
.gm-pp-gallery .gm-badge.best{ left:14px; }
.gm-pp-gallery .woocommerce-product-gallery{ width:100%; }
.gm-pp-gallery img{ width:100%; height:auto; display:block; }

.gm-pp-info{ padding:18px 16px 0; }
.gm-pp-cat{ font-size:11px; color:var(--gm-blue-1); font-weight:700; margin-bottom:10px; }
.gm-pp-title{ font-size:21px; font-weight:800; line-height:1.4; margin:0 0 14px; color:var(--gm-text); }
.gm-pp-meta-row{ display:flex; gap:8px; margin:4px 0 16px; flex-wrap:wrap; }
/* FIX (found during audit): chips inside this row had a flex container but
   no styling of their own at all — they rendered as bare, unstyled text
   instead of the pill badges used everywhere else in the theme. */
.gm-meta-chip{
  display:inline-flex; align-items:center; gap:4px; background:var(--gm-elevated); border:1px solid var(--gm-border);
  border-radius:var(--gm-radius-pill); padding:5px 12px; font-size:11px; font-weight:700; color:var(--gm-muted);
}
.gm-pp-price{ font-family:var(--gm-font-display); font-weight:900; font-size:26px; margin-bottom:16px; }
.gm-pp-price .woocommerce-Price-amount{ color:var(--gm-text); }
.gm-pp-price del .woocommerce-Price-amount{ color:var(--gm-muted); font-size:0.6em; }
.gm-pp-price ins{ text-decoration:none; }

/* Neutralize WooCommerce's default cart/quantity/button markup, then
   restyle it as our own — rather than fight specificity war repeatedly,
   these rules are intentionally broad within .gm-pp-cart-form/.gm-cart-item. */
.gm-pp-cart-form .quantity{ display:inline-flex; align-items:center; border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); overflow:hidden; margin-left:10px; }
.gm-pp-cart-form .quantity input{ width:44px; text-align:center; background:var(--gm-surface); border:none; color:var(--gm-text); padding:12px 0; font-family:var(--gm-font-mono); }
.gm-pp-cart-form button.single_add_to_cart_button,
.gm-pp-cart-form button[type="submit"]{
  background: var(--gm-gradient) !important; color:#fff !important; border:none !important;
  font-weight:800 !important; padding:14px 26px !important; border-radius: var(--gm-radius-md) !important;
  font-size:14px !important; cursor:pointer;
}
.gm-pp-cart-form form.cart{ display:flex; align-items:center; margin:0 0 18px; }

.gm-notice{
  margin:0 0 18px; background:rgba(27,168,196,0.08); border:1px solid rgba(27,168,196,0.25);
  border-radius:var(--gm-radius-md); padding:12px 14px; display:flex; gap:10px; align-items:flex-start;
  font-size:12px; color:var(--gm-muted); line-height:1.6;
}
.gm-acc{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); padding:14px 16px; margin-bottom:12px; }
.gm-acc summary{ font-weight:700; font-size:13.5px; cursor:pointer; }
.gm-acc p{ font-size:12.5px; color:var(--gm-muted); line-height:1.8; margin:10px 0 0; }

.gm-pp-description{ padding:20px 16px; border-top:8px solid var(--gm-surface); margin-top:16px; }
.gm-pp-description-content{ font-size:12.5px; color:var(--gm-muted); line-height:1.8; }
.gm-pp-related{ padding:0 16px 20px; }
.gm-pp-related h2{ font-size:15px; font-weight:800; margin-bottom:12px; }
.gm-pp-related ul.products{ padding:0; }

/* Quick trust facts + real tabbed content on the product page */
.gm-pp-quick-facts{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.gm-qf-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--gm-muted); }
.gm-pp-tabs{ padding:20px 16px; border-top:8px solid var(--gm-surface); margin-top:16px; }
.gm-tabs-nav{ display:flex; gap:6px; margin-bottom:16px; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); padding:4px; }
.gm-tab-btn{ flex:1; background:transparent; border:none; color:var(--gm-muted); font-size:12.5px; font-weight:700; padding:10px; border-radius:calc(var(--gm-radius-md) - 4px); cursor:pointer; font-family:var(--gm-font-body); }
.gm-tab-btn.active{ background:var(--gm-gradient); color:#fff; }
.gm-tab-panel{ font-size:12.5px; color:var(--gm-muted); line-height:1.8; }

/* ---- Cart page ---- */
.gm-cart-page{ padding:16px; display:flex; flex-direction:column; gap:16px; }
.gm-cart-items{ display:flex; flex-direction:column; gap:12px; }
.gm-cart-item{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:12px; display:flex; gap:12px; }
.gm-cart-item-thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.gm-cart-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.gm-cart-item-info{ flex:1; display:flex; flex-direction:column; gap:6px; }
.gm-cart-item-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.gm-cart-item-name a{ font-size:12.5px; font-weight:700; color:var(--gm-text); }
.gm-cart-item-remove{ color:var(--gm-muted); font-size:14px; flex-shrink:0; }
.gm-cart-item-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.gm-cart-item-qty .quantity{ display:inline-flex; border:1px solid var(--gm-border); border-radius:8px; overflow:hidden; }
.gm-cart-item-qty input{ width:30px; text-align:center; background:var(--gm-elevated); border:none; color:var(--gm-text); padding:6px 0; font-size:12px; }
.gm-cart-item-price .woocommerce-Price-amount{ font-family:var(--gm-font-display); font-weight:800; font-size:13px; color:var(--gm-text); }

.gm-cart-coupon{ display:flex; flex-direction:column; gap:8px; }
.gm-cart-coupon-label{ font-size:12.5px; font-weight:700; color: var(--gm-text); }
.gm-cart-coupon-row{ display:flex; gap:8px; }
.gm-cart-coupon-row input{ flex:1; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); padding:12px 14px; color:var(--gm-text); font-size:12.5px; }
.gm-cart-coupon-btn{ background:var(--gm-elevated); border:1px solid var(--gm-border); color:var(--gm-text); font-weight:700; padding:0 18px; border-radius:var(--gm-radius-md); cursor:pointer; }

.gm-cart-summary .cart-collaterals{ background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:18px; }
.cart_totals table{ width:100%; border:none !important; }
.cart_totals table tr{ display:flex; justify-content:space-between; padding:6px 0; font-size:12.5px; color:var(--gm-muted); border:none !important; }
.cart_totals table tr th, .cart_totals table td{ border:none !important; padding:0 !important; }
.cart_totals .order-total{ border-top:1px solid var(--gm-border) !important; margin-top:8px; padding-top:14px !important; font-weight:800; font-size:16px; color:var(--gm-text); }
.wc-proceed-to-checkout a.checkout-button{
  display:block; text-align:center; background:var(--gm-gradient) !important; color:#fff !important;
  font-weight:800; padding:15px; border-radius:var(--gm-radius-md); margin-top:14px; font-size:14px;
}

/* ---- Empty cart (was falling through to WooCommerce's own default
   template — no GAMelo styling at all) ---- */
.gm-cart-empty{ text-align:center; padding:60px 20px; max-width:360px; margin:0 auto; }
.gm-cart-empty-icon{ font-size:44px; margin-bottom:14px; opacity:.7; }
.gm-cart-empty-title{ font-size:18px; font-weight:800; margin:0 0 8px; }
.gm-cart-empty-text{ font-size:13px; color:var(--gm-muted); margin:0 0 22px; line-height:1.7; }
.gm-cart-empty-cta{ display:inline-block; }

/* ---- Fallback brand styling for any plain WooCommerce ".button" that
   isn't wrapped in one of GAMelo's own gm-btn-* classes — e.g. the
   "عرض السلة" link WooCommerce injects after an AJAX add-to-cart, or any
   gateway/notice button. Without this, those specific buttons render with
   WooCommerce's own default look even though everything else on the page
   is custom — one of the clearest "this is still WooCommerce" tells. ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--gm-gradient) !important; color:#fff !important; border:none !important;
  border-radius: var(--gm-radius-md) !important; font-weight:800 !important; padding:10px 20px !important;
  font-family: var(--gm-font-body) !important; font-size:13px !important; box-shadow:none !important;
  text-shadow:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  filter: brightness(1.08); color:#fff !important;
}
.woocommerce a.button.loading, .woocommerce button.button.loading { opacity:.7; }

/* ---- WooCommerce's own notice boxes (coupon applied/failed, add-to-cart
   errors, login errors...) — previously fully unstyled by GAMelo, so they
   rendered with WooCommerce's own default look at exactly the moments a
   customer is most likely to notice (an error, right after an action). ---- */
.woocommerce-message, .woocommerce-error, .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  background: var(--gm-surface) !important; border:1px solid var(--gm-border) !important;
  border-right: 4px solid var(--gm-blue-1) !important; border-radius: var(--gm-radius-md) !important;
  color: var(--gm-text) !important; padding:14px 16px !important; margin:0 0 16px !important;
  font-size:13px !important; list-style:none !important;
}
.woocommerce-message{ border-right-color: var(--gm-green) !important; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.woocommerce-error{ border-right-color: var(--gm-red) !important; }
.woocommerce-error li{ list-style:none; padding:2px 0; }
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{ display:none !important; }
.woocommerce-message .button{ margin:0 !important; }

/* ---- Checkout page ---- */
.gm-checkout-page{ padding:16px; }
.gm-checkout-section{ margin-bottom:22px; }
.gm-checkout-section-title{ font-size:13.5px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.gm-step-num{ width:22px; height:22px; border-radius:50%; background:var(--gm-gradient); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; font-family:var(--gm-font-mono); }
.gm-checkout-fields .form-row{ margin-bottom:12px; }
.gm-checkout-fields label{ font-size:11px; color:var(--gm-muted); font-weight:700; margin-bottom:6px; display:block; }
.gm-checkout-fields input, .gm-checkout-fields select, .gm-checkout-fields textarea{
  width:100%; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:12px 14px; color:var(--gm-text); font-size:13px; font-family:var(--gm-font-body);
}

.gm-summary-card{ background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:16px; }
.gm-summary-card--bottom{ margin:0 0 16px; }
.gm-summary-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--gm-muted); padding:5px 0; }
.gm-summary-row .v{ color:var(--gm-text); font-weight:700; }
.gm-summary-row.discount .v{ color:var(--gm-green); }
.gm-summary-row.total{ border-top:1px solid var(--gm-border); margin-top:8px; padding-top:12px; font-weight:800; font-size:15px; color:var(--gm-text); }

.gm-pay-options{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.gm-pay-options .wc_payment_method{ background:var(--gm-surface); border:1.5px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px; }
.gm-pay-options .wc_payment_method label{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:10px; }
.gm-pay-options input[type="radio"]{ accent-color: var(--gm-red); }
.gm-pay-options .payment_box{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--gm-border); font-size:12px; color:var(--gm-muted); }

.gm-checkout-terms{ font-size:11px; color:var(--gm-muted); margin:14px 0; }
.gm-pay-bar{ margin-top:10px; }
.gm-pay-section-title{ margin-top:20px; }
.gm-pay-section{ margin-top:20px; }
.gm-delivery-ic{ font-size:9px; font-weight:800; }
.gm-delivery-ic.instant{ color:var(--gm-blue-1); }
.gm-delivery-ic.manual{ color:var(--gm-amber); }

/* Cart "update quantity" control — disabled until WooCommerce core's
   cart.js (auto-enqueued on the cart page) detects a qty input change. */
.gm-cart-update-btn{
  display:block; width:100%; margin:12px 0; padding:12px; text-align:center;
  background:var(--gm-elevated); border:1px solid var(--gm-border) !important; border-radius:var(--gm-radius-md);
  color:var(--gm-text); font-weight:700; font-size:13px; cursor:pointer; transition:opacity .2s ease;
}
.gm-cart-update-btn:disabled{ opacity:.5; cursor:not-allowed; }
.gm-cart-item-meta-row{ padding:0 0 6px; }
.gm-pay-btn{
  width:100%; background:var(--gm-gradient) !important; color:#fff !important; border:none !important;
  font-weight:800 !important; padding:16px !important; border-radius:var(--gm-radius-md) !important;
  font-size:15px !important; cursor:pointer;
}

/* ---- Shop / archive page ---- */
.gm-breadcrumb{ font-size:11px; color:var(--gm-muted); margin-bottom:10px; }
.gm-shop-archive{ padding-bottom:20px; }
.gm-shop-archive-head{ padding:16px 16px 0; }
.gm-shop-archive-title{ padding:0; margin:10px 0 16px; }
.gm-shop-loop-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:12px; color:var(--gm-muted); }
.gm-shop-loop-after{ padding:16px; }

/* Real functioning filter panel */
.gm-filters{ margin-bottom:16px; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); }
.gm-filters-toggle{ padding:13px 16px; font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; gap:8px; list-style:none; }
.gm-filters-toggle::-webkit-details-marker{ display:none; }
.gm-filters-badge{ color:var(--gm-blue-1); font-size:9px; }
.gm-filters-panel{ padding:0 16px 16px; display:flex; flex-direction:column; gap:16px; }
.gm-filters-apply-btn{ flex:1; text-align:center; border:none; cursor:pointer; }
.gm-promo-badge{ margin-bottom:10px; }
.gm-filter-group{ }
.gm-filter-label{ font-size:11px; color:var(--gm-muted); font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.gm-filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.gm-filter-chip{ position:relative; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700;
  background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:999px; padding:8px 14px; cursor:pointer;
  color:var(--gm-muted); transition: all .15s ease;
}
.gm-filter-chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.gm-filter-chip:has(input:checked){ background:var(--gm-gradient); color:#fff; border-color:transparent; }
.gm-filter-price-row{ display:flex; align-items:center; gap:10px; }
.gm-filter-price-row input{ flex:1; background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:9px; padding:10px 12px; color:var(--gm-text); font-size:12.5px; }
.gm-filter-actions{ display:flex; gap:10px; }

/* =====================================================================
   Auth pages (login / register / lost password) — fully custom, replaces
   WooCommerce's default My Account forms.
   ===================================================================== */
.gm-auth-page{ max-width:420px; margin:0 auto; padding:24px 16px 40px; }
.gm-auth-title{ font-family:var(--gm-font-display); font-weight:900; font-size:24px; margin-bottom:8px; }
.gm-auth-sub{ font-size:13px; color:var(--gm-muted); margin-bottom:24px; line-height:1.6; }
.gm-auth-tabs{ display:flex; gap:8px; margin-bottom:24px; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); padding:4px; }
.gm-auth-tab{ flex:1; text-align:center; padding:10px; border-radius: calc(var(--gm-radius-md) - 4px); font-size:13px; font-weight:700; color:var(--gm-muted); cursor:pointer; }
.gm-auth-tab.active{ background:var(--gm-gradient); color:#fff; }
.gm-field{ margin-bottom:14px; }
.gm-field label{ font-size:11.5px; color:var(--gm-muted); font-weight:700; margin-bottom:7px; display:block; }
.gm-field input, .gm-auth-panel input[type="text"], .gm-auth-panel input[type="email"], .gm-auth-panel input[type="password"]{
  width:100%; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:13px 14px; color:var(--gm-text); font-size:13.5px; font-family:var(--gm-font-body);
}
.gm-field-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-size:12px; }
.gm-remember{ display:flex; align-items:center; gap:8px; color:var(--gm-muted); }
.gm-forgot{ color:var(--gm-red); font-weight:700; }
.gm-auth-submit{ width:100%; }
.gm-note{ font-size:11.5px; color:var(--gm-muted); margin-bottom:14px; }
.gm-auth-footer-link{ text-align:center; margin-top:18px; font-size:13px; }
.gm-auth-footer-link a{ color:var(--gm-red); font-weight:700; }

/* Merchant/B2B registration — account-type toggle + conditional fields. */
.gm-account-type-options{ display:flex; gap:8px; }
.gm-account-type-options label{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:11px; font-size:13px; font-weight:700; color:var(--gm-muted); cursor:pointer;
}
.gm-account-type-options input[type="radio"]{ accent-color: var(--gm-red); }
.gm-merchant-fields{
  border:1px dashed var(--gm-border); border-radius:var(--gm-radius-md); padding:14px; margin:10px 0 18px;
}
.gm-merchant-fields[hidden]{ display:none; }
.gm-field input[type="file"]{
  width:100%; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:10px 12px; color:var(--gm-text); font-size:12.5px;
}
.gm-merchant-banner{ margin:0 0 18px; font-size:13px; }

/* =====================================================================
   Account dashboard
   ===================================================================== */
.gm-account-nav ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.gm-account-nav li a{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius: var(--gm-radius-pill);
  background: var(--gm-surface); border:1px solid var(--gm-border); font-size:12.5px; font-weight:700; color:var(--gm-text);
}
.gm-account-nav li.is-active a{ background: var(--gm-gradient); border-color:transparent; color:#fff; }
.gm-nav-ic{ font-size:13px; }

.gm-dash{ padding:0 0 20px; }
.gm-dash-welcome{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.gm-dash-avatar img{ border-radius:50%; }
.gm-dash-hello{ font-size:11px; color:var(--gm-muted); }
.gm-dash-name{ font-size:15px; font-weight:800; }
.gm-dash-wallet-link{ display:inline-block; margin-top:14px; font-size:11.5px; font-weight:700; color:#fff; opacity:.9; }

.gm-dash-stats{ display:flex; gap:10px; margin:18px 0; }
.gm-dash-stats > *{ flex:1 1 0; min-width:0; }
.gm-dash-stat{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px 8px; text-align:center; }
.gm-dash-stat .v{ font-family:var(--gm-font-display); font-weight:800; font-size:18px; }
.gm-dash-stat .k{ font-size:10px; color:var(--gm-muted); margin-top:4px; }

.gm-dash-section{ margin-top:22px; }
.gm-dash-section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.gm-dash-section-head h3{ font-size:14px; font-weight:800; margin:0; }
.gm-dash-section-head a{ font-size:11.5px; color:var(--gm-red); font-weight:700; }
.gm-dash-order-row{
  display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
  background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); margin-bottom:8px;
}
.gm-dash-order-row .num{ font-size:12.5px; font-weight:700; }
.gm-dash-order-row .date{ font-size:10px; color:var(--gm-muted); }
.gm-dash-order-items{ font-size:10.5px; color:var(--gm-muted); margin-top:4px; }

/* Referral program account tab */
.gm-referral-card{ background: linear-gradient(135deg, #10306B, var(--gm-blue-1)); border-radius:var(--gm-radius-lg); padding:20px; color:#fff; margin-bottom:16px; }
.gm-referral-card h3{ font-family:var(--gm-font-display); font-weight:900; font-size:16px; margin-bottom:8px; }
.gm-referral-card p{ font-size:12.5px; opacity:.85; line-height:1.6; margin-bottom:16px; }
.gm-referral-link-box{ display:flex; gap:8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:4px; }
.gm-referral-link-box input{ flex:1; background:transparent; border:none; color:#fff; padding:8px 10px; font-size:11.5px; direction:ltr; text-align:left; }
.gm-referral-link-box button{ background:#fff; color:var(--gm-text); border:none; font-weight:800; padding:8px 16px; border-radius:8px; font-size:11.5px; cursor:pointer; white-space:nowrap; }

/* Back-in-stock signup */
.gm-stock-alert-form{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); padding:14px; margin:14px 0; }
.gm-stock-alert-form p{ font-size:12px; color:var(--gm-muted); margin-bottom:10px; }
.gm-stock-alert-row{ display:flex; gap:8px; }
.gm-stock-alert-row input{ flex:1; background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:8px; padding:10px 12px; color:var(--gm-text); font-size:12.5px; }
.gm-stock-alert-row button{ background:var(--gm-gradient); color:#fff; border:none; font-weight:800; padding:0 16px; border-radius:8px; font-size:12px; cursor:pointer; }

/* Loyalty badge */
.gm-loyalty-badge{ background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px 16px; margin-bottom:16px; }
.gm-loyalty-tier{ font-family:var(--gm-font-display); font-weight:900; font-size:15px; background:var(--gm-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; margin-bottom:4px; }
.gm-loyalty-next{ font-size:11px; color:var(--gm-muted); }

/* Persistent desktop sidebar — desktop only, creative structural addition */
.gm-desktop-sidebar{ display:none; }
@media (min-width: 1100px){
  /* FIX (RTL inconsistency found during audit): this sidebar was pinned to
     the physical left edge with `left:24px`, even though GAMelo is an
     Arabic/RTL-first site — every other piece of chrome (the mobile
     drawer, its close button, the cart/account icon order) sits on the
     RIGHT, the natural "leading" edge in RTL. A quick-access sidebar
     floating on the trailing edge read as a mistake, not a choice. Using
     `right` instead keeps it on the same side as everything else. */
  .gm-desktop-sidebar{
    display:block; position:fixed; top:90px; right:24px; width:220px; max-height:calc(100vh - 120px);
    overflow-y:auto; z-index:20;
  }
  /* FIX (found via visual regression screenshot): the sidebar is
     position:fixed, which removes it from normal document flow — nothing
     was reserving space for it, so it rendered ON TOP of the header/hero/
     main content instead of beside them. Every element the sidebar can
     appear alongside (see the is_front_page()/is_shop()/is_product()
     conditional in header.php) needs matching padding-right (right side,
     to match the sidebar's new right-hand position) at this exact
     breakpoint so real content never sits underneath it. */
  .gm-has-sidebar .gm-header, .gm-has-sidebar main, .gm-has-sidebar .gm-footer-pro{ padding-right: 264px; }
  .gm-ds-section{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px; margin-bottom:14px; }
  .gm-ds-title{ font-size:10.5px; font-weight:800; color:var(--gm-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
  .gm-ds-cat{ display:flex; align-items:center; gap:8px; padding:8px 0; font-size:12px; font-weight:700; color:var(--gm-text); border-bottom:1px solid var(--gm-border); }
  .gm-ds-cat:last-child{ border-bottom:none; }
  .gm-ds-cat .ic{ width:22px; height:22px; border-radius:6px; background:var(--gm-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; flex-shrink:0; }
  .gm-ds-cat .count{ margin-right:auto; font-size:10px; color:var(--gm-muted); font-weight:500; }
  .gm-ds-wallet-balance{ font-family:var(--gm-font-display); font-weight:900; font-size:18px; }
  .gm-ds-cart-item{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:11px; }
  .gm-ds-cart-item img{ width:28px; height:28px; border-radius:6px; object-fit:cover; }
  .gm-ds-btn{ display:block; text-align:center; margin-top:10px; font-size:11.5px; padding:9px; }
}

/* =====================================================================
   PROFESSIONAL DESKTOP LAYOUT
   The theme was built mobile-first with no dedicated wide-screen layout,
   so on desktop the mobile-width content just sat in a narrow column
   with a huge empty void beside it — not a bug exactly, but genuinely
   unprofessional, and a direct complaint. This block gives desktop/wide
   screens their own real layout: centered max-width content, a larger
   hero, and grids that actually use the available width instead of
   staying locked at mobile column-counts.
   ===================================================================== */
@media (min-width: 1100px){
  main{ max-width:1500px; margin:0 auto; }
  /* Breathing room on the side AWAY from the sidebar (now on the right —
     see .gm-desktop-sidebar above), so content doesn't run edge-to-edge. */
  .gm-has-sidebar main{ max-width:none; padding-left:40px; }

  .gm-hero-wrap{ padding:24px 40px; }
  .gm-hero-grid{ display:grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap:16px; height:420px; }
  .gm-hero-main{ grid-row: 1 / 3; min-height:0; }
  .gm-hero-main-content{ padding:44px 40px; max-width:56%; }
  .gm-hero-main h1{ font-size:34px; }
  .gm-hero-h1-sub{ font-size:24px; }
  .gm-hero-platform-ic{ width:38px; height:38px; }
  .gm-hero-side{ flex-direction:column; height:100%; }
  .gm-hero-side-card{ min-height:0; padding:24px; }

  .gm-section-title{ font-size:24px; padding:0 40px; }
  .gm-section-head{ padding:0 40px; }
  ul.products{ padding:0 40px; }
  .gm-cat-grid{ padding:0 40px; }
  .gm-dcards-strip{ padding:0 40px 6px; }
  .gm-poster-strip{ padding:0 40px 6px; }
  .gm-trust-grid{ padding:0 40px; }
  .gm-empty-note{ padding:0 40px; }

  ul.products li.product{ flex-basis: calc(16.666% - 12px); max-width: calc(16.666% - 12px); }
  .gm-cat-grid > *{ flex-basis: calc(16.666% - 9px); max-width: calc(16.666% - 9px); }
  .gm-trust-grid > *{ flex-basis: calc(25% - 8px) !important; max-width: calc(25% - 8px) !important; }

  /* Poster strip becomes a real grid on wide screens instead of a
     horizontal-scroll carousel (a mobile-only pattern). */
  .gm-poster-strip{ flex-wrap:wrap; overflow-x:visible; scroll-snap-type:none; }
  .gm-poster-card{ flex:0 0 calc(25% - 11px); max-width:calc(25% - 11px); width:auto; }

  .gm-dash-stats > *{ flex-basis:0; }
}

/* Safe product-image fallback — used whenever a product has no genuine
   featured image of its own, instead of trusting an unverified fallback
   chain that could surface an unrelated image. Shows a digital-goods
   icon (inline SVG — never a second image request that could itself
   fail) on a branded gradient, with the product's initials as a small
   secondary label so different products still look visually distinct. */
.gm-prod-fallback-thumb{
  width:100%; height:100%; min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background: linear-gradient(150deg, var(--gm-elevated), var(--gm-surface));
  color: var(--gm-blue-1);
}
.gm-fallback-icon{ width:34%; max-width:52px; height:auto; }
.gm-fallback-initials{
  font-family: var(--gm-font-display); font-weight:800; font-size:11px; letter-spacing:.5px;
  color: var(--gm-muted); text-transform:uppercase;
}

/* =====================================================================
   CONTENT PAGE UTILITIES
   FIX (found during audit): the legal pages, FAQ, how-to-buy, contact,
   about, deals, and track-order templates each hand-wrote the same handful
   of paddings/colors/font-sizes as one-off inline styles instead of
   sharing a class — the same "16px side padding, muted gray paragraph,
   14px heading" pattern was duplicated dozens of times across separate
   files. That meant a single visual tweak (e.g. adjusting the page's side
   padding) required editing 10 files by hand instead of one CSS rule, and
   it's the main source of the layout feeling "padded"/cluttered — the same
   spacing value was being re-declared, and sometimes accidentally
   stacked, in file after file. Centralizing it here fixes both problems
   at once and is what actually makes the theme easy to restyle later.
   ===================================================================== */
.gm-page-pad{ padding:0 16px; }

/* Long-form legal/informational text (terms, privacy, refund policy) */
.gm-legal-content{ padding:0 16px; color:var(--gm-muted); font-size:13px; line-height:1.9; }
.gm-legal-content > p{ margin-bottom:14px; }
.gm-legal-content > p:first-child{ margin-bottom:16px; }
.gm-legal-content h3{ color:var(--gm-text); font-size:14px; margin:20px 0 8px; }
.gm-legal-content .gm-legal-extra{ margin-top:20px; }

/* Generic body copy block under a page title (about/contact/faq extra content) */
.gm-copy-block{ padding:0 16px; color:var(--gm-muted); font-size:13px; line-height:1.8; }
.gm-copy-block.gm-copy-block--spaced{ padding-top:24px; }
.gm-copy-block p{ margin-bottom:16px; }

/* Simple standalone form (track-order lookup, etc.) */
.gm-form-card{ padding:0 16px; }
.gm-form-card .gm-field{ margin-bottom:14px; }
.gm-form-card .gm-field:last-of-type{ margin-bottom:20px; }
.gm-form-card .gm-field label{ display:block; font-size:11.5px; color:var(--gm-muted); font-weight:700; margin-bottom:7px; }
.gm-form-card .gm-field input{
  width:100%; box-sizing:border-box; background:var(--gm-surface); border:1px solid var(--gm-border);
  border-radius:12px; padding:13px 14px; color:var(--gm-text); font-size:13.5px;
}
.gm-form-card .gm-btn-primary{ width:100%; border:none; text-align:center; cursor:pointer; box-sizing:border-box; }
.gm-intro-text{ color:var(--gm-muted); font-size:12.5px; margin-bottom:18px; }

/* Numbered step list (how-to-buy) */
.gm-step-list{ padding:0 16px; display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.gm-step-item{ display:flex; gap:14px; align-items:flex-start; }
.gm-step-item-num{
  width:28px; height:28px; border-radius:50%; background:var(--gm-gradient); color:#fff;
  font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gm-step-item-body{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px; flex:1; }
.gm-step-item-title{ font-weight:800; font-size:13.5px; margin-bottom:6px; }
.gm-step-item-desc{ font-size:12px; color:var(--gm-muted); line-height:1.7; }

/* CTA banner (bottom of how-to-buy, etc.) */
.gm-cta-banner{ margin:0 16px; background:var(--gm-gradient); border-radius:var(--gm-radius-lg); padding:20px; text-align:center; color:#fff; }
.gm-cta-banner-title{ font-family:var(--gm-font-display); font-weight:900; font-size:16px; margin-bottom:6px; }
.gm-cta-banner .gm-btn-primary{ background:#fff; color:var(--gm-blue-2) !important; display:inline-block; font-weight:800; padding:11px 22px; border-radius:10px; font-size:13px; margin-top:10px; }

/* Grouped FAQ list */
.gm-faq-group-title{ padding:0 16px; font-size:12px; color:var(--gm-blue-1); font-weight:800; text-transform:uppercase; margin:20px 0 10px; }
.gm-faq-group-title:first-child{ margin-top:0; }
.gm-faq-list{ padding:0 16px; display:flex; flex-direction:column; gap:10px; }
.gm-faq-item{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px 16px; }
.gm-faq-item summary{ font-weight:700; font-size:13px; cursor:pointer; }
.gm-faq-item p{ font-size:12.5px; color:var(--gm-muted); line-height:1.8; margin-top:10px; }

/* Order/summary rows reused across track-order, thank-you */
.gm-order-line-item{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:12px; padding:12px 14px; margin-bottom:8px; font-size:12.5px; }
.gm-note-muted{ font-size:11.5px; color:var(--gm-muted); margin-top:16px; }

/* Deals page header */
.gm-deals-intro{ padding:28px 16px 8px; }
.gm-deals-title{ font-size:26px; font-weight:900; font-family:var(--gm-font-display); margin:14px 0 8px; }
.gm-deals-sub{ color:var(--gm-muted); font-size:13px; margin-bottom:8px; }
.gm-deals-section{ padding-top:8px; }

/* Empty-state block (deals page, etc.) */
.gm-empty-state{ padding:40px 16px; text-align:center; color:var(--gm-muted); }
.gm-empty-state p{ margin-bottom:16px; }

/* Search results page */
.gm-search-pages{ margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.gm-search-pages-title{ margin-bottom:6px; }
.gm-search-page-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:13px 16px; font-size:13px; font-weight:700; color:var(--gm-text);
}
.gm-search-page-arrow{ color:var(--gm-muted); flex-shrink:0; }

.gm-contact-intro{ margin-bottom:20px; line-height:1.7; }

/* Simple contact link block */
.gm-contact-links{ padding:0 16px; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.gm-whatsapp.gm-whatsapp--block{ width:100%; box-sizing:border-box; justify-content:center; }
.gm-mail-link{
  display:block; text-align:center; border:1px solid var(--gm-border); border-radius:var(--gm-radius-md);
  padding:13px; font-weight:700; font-size:13px; color:var(--gm-text);
}

/* Bottom mobile navigation bar */
/* FIX (contrast bug found during audit): same leftover dark-navy chrome as
   the header — inconsistent with the light rebrand and, worse, the ".lbl"
   text below already reads through --gm-muted (a mid-gray tuned for a
   light surface), which was low-contrast on this dark bar. */
.gm-bottom-nav{
  position:fixed; bottom:0; right:0; left:0; z-index:50; display:flex; align-items:center; justify-content:space-around;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-top:1px solid var(--gm-border);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.gm-bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; color: var(--gm-muted); font-size:9.5px; font-weight:700; flex:1; }
.gm-bottom-nav a .ic{ font-size:18px; line-height:1; }
.gm-bottom-nav a.active{ color: var(--gm-red); }
.gm-bottom-nav-search{ position:relative; }
.gm-bottom-nav-search-ic{
  width:44px; height:44px; border-radius:50%; background: var(--gm-gradient); color:#fff !important;
  display:flex; align-items:center; justify-content:center; font-size:20px !important; margin-top:-22px;
  box-shadow: 0 8px 20px -8px rgba(255,46,77,0.6);
}
body.gamelo-theme{ padding-bottom: 68px; }
@media (min-width: 1100px){
  .gm-bottom-nav{ display:none; }
  body.gamelo-theme{ padding-bottom:0; }
}

/* Thank-you / order-received page */
.gm-thankyou-page{ padding-bottom:20px; }
.gm-thankyou-hero{ text-align:center; padding:36px 16px 24px; background: linear-gradient(180deg, rgba(34,197,139,0.1), transparent); }
.gm-thankyou-check{
  width:60px; height:60px; border-radius:50%; background:var(--gm-green); color:#03150E;
  font-size:28px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.gm-thankyou-hero h1{ font-family:var(--gm-font-display); font-weight:900; font-size:20px; margin-bottom:8px; }
.gm-thankyou-hero p{ font-size:12.5px; color:var(--gm-muted); }
.gm-thankyou-hero--failed{ background:none; }
.gm-thankyou-check--failed{ background:var(--gm-red); }
.gm-thankyou-actions{ display:flex; gap:10px; padding:0 16px; }
.gm-thankyou-actions a{ flex:1; text-align:center; }
.gm-thankyou-order-card{ margin:0 16px 16px; }
.gm-thankyou-items{ padding-bottom:16px; }
.gm-admin-meta-row--spread{ justify-content:space-between; }
.gm-order-status--tight{ margin-top:14px; margin-bottom:0; }
.gm-order-card--stacked{ margin-bottom:10px; }
.gm-amt-display{ font-family:var(--gm-font-display); font-weight:800; }

/* Account edit form */
.gm-account-edit-form .gm-field, .gm-account-edit-form .gm-form-row-split{ margin-bottom:14px; }
.gm-account-edit-form label{ display:block; font-size:11.5px; color:var(--gm-muted); font-weight:700; margin-bottom:7px; }
.gm-account-edit-form input{ width:100%; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-md); padding:12px 14px; color:var(--gm-text); font-size:13px; }
.gm-account-edit-form input:disabled{ opacity:.5; }

/* Checkout/cart progress stepper */
.gm-checkout-progress{ display:flex; align-items:center; padding:16px; gap:4px; }
.gm-progress-step{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.gm-progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:var(--gm-surface); border:1.5px solid var(--gm-border);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--gm-muted); flex-shrink:0;
}
.gm-progress-step .lbl{ font-size:9.5px; color:var(--gm-muted); font-weight:700; white-space:nowrap; }
.gm-progress-step.active .dot{ background:var(--gm-gradient); border-color:transparent; color:#fff; }
.gm-progress-step.active .lbl{ color:var(--gm-text); }
.gm-progress-step.done .dot{ background:var(--gm-green); border-color:transparent; color:#03150E; }
.gm-progress-line{ flex:1; height:2px; background:var(--gm-border); margin-bottom:16px; }
.gm-progress-line.done{ background:var(--gm-green); }
.gm-order-track{ padding:20px 8px; }
.gm-order-track-failed{
  display:flex; align-items:flex-start; gap:12px; background:var(--gm-surface); border:1px solid var(--gm-border);
  border-right:4px solid var(--gm-red); border-radius:var(--gm-radius-lg); padding:16px; margin-bottom:16px;
}
.gm-order-track-failed .ic{ font-size:20px; }
.gm-order-track-failed b{ display:block; font-size:14px; margin-bottom:4px; }
.gm-order-track-failed p{ margin:0; font-size:12px; color:var(--gm-muted); }

/* Toast notifications */
.gm-toast-container{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; width:calc(100% - 32px); max-width:380px; }
.gm-toast{
  display:flex; align-items:center; gap:10px; background:var(--gm-elevated); border:1px solid var(--gm-border);
  border-radius:var(--gm-radius-md); padding:12px 14px; box-shadow:0 16px 32px -12px rgba(0,0,0,0.5);
  font-size:12.5px; font-weight:700; color:var(--gm-text);
  animation: gm-toast-in .3s ease both;
}
.gm-toast.success{ border-color:rgba(34,197,139,0.4); }
.gm-toast.error{ border-color:rgba(255,46,77,0.4); }
.gm-toast .ic{ font-size:16px; flex-shrink:0; }
.gm-toast.out{ animation: gm-toast-out .25s ease forwards; }
@keyframes gm-toast-in{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes gm-toast-out{ to{ opacity:0; transform:translateY(-10px); } }
.gm-dash-order-row .r{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.gm-dash-order-row .amt{ font-family:var(--gm-font-display); font-weight:800; font-size:13px; }
.gm-dash-empty{ text-align:center; padding:40px 16px; }
.gm-dash-empty p{ color:var(--gm-muted); margin-bottom:16px; font-size:13px; }

.gm-orders-list{ display:flex; flex-direction:column; gap:12px; }
.gm-order-card{ display:block; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px; }
.gm-order-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.gm-order-card-top .num{ font-weight:800; font-size:13px; }
.gm-order-card-items{ font-size:12px; color:var(--gm-muted); margin-bottom:10px; }
.gm-order-card-bottom{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--gm-muted); }
.gm-order-card-bottom .amt{ font-family:var(--gm-font-display); font-weight:800; color:var(--gm-text); font-size:13px; }
.gm-pagination{ display:flex; justify-content:space-between; margin-top:16px; }

/* =====================================================================
   Premium footer
   ===================================================================== */
.gm-footer-pro{ border-top:1px solid var(--gm-border); margin-top:28px; padding:28px 16px 18px; }

/* Promotional banners — real, admin-manageable */
.gm-promo-banners{ display:flex; flex-direction:column; gap:12px; padding:16px; }

/* Real countdown timer */
.gm-countdown{ background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px 16px; margin-bottom:16px; }
.gm-countdown-label{ font-size:11.5px; color:var(--gm-muted); font-weight:700; display:block; margin-bottom:10px; }
.gm-countdown-boxes{ display:flex; gap:8px; }
.gm-countdown-box{ flex:1; background:var(--gm-elevated); border-radius:10px; padding:10px 4px; text-align:center; }
.gm-countdown-box .gm-cd-d, .gm-countdown-box .gm-cd-h, .gm-countdown-box .gm-cd-m, .gm-countdown-box .gm-cd-s{
  display:block; font-family:var(--gm-font-mono); font-weight:700; font-size:17px; color:var(--gm-text);
}
.gm-countdown-box small{ font-size:9px; color:var(--gm-muted); }

/* Real stock scarcity bar — shared by the single-product page and the
   Flash Deal spotlight below, both driven by gamelo_get_digital_stock_summary(). */
.gm-scarcity{ margin-bottom:16px; padding:0 2px; }
.gm-scarcity-bar{ height:6px; border-radius:4px; background:var(--gm-elevated); overflow:hidden; margin-bottom:6px; }
.gm-scarcity-fill{ height:100%; background:linear-gradient(90deg, var(--gm-green), var(--gm-amber)); border-radius:4px; }
.gm-scarcity.almost-gone .gm-scarcity-fill{ background:var(--gm-red); }
.gm-scarcity-labels{ display:flex; flex-wrap:nowrap; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--gm-muted); font-weight:700; }
.gm-scarcity-labels span{ white-space:nowrap; flex-shrink:0; }

/* Flash Deal spotlight — the single real on-sale product shown alongside
   the countdown timer (see template-parts/countdown.php). */
.gm-flash-deal{ padding:0 16px 28px; }
.gm-flash-deal-product{
  display:flex; gap:14px; align-items:center;
  background:linear-gradient(180deg, var(--gm-elevated), var(--gm-surface));
  border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:14px;
}
.gm-flash-deal-media{ position:relative; width:84px; height:84px; flex-shrink:0; border-radius:12px; overflow:hidden; }
.gm-flash-deal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gm-flash-deal-media .gm-prod-fallback-thumb{ width:100%; height:100%; }
.gm-flash-deal-media .gm-badge{ position:absolute; top:6px; right:6px; z-index:2; }
.gm-flash-deal-info{ flex:1; min-width:0; }
.gm-flash-deal-name{
  display:block; font-size:13px; font-weight:800; color:var(--gm-text); margin-bottom:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-flash-deal-price{ display:block; font-family:var(--gm-font-display); font-weight:800; font-size:14.5px; margin:6px 0; }
.gm-flash-deal-price del{ color:var(--gm-muted); font-size:11px; opacity:.75; margin-left:6px; }
.gm-flash-deal-info .gm-scarcity{ margin-bottom:0; padding:0; }
.gm-flash-deal-info .gm-prod-rating{ padding:0; margin:0 0 4px; }
.gm-promo-banner{
  position:relative; display:block; min-height:170px; border-radius:var(--gm-radius-xl); overflow:hidden;
  background-color:#161822; background-size:cover; background-position:center;
}
.gm-promo-banner::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(270deg, rgba(6,9,25,0.85), rgba(6,9,25,0.35) 70%);
}
.gm-promo-banner-content{ position:relative; z-index:2; padding:22px; max-width:75%; }
.gm-promo-banner-content h3{ font-family:var(--gm-font-display); font-weight:900; font-size:18px; color:#fff; margin-bottom:6px; line-height:1.35; }
.gm-promo-banner-content p{ font-size:12px; color:rgba(255,255,255,0.75); margin-bottom:14px; }
.gm-promo-banner-cta{ font-size:12px; font-weight:800; color:var(--gm-red); }
@media (min-width: 900px){ .gm-promo-banners{ flex-direction:row; } .gm-promo-banner{ flex:1; } }

/* Newsletter signup — FIX (leftover from the old red rebrand, missed in
   earlier passes): was still the dark-navy-to-crimson gradient, the exact
   same pattern already fixed on .gm-wallet-card/.gm-referral-card. Also
   trimmed padding/gap per direct feedback that this banner felt heavy —
   same visual weight as the hero side-cards now, not a separate, denser
   dark block. */
.gm-newsletter{
  background: linear-gradient(120deg, #10306B, var(--gm-blue-1));
  border-radius:var(--gm-radius-lg);
  padding:18px 20px; margin-bottom:28px; display:flex; flex-direction:column; gap:12px; color:#fff;
}
.gm-newsletter-text h3{ font-family:var(--gm-font-display); font-weight:900; font-size:15px; margin-bottom:4px; }
.gm-newsletter-text p{ font-size:11.5px; opacity:.85; }
.gm-newsletter-form{ display:flex; gap:8px; }
.gm-newsletter-form input{ flex:1; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px 14px; color:#fff; font-size:12.5px; }
.gm-newsletter-form input::placeholder{ color:rgba(255,255,255,0.65); }
.gm-newsletter-form button{ background:#fff; color:var(--gm-blue-2); border:none; font-weight:800; padding:0 18px; border-radius:10px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
@media (min-width: 640px){ .gm-newsletter{ flex-direction:row; align-items:center; justify-content:space-between; } .gm-newsletter-form{ min-width:300px; } }
.gm-footer-top{ display:flex; flex-direction:column; gap:22px; margin-bottom:22px; }
@media (min-width: 780px){ .gm-footer-top{ flex-direction:row; justify-content:space-between; gap:32px; } }
.gm-footer-brand{ max-width:260px; display:flex; flex-direction:column; gap:10px; }
.gm-footer-tagline{ font-size:12.5px; color:var(--gm-muted); line-height:1.7; margin:12px 0 16px; }
.gm-footer-col h4{ font-size:12.5px; font-weight:800; margin-bottom:14px; text-transform:uppercase; letter-spacing:.4px; }
.gm-footer-col ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.gm-footer-col ul a{ font-size:12.5px; color:var(--gm-muted); }
.gm-footer-bottom{ border-top:1px solid var(--gm-border); padding-top:20px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
@media (min-width: 780px){ .gm-footer-bottom{ flex-direction:row; justify-content:space-between; text-align:right; } }
.gm-footer-payments{ display:flex; gap:8px; flex-wrap:wrap; }
.gm-pay-badge{ font-size:11px; color:var(--gm-muted); font-weight:700; background:var(--gm-elevated); border:1px solid var(--gm-border); border-radius:999px; padding:5px 12px; display:inline-flex; align-items:center; gap:5px; }

/* ---- Bundles ---- */
.gm-bundles-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.gm-bundle-card{ position:relative; background:var(--gm-surface); border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); padding:18px; display:flex; flex-direction:column; gap:8px; }
.gm-bundle-badge{ position:absolute; top:14px; left:14px; background:var(--gm-gradient); color:#fff; font-weight:800; font-size:11px; padding:4px 10px; border-radius:999px; }
.gm-bundle-title{ font-size:15px; font-weight:800; margin:6px 0 0; }
.gm-bundle-subtitle{ font-size:12px; color:var(--gm-muted); margin:0; }
.gm-bundle-items{ list-style:none; padding:0; margin:6px 0; display:flex; flex-direction:column; gap:4px; }
.gm-bundle-items li{ font-size:12px; color:var(--gm-muted); padding-right:16px; position:relative; }
.gm-bundle-items li::before{ content:"•"; position:absolute; right:0; color:var(--gm-blue-1); }
.gm-bundle-price-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.gm-bundle-price-old{ text-decoration:line-through; color:var(--gm-muted); font-size:12px; }
.gm-bundle-price-new{ font-weight:900; font-size:17px; color:var(--gm-red); font-family:var(--gm-font-display); }
.gm-bundle-add-btn{ margin-top:8px; width:100%; text-align:center; }
.gm-bundle-add-btn.loading{ opacity:.6; pointer-events:none; }

/* ---- Chat widget ----
   FIX (matches the reported floating-overlap look): was pinned to the
   physical left corner regardless of page direction. On an RTL Arabic
   site the natural "always-visible corner" is the right (same side as
   the reading start and where the rest of the UI's fixed elements sit),
   so this now follows page direction instead of being hardcoded left. */
.gm-chat-widget{ position:fixed; bottom:20px; inset-inline-end:20px; z-index:60; }
.gm-chat-fab{
  width:52px; height:52px; border-radius:50%; background:var(--gm-gradient); border:none; color:#fff;
  font-size:22px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center;
}
.gm-chat-fab.is-open{ transform:rotate(90deg); }
.gm-chat-panel{
  position:absolute; bottom:64px; inset-inline-end:0; width:300px; max-width:88vw; background:var(--gm-surface);
  border:1px solid var(--gm-border); border-radius:var(--gm-radius-lg); box-shadow:0 16px 44px rgba(0,0,0,.22);
  padding:16px; max-height:70vh; overflow-y:auto;
}
.gm-chat-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.gm-chat-panel-head b{ font-size:14px; display:block; }
.gm-chat-panel-sub{ font-size:11px; color:var(--gm-muted); }
.gm-chat-close{ background:none; border:none; font-size:14px; color:var(--gm-muted); cursor:pointer; padding:2px 6px; }
.gm-chat-faqs{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.gm-chat-faq-item{ background:var(--gm-elevated); border-radius:var(--gm-radius-md); padding:10px 12px; }
.gm-chat-faq-item summary{ font-size:12.5px; font-weight:700; cursor:pointer; list-style:none; }
.gm-chat-faq-item summary::-webkit-details-marker{ display:none; }
.gm-chat-faq-item summary::before{ content:"+ "; color:var(--gm-blue-1); font-weight:900; }
.gm-chat-faq-item[open] summary::before{ content:"− "; }
.gm-chat-faq-item p{ font-size:11.5px; color:var(--gm-muted); margin:8px 0 0; line-height:1.7; }
.gm-chat-whatsapp-btn{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; text-align:center; background:#25D366 !important; }

@media (max-width: 640px){
  .gm-chat-widget{ bottom:78px; } /* clears the mobile bottom-nav bar */
}
.gm-footer-social{ display:flex; gap:14px; font-size:15px; }
.gm-footer-social a{ color:var(--gm-muted); }

/* =====================================================================
   PREMIUM POLISH — entrance animations, featured poster showcase, trust
   badges, custom logo sizing. All original GAMelo markup/styling.
   ===================================================================== */

/* Subtle, professional entrance animation — respects reduced-motion, and
   NEVER hides content by default. FIX (found via desktop screenshot
   review): this previously set opacity:0 as the base state and relied
   entirely on the CSS animation running to reveal it — if a browser
   doesn't fully support/run the animation (confirmed to be a real risk on
   at least one actual device used to test this site), the content stayed
   permanently invisible. Now only the movement is animated; opacity stays
   at 1 the whole time, so worst case is content simply doesn't slide in,
   never that it disappears. */
.gm-anim-in{
  animation: gm-fade-up .7s cubic-bezier(.22,.9,.32,1) both;
  animation-delay: var(--gm-delay, 0s);
}
@keyframes gm-fade-up{ from{ transform: translateY(14px); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .gm-anim-in{ animation:none; transform:none; }
}

/* Logo (uploaded via Customizer) */
.gm-logo--image img{ max-height:36px; width:auto; display:block; }

/* Gentle lift/scale on interactive cards site-wide — cheap, tasteful,
   applies to product cards, category cards, and poster cards alike. */
ul.products li.product, .gm-cat-card, .gm-poster-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
ul.products li.product:hover, .gm-cat-card:hover, .gm-poster-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(255,46,77,0.35);
  border-color: rgba(255,46,77,0.4);
}
.gm-add-btn{ transition: transform .15s ease, background .2s ease; }
.gm-add-btn:hover{ transform: scale(1.1); }

/* Featured poster showcase — large-format horizontal scroll, snap-aligned,
   for a premium "top picks" feel distinct from the regular product grid. */
.gm-poster-section{ padding-top:8px; }
.gm-section-head{ padding:0 16px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.gm-section-title--flush{ padding:0; margin:0; }
.gm-section-link{ font-size:12.5px; font-weight:700; color:var(--gm-blue-1); }

/* "الأكثر شهرة" platform entry cards — REDESIGNED (real request: simpler,
   real logos, no layout-breaking clutter). CSS Grid with auto-fill
   (not flex) is used specifically because it can NEVER stretch a lone
   card on an incomplete last row to fill leftover space — unused grid
   tracks just stay empty — so the "one card stretches full-width" class
   of bug is structurally impossible here, regardless of how many
   platforms exist. White cards mirror the category-tile style so the
   real brand logos (not colored blocks) are what stands out. */
.gm-dcards-section{ padding-top:8px; }
.gm-dcards-strip{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px; padding:0 16px 6px;
}
.gm-dcard{
  background: var(--gm-dcard-color, var(--gm-surface)); border-radius: var(--gm-radius-lg);
  padding:16px 12px; display:flex; flex-direction:column; align-items:flex-start; text-align:right; gap:5px;
  box-shadow: 0 10px 20px -14px rgba(0,0,0,0.45);
}
.gm-dcard-logo-badge{
  width:40px; height:40px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:2px;
}
.gm-dcard-logo{ width:26px; height:26px; object-fit:contain; }
.gm-dcard-platform{ font-family: var(--gm-font-display); font-weight:800; font-size:13px; color:#fff; }
.gm-dcard-type{ font-size:10px; font-weight:700; color:rgba(255,255,255,0.72); margin-top:-3px; }
.gm-dcard-prices{ display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 2px; direction:ltr; }
.gm-dcard-price-pill{
  background:rgba(255,255,255,0.16); color:#fff; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius: var(--gm-radius-pill);
}
.gm-dcard-cta{
  display:inline-block; background: var(--gm-blue-1); color:#fff; font-size:10.5px; font-weight:800;
  padding:7px 18px; border-radius: var(--gm-radius-pill); margin-top:4px; width:100%; text-align:center;
}
@media (min-width: 900px){
  .gm-dcards-strip{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); padding:0 40px 6px; }
  .gm-dcard{ padding:22px 16px; }
  .gm-dcard-logo-badge{ width:52px; height:52px; }
  .gm-dcard-logo{ width:34px; height:34px; }
  .gm-dcard-platform{ font-size:15px; }
}
.gm-poster-strip{
  display:flex; gap:14px; overflow-x:auto; padding:0 16px 6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.gm-poster-card{
  flex:0 0 auto; width:78%; max-width:300px; scroll-snap-align:start;
  background: var(--gm-elevated); border:1px solid var(--gm-border); border-radius: var(--gm-radius-xl);
  overflow:hidden; display:block; text-decoration:none;
}
.gm-poster-media{ position:relative; height:170px; overflow:hidden; }
.gm-poster-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gm-poster-fade{
  position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(11,15,34,0.85) 100%);
}
.gm-poster-badge{ position:absolute; top:12px; right:12px; z-index:2; }
.gm-poster-info{ padding:14px 16px 18px; }
.gm-poster-platform{ font-size:10.5px; color:var(--gm-blue-1); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.gm-poster-name{ font-size:14px; font-weight:800; color:var(--gm-text); margin-bottom:10px; line-height:1.4; }
.gm-poster-price{ font-family:var(--gm-font-display); font-weight:800; font-size:16px; }
.gm-poster-price .woocommerce-Price-amount{ color:var(--gm-text); }
.gm-poster-price del{ opacity:.6; font-size:0.75em; margin-left:6px; }

/* Trust badges strip */
.gm-trust-section{ padding-top:8px; }
.gm-trust-grid{ display:flex; flex-wrap:wrap; gap:10px; padding:0 16px; }
.gm-trust-grid--about{ margin-bottom:28px; }
.gm-about-intro p{ font-size:13.5px; line-height:1.9; margin-bottom:18px; }
.gm-about-intro-last{ margin-bottom:28px !important; }
.gm-trust-grid > *{ flex:1 1 calc(50% - 5px); max-width:calc(50% - 5px); }
@media (min-width: 640px){ .gm-trust-grid > *{ flex-basis: calc(25% - 8px); max-width: calc(25% - 8px); } }
/* Flat icon + label strip (no card chrome) matching the reference: a
   thin blue line-icon circle, a bold title, and a small muted line
   underneath — no border/background box around each item. */
.gm-trust-badge{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  padding:8px 6px;
}
.gm-trust-icon{
  width:38px; height:38px; border-radius:50%; background: rgba(29,111,235,0.1); color: var(--gm-blue-1);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.gm-trust-icon svg{ width:18px; height:18px; }
.gm-trust-title{ font-size:12px; font-weight:800; color:var(--gm-text); }
.gm-trust-desc{ font-size:10px; color:var(--gm-muted); line-height:1.4; }
@media (min-width: 900px){ .gm-trust-grid{ flex-wrap:nowrap; justify-content:space-between; } }
/* About page reuses the same markup but wants the original bordered-card
   presentation (longer description text needs the extra visual weight) —
   scoped override so the homepage strip stays flat/minimal per the
   reference design while this page keeps its card look. */
.gm-trust-grid--about .gm-trust-badge{
  background: var(--gm-surface); border:1px solid var(--gm-border); border-radius: var(--gm-radius-lg);
  padding:16px 14px; text-align:center;
}
.gm-trust-grid--about .gm-trust-icon{ border-radius:12px; background: var(--gm-gradient); color:#fff; }
.gm-trust-grid--about .gm-trust-icon svg{ width:20px; height:20px; }
.gm-trust-grid--about .gm-trust-title{ font-size:12.5px; margin-bottom:4px; }
.gm-trust-grid--about .gm-trust-desc{ font-size:10.5px; line-height:1.5; }

/* Mobile safety net: nothing in this theme should ever cause horizontal
   scroll — this is a blunt but effective guard until each page has been
   manually checked on a real device per the DEPLOYMENT.md health check. */
@media (max-width: 480px){
  body{ overflow-x:hidden; }
  .gm-hero-main h1{ font-size:20px; }
  .gm-hero-h1-sub{ font-size:15px; }
  .gm-hero-main-content{ max-width:68%; padding:18px 16px; }
  .gm-hero-side{ flex-direction:row; }
  .gm-hero-side-card h3{ font-size:12.5px; }
}