/*
 * Gift voucher page (templates/default/giftvoucher.php).
 * Loaded in <head> by index::gift_voucher() after destination_v2.css; every
 * rule is scoped to .gift-v2. Same conventions as css/data_calculator.css:
 * white cards, neutral grey fills and borders, navy for accents (step
 * numbers, icons, links). Brand pink is kept for main CTA buttons only; the
 * Gift Up iframe draws its own buy button, so none is used here.
 */

.gift-v2 {
   --gv-soft: #F4F5F7;
   --gv-navy: #14183A;
   --gv-border: #E6E8EC;
   --gv-text2: #6B6B6B;
   --gv-text3: #8A8A8A;
   --gv-shadow: 0 8px 24px rgba(20, 24, 58, 0.06);
}

.gift-v2 .gv-hero-copy {
   margin-top: 16px;
   max-width: 720px;
}

.gift-v2 .dv2-hero h1 {
   margin: 0;
}

/* ---------------------------------------------------------------- */
/* Layout                                                           */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   margin-top: 16px;
}

.gift-v2 .gv-side {
   display: none;
}

@media (min-width: 960px) {
   .gift-v2 .gv-layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
      gap: 24px;
      align-items: start;
      margin-top: 28px;
   }

   .gift-v2 .gv-side {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 96px;
   }

   .gift-v2 .gv-steps-compact {
      display: none;
   }
}

/* ---------------------------------------------------------------- */
/* Cards and type                                                   */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-card {
   box-sizing: border-box;
   padding: 18px 20px;
   background: #fff;
   border: 1px solid var(--gv-border);
   border-radius: 20px;
   box-shadow: var(--gv-shadow);
}

.gift-v2 .gv-h2 {
   margin: 0 0 14px;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
}

.gift-v2 .gv-num {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--gv-navy);
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
}

/* ---------------------------------------------------------------- */
/* Mobile steps row                                                 */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-steps-compact {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
}

.gift-v2 .gv-steps-compact li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 10px 12px;
   background: #fff;
   border: 1px solid var(--gv-border);
   border-radius: 14px;
   font-size: 13px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--gv-navy);
}

.gift-v2 .gv-steps-compact .gv-num {
   width: 24px;
   height: 24px;
   font-size: 12px;
}

/* ---------------------------------------------------------------- */
/* Widget card and loading placeholder                              */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-widget {
   min-height: 560px;
   padding: 12px;
}

.gift-v2 .gv-widget.is-loaded {
   min-height: 0;
}

.gift-v2 .gift-up-target {
   width: 100%;
}

.gift-v2 .gift-up-target iframe {
   display: block;
   max-width: 100%;
}

.gift-v2 .gv-skeleton {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 12px;
}

.gift-v2 .gv-sk-line,
.gift-v2 .gv-sk-chip,
.gift-v2 .gv-sk-box,
.gift-v2 .gv-sk-btn {
   border-radius: 10px;
   background: linear-gradient(90deg, var(--gv-soft) 0%, #FBFBFC 50%, var(--gv-soft) 100%);
   background-size: 200% 100%;
   animation: gv-shimmer 1.4s ease-in-out infinite;
}

.gift-v2 .gv-sk-line {
   height: 14px;
}

.gift-v2 .gv-sk-title {
   width: 55%;
   height: 22px;
}

.gift-v2 .gv-sk-short {
   width: 40%;
}

.gift-v2 .gv-sk-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
}

.gift-v2 .gv-sk-chip {
   height: 44px;
}

.gift-v2 .gv-sk-box {
   height: 120px;
}

.gift-v2 .gv-sk-btn {
   height: 48px;
   border-radius: 999px;
}

.gift-v2 .gv-sk-note,
.gift-v2 .gv-fallback {
   margin: 0;
   font-size: 13px;
   color: var(--gv-text2);
   text-align: center;
}

.gift-v2 .gv-fallback {
   padding: 24px 12px;
   font-size: 14px;
}

@keyframes gv-shimmer {
   0% { background-position: 100% 0; }
   100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
   .gift-v2 .gv-sk-line,
   .gift-v2 .gv-sk-chip,
   .gift-v2 .gv-sk-box,
   .gift-v2 .gv-sk-btn {
      animation: none;
   }
}

@media (min-width: 960px) {
   .gift-v2 .gv-widget {
      min-height: 640px;
      padding: 16px;
   }
}

/* ---------------------------------------------------------------- */
/* How it works (desktop)                                           */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-steps {
   list-style: none;
   margin: 0;
   padding: 0;
}

.gift-v2 .gv-steps li {
   position: relative;
   display: flex;
   gap: 12px;
   margin: 0;
   padding: 0 0 18px;
}

.gift-v2 .gv-steps li:last-child {
   padding-bottom: 0;
}

/* Connector line between the numbers. */
.gift-v2 .gv-steps li:not(:last-child)::before {
   content: "";
   position: absolute;
   top: 32px;
   bottom: 4px;
   left: 13px;
   width: 2px;
   background: var(--gv-border);
}

.gift-v2 .gv-steps strong {
   display: block;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--gv-navy);
}

.gift-v2 .gv-steps span:not(.gv-num) {
   display: block;
   margin-top: 2px;
   font-size: 13px;
   line-height: 1.45;
   color: var(--gv-text2);
}

/* ---------------------------------------------------------------- */
/* Trust points                                                     */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-trust {
   display: flex;
   flex-direction: column;
   gap: 10px;
   list-style: none;
   margin: 0;
   padding: 16px 18px;
   background: var(--gv-soft);
   border: 1px solid var(--gv-border);
   border-radius: 20px;
}

.gift-v2 .gv-trust li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin: 0;
   font-size: 13px;
   line-height: 1.45;
   color: var(--gv-text2);
}

.gift-v2 .gv-trust i {
   flex: 0 0 20px;
   margin-top: 2px;
   font-size: 15px;
   text-align: center;
   color: var(--gv-navy);
}

.gift-v2 .gv-trust strong {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: var(--gv-navy);
}

/* ---------------------------------------------------------------- */
/* FAQ                                                              */
/* ---------------------------------------------------------------- */
.gift-v2 .gv-faq {
   max-width: 800px;
   margin: 40px 0 0;
}

.gift-v2 .gv-faq-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.gift-v2 .gv-faq-item {
   background: #fff;
   border: 1px solid var(--gv-border);
   border-radius: 16px;
}

.gift-v2 .gv-faq-item summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 18px;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--gv-navy);
   cursor: pointer;
   list-style: none;
}

.gift-v2 .gv-faq-item summary::-webkit-details-marker {
   display: none;
}

.gift-v2 .gv-faq-item summary i {
   flex: 0 0 auto;
   font-size: 12px;
   color: var(--gv-text3);
   transition: transform .2s ease;
}

.gift-v2 .gv-faq-item[open] summary i {
   transform: rotate(180deg);
}

.gift-v2 .gv-faq-item p {
   margin: 0;
   padding: 0 18px 16px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--gv-text2);
}

.gift-v2 .gv-faq-item a,
.gift-v2 .gv-more a {
   font-weight: 600;
   color: var(--gv-navy);
   text-decoration: underline;
}

.gift-v2 .gv-more {
   margin: 18px 0 0;
   font-size: 14px;
   color: var(--gv-text2);
}