/* ==========================================================================
   ELITE DIGITAL — ROUTE A REBUILD STYLES  (elite-rebuild.css)
   --------------------------------------------------------------------------
   CSS-only rebuild for: Products catalogue, Deliveries gallery, and the
global header position (bottom floating pill, site-wide). Hero: original kept.
   Loaded AFTER the compiled bundle CSS on all public pages.
   - All brand-new shell classes are prefixed `rb-`.
   - Overrides for JS-rendered cards are scoped under their section container
     IDs so nothing else on the site is affected.
   - Fonts: Poppins (already loaded by the pages). Accent: Elite gold #EDAA28.
   - !important is used ONLY inside the products-carousel conversion block,
     where the compiled 3D-carousel state rules (position / transform /
     opacity / visibility per card state class) must be neutralised without
     touching the JS. Each such rule is marked [FORCE].
   ========================================================================== */

:root {
  --rb-gold: #EDAA28;
  --rb-gold-dark: #A97A0F; /* darker tint of the brand gold for small text (contrast) */
  --rb-ink: #111827;
  --rb-body: #4B5563;
  --rb-muted: #6B7280;
  --rb-line: rgba(17, 24, 39, 0.08);
  --rb-card-shadow: 0 24px 48px -20px rgba(17, 24, 39, 0.22);
  --rb-soft-shadow: 0 18px 40px -18px rgba(17, 24, 39, 0.16);
  --rb-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Screen-reader only (used for the hero's semantic h1) */
.rb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2. PRODUCTS — section header + flow line  (reference: Skills intro)
   ========================================================================== */

.rb-section-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 2.75rem;
  font-family: var(--rb-font);
}
.rb-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rb-gold-dark);
  margin-bottom: 0.9rem;
}
.rb-section-title {
  font-size: clamp(1.9rem, 4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--rb-ink);
  margin-bottom: 1rem;
}
.rb-section-intro {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #666666;
  max-width: 42rem;
  margin-inline: auto;
}

/* Connected pill flow: step → step → step = result */
.rb-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.9rem;
}
.rb-flow-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border: 1.5px solid rgba(237, 170, 40, 0.55);
  border-radius: 999px;
  background: #FFF9EC;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rb-ink);
  white-space: nowrap;
}
.rb-flow-arrow { color: var(--rb-gold); font-weight: 700; font-size: 0.9rem; }
.rb-flow-result {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--rb-gold);
  color: var(--rb-ink);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   3. PRODUCTS — two-column shell: card stack | gold spine | sticky panel
   ========================================================================== */

.rb-catalogue-shell { font-family: var(--rb-font); }
.rb-catalogue-main { min-width: 0; }
.rb-spine { display: none; }

.rb-side-panel {
  margin-top: 2.5rem;
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: 24px;
  padding: 1.75rem;
  box-shadow: var(--rb-soft-shadow);
}
.rb-side-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rb-gold-dark);
  margin-bottom: 0.7rem;
}
.rb-side-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rb-ink);
  margin-bottom: 0.7rem;
}
.rb-side-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #666666;
  margin-bottom: 1.4rem;
}
.rb-side-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.2rem;
  border-radius: 14px;
  background: var(--rb-ink);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.rb-side-wa:hover { background: var(--rb-gold); color: var(--rb-ink); }
.rb-side-hours {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rb-muted);
  text-align: center;
}

@media (min-width: 1024px) {
  .rb-catalogue-shell {
    display: grid;
    grid-template-columns: minmax(0, 11fr) 28px minmax(0, 8fr);
    column-gap: 1.25rem;
    align-items: start;
  }
  /* Thin gold spine with nodes, sitting between stack and panel */
  .rb-spine {
    display: block;
    position: relative;
    width: 2px;
    height: 100%;
    min-height: 480px;
    justify-self: center;
    background: linear-gradient(to bottom,
      rgba(237, 170, 40, 0), var(--rb-gold) 8%,
      var(--rb-gold) 92%, rgba(237, 170, 40, 0));
  }
  .rb-spine-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 11px; height: 11px;
    border-radius: 999px;
    background: var(--rb-gold);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(237, 170, 40, 0.55);
  }
  .rb-spine-node:nth-child(1) { top: 6%; }
  .rb-spine-node:nth-child(2) { top: 23%; }
  .rb-spine-node:nth-child(3) { top: 40%; }
  .rb-spine-node:nth-child(4) { top: 57%; }
  .rb-spine-node:nth-child(5) { top: 74%; }
  .rb-spine-node:nth-child(6) { top: 91%; }
  .rb-side-panel {
    margin-top: 0;
    position: sticky;
    top: 96px;
  }
}

