/* File: car-rental-wda-child/assets/css/pages/thankyou.css */

.dag-thankyou{
  --ty-radius: 18px;
  --ty-pad: clamp(14px, 1.8vw, 18px);
  --ty-gap: clamp(12px, 1.6vw, 16px);

  padding-block: 0;
  background: var(--dag-bg);
  color: var(--dag-text);
}

/* ========= HERO (like reference: centered, one-screen feel) ========= */
.thankyou-hero{
  position: relative;
  padding: clamp(26px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--dag-border);
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
  align-items: center;

  /* dark + blobs */
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(96,165,250,.16), transparent 62%),
    radial-gradient(900px 520px at 85% 30%, rgba(34,197,94,.12), transparent 64%),
    radial-gradient(700px 420px at 70% 86%, rgba(96,165,250,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}

.thankyou-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 360px at 22% 28%, rgba(96,165,250,.10), transparent 70%),
    radial-gradient(520px 360px at 78% 36%, rgba(34,197,94,.08), transparent 72%);
  filter: blur(2px);
  opacity: .9;
  pointer-events: none;
}

.thankyou-hero__inner{
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;

  max-width: 78ch;
  margin-inline: auto;
  width: 100%;
}

/* Icon circle (we add it via pseudo, no HTML changes) */
.thankyou-hero__inner::before{
  content:"";
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at center,
      rgba(96,165,250,.95) 0 6px,
      rgba(96,165,250,.18) 7px 28px,
      rgba(255,255,255,.02) 29px 100%);
  box-shadow:
    0 18px 48px rgba(0,0,0,.35),
    0 0 0 6px rgba(96,165,250,.08);
}

/* Kicker */
.thankyou-hero__kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dag-muted);
}

