/* ── CSS varijable — AMO Design Studio zlatna paleta ───────────── */
:root {
    --do-teal-deep:         rgb(144, 121, 79);
    --do-teal-bright:       rgb(234, 202, 145);
    --do-bg-glass:          rgba(20, 19, 16, 0.82);
    --do-border:            rgba(234, 202, 145, 0.18);
    --do-text:              #f2ece0;
    --do-text-muted:        rgba(242, 236, 224, 0.5);
    --do-modal-scrollbar-w: 0px;
}

/* Redefinišemo unutar #doc-modal da tema ne može da gazi */
#doc-modal {
    --do-teal-deep:   rgb(144, 121, 79) !important;
    --do-teal-bright: rgb(234, 202, 145) !important;
    --do-bg-glass:    rgba(20, 19, 16, 0.82) !important;
    --do-border:      rgba(234, 202, 145, 0.18) !important;
    --do-text:        #f2ece0 !important;
    --do-text-muted:  rgba(242, 236, 224, 0.5) !important;
}

/* ── MODAL OVERLAY ───────────────────────────────────────── */
.doc-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.doc-modal.is-open {
    display: flex !important;
}

/* Backdrop */
.doc-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(1, 10, 11, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
}

/* ── GLOWING ORBS ────────────────────────────────────────── */
.doc-modal__orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.doc-orb {
    position: absolute;
    border-radius: 50%;
    animation: doc-orb-float linear infinite;
}
.doc-orb--1 {
    width: 480px; height: 480px;
    top: -15%; left: -10%;
    background: radial-gradient(circle, rgba(144, 121, 79, 0.55) 0%, transparent 68%);
    animation-duration: 9s;
}
.doc-orb--2 {
    width: 340px; height: 340px;
    bottom: -5%; right: -8%;
    background: radial-gradient(circle, rgba(0,193,203,0.22) 0%, transparent 68%);
    animation-duration: 7s;
    animation-delay: -2.5s;
}
.doc-orb--3 {
    width: 260px; height: 260px;
    top: 35%; left: 42%;
    background: radial-gradient(circle, rgba(0,150,160,0.18) 0%, transparent 68%);
    animation-duration: 11s;
    animation-delay: -4s;
    opacity: .7;
}
.doc-orb--4 {
    width: 200px; height: 200px;
    bottom: 10%; left: 15%;
    background: radial-gradient(circle, rgba(0,193,203,0.14) 0%, transparent 68%);
    animation-duration: 8s;
    animation-delay: -1.5s;
    opacity: .55;
}
@keyframes doc-orb-float {
    0%   { transform: translate(0,0) scale(1); }
    25%  { transform: translate(30px,-22px) scale(1.06); }
    50%  { transform: translate(-22px,32px) scale(.94); }
    75%  { transform: translate(22px,22px) scale(1.04); }
    100% { transform: translate(0,0) scale(1); }
}

/* ── ZVEZDE PADALICE ─────────────────────────────────────── */
.doc-modal__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.doc-star {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,193,203,0.4) 40%, rgba(0,220,230,0.85) 75%, #fff 100%);
    transform-origin: right center;
}
/* Glowing vrh zvezde */
.doc-star::after {
    content: '';
    position: absolute;
    right: -4px; top: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow:
        0 0 8px  5px rgba(255,255,255,1),
        0 0 20px 10px rgba(0,193,203,0.95),
        0 0 45px 20px rgba(0,193,203,0.55),
        0 0 80px 30px rgba(0,193,203,0.2);
}

/*
  Cycle = 24s ukupno, zvezda aktivna ~2s, ostalo čekanje (~6s razmak).
  4 zvezde × 6s offset = svaka svakih 24s, pomerene za 6s.
  Aktivna faza = 2/24 = ~8% ciklusa.
  Bljesak = na 85% aktivne faze, glow eksplodira.
*/

