/* =========================================================
   Container Query Setup
   Scales based on the .form_container width, not the viewport
   ========================================================= */
.form_container {
    container-type: inline-size;
    container-name: form;
    position:relative;
}

/* =========================================================
   Defaults + fallbacks
   If container query units aren't supported, we'll fall back to vw
   ========================================================= */
:root {
    --pad: clamp(1px, 1.1vw, 5px);
    --r: clamp(6px, 1.6vw, 8px);
    --rad: 8px;
    --bxpad: clamp(2px, 1.8vw, 12px);
    --bypad: clamp(1px, 1.2vw, 8px);
    --gap: clamp(1px, 1.2vw, 6px);
    --btcol: rgba(0,0,0,.80);
    --dur: 200ms;
    --ease: cubic-bezier(.2,.8,.2,.5);
    --selected: rgba(255,205,0,1);
    --hover: rgba(255,205,0,.25);
    --bg: rgba(248,248,248,1);
    --cbrdr: 1px solid rgba(0,0,0,.12);
    --cbrdr-focus: 1px solid rgba(0,0,0,.25);
    --cbrdr-mini-focus: 1px solid rgba(0,0,0,0);
    --fontsize: clamp(0.8125rem, 0.7054rem + 0.4286vw, 1rem);
}

/* Use container units when supported */
@supports (width: 1cqi) {
    :root {
        --pad: clamp(1px, 1.1cqi, 5px);
        --r: clamp(6px, 1.6cqi, 8px);
        --bxpad: clamp(2px, 1.8cqi, 12px);
        --bypad: clamp(1px, 1.2cqi, 8px);
        --gap: clamp(1px, 1.2cqi, 6px);
    }
}

.mini {
    --pad: 0px;
    --r: 4px;
    --bxpad: 6px;
    --bypad: 4px;
    --gap: 3px;
    --cbrdr: 1px solid rgba(0,0,0,0);
}

/* =========================================================
   Containers
   ========================================================= */
.tdiRadio--wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    align-content: flex-start;
}

.tdiRadio,
.tdiCheck {
    font-family: "Museo Sans W01","Helvetica Neue", Helvetica, sans-serif;
    position: relative;
    display: inline-flex;
    gap: var(--gap);
    padding: var(--pad);
    border-radius: calc(var(--r) + var(--pad));
    border-radius: calc(var(--rad) + 3px);
    background: var(--bg);
    border: var(--cbrdr);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
    font-size: var(--fontsize);
    width: fit-content; /* shrink to the longest row */
    max-width: 100%; /* but never overflow the container */
    align-content: flex-start; /* when wrapped, pack rows at the top */
}

    .tdiRadio:focus-within,
    .tdiCheck:focus-within {
        border: var(--cbrdr-focus);
    }

    .tdiRadio.mini:focus-within,
    .tdiCheck.mini:focus-within {
        border: var(--cbrdr-mini-focus);
    }

/* =========================================================
   Pills
   ========================================================= */
.pill {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    height: calc(100% - (var(--pad) * 2));
    width: 0px;
    border-radius: var(--r);
    transform: translateX(0);
    transition: transform var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease), opacity var(--dur) var(--ease);
    will-change: transform, width, height, opacity;
    pointer-events: none;
}

.p--selected {
    z-index: 0;
    background: var(--selected);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    opacity: 1;
}

.p--hover {
    z-index: 0;
    background: var(--hover);
    box-shadow: none;
    opacity: 0;
}

/* =========================================================
   Radio buttons
   ========================================================= */
.tdiRadio .btn {
    font-family: "Museo Sans W01", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    position: relative;
    margin: unset;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: transparent;
    padding: var(--bypad) var(--bxpad);
    border-radius: var(--r);
    border: 1px solid rgba(255,255,255,0);
    cursor: pointer;
    color: var(--btcol);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), transform 80ms ease;
}

.mini_btn {
    font-family: "Museo Sans W01", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    position: relative;
    margin: unset;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: var(--selected);
    padding: 1px 5px 2px 5px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0);
    cursor: pointer;
    color: var(--btcol);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), transform 80ms ease;
    color: rgba(0,0,0,.98);
    font-weight: 600;
    border: 1px solid rgba(0,0,0,.5);
}

    .tdiRadio .btn:hover,
    .tdiRadio .btn:focus-visible {
        color: rgba(0,0,0,.95);
        outline: none;
    }

    .tdiRadio .btn:active {
        transform: translateY(1px);
    }

    .tdiRadio .btn.is-selected {
        color: rgba(0,0,0,.98);
        font-weight: 600;
        border: 1px solid rgba(0,0,0,.5);
    }

/* =========================================================
   Checkbox buttons
   ========================================================= */