/* Title like reference: uppercase + tracking */
.thankyou-hero__title{
  margin: 0;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Subtitle like reference: short, uppercase-ish */
.thankyou-hero__lead{
  margin: 0;
  max-width: 64ch;
  color: var(--dag-muted);
  line-height: 1.55;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(13px, 12px + .35vw, 15px);
}

/* Actions: big pill buttons, centered */
.thankyou-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.thankyou-hero__actions .dag-btn{
  padding: 12px 18px;
  border-radius: 999px;
  min-width: 210px;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

/* Secondary outline look */
.thankyou-hero__actions .dag-btn--ghost{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

.thankyou-hero__actions .dag-btn--ghost:hover{
  background: rgba(255,255,255,.05);
}

/* Chips: keep but make subtle (can be hidden if you want) */
.thankyou-hero__chips{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.thankyou-chip{
  font-size: 13px;
  color: var(--dag-text);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* ========= BELOW HERO (keep your blocks, but calmer + centered) ========= */
.thankyou-grid{
  margin-top: 0;
  padding-block: clamp(16px, 2.6vw, 30px);
}

/* Support BOTH possible wrappers */
:where(.thankyou-grid,.thankyou-grid__inner){
  display: grid;
  gap: var(--ty-gap);
  align-items: start;
}

:where(.thankyou-grid,.thankyou-grid__inner) > *{
  min-width: 0;
}

@media (min-width: 980px){
  :where(.thankyou-grid,.thankyou-grid__inner){
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 18px;
  }

  /* Sticky right panel if it’s exactly the 2nd/last item */
  :where(.thankyou-grid,.thankyou-grid__inner) > :is(.thankyou-panel, .dag-card):nth-child(2):last-child{
    position: sticky;
    top: 96px;
    align-self: start;
  }

  /* FAQ/extra across full width if inside same grid */
  :where(.thankyou-grid,.thankyou-grid__inner) > :is(.thankyou-faq, .thankyou-extra){
    grid-column: 1 / -1;
  }
}

/* Panels */
.thankyou-panel,
.thankyou-faq__card,
.thankyou-extra__card{
  padding: var(--ty-pad);
  border-radius: var(--ty-radius);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
}

.thankyou-panel:hover,
.thankyou-faq__card:hover,
.thankyou-extra__card:hover{
  transform: none;
  box-shadow: var(--dag-shadow-sm);
  border-color: rgba(255,255,255,.14);
}

/* Panel head */
.thankyou-panel__head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.thankyou-badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  border: 1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
  box-shadow: 0 0 0 5px rgba(34,197,94,.07);
}

.thankyou-panel__title{
  margin: 0 0 4px;
  font-size: clamp(18px, 2.0vw, 22px);
  letter-spacing: -0.01em;
}

.thankyou-panel__sub{
  margin: 0;
  color: var(--dag-muted);
  line-height: 1.65;
}

/* Steps */
.thankyou-steps{
  margin: 10px 0 0;
  padding-left: 1.15em;
  display: grid;
  gap: 10px;
  line-height: 1.65;
}

.thankyou-steps strong{
  display: inline-block;
  margin-right: 6px;
  color: var(--dag-text);
  font-weight: 950;
}

.thankyou-steps span{
  color: var(--dag-muted);
}

/* Redirect row */
.thankyou-redirect{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.thankyou-timer{
  margin: 0;
  color: var(--dag-muted);
  font-size: 13px;
  font-weight: 900;
}

#dagThankYouSeconds{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.28);
  background: rgba(96,165,250,.12);
  color: var(--dag-text);
}

.thankyou-stop{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--dag-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 950;
  cursor: pointer;
}

.thankyou-stop:hover{ background: rgba(255,255,255,.06); }
.thankyou-stop:focus-visible{ outline: none; box-shadow: var(--dag-ring); }
.thankyou-stop:disabled{ opacity: .6; cursor: default; }

/* Side panel links */
.thankyou-actions-vertical{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.thankyou-link{
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

.thankyou-link__title{
  color: var(--dag-link);
  font-weight: 950;
  letter-spacing: -0.01em;
}

.thankyou-link__meta{
  color: var(--dag-muted);
  font-size: 13px;
  line-height: 1.55;
}

.thankyou-link:hover{
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.14);
}

.thankyou-link:hover .thankyou-link__title{
  color: var(--dag-link-hover);
  text-decoration: underline;
}

.thankyou-link:focus-visible{
  outline: none;
  box-shadow: var(--dag-ring);
}

.thankyou-divider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 14px 0;
}

.thankyou-subtitle{
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.thankyou-contact{
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 6px;
}

.thankyou-contact__link{
  color: var(--dag-link);
  text-decoration: none;
  font-weight: 950;
}

.thankyou-contact__link:hover{
  color: var(--dag-link-hover);
  text-decoration: underline;
}

.thankyou-contact__link:focus-visible{
  outline: none;
  box-shadow: var(--dag-ring);
  border-radius: 6px;
}

.thankyou-small{
  margin: 10px 0 0;
  color: var(--dag-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* FAQ: cleaner accordion */
.thankyou-faq{
  margin-top: 14px;
}

.thankyou-faq__title{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.thankyou-faq__list{
  display: grid;
  gap: 10px;
}

.thankyou-faq__item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 10px 12px;
  transition: background .15s ease, border-color .15s ease;
}

.thankyou-faq__item:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
}

.thankyou-faq__q{
  cursor: pointer;
  font-weight: 950;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.thankyou-faq__q::-webkit-details-marker{ display: none; }

.thankyou-faq__q::after{
  content: "›";
  transform: rotate(90deg);
  opacity: .75;
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease, opacity .15s ease;
}

details[open] > .thankyou-faq__q::after{
  transform: rotate(-90deg);
  opacity: 1;
}

.thankyou-faq__q:focus-visible{
  outline: none;
  box-shadow: var(--dag-ring);
  border-radius: 10px;
  padding: 6px 8px;
  margin: -6px -8px;
}

.thankyou-faq__a{
  margin-top: 10px;
  color: var(--dag-muted);
  line-height: 1.65;
}

.thankyou-faq__a p{ margin: 0 0 .9em; }
.thankyou-faq__a ul{ margin: 0; padding-left: 1.25em; }
.thankyou-faq__a li{ margin: .35em 0; }

/* Extra editor content */
.thankyou-extra{
  margin-top: 14px;
}

.thankyou-extra__content{
  max-width: var(--dag-max-prose, 78ch);
  margin-inline: auto;
}

.thankyou-extra__content > *:first-child{ margin-top: 0; }
.thankyou-extra__content :where(h2,h3){
  margin-top: 1.5em;
  letter-spacing: -0.01em;
}
.thankyou-extra__content :where(p){ line-height: 1.75; }
.thankyou-extra__content :where(ul,ol){ padding-left: 1.25em; }
.thankyou-extra__content :where(li){
  margin: .35em 0;
  color: var(--dag-muted);
}

/* Mobile */
@media (max-width: 540px){
  .thankyou-hero{
    min-height: 0;
    padding: 30px 0 24px;
  }

  .thankyou-hero__title{
    letter-spacing: .10em;
  }

  .thankyou-hero__actions .dag-btn{
    width: 100%;
    min-width: 0;
  }

  .thankyou-redirect{
    align-items: stretch;
  }

  .thankyou-stop{
    width: 100%;
    justify-content: center;
  }
}

/* Print */
@media print{
  .thankyou-hero__actions,
  .thankyou-stop{
    display: none !important;
  }
  .dag-thankyou{
    padding-block: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .dag-card,
  .thankyou-panel,
  .thankyou-faq__card,
  .thankyou-extra__card{
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
  }
  .thankyou-hero{
    background: #fff !important;
    min-height: 0 !important;
  }
}