/* Zvezda 1 — levo-desno, ugao 38° */
.doc-star--1 {
    width: 360px;
    top: -4px; left: 8%;
    animation: doc-sf1 24s linear infinite;
    animation-delay: 0s;
}
@keyframes doc-sf1 {
    0%    { opacity: 0; transform: translate(0,    0)    rotate(38deg); }
    1%    { opacity: 0; transform: translate(0,    0)    rotate(38deg); }
    2%    { opacity: 1; transform: translate(30px, 24px) rotate(38deg); }
    6%    { opacity: 1; transform: translate(480px,375px) rotate(38deg); }
    7.5%  { opacity: 0; transform: translate(600px,470px) rotate(38deg); }
    100%  { opacity: 0; transform: translate(600px,470px) rotate(38deg); }
}
.doc-star--1::after {
    animation: doc-flash1 24s linear infinite;
    animation-delay: 0s;
}
@keyframes doc-flash1 {
    0%   { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
    5.5% { box-shadow: 0 0 16px 8px rgba(255,255,255,1),  0 0 36px 16px rgba(0,220,230,1),  0 0 60px 24px rgba(0,193,203,.7); }
    7.5% { box-shadow: 0 0 6px 3px rgba(255,255,255,.0),  0 0 14px 6px rgba(0,193,203,.0),  0 0 28px 10px rgba(0,193,203,.0); }
    100% { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
}

/* Zvezda 2 — desno-levo (negativan X), ugao -42° */
.doc-star--2 {
    width: 420px;
    top: -4px; left: 72%;
    animation: doc-sf2 24s linear infinite;
    animation-delay: -6s;
}
@keyframes doc-sf2 {
    0%    { opacity: 0; transform: translate(0,    0)     rotate(-42deg) scaleX(-1); }
    1%    { opacity: 0; transform: translate(0,    0)     rotate(-42deg) scaleX(-1); }
    2%    { opacity: 1; transform: translate(-30px, 27px) rotate(-42deg) scaleX(-1); }
    6%    { opacity: 1; transform: translate(-500px,450px) rotate(-42deg) scaleX(-1); }
    7.5%  { opacity: 0; transform: translate(-640px,576px) rotate(-42deg) scaleX(-1); }
    100%  { opacity: 0; transform: translate(-640px,576px) rotate(-42deg) scaleX(-1); }
}
.doc-star--2::after {
    animation: doc-flash2 24s linear infinite;
    animation-delay: -6s;
}
@keyframes doc-flash2 {
    0%   { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
    5.5% { box-shadow: 0 0 16px 8px rgba(255,255,255,1),  0 0 36px 16px rgba(0,220,230,1),  0 0 60px 24px rgba(0,193,203,.7); }
    7.5% { box-shadow: 0 0 6px 3px rgba(255,255,255,.0),  0 0 14px 6px rgba(0,193,203,.0),  0 0 28px 10px rgba(0,193,203,.0); }
    100% { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
}

/* Zvezda 3 — levo-desno, blago plići ugao 28° */
.doc-star--3 {
    width: 320px;
    top: -4px; left: 30%;
    animation: doc-sf3 24s linear infinite;
    animation-delay: -12s;
}
@keyframes doc-sf3 {
    0%    { opacity: 0; transform: translate(0,    0)    rotate(28deg); }
    1%    { opacity: 0; transform: translate(0,    0)    rotate(28deg); }
    2%    { opacity: 1; transform: translate(24px, 13px) rotate(28deg); }
    6%    { opacity: 1; transform: translate(440px,233px) rotate(28deg); }
    7.5%  { opacity: 0; transform: translate(560px,298px) rotate(28deg); }
    100%  { opacity: 0; transform: translate(560px,298px) rotate(28deg); }
}
.doc-star--3::after {
    animation: doc-flash3 24s linear infinite;
    animation-delay: -12s;
}
@keyframes doc-flash3 {
    0%   { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
    5.5% { box-shadow: 0 0 16px 8px rgba(255,255,255,1),  0 0 36px 16px rgba(0,220,230,1),  0 0 60px 24px rgba(0,193,203,.7); }
    7.5% { box-shadow: 0 0 6px 3px rgba(255,255,255,.0),  0 0 14px 6px rgba(0,193,203,.0),  0 0 28px 10px rgba(0,193,203,.0); }
    100% { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
}

/* Zvezda 4 — desno-levo, strmiji ugao -52° */
.doc-star--4 {
    width: 400px;
    top: -4px; left: 55%;
    animation: doc-sf4 24s linear infinite;
    animation-delay: -18s;
}
@keyframes doc-sf4 {
    0%    { opacity: 0; transform: translate(0,    0)     rotate(-52deg) scaleX(-1); }
    1%    { opacity: 0; transform: translate(0,    0)     rotate(-52deg) scaleX(-1); }
    2%    { opacity: 1; transform: translate(-26px, 33px) rotate(-52deg) scaleX(-1); }
    6%    { opacity: 1; transform: translate(-410px,526px) rotate(-52deg) scaleX(-1); }
    7.5%  { opacity: 0; transform: translate(-530px,680px) rotate(-52deg) scaleX(-1); }
    100%  { opacity: 0; transform: translate(-530px,680px) rotate(-52deg) scaleX(-1); }
}
.doc-star--4::after {
    animation: doc-flash4 24s linear infinite;
    animation-delay: -18s;
}
@keyframes doc-flash4 {
    0%   { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
    5.5% { box-shadow: 0 0 16px 8px rgba(255,255,255,1),  0 0 36px 16px rgba(0,220,230,1),  0 0 60px 24px rgba(0,193,203,.7); }
    7.5% { box-shadow: 0 0 6px 3px rgba(255,255,255,.0),  0 0 14px 6px rgba(0,193,203,.0),  0 0 28px 10px rgba(0,193,203,.0); }
    100% { box-shadow: 0 0 6px 3px rgba(255,255,255,.9), 0 0 14px 6px rgba(0,193,203,.8), 0 0 28px 10px rgba(0,193,203,.4); }
}

.doc-star--5, .doc-star--6, .doc-star--7, .doc-star--8,
.doc-star--9, .doc-star--10, .doc-star--11, .doc-star--12 { display: none; }

/* ── Dialog ──────────────────────────────────────────────── */
.doc-modal__dialog {
    position: relative !important;
    z-index: 1 !important;
    background: rgba(2, 14, 15, 0.92) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(234, 202, 145, 0.18) !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 560px !important;
    max-height: 92dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 0 60px rgba(234, 202, 145, 0.08), 0 24px 48px rgba(0,0,0,.4) !important;
    color: #f2ece0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-sizing: border-box !important;
}

/* ── Progress bar ────────────────────────────────────────── */
.doc-progress {
    height: 2px;
    background: rgba(0,193,203,0.12);
    flex-shrink: 0;
}
.doc-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, rgb(144, 121, 79), rgb(234, 202, 145));
    border-radius: 0 2px 2px 0;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    width: 0%;
    box-shadow: 0 0 8px rgba(0,193,203,0.6);
}

/* ── Step container ──────────────────────────────────────── */
.doc-modal__step {
    overflow-y: auto;
    padding: clamp(28px, 5vw, 48px);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,193,203,0.2) transparent;
}

/* ── Close ───────────────────────────────────────────────── */
.doc-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,193,203,0.08);
    border: 1px solid rgba(0,193,203,0.2);
    color: rgba(200,240,242,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
    z-index: 2;
    flex-shrink: 0;
}
.doc-modal__close:hover {
    background: rgba(0,193,203,0.16);
    border-color: rgba(0,193,203,0.4);
    color: rgb(234, 202, 145);
}
.doc-modal__close svg { width: 15px; height: 15px; }

/* ── Header ──────────────────────────────────────────────── */
.doc-modal__header {
    text-align: center;
    margin-bottom: 32px;
    padding-right: 28px;
}
#doc-modal .doc-modal__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(234, 202, 145);
    opacity: .65;
    margin-bottom: 10px;
}
#doc-modal .doc-modal__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #f2ece0;
    letter-spacing: -.03em;
    margin: 0 0 8px;
    line-height: 1.1;
}
#doc-modal .doc-modal__sub {
    font-size: .9375rem;
    color: rgba(242, 236, 224, 0.45);
    margin: 0;
    line-height: 1.5;
}

