/*
 * ============================================================
 *  step-2.css  —  Misure e Sartoria
 *  Layout: due colonne (guida sinistra | form destra)
 *  Sfondo bianco sulla destra
 * ============================================================
 */

#ctp-sartoria-info-block{
    margin-bottom: 20px;
}

.ctp-step--misure {
    display: flex;
    min-height: calc(100vh - var(--progress-h));
}

/* ── colonna sinistra: guida ── */
.ctp-misure__guide {
    width: 520px;
    flex-shrink: 0;
    padding: 40px 32px;
    border-right: 1px solid rgba(255,255,255,0.08);
    color:#fff;
    h2{
        color:#fff;
        font-size: 40px!important;
    }
}
.ctp-misure__guide-chosen {
    font-family: var(--font-ui);
    font-size: 18px; font-weight: 600;
    opacity: 1;
    margin-bottom: 18px;
    letter-spacing: 0.04em;
    color: #fff;
}
.ctp-misure__guide-body {
    font-family: var(--font-ui);
    font-size: 18px; font-weight: 300;
    line-height: 1.72;
    opacity: 0.88;
}
.ctp-misure__guide-body p { margin-bottom: 10px; }
.ctp-misure__guide-body strong { font-weight: 600; }

.ctp-misure__diagram { margin: 16px 0; }
.ctp-misure__tips { margin-top: 8px; }
.ctp-misure__tips p {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 300;
    opacity: 0.88; margin-bottom: 8px; line-height: 1.65;
}

.ctp-misure__note {
    margin-top: 22px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--ctp-radius-sm);
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 300;
    line-height: 1.65;
}
.ctp-misure__note em { color: var(--ctp-brown-light); font-style: italic; }

/* ── colonna destra: form ── */
.ctp-misure__form {
    flex: 1;
    padding: 40px;
    background: var(--ctp-white);
    color: var(--ctp-text);
    overflow-y: auto;
    border-radius: 15px;
    overflow-x: hidden;
    height: fit-content;
    div#ctp-apertura-wrap{
        [type=button], [type=submit], button{
            border: 1px solid #3d2800!important;
            color: #3d2800;
            &:hover, &:focus{
                background: #3d2800!important;
                color: #fff!important;
                .ctp-divisione-btn__title{
                    color: #fff!important;
                }
            }
        }
    }
}

/* box "come misurare" */
.ctp-misure__how {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f4ede2;
    border-radius: var(--ctp-radius-sm);
    padding: 14px;
    margin-bottom: 24px;
    @media (max-width: 768px) {
        flex-direction: column;
    }
}
.ctp-misure__how strong {
    display: block;
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 600;
    color: var(--dark-brown);
    margin-bottom: 4px;
}
.ctp-misure__how p {
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 300;
    color: var(--ctp-text-light);
    line-height: 1.6;
}
.ctp-misure__how-note {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 500;
    color: var(--ctp-brown);
    margin-top: 6px;
}

/* coppia input larghezza/altezza */
.ctp-misure__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
.ctp-misure__field { display: flex; flex-direction: column; gap: 6px; }

/* label */
.ctp-label {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ctp-text-light);
}
.ctp-label__note { font-weight: 400; letter-spacing: 0; text-transform: none; }

/* input numerico */
.ctp-input-wrap {
    position: relative;
    display: flex; align-items: center;
}
.ctp-input {
    width: 100%;
    padding: 14px 48px 14px 16px;
    border: 1px solid #e0d8cc;
    font-family: var(--font-serif);
    font-size: 22px; font-weight: 700;
    color: var(--dark-brown);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}
.ctp-input::-webkit-inner-spin-button,
.ctp-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ctp-input:focus {
    outline: none;
    border-color: var(--ctp-brown);
    box-shadow: 0 0 0 3px rgba(139,105,20,0.12);
}
.ctp-input__unit {
    position: absolute; right: 36px;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 500;
    color: var(--ctp-text-light);
    pointer-events: none;
}
.ctp-input__check {
    position: absolute; right: 12px;
    font-size: 16px; color: #2ea05a;
    animation: ctpCheckPop 0.28s ease;
}
@keyframes ctpCheckPop {
    from { transform: scale(0); } to { transform: scale(1); }
}
.ctp-input__hint {
    font-family: var(--font-ui);
    font-size: 10.5px; font-weight: 300;
    color: var(--ctp-text-light);
}

