/* ================================================================
   BUSINESS CARD SPECIAL OFFER — CAMPAIGN STYLES
   Loaded only by card-offer.html, business-card-details.html and
   business-card-order-confirmed.html. Does not touch style.css —
   nothing here can affect any other page on the site. Reuses the same
   design tokens (colours, fonts, radii) already defined in style.css,
   which loads first on every page that includes this file.
   ================================================================ */

/* ---------- Offer status banner (scheduled / active / expired) ---------- */
.offer-banner{text-align:center;font-weight:700;font-size:13.5px;letter-spacing:.02em;padding:11px 16px;color:var(--white);}
.offer-banner.state-active{background:var(--red);}
.offer-banner.state-scheduled{background:#2b2b2b;}
.offer-banner.state-expired{background:var(--black);border-bottom:1px solid rgba(255,255,255,.15);}

/* ---------- Business Card Details: section titles + file-input hint ---------- */
.details-section-title{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--black);margin:34px 0 14px;padding-top:20px;border-top:1px solid var(--grey-line);}
.details-section-title:first-of-type{margin-top:6px;padding-top:0;border-top:none;}
.field-hint{font-size:12px;color:var(--grey-dark);margin-top:6px;}

/* ---------- Hero: two-column layout (mirrors the site's existing
   .careers-hero-grid pattern), tagline box, price chip, note line ----------
   Column ratio widened from 1.15/.85 to 1/1 (Round 9) to give the hero photo
   more room — requested to read larger/more prominent. ---------- */
.offer-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}

/* ---------- Hero photo cutout (Round 9): the supplied hero image is a
   transparent PNG (no background to flatten), so — unlike the boxed/shadowed
   treatment .hero-image-real normally gives a photo — this variant drops the
   card box entirely and lets the image sit directly on the dark hero
   gradient, at its own natural aspect ratio (no forced crop/frame). ---------- */
.hero-image-cutout{border-radius:0;box-shadow:none;overflow:visible;width:100%;margin:0 auto;}
.hero-image-cutout img{border-radius:0;width:100%;height:auto;object-fit:contain;}
.offer-hero .highlight-statement{color:var(--black);}
.offer-price-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(228,70,80,.14);border:1px solid rgba(228,70,80,.4);color:var(--white);font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:999px;margin-top:20px;}
.offer-price-chip b{color:var(--red);font-family:var(--font-head);font-size:16px;}
.offer-hero-note{margin-top:22px;font-size:13px;color:#C9C9C9;letter-spacing:.02em;}
.offer-hero-note.artwork-note{color:var(--white);font-weight:600;}

/* ---------- Was/now value comparison (reuses style.css's existing
   .offer-price-row/.was/.now pattern for consistency with the rest of the
   site; the hero override below is needed because that pattern was designed
   for a light background and this hero is dark). ---------- */
.offer-price-row{margin-top:18px;}
.offer-hero .offer-price-row{margin-top:20px;}
.offer-hero .offer-price-row .was{color:#C9C9C9;}
.offer-hero .offer-price-row .now{color:var(--white);}

/* ---------- Combined-value breakdown (Package Value section) ---------- */
.value-compare-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px;flex-wrap:wrap;}
.value-compare-item{text-align:center;}
.value-compare-label{display:block;font-size:12.5px;color:var(--grey-dark);margin-bottom:4px;}
.value-compare-amount{display:block;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--black);}
.value-compare-plus{font-size:20px;font-weight:700;color:var(--grey-dark);}

/* ---------- Artwork-requirement notices (sales page, pre-payment) ---------- */
.artwork-notice-inline{font-size:12.5px;color:var(--grey-dark);background:var(--grey-light);border-radius:10px;padding:12px 14px;margin:14px 0;}
.renewal-notice-inline{font-size:12.5px;color:var(--grey-dark);background:var(--grey-light);border-radius:10px;padding:12px 14px;margin:14px 0;}
.qual-q-hint{font-size:12.5px;color:var(--grey-dark);margin:-6px 0 12px;}