/* ── Form ────────────────────────────────────────────────── */
.doc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.doc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.doc-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.doc-form__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(0,193,203,0.55);
}
#doc-modal .doc-form__input,
#doc-modal .doc-form__input:hover,
#doc-modal .doc-form__input:active {
    background: rgba(234, 202, 145, 0.05) !important;
    border: 1px solid rgba(234, 202, 145, 0.12) !important;
    border-radius: 10px;
    padding: 14px 16px;
    color: #ffffff !important;
    font-size: .9375rem;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    transition: border-color .2s, background .2s;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    caret-color: rgb(234, 202, 145);
    -webkit-text-fill-color: #ffffff !important;
    appearance: none;
    -webkit-appearance: none;
}
#doc-modal .doc-form__input::placeholder {
    color: rgba(242, 236, 224, 0.2) !important;
    -webkit-text-fill-color: rgba(242, 236, 224, 0.2) !important;
}
#doc-modal .doc-form__input:focus,
#doc-modal .doc-form__input:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: rgba(234, 202, 145, 0.5) !important;
    background: rgba(234, 202, 145, 0.09) !important;
    box-shadow: none !important;
}
#doc-modal .doc-form__input.is-filled {
    background: rgba(234, 202, 145, 0.1) !important;
    border-color: rgba(234, 202, 145, 0.38) !important;
}
#doc-modal .doc-form__input:-webkit-autofill,
#doc-modal .doc-form__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #031214 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(234, 202, 145, 0.38) !important;
}
/* Stari selektori ostaju za kompatibilnost */
.doc-form__input {
    background: rgba(234, 202, 145, 0.05);
    border: 1px solid rgba(234, 202, 145, 0.12);
    border-radius: 10px;
    padding: 14px 16px;
    color: #ffffff;
    font-size: .9375rem;
    outline: none !important;
    transition: border-color .2s, background .2s;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    caret-color: rgb(234, 202, 145);
    -webkit-text-fill-color: #ffffff;
    box-shadow: none !important;
}
.doc-form__input::placeholder {
    color: rgba(242, 236, 224, 0.2);
    -webkit-text-fill-color: rgba(242, 236, 224, 0.2);
}
.doc-form__input:focus {
    outline: none !important;
    border-color: rgba(234, 202, 145, 0.5);
    background: rgba(234, 202, 145, 0.09);
    box-shadow: none !important;
}
.doc-form__input.is-filled {
    background: rgba(234, 202, 145, 0.1);
    border-color: rgba(234, 202, 145, 0.38);
}
.doc-form__input:-webkit-autofill,
.doc-form__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #031214 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(234, 202, 145, 0.38) !important;
}