.tdiCheck .cbtn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
    background: transparent;
    padding: var(--bypad) var(--bxpad);
    border-radius: var(--r);
    border: 1px solid rgba(255,255,255,0);
    cursor: pointer;
    color: var(--btcol);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), transform 80ms ease, background-color var(--dur) var(--ease);
    overflow: visible; /* allow drawn-over marks */
}

    .tdiCheck .cbtn:hover,
    .tdiCheck .cbtn:focus-visible {
        color: rgba(0,0,0,.95);
        outline: none;
    }

    .tdiCheck .cbtn:active {
        transform: translateY(1px);
    }


/* =========================================================
   Checkbox box
   ========================================================= */

.tdiCheck .box {
    position: relative;
    left:-2px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.35);
    background: rgba(255,255,255,1);
    overflow: visible; /* critical for drawn-over marks */
}


/* =========================================================
   Tick (SVG) – drawn over the box
   ========================================================= */

.tdiCheck .tick {
    position: absolute;
    left: -3px;
    top: -16px;
    width: 35px;
    height: 42px;
    opacity: 0;
    transform: scale(.9);
    transition: opacity 120ms ease, transform 140ms ease;
    color: #469a30;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
}

/* Animated stroke */
.tdiCheck .tickPath {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 1240ms cubic-bezier(.2,.9,.2,1);
}

/* Checked state */
.tdiCheck .cbtn.is-checked {
    background: var(--selected);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    color: rgba(0,0,0,.98);
    font-weight: 600;
    border: 1px solid rgba(0,0,0,.5);
}

    .tdiCheck .cbtn.is-checked .tick {
        opacity: 1;
        transform: scale(1);
    }

    .tdiCheck .cbtn.is-checked .tickPath {
        stroke-dashoffset: 0;
    }

    .tdiCheck .cbtn.is-checked .box {
        border-color: rgba(0,0,0,.55);
        background: rgba(255,255,255,.85);
    }

/* Reset animation when unchecked */
.tdiCheck .cbtn:not(.is-checked) .tickPath {
    transition: none;
    stroke-dashoffset: 40;
}

/* =========================================================
   Cross (SVG) – drawn-over + 2-stroke animation (single mode)
   ========================================================= */

.tdiCheck .box {
    overflow: visible;
    position: relative;
}

.tdiCheck .cbtn {
    overflow: visible;
}

.tdiCheck .cross {
    position: absolute;
    left: -9px;
    top: -10px;
    width: 36px;
    height: 36px;
    pointer-events: none;
    z-index: 3; /* above tick */
    color: rgba(198, 40, 40, .7); /* red */
    opacity: 0; /* hidden by default */
}

/* Prep strokes for "draw" animation */
.tdiCheck .crossStroke {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

/* Show cross ONLY when single-mode AND not empty */
.tdiCheck--single:not(.tdiCheck--empty)
.cbtn:not(.is-checked) .cross {
    opacity: 1;
}

/* First stroke: TL -> BR */
.tdiCheck--single .cbtn:not(.is-checked) .crossStroke1 {
    animation: tdiCrossDraw1 260ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* Second stroke: TR -> BL (starts after first finishes) */
.tdiCheck--single .cbtn:not(.is-checked) .crossStroke2 {
    animation: tdiCrossDraw2 260ms cubic-bezier(.2,.9,.2,1) forwards;
    animation-delay: 170ms;
}

/* When it becomes checked, hide & reset cross immediately */
.tdiCheck--single .cbtn.is-checked .crossStroke {
    animation: none;
    stroke-dashoffset: 40;
}

.tdiCheck--single .cbtn.is-checked .cross {
    opacity: 0;
}

.small_button {
    position: relative;
    top: -2px;
    color: #fff;
    background: #111827;
    padding: 2px 4px;
    border-radius: 5px;
    background: #f39200;
    font-size: 11px;
    font-weight: 700;
}

    .small_button:hover {
        background: #111827;
        transform: translateY(-1px);
    }



.continue {
    float: right;
    display: block;
    padding: clamp(10px, 2vw, 15px) clamp(10px, 2vw, 25px);
    color: #fff;
    background-color: #f39200;
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

    .continue:hover {
        background-color: #000;
    }

.back {
    position: relative;
    left: -20px;
    float: left;
    display: block;
    padding: clamp(10px, 2vw, 15px) clamp(10px, 2vw, 25px);
    color: #fff;
    background-color: #999;
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 20px;
    margin-left: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    .back:hover {
        background-color: #000;
    }

    @keyframes tdiCrossDraw1 {
        to {
            stroke-dashoffset: 0;
        }
    }

@keyframes tdiCrossDraw2 {
    to {
        stroke-dashoffset: 0;
    }
}


/* =========================================================
   Last resort: wrap when the CONTAINER is narrow
   Note: pills are 1D; hide pills when wrapping
   ========================================================= */
@container form (max-width: 420px) {
    .tdiRadio,
    .tdiCheck {
        flex-wrap: wrap;
    }
}