/* ---------- Image placeholders: reuses the site's existing
   .hero-image-placeholder component from style.css unmodified; ".small"
   here only scales it down for the two "What's Included" cards. ---------- */
.offer-includes-grid .hero-image-placeholder.small{aspect-ratio:3/2;max-width:360px;margin:0 auto 20px;}

/* ---------- Real photos in the two "What's Included" cards: same
   scale/centring treatment the placeholders above had, applied to the
   site's existing .hero-image-real component instead (Round 8). ---------- */
.offer-includes-grid .hero-image-real{aspect-ratio:3/2;max-width:360px;margin:0 auto 20px;}
.offer-includes-grid .hero-image-real img{width:100%;height:100%;}

/* ---------- MyECard phone photo (Round 9): this image is a tall phone
   screenshot, not 3:2 like the printed-card photo beside it, so it gets its
   own aspect ratio here instead of the 3:2 crop above — cropping a 3:2 box
   over a tall phone would cut off the buttons at the bottom of the screen. ---------- */
.offer-includes-grid .hero-image-real.hero-image-tall{aspect-ratio:489/978;max-width:280px;}
.offer-includes-grid .hero-image-real.hero-image-tall img{object-fit:contain;}

/* ---------- What's included ---------- */
.offer-includes-grid .compare-card h3{margin-bottom:4px;}
.offer-card-sub{font-size:13px;color:var(--grey-dark);margin-bottom:16px;}

/* ---------- Value / price card ---------- */
.value-card{max-width:560px;margin:0 auto;border:1px solid var(--grey-line);border-radius:var(--radius-card);padding:32px 34px;background:var(--white);}
.offer-window-note{text-align:center;font-size:13px;color:var(--grey-dark);margin-top:16px;}

/* ---------- Four-step "How it works" variant (reuses .steps-grid) ---------- */
.steps-grid-4{grid-template-columns:repeat(4,1fr);}

/* ---------- Qualification panel ---------- */
.qual-panel{max-width:640px;margin:0 auto;border:1px solid var(--grey-line);border-radius:var(--radius-card);padding:36px 34px;background:var(--white);}
.qual-question{margin-bottom:26px;}
.qual-q-label{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--black);margin-bottom:12px;}
.qual-opts{display:flex;flex-wrap:wrap;gap:10px;}
.qual-opts-col{flex-direction:column;}
.qual-opt{background:var(--white);border:1.5px solid var(--grey-line);color:var(--black);padding:13px 18px;border-radius:12px;font-size:14.5px;font-weight:600;font-family:var(--font-body);cursor:pointer;text-align:left;transition:border-color .2s ease,background .2s ease,color .2s ease;min-height:48px;}
.qual-opts:not(.qual-opts-col) .qual-opt{flex:1 1 auto;text-align:center;}
.qual-opt:hover{border-color:var(--red);}
.qual-opt.active{border-color:var(--red);background:rgba(228,70,80,.08);color:var(--red-dark);}
.qual-question.invalid .qual-opts{outline:1.5px solid var(--red);outline-offset:6px;border-radius:14px;}
.qual-submit-btn{width:100%;margin-top:6px;}

/* ---------- Qualification results ---------- */
.qual-result{display:none;margin-top:30px;padding-top:30px;border-top:1px solid var(--grey-line);}
.qual-result.show{display:block;}
.qual-result-badge{width:48px;height:48px;border-radius:50%;background:rgba(228,70,80,.1);border:1.5px solid var(--red);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:16px;}
.qual-result h3{font-size:20px;margin-bottom:10px;}
.qual-result > p{color:var(--grey-dark);font-size:14.5px;margin-bottom:14px;}
.qual-result-list{display:grid;gap:9px;margin-bottom:22px;}
.qual-result-list li{display:flex;gap:10px;font-size:14.5px;color:var(--grey-dark);}
.qual-result-list li::before{content:"✓";color:var(--red);font-weight:800;flex:none;}
.qual-result-price{background:var(--grey-light);border-radius:14px;padding:20px 22px;margin-bottom:20px;display:flex;flex-direction:column;gap:2px;}
.qual-result-price-label{font-size:13px;font-weight:700;color:var(--grey-dark);text-transform:uppercase;letter-spacing:.06em;}
.qual-result-price-amount{font-family:var(--font-head);font-size:32px;color:var(--red);}
.qual-result-price-gst{font-size:12.5px;color:var(--grey-dark);}
.qual-pay-btn{width:100%;}
.stripe-reassurance{text-align:center;font-size:12.5px;color:var(--grey-dark);margin-top:12px;}