/* ── Budget options ──────────────────────────────────────── */
.doc-budget-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.doc-budget-option { cursor: pointer; display: block; }
.doc-budget-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.doc-budget-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0,193,203,0.04);
    border: 1px solid rgba(0,193,203,0.14);
    border-radius: 12px;
    padding: 16px 20px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    cursor: pointer;
}
.doc-budget-radio:checked + .doc-budget-card {
    border-color: rgba(0,193,203,0.55);
    background: rgba(0,193,203,0.1);
    box-shadow: 0 0 0 3px rgba(0,193,203,0.08), 0 0 20px rgba(0,193,203,0.1);
}
.doc-budget-card__letter {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,193,203,0.08);
    border: 1px solid rgba(0,193,203,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: rgba(0,193,203,0.7);
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.doc-budget-radio:checked + .doc-budget-card .doc-budget-card__letter {
    background: linear-gradient(135deg, rgb(144, 121, 79), rgb(234, 202, 145));
    color: #fff;
    border-color: rgb(234, 202, 145);
    box-shadow: 0 0 12px rgba(0,193,203,0.4);
}
.doc-budget-card__info { display: flex; flex-direction: column; }
#doc-modal .doc-budget-card__range {
    font-size: .9375rem;
    font-weight: 600;
    color: #f2ece0;
}

