/* ============================================================
   DELIVERY DATE MODAL — delivery-date-modal.css
   ============================================================
   
   Naming convention: .dd-{block}[-{element}][.is-{state}]
   Everything is scoped to .dd-modal — no other modal or field on
   the quote page is affected. 
   The select2 and flatpickr skins themselves live in the global,
   reusable css/select2-theme.css
   and css/flatpickr-theme.css (both linked alongside this file
   by quote.html) — only the layout hooks that seat those
   controls inside .dd-field stay here.

   Load order on the quote page (document order, which is what the
   cascade actually follows):

       variables.css · bootstrap                     quote.html
       → THIS FILE + select2-theme.css +
         flatpickr-theme.css                         quote.html, last
                                                      in that block
       → form.html's inline <style>                  #servicesFormPanel
       → select2.min.css · flatpickr.min.css          footer.html

   State comes from the existing JS, nothing new:
       .auto-check.active / .guaranteed-check.active
   drives which card is expanded. No extra classes are toggled.
   ============================================================ */

/* Declared on :root, not on .dd-modal: flatpickr appends its calendar to
   document.body, so a panel-scoped variable would resolve to nothing there
   and the declarations using it would silently drop. */
:root {
    /* Values the design specifies that have no token in variables.css.
       Swap any of these for a token when one appears. */
    --dd-selected-bg: transparent;   /* selected card / selected slot row  */
    --dd-plan-border: #EDEAE4;   /* plan tile hairline                 */
    --dd-radio-border: #D9D6D3;  /* unchecked radio ring               */
    --dd-hint: #8A857E;          /* sub-labels, plan timezone          */
    --dd-placeholder: #A9A49C;   /* empty field text, tz hint          */

    --dd-card-radius: 16px;      /* option cards + modal               */
    --dd-field-radius: 14px;     /* fields + primary button            */

    --dd-label-w: 82px;          /* the label column left of a field   */
}

/* ── Modal shell ─────────────────────────────────────────── */
/* 20px of inner padding on the dialog, so the card itself lands
   at the 600px the design is drawn at. */
.dd-modal .modal-dialog {
    max-width: 640px;
    padding-inline: 20px;
}

.dd-modal .modal-content {
    border: none;
    border-radius: var(--dd-card-radius);
    box-shadow: 0 18px 44px rgba(34, 30, 27, .10), 0 2px 6px rgba(34, 30, 27, .04);
    background: var(--color-surface-white);
}

/* ── Header ──────────────────────────────────────────────── */
.dd-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 0;
    border-bottom: none;
    background: transparent;
}

.dd-modal .modal-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text-primary);
    margin: 0;
    min-width: 0;
}

/* close — a filled circle, so it reads as a chip not a button.
   Bootstrap's own glyph is kept (background-image), only the
   shell around it changes. */
.dd-modal .btn-close {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-inset);
    background-size: 11px auto;
    opacity: .6;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.dd-modal .btn-close:hover,
.dd-modal .btn-close:focus-visible {
    background-color: var(--color-surface-subtle);
    box-shadow: none;
    opacity: 1;
}

/* ── Body ────────────────────────────────────────────────── */
/* No overflow/scroll here on purpose: the tooltip bubble and the
   select2 panel are absolutely positioned inside the modal and a
   scroll container would clip them. .modal itself already scrolls
   when the content outgrows the viewport. */
.dd-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px 0;
    background: transparent;
}

/* ── Option cards (Auto / I'll pick a date) ──────────────── */
/* Grid, not flex: column 1 is the radio, column 2 stacks the label
   over whatever that option unfolds — so the unfolded content lines
   up under the label instead of under the radio. */
.dd-modal .dd-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
    min-height: 0;
    margin: 0;
    padding: 16px 18px;
    background: var(--color-surface-inset);
    border: 1.5px solid transparent;
    border-radius: var(--dd-card-radius);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dd-modal .guaranteed-check {
    row-gap: 14px;
}

.dd-modal .dd-option:not(.active):hover {
    background: var(--color-surface-subtle);
}

.dd-modal .dd-option.active {
    background: var(--dd-selected-bg);
    border-color: var(--color-brand-gold);
}

/* radio — drawn rather than themed, so the dot is exactly the 8px
   the design asks for on a white disc */