/* sartoria */
.ctp-misure__sartoria { margin-bottom: 22px; }
.ctp-sartorie {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ctp-sartoria-btn {
    flex: 1; min-width: 130px;
    padding: 13px 14px;
    border: 1px solid #e0d8cc;
    background: #fff; cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.ctp-sartoria-btn:hover      { border-color: var(--ctp-brown-light); transform: translateY(-1px); }

.ctp-sartoria-btn.is-active {
    border-color: var(--ctp-brown);
    background: var(--dark-brown);
    color: #fff;
    .ctp-sartoria-btn__name, .ctp-sartoria-btn__price span {
        color: #fff;
    }
}
.ctp-sartoria-btn__name {
    display: block;
    font-family: var(--font-serif);
    font-size: 14px; font-weight: 600;
    color: var(--dark-brown);
    margin-bottom: 3px;
}
.ctp-sartoria-btn__desc {
    display: block;
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 300;
    color: var(--ctp-text-light);
    line-height: 1.5;
}
.ctp-sartoria-btn__price {
    display: block;
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 600;
    color: var(--ctp-brown);
    margin-top: 5px;
}

/* riepilogo misure (appare quando entrambe le misure sono inserite) */
.ctp-misure__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--ctp-brown-deeper);
    border-radius: var(--ctp-radius-sm);
    color: #fff;
    margin-bottom: 22px;
    animation: ctpSlideDown 0.28s ease;
    display: none!important;
}
@keyframes ctpSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ctp-misure__summary .ctp-label  { color: rgba(255,255,255,0.52); }
.ctp-misure__summary-val {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 700;
    color: #fff; display: block;
}
span#ctp-summary-mq {
    color: var(--soft-brown);
}
/* galleria miniature del modello scelto */
.ctp-misure__gallery {
    display: flex; gap: 6px;
    margin-top: 22px;
    @media (max-width: 768px) {
        display: none;
    }
    img{
        height: 250px!important;
    }
}
.ctp-misure__gallery img {
    flex: 1; aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--ctp-radius-sm);
    transition: transform 0.3s;
    width: 30%;
}
.ctp-misure__gallery img:hover { transform: scale(1.04); }

/* responsive */
@media (max-width: 860px) {
    .ctp-step--misure    { flex-direction: column-reverse; }
    .ctp-misure__guide   { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .ctp-misure__form    { padding: 28px 20px; }
    .ctp-misure__inputs  { grid-template-columns: 1fr; }
}

/* ── Come vuoi che cada ── */
.ctp-misure__caduta { margin-bottom: 22px; }
.ctp-caduta-group {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 8px;
}
.ctp-caduta-btn {
    flex: 1; min-width: 110px;
    padding: 12px 14px;
    border: 2px solid #e0d8cc;
    border-radius: var(--ctp-radius-sm);
    background: #fff; cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.ctp-caduta-btn:hover     { border-color: var(--ctp-brown-light); transform: translateY(-1px); }
.ctp-caduta-btn.is-active { border-color: var(--ctp-brown-deeper); background: var(--ctp-brown-deeper); }
.ctp-caduta-btn.is-active .ctp-caduta-btn__label,
.ctp-caduta-btn.is-active .ctp-caduta-btn__note { color: #fff; }
.ctp-caduta-btn__label {
    display: block;
    font-family: var(--font-serif);
    font-size: 13px; font-weight: 600;
    color: var(--dark-brown);
    margin-bottom: 3px;
}
.ctp-caduta-btn__note {
    display: block;
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 300;
    color: var(--ctp-text-light);
}

/* ── Icona misure + testo affiancati ── */
.ctp-misure__diagram-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 16px 0 8px;
}
.ctp-misure__diagram-img {
    width: 90px;
    flex-shrink: 0;
    border-radius: 4px;
}
.ctp-misure__diagram-tips p {
    font-size: 12px; font-weight: 300;
    line-height: 1.6; margin-bottom: 8px;
    opacity: 0.9;
}

/* ── Icona nel box "come misurare" ── */
.ctp-misure__how-icon {
    width: 62px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
}

/* ── Errori validazione ── */
.ctp-misure__errors { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ctp-misure__errors span {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 500;
    color: #c0392b;
}
.ctp-input.is-error { border-color: #c0392b !important; }

/* ── Label required hint ── */
.ctp-label__required {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 500;
    color: #c0392b;
    letter-spacing: 0; text-transform: none;
}

.ctp-step-nav.misure-nav{
 button{
     width: 49%;
     padding: 16px 32px;
     @media (max-width: 768px) {
         width: 100%;
     }
 }
}
/* ─────────────────────────────────────────────
   TENDA MORBIDA — selezione divisione (step 2)
───────────────────────────────────────────── */
.ctp-divisione-wrap {
    margin-top: 16px;
}
.ctp-divisione-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    @media (max-width: 560px) {
        grid-template-columns: 1fr;
    }
}
.ctp-divisione-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    background: var(--ctp-offwhite, #FAF8F5);
    border: 2px solid #e2d8c8;
    border-radius: var(--ctp-radius-sm, 8px);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    font-family: var(--font-ui);
}
.ctp-divisione-btn:hover {
    border-color: var(--ctp-brown-light, #D4A853);
    transform: translateY(-1px);
}
.ctp-divisione-btn.is-active {
    border-color: var(--ctp-brown, #8B6914);
    background: #fdf5e0;
}
.ctp-divisione-btn__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-brown, #3B2A1A);
    line-height: 1.2;
}
.ctp-divisione-btn__desc {
    display: block;
    font-size: 11px;
    font-weight: 300;
    color: var(--ctp-text-light, #6B5540);
    line-height: 1.5;
}