/**
 * GELATIN LABS — "Get Your Film to the Lab" cart section
 * =======================================================
 * Section above Cart Totals on the cart page. Intake-method picker
 * + conditional prepaid-mailing-label CTA.
 *
 * Visual language is borrowed from cart-page-overhaul.css — dark
 * cards (#242424), white text, gold accents (#FDCE31), korolev
 * uppercase headings, Lexend body, pill-shaped buttons. The section
 * inherits the CSS variables declared on .wp-block-woocommerce-cart
 * by cart-page-overhaul.css (gl-gold / gl-card / gl-border / gl-text /
 * gl-radius / gl-ease) so it matches the rest of the cart automatically.
 *
 * Per CLAUDE.md design rule: no edge/side accent borders. Full borders
 * or backgrounds only.
 *
 * Loaded by: gl-get-film-to-lab-2026-05-18.php (WPCode snippet)
 * Companion JS: get-film-to-lab-2026-05-18.js
 *
 * Created: 2026-05-18
 */

/* ------------------------------------------------------------------
   Section card — placed as a full-width band ABOVE the YOUR ORDER
   heading on the cart page. Matches the sidebar / cart-items card
   treatment. Constrained to the same 1200px max-width as the cart
   block so it aligns with everything below it.
   ------------------------------------------------------------------ */
body.woocommerce-cart .gl-gfttl-section,
.wp-block-woocommerce-cart .gl-gfttl-section {
  background: var(--gl-card, #242424) !important;
  border: 1px solid var(--gl-border, rgba(255,255,255,0.06)) !important;
  border-radius: var(--gl-radius, 16px) !important;
  padding: 24px !important;
  max-width: 1200px !important;
  margin: 24px auto 12px !important;
  font-family: Lexend, system-ui, sans-serif !important;
  color: var(--gl-text, #ffffff) !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   Heading + subhead — korolev uppercase like the cart's other headings
   ------------------------------------------------------------------ */
.gl-gfttl-heading {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2.4vw, 22px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.2 !important;
}
.gl-gfttl-subhead {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 18px 0 !important;
}

/* ------------------------------------------------------------------
   Picker dropdown — dark surface, white text, gold focus ring
   ------------------------------------------------------------------ */
.gl-gfttl-picker-wrap {
  display: block !important;
  margin-bottom: 16px !important;
}
.gl-gfttl-picker {
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  background-color: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffffff' fill-opacity='0.55' d='M1.5 1.5L6 6l4.5-4.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  padding-right: 42px !important;
  transition: border-color 0.16s var(--gl-ease, ease), background-color 0.16s var(--gl-ease, ease) !important;
}
.gl-gfttl-picker:hover {
  border-color: rgba(253,206,49,0.3) !important;
  background-color: #2f2f2f !important;
}
.gl-gfttl-picker:focus,
.gl-gfttl-picker:focus-visible {
  outline: none !important;
  border-color: #FDCE31 !important;
  background-color: #2f2f2f !important;
  box-shadow: 0 0 0 3px rgba(253,206,49,0.15) !important;
}
/* Native <option> styling — dark to match the trigger.
 * Most browsers ignore this on the option list itself but Firefox respects it. */
.gl-gfttl-picker option {
  background: #242424 !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------------
   Conditional block (label CTA or ✓ confirmation)
   ------------------------------------------------------------------ */
.gl-gfttl-block {
  /* Display managed by JS — block when content, empty otherwise */
}

/* Label CTA — prominent, gold solid button (primary action energy) */
.gl-gfttl-cta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px 20px !important;
  background: rgba(253,206,49,0.06) !important;
  border: 1px solid rgba(253,206,49,0.18) !important;
  border-radius: var(--gl-radius-sm, 12px) !important;
}
.gl-gfttl-cta-headline {
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #FDCE31 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.gl-gfttl-cta-body {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 !important;
}
.gl-gfttl-cta-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

/* Gold pill button — matches the "Proceed to Checkout" primary style */
.gl-gfttl-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 22px !important;
  background: #FDCE31 !important;
  color: #1b1b1b !important;
  font-family: korolev, system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: filter 0.16s var(--gl-ease, ease), transform 0.12s var(--gl-ease, ease) !important;
}
.gl-gfttl-cta-btn:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
.gl-gfttl-cta-btn:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
}
.gl-gfttl-cta-btn[aria-disabled="true"],
.gl-gfttl-cta-btn.is-disabled {
  pointer-events: none !important;
  opacity: 0.55 !important;
  transform: none !important;
  filter: none !important;
}
/* Reserved for V2 price chip — V1 JS doesn't emit `.gl-gfttl-cta-price` */
.gl-gfttl-cta-price {
  font-family: Lexend, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 500 !important;
}

/* ------------------------------------------------------------------
   Confirmation ✓ block — quiet success state, gold accent (no green
   to avoid introducing a fourth brand color)
   ------------------------------------------------------------------ */
.gl-gfttl-confirm {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  background: rgba(253,206,49,0.06) !important;
  border: 1px solid rgba(253,206,49,0.18) !important;
  border-radius: var(--gl-radius-sm, 12px) !important;
  font-family: Lexend, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
}
.gl-gfttl-confirm-icon {
  display: inline-flex !important;
  width: 22px !important;
  height: 22px !important;
  background: #FDCE31 !important;
  color: #1b1b1b !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   Responsive — at ≤ 900px the cart stacks the sidebar; our section
   stays full-width and the CTA button goes full-width on small screens
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .wp-block-woocommerce-cart .gl-gfttl-section,
  body.woocommerce-cart .gl-gfttl-section {
    padding: 20px 18px !important;
    margin: 16px 0 !important;
  }
  .gl-gfttl-cta {
    padding: 16px 16px !important;
  }
  .gl-gfttl-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gl-gfttl-cta-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}