/* ==========================================================================
   4. PRODUCTS — carousel stage converted into a vertical STICKY STACK
   (reference: Skills card stack). The JS still renders the same
   .ed-product-card templates and keeps its state classes; these rules
   neutralise the 3D-carousel presentation only. Card internals
   (.ed-prod-card-inner → visual column + info column) are untouched.
   ========================================================================== */

/* [FORCE] the 3D viewport/stage normally clips and fixes its height */
#product-carousel-viewport {
  height: auto !important;
  overflow: visible !important;
}
#product-carousel-stage {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  gap: 2.25rem;
  height: auto !important;
  transform: none !important;
  perspective: none !important;
}

/* The hidden compatibility grid receives the same stack layout, so if any
   legacy script ever populates it, it renders identically. It is empty in
   practice, so this has no visual effect today. */
#full-products-grid {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* [FORCE] every card, whatever state class the carousel JS assigns
   (is-active / is-prev / is-next / is-far-* / is-hidden), becomes a visible
   sticky sheet in the stack. */
#product-carousel-stage .ed-product-card,
#full-products-grid .ed-product-card {
  position: sticky !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  top: 88px;
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: 26px;
  box-shadow: var(--rb-card-shadow);
  overflow: hidden;
}

/* Incremental stick offsets + stacking order: each sheet settles 10px
   lower than the previous one and slides over it (later DOM = higher z). */
#product-carousel-stage .ed-product-card:nth-child(1),
#full-products-grid .ed-product-card:nth-child(1)  { top: 88px;  z-index: 1; }
#product-carousel-stage .ed-product-card:nth-child(2),
#full-products-grid .ed-product-card:nth-child(2)  { top: 98px;  z-index: 2; }
#product-carousel-stage .ed-product-card:nth-child(3),
#full-products-grid .ed-product-card:nth-child(3)  { top: 108px; z-index: 3; }
#product-carousel-stage .ed-product-card:nth-child(4),
#full-products-grid .ed-product-card:nth-child(4)  { top: 118px; z-index: 4; }
#product-carousel-stage .ed-product-card:nth-child(5),
#full-products-grid .ed-product-card:nth-child(5)  { top: 128px; z-index: 5; }
#product-carousel-stage .ed-product-card:nth-child(6),
#full-products-grid .ed-product-card:nth-child(6)  { top: 138px; z-index: 6; }
#product-carousel-stage .ed-product-card:nth-child(7),
#full-products-grid .ed-product-card:nth-child(7)  { top: 148px; z-index: 7; }
#product-carousel-stage .ed-product-card:nth-child(8),
#full-products-grid .ed-product-card:nth-child(8)  { top: 158px; z-index: 8; }
#product-carousel-stage .ed-product-card:nth-child(9),
#full-products-grid .ed-product-card:nth-child(9)  { top: 168px; z-index: 9; }
#product-carousel-stage .ed-product-card:nth-child(10),
#full-products-grid .ed-product-card:nth-child(10) { top: 178px; z-index: 10; }
#product-carousel-stage .ed-product-card:nth-child(n+11),
#full-products-grid .ed-product-card:nth-child(n+11) { top: 188px; z-index: 11; }

/* ==========================================================================
   5. DELIVERIES — gateway header card + 2-column proof grid
   (reference: Portfolio gateway + card grid)
   ========================================================================== */

.rb-gateway {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 28px;
  box-shadow: var(--rb-soft-shadow);
  padding: clamp(2.25rem, 5vw, 3.75rem) 1.5rem;
  text-align: center;
  font-family: var(--rb-font);
}
.rb-gateway-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rb-gold-dark);
  margin-bottom: 1rem;
}
.rb-gateway-title {
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #0F172A;
}
.rb-gateway-sub {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: #64748B;
}

/* ID specificity beats the compiled responsive column utilities, so the
   grid is 1 column below 1024px and exactly 2 columns at desktop —
   no !important needed. Cards keep their template order (image first). */
#delivery-proofs-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  #delivery-proofs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
#delivery-proofs-grid .delivery-card {
  border-radius: 24px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.18);
}

/* ==========================================================================
   6. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rb-side-wa {
    transition: none;
  }
}

/* ============================================================
   Carousel controls — hidden in stack layout (approved 2026-10-21)
   In stack form the prev/next buttons, counter and progress dots
   no longer navigate anything visible, so they are hidden.
   The elements and their JS remain in place; removing this block
   restores them.
   ============================================================ */