.dd-modal .dd-option > .form-check-input {
    grid-column: 1;
    float: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    background-color: var(--color-surface-white);
    background-image: none;
    border: 1.5px solid var(--dd-radio-border);
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    border-radius: var(--radius-full) !important;
}

.dd-modal .dd-option > .form-check-input:checked {
    background-color: var(--color-surface-white);
    background-image: radial-gradient(circle at center, var(--color-brand-gold) 0 4px, transparent 4px);
    border-color: var(--color-brand-gold);
}

.dd-modal .dd-option > .form-check-input:focus-visible {
    outline: 2px solid var(--color-brand-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* title line: text + optional chip / info icon, sub-label wraps under */
.dd-modal .dd-option > .form-check-label {
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 8px;
    min-width: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
    cursor: pointer;
}

.dd-modal .dd-sublabel {
    flex: 0 0 100%;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dd-hint);
}

/* "Best price": a chip while Auto is the chosen option, plain
   parenthesised text once the card collapses. */
.dd-modal .dd-chip {
    padding: 3px 6px;
    border-radius: 5px;
    background: #EFEADB;
    color: #7C6A3B;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.dd-modal .auto-check:not(.active) .dd-chip {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--dd-hint);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.dd-modal .auto-check:not(.active) .dd-chip::before { content: "("; }
.dd-modal .auto-check:not(.active) .dd-chip::after  { content: ")"; }

/* only the chosen option unfolds */
.dd-modal .auto-check:not(.active) > .dd-plans,
.dd-modal .guaranteed-check:not(.active) > .dd-fields {
    display: none;
}

/* ── Auto: the plan tiles (filled by appendDateTimeToAutoSelectedCard) ── */
/* auto-fit rather than a hard repeat(3,…): three across at the design's
   width, reflowing to two then one as the modal narrows. */
.dd-modal .dd-plans {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0;
}

.dd-modal .dd-plan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px 13px;
    background: var(--color-surface-inset);
    border-radius: var(--radius-md);
}

.dd-modal .dd-plan-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-secondary);
}

.dd-modal .dd-plan-date {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.dd-modal .dd-plan-tz {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--dd-hint);
    overflow-wrap: anywhere;
}

/* ── Custom: the field rows ──────────────────────────────── */
/* The .row / .col-lg-4 scaffolding is left in the markup (the same
   template is included by the legacy quote page, which doesn't load
   this file) — it is simply overridden here. */
.dd-modal .dd-fields {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
}

.dd-modal .dd-field {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.dd-modal .dd-field-label {
    flex: 0 0 var(--dd-label-w);
    width: var(--dd-label-w);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

/* the control itself — date input, and the flatpickr altInput that
   replaces it (flatpickr copies .form-control onto its alt input) */
.dd-modal .dd-field > .form-control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    /* !important: flatpickr's onReady writes height:49px inline on the
       alt input, and inline styles can't be beaten any other way. */
    height: var(--field-h) !important;
    padding: 0 44px 0 16px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: normal;
    color: var(--color-text-primary);
    background-color: var(--color-surface-inset);
    border: none;
    border-radius: var(--dd-field-radius) !important;
    box-shadow: none;
    transition: box-shadow var(--transition-fast);
}

.dd-modal .dd-field > .form-control::placeholder {
    color: var(--dd-placeholder);
    opacity: 1;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.dd-modal .dd-field > .form-control:focus {
    background-color: var(--color-surface-white);
    box-shadow: 0 0 0 3px rgba(149,128,73,0.12);
}

/* calendar glyph, pinned inside the right edge of the date field.
   pointer-events:none so clicking it still opens flatpickr. */
.dd-modal .dd-field > .icon-date {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    line-height: 0;
    font-size: 17px;
    color: var(--color-text-secondary);
    pointer-events: none;
    transition: color var(--transition-fast);
}

/* ── Timezone: a value, not a field ──────────────────────── */
.dd-modal .dd-field--tz {
    gap: 6px;
    flex-wrap: wrap;
}

.dd-modal .dd-field--tz > .dd-field-label {
    margin-right: 6px;
}

.dd-modal .dd-tz-value {
    min-width: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.dd-modal .dd-tz-hint {
    font-size: 12.5px;
    color: var(--dd-placeholder);
}

/* ── Footer ──────────────────────────────────────────────── */
/* Reads as the last block of the body: no rule, no gutter, one
   full-width action. 16px of top padding = the body's 10px gap plus
   the 6px the design puts above the button. */
.dd-modal .modal-footer {
    display: block;
    padding: 16px 24px;
    border-top: none;
    background: transparent;
}

.dd-modal .modal-footer > * { margin: 0; }

.dd-modal .modal-footer .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--field-h);
    padding: 0 20px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-surface-white);
    background: var(--color-brand-gold);
    border: none;
    border-radius: var(--dd-field-radius);
    box-shadow: none;
    transition: background var(--transition-fast);
}

