/* P2 — Paid Services selection / additional view */
/* Paid-service detail variables mirror the existing Free Service theme system. */
:root[data-theme="charcoal"] {
    --detail-page-bg: #111827;
    --detail-page-border: rgba(255, 255, 255, 0.06);
    --detail-page-shadow: none;
    --detail-accent: #E8B84A;
    --detail-hero-bg: #1E2840;
    --detail-hero-border: rgba(255, 255, 255, 0.07);
    --detail-title: rgba(255, 255, 255, 0.93);
    --detail-desc: rgba(255, 255, 255, 0.60);
    --detail-notice-bg: rgba(255, 255, 255, 0.025);
    --detail-notice-border: rgba(255, 255, 255, 0.10);
    --detail-notice-text: rgba(255, 255, 255, 0.44);
    --detail-action-bg: rgba(255, 255, 255, 0.025);
    --detail-action-border: rgba(255, 255, 255, 0.08);
    --detail-action-border-hover: rgba(232, 184, 74, 0.30);
    --detail-action-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(232, 184, 74, 0.10) inset;
    --detail-action-icon-bg: #1E2840;
}

:root[data-theme="warm"] {
    --detail-page-bg: #1A1512;
    --detail-page-border: rgba(255, 255, 255, 0.05);
    --detail-page-shadow: none;
    --detail-accent: #F0A830;
    --detail-hero-bg: #2B221B;
    --detail-hero-border: rgba(255, 255, 255, 0.06);
    --detail-title: rgba(255, 255, 255, 0.93);
    --detail-desc: rgba(255, 255, 255, 0.57);
    --detail-notice-bg: rgba(255, 255, 255, 0.022);
    --detail-notice-border: rgba(255, 255, 255, 0.09);
    --detail-notice-text: rgba(255, 255, 255, 0.42);
    --detail-action-bg: rgba(255, 255, 255, 0.022);
    --detail-action-border: rgba(255, 255, 255, 0.07);
    --detail-action-border-hover: rgba(240, 168, 48, 0.30);
    --detail-action-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(240, 168, 48, 0.08) inset;
    --detail-action-icon-bg: #2B221B;
}

:root[data-theme="ocean"] {
    --detail-page-bg: #0D1F2D;
    --detail-page-border: rgba(255, 255, 255, 0.06);
    --detail-page-shadow: none;
    --detail-accent: #4DD8CC;
    --detail-hero-bg: #183244;
    --detail-hero-border: rgba(255, 255, 255, 0.07);
    --detail-title: rgba(255, 255, 255, 0.93);
    --detail-desc: rgba(255, 255, 255, 0.58);
    --detail-notice-bg: rgba(255, 255, 255, 0.025);
    --detail-notice-border: rgba(255, 255, 255, 0.10);
    --detail-notice-text: rgba(255, 255, 255, 0.42);
    --detail-action-bg: rgba(255, 255, 255, 0.025);
    --detail-action-border: rgba(255, 255, 255, 0.08);
    --detail-action-border-hover: rgba(77, 216, 204, 0.32);
    --detail-action-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(77, 216, 204, 0.08) inset;
    --detail-action-icon-bg: #183244;
}

:root[data-theme="light"] {
    --detail-page-bg: #F0E8D8;
    --detail-page-border: rgba(0, 0, 0, 0.07);
    --detail-page-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    --detail-accent: #C4830A;
    --detail-hero-bg: #E8DFC8;
    --detail-hero-border: rgba(0, 0, 0, 0.08);
    --detail-title: rgba(28, 42, 58, 0.96);
    --detail-desc: rgba(28, 42, 58, 0.62);
    --detail-notice-bg: rgba(255, 255, 255, 0.55);
    --detail-notice-border: rgba(0, 0, 0, 0.13);
    --detail-notice-text: rgba(28, 42, 58, 0.50);
    --detail-action-bg: rgba(255, 255, 255, 0.55);
    --detail-action-border: rgba(0, 0, 0, 0.10);
    --detail-action-border-hover: rgba(196, 131, 10, 0.35);
    --detail-action-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.13);
    --detail-action-icon-bg: #E8DFC8;
}

:root:not([data-theme]) {
    --detail-page-bg: #111827;
    --detail-page-border: rgba(255, 255, 255, 0.06);
    --detail-page-shadow: none;
    --detail-accent: #E8B84A;
    --detail-hero-bg: #1E2840;
    --detail-hero-border: rgba(255, 255, 255, 0.07);
    --detail-title: rgba(255, 255, 255, 0.93);
    --detail-desc: rgba(255, 255, 255, 0.60);
    --detail-notice-bg: rgba(255, 255, 255, 0.025);
    --detail-notice-border: rgba(255, 255, 255, 0.10);
    --detail-notice-text: rgba(255, 255, 255, 0.44);
    --detail-action-bg: rgba(255, 255, 255, 0.025);
    --detail-action-border: rgba(255, 255, 255, 0.08);
    --detail-action-border-hover: rgba(232, 184, 74, 0.30);
    --detail-action-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(232, 184, 74, 0.10) inset;
    --detail-action-icon-bg: #1E2840;
}