#product-showcase-container #product-prev-btn,
#product-showcase-container #product-next-btn,
#product-showcase-container #product-counter,
#product-showcase-container #product-progress-indicators {
  display: none !important;
}

/* ==========================================================================
   4. GLOBAL HEADER — bottom floating pill  (reference: saifali.site nav)
   The dark glass header moves from the top of the viewport to a centred
   floating pill at the bottom, on every public page. Markup, logo, links
   and the mobile Menu button are unchanged — only position changes.
   The mobile drawer (z-80/90) still opens above it. Body bottom padding
   keeps page-end content clear of the pill.
   MOBILE (owner's spec): the bottom bar keeps the logo and the Menu
   button AND shows the page links (Home, Products, Deliveries, About,
   Contact) directly in the bar — the nav row scrolls sideways if needed.
   Added 2026-10-21 on the owner's instruction (header change was his
   original ask; the hero stays the original design).
   FIX (2026-10-21, second pass): the compiled bundle CSS styles the
   header as `#main-header.ed-floating-dark-header` (specificity 1-1-0),
   which outranked a plain `#main-header` rule — so these rules use the
   same compound selector, load later, and carry !important on the
   properties the site's own hide-on-scroll script also fights over
   (it sets inline transform and toggles `.is-header-hidden`, whose
   compiled rule hides the header with !important). The second rule
   below keeps the bottom pill permanently visible and centred.
   ========================================================================== */
#main-header.ed-floating-dark-header {
  position: fixed !important;
  top: auto !important;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) !important;
  width: max-content;
  max-width: 96vw;
  margin: 0;
}
#main-header.is-header-hidden {
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}
body {
  padding-bottom: 104px;
}
@media (max-width: 767px) {
  #main-header.ed-floating-dark-header {
    bottom: 10px;
    width: calc(100vw - 16px);
  }
  #main-header > div:not(.ed-header-glass-sheen) {
    padding-left: 10px;
    padding-right: 10px;
  }
  #main-header .ed-header-logo {
    height: 28px;
  }
  #main-header nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #main-header nav::-webkit-scrollbar {
    display: none;
  }
  #main-header .ed-nav-link-dark {
    font-size: 11px;
    padding: 6px 7px;
    white-space: nowrap;
  }
  body {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   7. PRODUCT CARD — owner's tweaks (2026-10-21)
   - Product icons: the product's OWN image, fitted whole (contain,
     centred, padded) instead of cropped to fill.
   - No price anywhere on the card (price / old price / total line hidden).
   - Two order buttons under each product, injected by elite-cards.js:
     WhatsApp order (site's published number) + the elitedigitalpk.store
     store button. Styles for those buttons live here.
   ========================================================================== */
#product-carousel-stage .ed-prod-img-fill,
#full-products-grid .ed-prod-img-fill {
  object-fit: contain;
  object-position: center;
  padding: 28px;
}
#product-carousel-stage .ed-prod-card-price,
#product-carousel-stage .ed-prod-card-old-price,
#product-carousel-stage .ed-prod-card-total-sub,
#full-products-grid .ed-prod-card-price,
#full-products-grid .ed-prod-card-old-price,
#full-products-grid .ed-prod-card-total-sub {
  display: none;
}
#product-carousel-stage .ed-prod-qty-selector,
#product-carousel-stage .ed-prod-order-btn,
#full-products-grid .ed-prod-qty-selector,
#full-products-grid .ed-prod-order-btn {
  display: none;
}
.rb-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.rb-btn {
  flex: 1 1 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.rb-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(15, 23, 42, 0.35);
}
.rb-btn-wa {
  background: #25d366;
  color: #ffffff;
}
.rb-btn-store {
  background: #edaa28;
  color: #111827;
}

/* ==========================================================================
   8. OWNER CHROME TWEAKS (2026-10-21, owner's direct instruction)
   - The brand logo leaves the bottom pill and sits in the TOP-LEFT corner
     of the viewport (elite-chrome.js clones it to body level; the original
     inside the pill is hidden by the :has rule below + the script).
   - Get Started / account UI can NEVER render again on the public site:
     every auth container is force-hidden, whichever script tries to fill
     it. (The containers are empty by design on this portfolio site.)
   ========================================================================== */