.dd-modal .modal-footer .btn-primary:hover,
.dd-modal .modal-footer .btn-primary:active {
    background: var(--color-brand-gold-hover);
    color: var(--color-surface-white);
}

.dd-modal .modal-footer .btn-primary:focus-visible {
    outline: 2px solid var(--color-brand-gold);
    outline-offset: 2px;
}

/* ready for whenever the button starts being disabled until the
   custom option is complete — the design's greyed "Done" */
.dd-modal .modal-footer .btn-primary:disabled {
    background: #EDEAE1;
    color: #B5AC93;
    opacity: 1;
    cursor: not-allowed;
}

/* ── Info tooltip (shared .modal-wrapper widget) ─────────── */
.dd-modal .modal-wrapper > p {
    color: var(--dd-placeholder);
    font-size: 15px;
    line-height: 1;
    transition: color var(--transition-fast);
}

.dd-modal .modal-wrapper > p:hover {
    color: var(--color-brand-gold);
}

.dd-modal .modal-message {
    top: -8px;
    left: 26px;
    width: 260px;
    max-width: min(260px, 60vw);
    padding: 10px 14px;
    background: var(--color-surface-white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary);
    white-space: normal;
}

.dd-modal .modal-message::before { display: none; }

/* ============================================================
   SELECT2 — the "Time slot" field
   ============================================================
   The select2 skin itself now lives in the global, reusable
   css/select2-theme.css (linked alongside this file from
   form.html) so it can be reused on any page, not just this
   modal. Only the layout hook that makes the field sit correctly
   inside .dd-field stays here.
   ============================================================ */
.dd-modal .dd-field > .select2-container {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Phones: the card takes the width it can get, so the 20px dialog
   padding goes and every inner gutter tightens. */
@media (max-width: 575.98px) {
    .dd-modal .modal-dialog {
        max-width: none;
        margin: 8px;
        padding-inline: 0;
    }

    .dd-modal .modal-header { padding: 18px 16px 0; }
    .dd-modal .modal-body   { padding: 16px 16px 0; }
    .dd-modal .modal-footer { padding: 14px 16px 20px; }

    .dd-modal .dd-option {
        column-gap: 10px;
        padding: 14px;
    }

    .dd-modal .dd-plans { gap: 6px; }
    .dd-modal .dd-plan  { padding: 11px 12px; }

    .dd-modal .modal-footer .btn-primary { height: 48px; }

    .dd-modal { --dd-label-w: 72px; }
}

/* Narrow phones: the label column no longer leaves a usable field,
   so labels move above their control. */
@media (max-width: 419.98px) {
    .dd-modal .dd-field { flex-wrap: wrap; gap: 6px 12px; }

    .dd-modal .dd-field-label {
        flex: 0 0 100%;
        width: 100%;
    }

    .dd-modal .dd-field--tz > .dd-field-label { margin-right: 0; }

    /* the glyph sits inside the field, which now starts a line lower */
    .dd-modal .dd-field > .icon-date {
        top: auto;
        bottom: calc(var(--field-h) / 2);
        transform: translateY(50%);
    }
}

/* Short viewports (landscape phones): let the modal scroll rather
   than push the action out of reach. */
@media (max-height: 560px) {
    .dd-modal .modal-dialog { margin-block: 12px; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dd-modal *,
    .dd-modal *::before,
    .dd-modal *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ── Additional styles ──────────────────────────────────────── */
.custom-date-picker {
    height: 49px !important; 
}