/* ── Error ───────────────────────────────────────────────── */
.doc-form-error {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .875rem;
    color: #fca5a5;
    margin-bottom: 12px;
}

.doc-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
/* Full-width samo na step 1 (nema Nazad) */
#doc-step-1 .doc-next-btn {
    width: 100%;
}
.doc-next-btn,
.doc-submit-btn {
    height: 52px;
    padding: 0 28px;
    border-radius: 15px;
    border: none;
    background: linear-gradient(135deg, rgb(144, 121, 79) 0%, rgb(234, 202, 145) 100%);
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .2s, box-shadow .2s, transform .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,193,203,0.3), var(--wp--preset--shadow--deep, 0 8px 24px rgba(0,0,0,.35));
    letter-spacing: .02em;
    white-space: nowrap;
}
.doc-next-btn:hover {
    opacity: .9;
    box-shadow: 0 6px 28px rgba(0,193,203,0.45);
    transform: translateY(-1px);
}
.doc-next-btn:active,
.doc-submit-btn:active {
    border-radius: 15px;
    transform: translateY(0);
}
.doc-back-btn:active {
    border-radius: 12px;
}
.doc-submit-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.doc-submit-btn:not(:disabled):hover {
    opacity: .9;
    box-shadow: 0 6px 28px rgba(0,193,203,0.45);
    transform: translateY(-1px);
}
.doc-back-btn {
    height: 52px;
    padding: 0 24px;
    border-radius: 12px;
    border: 1px solid rgba(0,193,203,0.18);
    background: transparent;
    color: rgba(200,240,242,0.45);
    font-size: .9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.doc-back-btn:hover {
    color: rgb(234, 202, 145);
    border-color: rgba(0,193,203,0.35);
}

/* ── Calendar ────────────────────────────────────────────── */
.doc-cal-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(242, 236, 224, 0.45);
    font-size: .875rem;
    padding: 20px 0;
}
.doc-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,193,203,0.04);
    border: 1px solid rgba(0,193,203,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.doc-cal-nav__btn {
    background: none;
    border: 1px solid rgba(0,193,203,0.15);
    border-radius: 6px;
    color: rgba(0,193,203,0.55);
    font-size: 12px;
    font-family: inherit;
    padding: 5px 10px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}
.doc-cal-nav__btn:hover:not(:disabled) {
    color: rgb(234, 202, 145);
    border-color: rgba(0,193,203,0.4);
}
.doc-cal-nav__btn:disabled { opacity: .3; cursor: not-allowed; }
#doc-modal .doc-cal-nav__label {
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(200,240,242,0.7);
    text-align: center;
}
.doc-cal-days {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.doc-cal-day {
    background: rgba(0,193,203,0.03);
    border: 1px solid rgba(0,193,203,0.1);
    border-radius: 10px;
    overflow: hidden;
}
.doc-cal-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0,193,203,0.05);
    border-bottom: 1px solid rgba(0,193,203,0.08);
}
#doc-modal .doc-cal-day__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    color: rgba(0,193,203,0.65);
}
.doc-cal-day__date {
    font-size: 12px;
    color: rgba(200,240,242,0.3);
}
.doc-cal-day__slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 14px;
}
.doc-cal-slot {
    background: rgba(0,193,203,0.05);
    border: 1px solid rgba(0,193,203,0.15);
    border-radius: 8px;
    padding: 10px 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(200,240,242,0.75);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.doc-cal-slot:hover {
    border-color: rgba(0,193,203,0.45);
    background: rgba(0,193,203,0.12);
    color: rgb(234, 202, 145);
}
.doc-cal-slot.is-selected {
    border-color: rgb(234, 202, 145);
    background: linear-gradient(135deg, rgb(144, 121, 79), rgb(234, 202, 145));
    color: #fff;
    box-shadow: 0 0 14px rgba(0,193,203,0.35);
}
.doc-cal-empty {
    text-align: center;
    font-size: .875rem;
    color: rgba(242, 236, 224, 0.45);
    padding: 24px 0;
}
.doc-slot-submit-wrap { margin-top: 4px; }

/* ── Spinner ─────────────────────────────────────────────── */
.doc-spinner,
.doc-btn-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: doc-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes doc-spin { to { transform: rotate(360deg); } }

/* ── Rejected screen ─────────────────────────────────────── */
.doc-rejected {
    text-align: center;
    padding: 12px 0;
}
.doc-rejected__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(0,193,203,0.2);
    color: rgba(0,193,203,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.doc-rejected__icon svg { width: 28px; height: 28px; }
#doc-modal .doc-rejected__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f2ece0;
    letter-spacing: -.02em;
    margin: 0 0 12px;
}
#doc-modal .doc-rejected__text {
    font-size: .9375rem;
    color: rgba(242, 236, 224, 0.45);
    line-height: 1.7;
    margin: 0 0 24px;
}
.doc-rejected__contact {
    font-size: .9375rem;
    color: rgba(200,240,242,0.55);
    margin-bottom: 28px;
    line-height: 1.8;
}
.doc-rejected__contact a { color: rgb(234, 202, 145); text-decoration: none; }
.doc-rejected__contact a:hover { text-decoration: underline; }