.paid-service-page-shell {
    padding: 12px 0 34px;
    background: var(--body-bg, var(--bg));
}

.paid-service-page-wrap {
    width: min(var(--sd-container-max), calc(100% - var(--sd-container-gutter))) !important;
    margin: 0 auto;
}

.paid-service-page {
    padding: clamp(28px, 3.2vw, 52px);
    border: 1px solid var(--detail-page-border);
    border-radius: 24px;
    background: var(--detail-page-bg);
    box-shadow: var(--detail-page-shadow, none);
}

.paid-service-back {
    display: inline-flex;
    margin-bottom: 24px;
    color: var(--detail-accent);
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.paid-service-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: clamp(24px, 3vw, 44px);
    align-items: center;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--detail-hero-border);
    border-radius: 20px;
    background: var(--detail-hero-bg);
}

.paid-service-intro-copy {
    max-width: 780px;
}

.paid-service-eyebrow {
    margin: 0 0 12px !important;
    color: var(--detail-accent) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.paid-service-intro h1 {
    margin: 0 0 16px;
    color: var(--detail-title);
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.paid-service-intro-copy > p:last-child {
    margin: 0;
    max-width: 760px;
    color: var(--detail-desc);
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.75;
}

.paid-service-intro-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--detail-action-border);
    border-radius: 18px;
    background: var(--detail-action-icon-bg);
}

.paid-service-intro-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.paid-option-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin: 38px 0 18px;
}

.paid-option-head span {
    display: block;
    margin-bottom: 7px;
    color: var(--detail-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.paid-option-head h2 {
    margin: 0;
    color: var(--detail-title);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.25;
    letter-spacing: -.025em;
}

.paid-option-head > p {
    margin: 0;
    color: var(--detail-desc);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.paid-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.paid-option-card {
    min-height: 310px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--detail-action-border);
    border-radius: 20px;
    background: var(--detail-action-bg);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.paid-option-card:hover {
    transform: translateY(-3px);
    border-color: var(--detail-action-border-hover);
    box-shadow: var(--detail-action-shadow-hover);
}

.paid-option-visual {
    min-height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid var(--detail-action-border);
    background: var(--detail-action-icon-bg);
    color: var(--detail-accent);
}

.paid-option-visual span {
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1;
}

.paid-option-visual img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    display: block;
    object-fit: cover;
}

.paid-option-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 24px 20px;
}

.paid-option-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.paid-option-badge {
    display: inline-flex;
    margin-bottom: 9px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--detail-accent) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--detail-accent) 10%, transparent);
    color: var(--detail-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.paid-option-card h3 {
    margin: 0;
    color: var(--detail-title);
    font-size: clamp(18px, 1.25vw, 21px);
    line-height: 1.28;
}

.paid-option-price {
    flex: 0 0 auto;
    padding-top: 3px;
    color: var(--detail-accent);
    font-size: clamp(15px, 1vw, 17px);
    font-weight: 900;
    white-space: nowrap;
}

.paid-option-description {
    margin: 12px 0 0;
    color: var(--detail-desc);
    font-size: 14px;
    line-height: 1.65;
}

.paid-option-bullets {
    display: grid;
    gap: 8px;
    margin: 17px 0 20px;
    padding: 0;
    list-style: none;
}

.paid-option-bullets li {
    position: relative;
    padding-left: 20px;
    color: var(--detail-desc);
    font-size: 13.5px;
    line-height: 1.5;
}

.paid-option-bullets li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--detail-accent);
    font-weight: 900;
}

.paid-option-footer {
    margin-top: auto;
    padding-top: 8px;
}

.paid-option-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid color-mix(in srgb, var(--detail-accent) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--detail-accent) 11%, transparent);
    color: var(--detail-accent);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.paid-option-cta:hover {
    background: color-mix(in srgb, var(--detail-accent) 16%, transparent);
}

.paid-service-note {
    display: flex;
    gap: 9px 14px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 17px 20px;
    border: 1px dashed var(--detail-notice-border);
    border-radius: 16px;
    background: var(--detail-notice-bg);
    color: var(--detail-notice-text);
    font-size: 13.5px;
    line-height: 1.6;
}

.paid-service-note strong {
    color: var(--detail-title);
}