#header-auth-container,
#drawer-auth-container,
#mobile-auth-container,
#mobile-drawer-auth-container {
  display: none !important;
}
#main-header a:has(> img.ed-header-logo) {
  display: none !important;
}
.rb-top-logo {
  position: fixed;
  top: 12px;
  left: 14px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
}
.rb-top-logo img {
  height: 42px;
  width: auto;
  display: block;
}
@media (max-width: 767px) {
  .rb-top-logo {
    top: 10px;
    left: 10px;
  }
  .rb-top-logo img {
    height: 34px;
  }
}

/* ==========================================================================
   9. MOBILE CHROME — saifali.site reference (owner's screenshots, 2026-10-21)
   Mobile ONLY (<=767px). Desktop keeps the phase-4/6 layout untouched.
   - TOP: full-width black bar — logo left, Menu button right (the site's
     own #main-header becomes the bar; its nav leaves the bar because the
     links live in the bottom pill instead).
   - BOTTOM: floating black pill (.rb-mobile-nav, built by elite-chrome.js)
     with the page links — Home (house icon, gold when active), Products,
     Deliveries, About, Contact — and a gold WhatsApp button at the end.
     The row scrolls sideways like the reference.
   - MENU: the site's drawer goes full-screen with big bold links,
     hairline separators, and the support email at the bottom.
   ========================================================================== */
.rb-mobile-nav {
  display: none;
}
.rb-drawer-foot {
  margin-top: 2.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
@media (max-width: 767px) {
  #main-header.ed-floating-dark-header {
    top: 0 !important;
    bottom: auto !important;
    left: 0;
    transform: none !important;
    width: 100%;
    max-width: none;
    border-radius: 0;
    margin: 0;
  }
  #main-header a:has(> img.ed-header-logo) {
    display: inline-flex !important;
  }
  #main-header nav {
    display: none !important;
  }
  .rb-top-logo {
    display: none !important;
  }
  body {
    padding-top: 78px;
    padding-bottom: 96px;
  }
  .rb-mobile-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 65;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 96vw;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(11, 13, 17, 0.94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 10px;
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.35);
  }
  .rb-mobile-nav::-webkit-scrollbar {
    display: none;
  }
  .rb-mobile-nav a {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border-radius: 999px;
  }
  .rb-mobile-nav a svg {
    width: 16px;
    height: 16px;
    flex: none;
  }
  .rb-mobile-nav a.rb-active {
    color: #edaa28;
  }
  .rb-mobile-nav a.rb-mnav-cta {
    background: #edaa28;
    color: #111827;
    font-weight: 600;
    margin-left: 4px;
  }
  #mobile-menu-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  #mobile-menu-drawer .ed-drawer-nav-item {
    font-size: 1.85rem;
    font-weight: 700;
    padding: 1.05rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
  }
}

/* ==========================================================================
   10. MOBILE TOP-BAR REFINEMENTS (owner, 2026-10-21)
   - The Menu button belongs at the TOP-RIGHT of the mobile top bar
     (the bar's content was packing to the left, next to the logo).
   - Keep a clear GAP between the top bar (logo) and the hero section —
     the hero was sitting flush against the bar.
   ========================================================================== */
@media (max-width: 767px) {
  #main-header > div {
    justify-content: space-between;
    width: 100%;
  }
  body {
    padding-top: 118px;
  }
}

/* ==========================================================================
   11. HERO TYPOGRAPHY FIX — mobile/tablet (owner, 2026-10-21)
   Pre-existing defect: the hero headline's size classes (text-3.5xl /
   sm:text-5xl / md:text-5.5xl) do not exist in the site's compiled CSS —
   only the desktop lg size (3.85rem) does. Below desktop width the
   headline fell back to the browser default (~32px) and the description
   to 14px, which reads far too small on a phone. These rules give the
   hero a proper fluid size under desktop width; desktop is untouched.
   ========================================================================== */
@media (max-width: 1023px) {
  .ed-hero-section .ed-hero-text-animate h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    line-height: 1.12;
  }
}
@media (max-width: 767px) {
  .ed-hero-section .ed-hero-text-animate p {
    font-size: 1rem;
    line-height: 1.75;
  }
}

/* ==========================================================================
   12. CURRENCY SWITCHER REMOVED (owner, 2026-10-21)
   The PKR/USD switcher block was removed from the Products page markup;
   these rules guarantee no currency switcher surface can render anywhere
   else either (dropdown, toggle buttons, modal variants).
   ========================================================================== */
#public-currency-wrapper,
#public-currency-btn,
#public-currency-dropdown,
.ed-currency-wrapper,
.ed-currency-dropdown,
[data-currency-toggle] {
  display: none !important;
}