/* ── Success screen ──────────────────────────────────────── */
.doc-success {
    text-align: center;
    padding: 12px 0;
}
.doc-success__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(0,193,203,0.3);
    color: rgb(234, 202, 145);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: doc-pop .4s ease;
    box-shadow: 0 0 24px rgba(0,193,203,0.25);
}
.doc-success__icon svg { width: 32px; height: 32px; }
@keyframes doc-pop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
#doc-modal .doc-success__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f2ece0;
    letter-spacing: -.03em;
    margin: 0 0 10px;
}
#doc-modal .doc-success__msg {
    font-size: .9375rem;
    color: rgba(242, 236, 224, 0.45);
    margin: 0 0 24px;
    line-height: 1.6;
}
.doc-success__details {
    background: rgba(0,193,203,0.05);
    border: 1px solid rgba(0,193,203,0.14);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 28px;
    text-align: left;
}
.doc-success__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
}
.doc-success__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(0,193,203,0.45);
    flex-shrink: 0;
    width: 56px;
}
.doc-success__val {
    font-size: .9375rem;
    color: #f2ece0;
    font-weight: 500;
}
.doc-success__divider {
    height: 1px;
    background: rgba(0,193,203,0.1);
    border: none;
    margin: 0;
}

/* ── Close button (success/rejected) ────────────────────── */
.doc-modal__close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    min-width: 200px;
    border-radius: 12px;
    border: 1px solid rgba(0,193,203,0.2);
    background: transparent;
    color: rgba(200,240,242,0.6);
    font-size: .9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.doc-modal__close-btn:hover {
    background: rgba(0,193,203,0.08);
    border-color: rgba(0,193,203,0.35);
    color: rgb(234, 202, 145);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
    .doc-form__row { grid-template-columns: 1fr; }
    .doc-modal { padding: 8px; align-items: flex-end; }
    .doc-modal__dialog { border-radius: 20px 20px 0 0; max-height: 92dvh; }
    .doc-cal-day__slots { grid-template-columns: repeat(3, 1fr); }
}

/* ── Scrollbar compensation — prevents layout shift on modal open/close ── */
/* When modal locks scroll, body gets padding-right = scrollbar width.     */
/* Fixed elements (nav) need the same padding to stay aligned.             */
body[style*="overflow: hidden"] .do-nav,
body[style*="overflow:hidden"] .do-nav {
    padding-right: var(--do-modal-scrollbar-w, 0px) !important;
}
body[style*="overflow: hidden"] #wpadminbar {
    padding-right: var(--do-modal-scrollbar-w, 0px);
}