@media (max-width: 1180px) {
    .paid-option-card {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .paid-service-intro {
        grid-template-columns: 1fr;
    }

    .paid-service-intro-image {
        max-width: 620px;
    }

    .paid-option-grid {
        grid-template-columns: 1fr;
    }

    .paid-option-card {
        grid-template-columns: 170px minmax(0, 1fr);
        min-height: 280px;
    }

    .paid-option-visual img {
        min-height: 280px;
    }
}

@media (max-width: 680px) {
    .paid-service-page-shell {
        padding-top: 6px;
    }

    .paid-service-page {
        padding: 22px 16px 28px;
        border-radius: 18px;
    }

    .paid-service-intro {
        padding: 22px 18px;
    }

    .paid-option-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .paid-option-card {
        grid-template-columns: 1fr;
    }

    .paid-option-visual {
        min-height: 150px;
        border-right: 0;
        border-bottom: 1px solid var(--detail-action-border);
    }

    .paid-option-visual img {
        min-height: 150px;
        max-height: 190px;
    }

    .paid-option-content {
        padding: 20px;
    }

    .paid-option-topline {
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .paid-option-card {
        transition: none;
    }
}

/* P3 — Dynamic paid-service application forms */
.ps-application-shell { padding-top: 10px; }
.ps-application-page {
    padding: clamp(24px, 3vw, 46px);
    border: 1px solid var(--detail-page-border);
    border-radius: 24px;
    background: var(--detail-page-bg);
    box-shadow: var(--detail-page-shadow, none);
}
.ps-form-topnav { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; color:var(--detail-notice-text); font-size:13px; font-weight:800; }
.ps-form-topnav .paid-service-back { margin:0; }
.ps-form-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:24px; align-items:stretch; padding:clamp(22px,3vw,36px); border:1px solid var(--detail-hero-border); border-radius:20px; background:var(--detail-hero-bg); margin-bottom:24px; }
.ps-form-hero h1 { margin:4px 0 12px; color:var(--detail-title); font-size:clamp(28px,3vw,44px); line-height:1.08; }
.ps-form-hero p { margin:0; max-width:760px; color:var(--detail-desc); font-size:15.5px; line-height:1.7; }
.ps-selected-option { display:flex; flex-direction:column; justify-content:center; gap:7px; padding:20px; border:1px solid var(--detail-action-border); border-radius:16px; background:var(--detail-action-bg); }
.ps-selected-option span { color:var(--detail-notice-text); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.11em; }
.ps-selected-option strong { color:var(--detail-title); font-size:18px; line-height:1.3; }
.ps-selected-option em { color:var(--detail-accent); font-style:normal; font-weight:900; font-size:14px; }
.ps-form-alert { display:flex; flex-direction:column; gap:5px; margin-bottom:20px; padding:15px 18px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.ps-form-alert-error { border:1px solid rgba(239,68,68,.34); background:rgba(239,68,68,.08); color:var(--detail-title); }
.ps-application-form { display:grid; gap:20px; }
.ps-form-section { padding:clamp(20px,2.5vw,30px); border:1px solid var(--detail-action-border); border-radius:20px; background:var(--detail-action-bg); }
.ps-form-section-head { display:flex; align-items:flex-start; gap:14px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--detail-action-border); }
.ps-form-section-head > span { flex:0 0 auto; display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:10px; color:var(--detail-accent); background:color-mix(in srgb, var(--detail-accent) 12%, transparent); font-size:11px; font-weight:900; }
.ps-form-section-head h2 { margin:0; color:var(--detail-title); font-size:clamp(19px,1.5vw,24px); }
.ps-form-section-head p { margin:6px 0 0; color:var(--detail-desc); font-size:13.5px; line-height:1.55; }
.ps-form-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
.ps-field { min-width:0; }
.ps-field-full, .ps-form-info { grid-column:span 6; }
.ps-field-half { grid-column:span 3; }
.ps-field-third { grid-column:span 2; }
.ps-field-label { display:block; margin-bottom:8px; color:var(--detail-title); font-size:13.5px; font-weight:800; }
.ps-field-label span, .ps-consent em { color:var(--detail-accent); font-style:normal; }
.ps-input { width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--detail-action-border); border-radius:12px; outline:none; background:color-mix(in srgb, var(--detail-page-bg) 76%, white 3%); color:var(--detail-title); font:inherit; font-size:14.5px; transition:border-color .16s ease, box-shadow .16s ease; }
.ps-input:focus { border-color:var(--detail-action-border-hover); box-shadow:0 0 0 3px color-mix(in srgb, var(--detail-accent) 10%, transparent); }
.ps-textarea { min-height:120px; resize:vertical; }
.ps-select { appearance:auto; }
.ps-file-input { padding:9px 11px; }
.ps-field-help, .ps-file-note { margin-top:7px; color:var(--detail-notice-text); font-size:12px; line-height:1.45; }
.ps-field-error { margin-top:7px; color:#ef6f6f; font-size:12px; font-weight:800; }
.ps-choice-list { display:grid; gap:9px; }
.ps-choice-inline { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.ps-choice { display:flex; align-items:flex-start; gap:9px; min-height:44px; padding:11px 12px; border:1px solid var(--detail-action-border); border-radius:12px; color:var(--detail-desc); background:color-mix(in srgb, var(--detail-page-bg) 72%, transparent); font-size:13.5px; line-height:1.45; cursor:pointer; }
.ps-choice input { margin-top:2px; accent-color:var(--detail-accent); }
.ps-consent { min-height:auto; }
.ps-field-checkbox-single { display:flex; align-items:center; }
.ps-form-info { padding:14px 16px; border-left:3px solid var(--detail-accent); border-radius:10px; background:color-mix(in srgb, var(--detail-accent) 7%, transparent); color:var(--detail-desc); }
.ps-form-info strong { display:block; color:var(--detail-title); margin-bottom:4px; }
.ps-form-info p { margin:0; font-size:13px; line-height:1.5; }
.ps-repeater { padding:16px; border:1px dashed var(--detail-action-border); border-radius:16px; }
.ps-repeater-heading, .ps-repeater-row-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ps-repeater-count { color:var(--detail-notice-text); font-size:11px; font-weight:900; }
.ps-repeater-rows { display:grid; gap:14px; margin-top:12px; }
.ps-repeater-row { padding:16px; border:1px solid var(--detail-action-border); border-radius:14px; background:color-mix(in srgb, var(--detail-page-bg) 72%, transparent); }
.ps-repeater-row-head { margin-bottom:14px; color:var(--detail-title); font-size:13px; }
.ps-repeater-remove, .ps-repeater-add { border:1px solid var(--detail-action-border); border-radius:999px; background:transparent; color:var(--detail-accent); font:inherit; font-size:12px; font-weight:900; cursor:pointer; }
.ps-repeater-remove { padding:6px 10px; color:#ef7b7b; }
.ps-repeater-remove:disabled { opacity:.35; cursor:not-allowed; }
.ps-repeater-add { margin-top:14px; min-height:38px; padding:8px 14px; }
.ps-repeater-add:disabled { opacity:.45; cursor:not-allowed; }
.ps-form-submit-row { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px 22px; border:1px solid var(--detail-notice-border); border-radius:18px; background:var(--detail-notice-bg); }
.ps-form-submit-row > div { display:grid; gap:4px; }
.ps-form-submit-row strong { color:var(--detail-title); font-size:15px; }
.ps-form-submit-row span { color:var(--detail-notice-text); font-size:12.5px; line-height:1.5; }
.ps-submit-btn { border:0; cursor:pointer; font-family:inherit; white-space:nowrap; }
.ps-honeypot { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.ps-submitted-shell { min-height:58vh; display:flex; align-items:center; }
.ps-submitted-card { max-width:760px; margin:20px auto; padding:clamp(28px,4vw,54px); text-align:center; border:1px solid var(--detail-page-border); border-radius:24px; background:var(--detail-page-bg); box-shadow:var(--detail-page-shadow, none); }
.ps-submitted-icon { width:62px; height:62px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--detail-accent) 14%, transparent); color:var(--detail-accent); font-size:30px; font-weight:900; }
.ps-submitted-card h1 { margin:8px 0 12px; color:var(--detail-title); font-size:clamp(26px,3vw,40px); }
.ps-submitted-card > p { color:var(--detail-desc); line-height:1.65; }
.ps-reference-number { display:grid; gap:6px; max-width:520px; margin:22px auto; padding:18px; border:1px dashed var(--detail-action-border-hover); border-radius:16px; background:var(--detail-action-bg); }
.ps-reference-number span { color:var(--detail-notice-text); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.ps-reference-number strong { color:var(--detail-accent); font-size:clamp(18px,2vw,25px); letter-spacing:.04em; }
.ps-submitted-note { font-size:12.5px; }
@media(max-width:820px){ .ps-form-hero{grid-template-columns:1fr}.ps-field-half,.ps-field-third{grid-column:span 6}.ps-form-submit-row{align-items:flex-start;flex-direction:column}.ps-submit-btn{width:100%} }
@media(max-width:560px){ .ps-application-page{padding:18px 14px 24px;border-radius:18px}.ps-form-topnav{align-items:flex-start;flex-direction:column}.ps-form-section{padding:18px 14px}.ps-form-grid{gap:14px}.ps-form-hero{padding:20px 16px}.ps-choice-inline{grid-template-columns:1fr} }