/* ---------- Order-confirmed page: next-steps + contact block inside
   the existing dark .thankyou-hero. Overrides only the inherited
   .thankyou-hero p rule (max-width/centering) for the elements added
   here — nothing about .thankyou-hero itself changes for thank-you.html. ---------- */
.confirmed-next-steps{margin-top:56px;text-align:left;}
.confirmed-next-steps h2{color:var(--white);font-size:22px;text-align:center;margin-bottom:28px;}
.confirmed-next-steps .step-card h3{color:var(--white);}
.confirmed-next-steps .step-card p{color:#C9C9C9;max-width:none;margin:0;text-align:left;}
.confirmed-next-steps .step-num{background:var(--red);}
.confirmed-contact{margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);}
.confirmed-contact p{color:#CFCFCF;max-width:none;margin:0 0 6px;}
.confirmed-contact a{color:var(--white);text-decoration:underline;}

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--white);border-top:1px solid var(--grey-line);padding:12px 16px;box-shadow:0 -8px 24px -10px rgba(0,0,0,.15);display:none;transform:translateY(100%);transition:transform .25s ease;}
.mobile-sticky-cta.show{transform:translateY(0);}
.mobile-sticky-cta .btn{width:100%;}

/* ---------- Anchor-scroll offset ----------
   header.site is position:sticky (top:0) in style.css. Without this, jumping
   to #qualify / #whats-included / #price (hero CTAs, sticky bar) lands the
   section right under the sticky header, hiding its heading. Scoped to this
   page's own anchor targets only — no shared page is affected. Values match
   style.css's own nav-row height (84px desktop / 70px mobile, see its
   767px breakpoint) plus a little breathing room. ---------- */
#qualify, #whats-included, #myecard-in-action, #price{scroll-margin-top:104px;}

/* ---------- Business Card Details: payment-verification gate ----------
   Shown while business-card-details.js confirms the Stripe payment via
   check-payment-status.php, before the actual details form is revealed. ---------- */
.payment-check-panel{max-width:560px;margin:0 auto;text-align:center;border:1px solid var(--grey-line);border-radius:var(--radius-card);padding:48px 34px;background:var(--white);}
.payment-check-panel h2{font-size:20px;margin-bottom:10px;}
.payment-check-panel p{color:var(--grey-dark);font-size:14.5px;margin-bottom:18px;}
.payment-check-spinner{width:34px;height:34px;border:3px solid var(--grey-line);border-top-color:var(--red);border-radius:50%;margin:0 auto 20px;animation:cd-spin 0.8s linear infinite;}
@keyframes cd-spin{to{transform:rotate(360deg);}}
.payment-check-panel .btn{margin-top:6px;}

/* Breakpoints below match style.css's own (1199px / 991px / 767px) so this
   page's grids collapse in step with the rest of the site rather than at
   different widths of their own. */
@media (max-width:1199px){
  .steps-grid-4{grid-template-columns:1fr 1fr;}
  .offer-hero-grid{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:991px){
  .value-card{padding:26px 22px;}
  .qual-panel{padding:28px 20px;}
}

@media (max-width:767px){
  .offer-includes-grid{grid-template-columns:1fr;}
  .steps-grid-4{grid-template-columns:1fr;}
  .qual-opts:not(.qual-opts-col){flex-direction:column;}
  .qual-opts:not(.qual-opts-col) .qual-opt{text-align:left;}
  .mobile-sticky-cta{display:block;}
  #qualify, #whats-included, #myecard-in-action, #price{scroll-margin-top:90px;}
}