/*
================================================================
Space Vanta Theme 2.0
Module: PDP service stage (policies + FAQ) and its drawer
Path: public/pdp/service.css
Version: PDP-SERVICE-003

ONE card on the stage at a time; chips switch it. Colour weight:
silver 52 / paper 28 / gunmetal 14 / blue 6; the FAQ card is the one
gunmetal face, so "help" is easy to find. The stage keeps the height
of its tallest card, so nothing jumps when it turns.
Drawer (desktop) / bottom sheet (phone) reuse modal.js hooks:
[data-product-policy-trigger] / [data-product-policy-modal].
================================================================
*/

.pds { --pd-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace; position: relative; min-width: 0; display: grid; gap: 14px; }
.pds, .pds *, .pds *::before, .pds *::after { box-sizing: border-box; }
.pds[hidden] { display: none; }

.pds__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; }
.pds__heading { min-width: 0; }
.pds__eyebrow { display: block; margin-bottom: 8px; font-family: var(--pd-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--svd-seam, #1d6bff); }
.pds__title { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--svd-ink, #252321); }
.pds__seam { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(var(--svd-line, #ddd6c9), var(--svd-line, #ddd6c9)) 0 50% / 100% 1px no-repeat; }
.pds__seam::after { content: ""; position: absolute; left: 0; bottom: 0; width: 148px; height: 2px; background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff)); }
.pds__ctrl { display: flex; gap: 6px; }
.pds__arrow {
  position: relative; width: 34px; height: 30px; padding: 0; border: 0; cursor: pointer; background: var(--svd-face-deep, #313540);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: background .2s ease, opacity .2s ease;
}
.pds__arrow i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.pds__arrow--next i { margin-left: -6px; transform: rotate(-135deg); }
.pds__arrow:hover { background: var(--svd-seam, #1d6bff); }
.pds__arrow:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }

/* chips: which topic is on the stage */
.pds__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pds__tab {
  position: relative; margin: 0; padding: 9px 14px 9px 12px; cursor: pointer; border: 0; border-radius: 0;
  font-family: var(--pd-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--svd-muted, #5f574d);
  background: transparent; box-shadow: inset 0 0 0 1px #d6d1c8;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pds__tab:hover { color: var(--svd-ink, #252321); box-shadow: inset 0 0 0 1px var(--svd-seam, #1d6bff); }
.pds__tab.is-on { color: #fff; background: var(--svd-face-deep, #313540); box-shadow: none; }
.pds__tab:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }

/* Policy | FAQ toggle: two plates, one is always pressed in */
.pds__mode { display: inline-flex; justify-self: start; padding: 3px; gap: 3px; background: var(--svd-face-soft, #efebe8); box-shadow: 0 0 0 1px #d6d1c8; clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px); }
.pds__mode[hidden] { display: none; }
.pds__mode-btn { margin: 0; padding: 10px 22px; border: 0; border-radius: 0; cursor: pointer; font-family: var(--pd-mono); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--svd-muted, #5f574d); background: transparent; transition: background .2s ease, color .2s ease; }
.pds__mode-btn:hover { color: var(--svd-ink, #252321); }
.pds__mode-btn.is-on { color: #fff; background: var(--svd-face-deep, #313540); }
.pds__mode-btn:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }
.pds__tabs[hidden], .pds__arrow[hidden] { display: none; }

/* the stage: only the active card is drawn (display, not grid stacking: works the same inside the
   theme editor's block wrappers, and always sits right under the toggle) */
.pds__track { position: relative; display: block; }
.pds.is-js .pds__track .sv-product-details-policy-item { display: none; }
.pds.is-js .pds__track .sv-product-details-policy-item.is-active { display: block; animation: pds-in .38s cubic-bezier(.2,.8,.2,1); }
@keyframes pds-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* before the script runs (or in an editor redraw): Policy only, as a compact list; FAQ stays out of sight */
.pds:not(.is-js) .pds__track { display: grid; gap: 12px; }
.pds:not(.is-js) .pds__track .sv-product-details-faq-service { display: none; }
.pds:not(.is-js) .pds__tabs, .pds:not(.is-js) .pds__mode, .pds:not(.is-js) .pds__ctrl, .pds:not(.is-js) .pds__timer { display: none; }
html .pds:not(.is-js) .sv-product-details-policy-item__trigger { min-height: 0; grid-template-rows: auto; padding: 14px 18px 14px 22px; }
html .pds:not(.is-js) .sv-product-details-policy-item__symbol { width: 40px; height: 40px; grid-row: auto; }
html .pds:not(.is-js) .sv-product-details-policy-item__signal { display: none; }
.pds[data-mode="faq"] .pds__timer { visibility: hidden; }

.pds__timer { display: none; }
/* before the script runs (or in an editor redraw): compact list, nothing tall */
html .pds:not(.is-js) .sv-product-details-policy-item__trigger { min-height: 0; grid-template-rows: auto; padding: 14px 18px 14px 22px; }
html .pds:not(.is-js) .sv-product-details-policy-item__symbol { width: 40px; height: 40px; grid-row: auto; }
html .pds:not(.is-js) .sv-product-details-policy-item__signal { display: none; }

.pds__timer { position: relative; display: block; height: 2px; background: linear-gradient(#d6d1c8, #d6d1c8) 0 50% / 100% 1px no-repeat; overflow: hidden; }
.pds__timer::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff)); }
.pds__timer.is-run::after { animation: pds-run var(--pds-dur, 7s) linear forwards; }
.pds__timer.is-paused::after { animation-play-state: paused; }
@keyframes pds-run { to { transform: scaleX(1); } }

/* the card (big) */
html .pds .sv-product-details-policy-item__trigger {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 20px; row-gap: 14px;
  width: 100%; height: 100%; min-height: 196px; padding: 24px 26px 22px 28px; border: 0; border-radius: 0; text-align: left; cursor: pointer; overflow: hidden;
  color: var(--svd-ink, #252321); background: var(--svd-face-soft, #efebe8);
  box-shadow: inset 0 0 0 1px var(--svd-hair, #fff), 0 0 0 1px #d6d1c8;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease;
}
html .pds .sv-product-details-policy-item__trigger::before {   /* seam on the left edge */
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px; height: auto; transform: none;
  background: var(--svd-seam-line-v, linear-gradient(180deg, transparent, #7dadde, #e5ffff, #1d6bff, transparent));
}
html .pds .sv-product-details-policy-item__trigger:hover { box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px var(--svd-seam, #1d6bff); background: #f4f0ec; }
html .pds .sv-product-details-policy-item__trigger:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }
html .pds .sv-product-details-policy-item__symbol { grid-row: 1 / span 2; width: 64px; height: 64px; align-self: start; }
html .pds .sv-product-details-policy-item__content { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-self: start; }
html .pds .sv-product-details-policy-item__title { font-family: var(--pd-mono); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
html .pds .sv-product-details-policy-item__description { max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--svd-muted, #5f574d); }
html .pds .sv-product-details-policy-item__signal {
  position: static; grid-column: 2; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 12px; width: auto; height: auto; border: 0; border-radius: 0; background: transparent;
  font-family: var(--pd-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--svd-seam, #1d6bff);
}
html .pds .sv-product-details-policy-item__signal::before {
  content: ""; position: static; display: block; width: 18px; height: 18px; inset: auto; box-shadow: none; transform: none; border-radius: 0;
  background: linear-gradient(var(--svd-seam, #1d6bff), var(--svd-seam, #1d6bff)) 0 50% / 100% 1.5px no-repeat, linear-gradient(var(--svd-seam, #1d6bff), var(--svd-seam, #1d6bff)) 50% 0 / 1.5px 100% no-repeat;
  transition: transform .25s ease;
}
html .pds .sv-product-details-policy-item__signal::after { content: "Read the full text"; }
html .pds .sv-product-details-policy-item__trigger:hover .sv-product-details-policy-item__signal::before { transform: rotate(90deg); box-shadow: none; }

/* the FAQ card is the dark one */
html .pds .sv-product-details-faq-service .sv-product-details-policy-item__trigger {
  color: #fff; background: var(--svd-face-deep, #313540); box-shadow: inset 0 0 0 1px var(--svd-hair-dark, rgba(255,255,255,.16));
}
html .pds .sv-product-details-faq-service .sv-product-details-policy-item__description { color: rgba(255,255,255,.74); }
html .pds .sv-product-details-faq-service .sv-policy-symbol__orbit,
html .pds .sv-product-details-faq-service .sv-policy-symbol__inner { stroke: rgba(229,255,255,.75); }
html .pds .sv-product-details-faq-service .sv-product-details-policy-item__signal { color: var(--svd-ice, #e5ffff); }
html .pds .sv-product-details-faq-service .sv-product-details-policy-item__signal::before {
  background: linear-gradient(#e5ffff, #e5ffff) 0 50% / 100% 1.5px no-repeat, linear-gradient(#e5ffff, #e5ffff) 50% 0 / 1.5px 100% no-repeat;
}
html .pds .sv-product-details-faq-service .sv-product-details-policy-item__signal::after { content: "Open the questions"; }
html .pds .sv-product-details-faq-service .sv-product-details-policy-item__trigger:hover { background: var(--svd-face-dark, #1f232b); box-shadow: inset 0 0 0 1px rgba(229,255,255,.6); }

@media (max-width: 749px) {
  .pds { gap: 12px; }
  .pds__ctrl { display: none; }
  .pds__tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .pds__tabs::-webkit-scrollbar { display: none; }
  .pds__tab { flex: none; padding: 11px 14px 11px 12px; }
  .pds__mode { display: flex; justify-self: stretch; }
  .pds__mode-btn { flex: 1; padding: 13px 10px; }
  html .pds .sv-product-details-policy-item__trigger { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; min-height: 176px; padding: 18px 16px 16px 20px; }
  html .pds .sv-product-details-policy-item__symbol { width: 48px; height: 48px; }
  html .pds .sv-product-details-policy-item__description { font-size: 14.5px; }
}
html[data-sv-motion="calm"] .pds *, html[data-sv-motion="calm"] .sv-product-details-policy-modal__dialog { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pds *, html .sv-product-details-policy-modal__dialog { animation: none !important; transition: none !important; } }

/* ---- modal base (hooks used by modal.js) ---- */
/*
Space Vanta Theme 1.0
File: public/product/details/css/policy-modal.css
Version: 1.2
Responsibility: Policy modal portal, overlay and long-form content only.
*/

.sv-product-details-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.sv-product-details-policy-modal.is-active {
    visibility: visible;
    pointer-events: auto;
}

.sv-product-details-policy-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 23, 28, .30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 360ms ease;
}

.sv-product-details-policy-modal.is-active .sv-product-details-policy-modal__overlay {
    opacity: 1;
}

.sv-product-details-policy-modal__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 48px));
    max-height: min(780px, calc(100vh - 64px));
    border: 1px solid rgba(220, 227, 233, .72);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(246, 248, 250, .95), rgba(211, 218, 225, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 28px 90px rgba(8, 14, 20, .18);
    transform: translate(-50%, -46%) scale(.97);
    opacity: 0;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease;
    overflow: hidden;
}

.sv-product-details-policy-modal.is-active .sv-product-details-policy-modal__dialog {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.sv-product-details-policy-modal__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px 22px;
    border-bottom: 1px solid rgba(72, 83, 94, .13);
}

.sv-product-details-policy-modal__eyebrow {
    margin-bottom: 10px;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(51, 60, 69, .52);
}

.sv-product-details-policy-modal__title {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: #171c21;
}

.sv-product-details-policy-modal__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(67, 77, 87, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    color: #2b333b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 240ms ease, background 240ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.sv-product-details-policy-modal__close:hover {
    border-color: rgba(89, 151, 224, .56);
    background: rgba(255, 255, 255, .68);
    transform: rotate(90deg);
}

.sv-product-details-policy-modal__close:focus-visible {
    outline: 2px solid rgba(87, 151, 226, .68);
    outline-offset: 3px;
}

.sv-product-details-policy-modal__content {
  min-height: 0;
  padding: 26px 30px 34px;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

  font-size: 13px;
  line-height: 1.8;
  color: rgba(31, 39, 47, .82);
  scrollbar-width: thin;
}

.sv-product-details-policy-modal__content p {
    margin: 0 0 1.1em;
}

.sv-product-details-policy-modal__content p:last-child {
    margin-bottom: 0;
}

.sv-product-details-policy-modal__content h3,
.sv-product-details-policy-modal__content h4 {
    margin: 1.6em 0 .65em;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #202830;
}

.sv-product-details-policy-modal__content ul,
.sv-product-details-policy-modal__content ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.sv-product-details-policy-modal__content a {
    color: #416f9e;
    text-decoration-color: rgba(65, 111, 158, .34);
    text-underline-offset: 3px;
}

@media (max-width:749px) {
    .sv-product-details-policy-modal__dialog {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    .sv-product-details-policy-modal__header {
        padding: 22px 20px 18px;
    }

    .sv-product-details-policy-modal__title {
        font-size: 20px;
    }

    .sv-product-details-policy-modal__content {
        padding: 20px 20px 26px;
        font-size: 12px;
        line-height: 1.75;
    }
}

@media (prefers-reduced-motion:reduce) {

    .sv-product-details-policy-modal__overlay,
    .sv-product-details-policy-modal__dialog,
    .sv-product-details-policy-modal__close {
        transition: none;
    }
}

body.sv-product-policy-modal-open {
  overflow: hidden;
}
/* drawer (desktop) / bottom sheet (phone) */
html .sv-product-details-policy-modal__overlay { background: rgba(31, 35, 43, .46); backdrop-filter: none; -webkit-backdrop-filter: none; }
html .sv-product-details-policy-modal__dialog {
  top: 0; bottom: 0; left: auto; right: 0; width: min(480px, 100vw); max-height: none; height: 100%;
  border: 0; border-radius: 0; background: var(--svd-paper); box-shadow: none; clip-path: none;
  transform: translateX(100%); opacity: 1;
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
html .sv-product-details-policy-modal.is-active .sv-product-details-policy-modal__dialog { transform: none; }
html .sv-product-details-policy-modal__dialog::before {   /* glowing seam on the drawer's left edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 2; background: var(--svd-seam-line-v);
}
html .sv-product-details-policy-modal__header {
  padding: 24px 24px 20px; border-bottom: 0; background: var(--svd-face-deep); color: #fff;
}
html .sv-product-details-policy-modal__eyebrow { color: var(--svd-edge); font-family: var(--pd-mono); letter-spacing: .14em; }
html .sv-product-details-policy-modal__title { color: #fff; font-weight: 800; text-transform: none; letter-spacing: -.01em; }
html .sv-product-details-policy-modal__close { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 0; }
html .sv-product-details-policy-modal__close:hover { border-color: var(--svd-ice); color: var(--svd-ice); background: transparent; }
html .sv-product-details-policy-modal__content { padding: 22px 24px 32px; overflow-y: auto; flex: 1; }
html .sv-product-details-policy-modal__content a { color: var(--svd-seam); }

/* FAQ items (inside the drawer) */
.sv-product-details-faq__items { display: grid; gap: 0; }
html .sv-product-details-faq-item { opacity: 1; transform: none; border: 0; border-top: 1px solid var(--svd-line); background: transparent; position: relative; }
html .sv-product-details-faq-item:first-child { border-top: 0; }
html .sv-product-details-faq-item::before { display: none; }
html .sv-product-details-faq-item__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit;
}
html .sv-product-details-faq-item__question { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
html .sv-product-details-faq-item__icon {
  position: relative; flex: none; width: 20px; height: 20px; font-size: 0; border: 1.5px solid var(--svd-seam); border-radius: 0; background: transparent; transform: rotate(45deg);
  transition: background .2s ease;
}
html .sv-product-details-faq-item__icon::before, html .sv-product-details-faq-item__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: var(--svd-seam); transform: translate(-50%, -50%) rotate(-45deg);
}
html .sv-product-details-faq-item__icon::after { transform: translate(-50%, -50%) rotate(45deg); transition: transform .25s ease; }
html .sv-product-details-faq-item__trigger.is-open .sv-product-details-faq-item__icon { background: var(--svd-seam); }
html .sv-product-details-faq-item__trigger.is-open .sv-product-details-faq-item__icon::before,
html .sv-product-details-faq-item__trigger.is-open .sv-product-details-faq-item__icon::after { background: #fff; }
html .sv-product-details-faq-item__trigger.is-open .sv-product-details-faq-item__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
html .sv-product-details-faq-item__answer { overflow: hidden; }
html .sv-product-details-faq-item__answer-content { max-width: none; padding: 0 34px 18px 0; opacity: 1; transform: none; font-size: 14px; line-height: 1.7; color: #3a352f; }
html .sv-product-details-faq-item__trigger:focus-visible { outline: 2px solid var(--svd-seam); outline-offset: 2px; }


@media (max-width: 749px) {
  /* bottom sheet */
  html .sv-product-details-policy-modal__dialog {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 88vh; display: flex; flex-direction: column;
    transform: translateY(100%); clip-path: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
  }
  html .sv-product-details-policy-modal__dialog::before { top: 0; bottom: auto; left: 18px; right: 0; width: auto; height: 2px; background: var(--svd-seam-line); }
  html .sv-product-details-policy-modal__header { padding: 20px 18px 16px; }
  html .sv-product-details-policy-modal__content { padding: 18px 18px calc(28px + env(safe-area-inset-bottom)); }

}
html[data-sv-motion="calm"] .pds *, html[data-sv-motion="calm"] .sv-product-details-policy-modal__dialog { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pds *, html .sv-product-details-policy-modal__dialog { animation: none !important; transition: none !important; } }