:root {
    /*    --colore-zona: #ff9b61;
    --colore-targa: #94dbfa;
    --colore-timer: #c8ff68;
    --colore-timer-btn: #c2f76b;
    --colore-price: #ffe16a;
    --colore-testo: #232933;*/
    /*COLORI CONSIGLITI DA AMT3*/
    --colore-zona: #AE1316;
    --colore-targa: #841873;
    --colore-targa-btn: #a30d8a;
    --colore-timer: #344169;
    --colore-timer-btn: #415183;
    --colore-price: #a6a105;
    --colore-testo: #ffffff;
    /*bootstrap pastellato*/
    /*
    --colore-primary-pastello: #4da2ff;
    --colore-primary-pastello-bordo: #1a87ff;
    --colore-primary-pastello-disabled: #68a3e4;
    --colore-primary-pastello-bordo-disabled: #54a2f8;
    --colore-primary-pastello-hover: #3495ff;
    --colore-primary-pastello-bordo-hover: #007aff;
    --colore-secondary-pastello: #868e96;
    --colore-secondary-pastello-bordo: #6c757d;
    --colore-secondary-pastello-disabled: #a6abb1;
    --colore-secondary-pastello-bordo-disabled: #91989f;
    --colore-secondary-pastello-hover: #78818a;
    --colore-secondary-pastello-bordo-hover: #60686f;
*/
    /*Verde viola*/
    /*
    --colore-primary-pastello: #89efa3;
    --colore-primary-pastello-bordo: #5ec98a;
    --colore-primary-pastello-disabled: #93e5a8;
    --colore-primary-pastello-bordo-disabled: #93e5a8;
    --colore-primary-pastello-hover: #73ec91;
    --colore-primary-pastello-bordo-hover: #4bbd7a;

    --colore-secondary-pastello: #a389ef;
    --colore-secondary-pastello-bordo: #805ce9;
    --colore-secondary-pastello-disabled: #d8ccf8;
    --colore-secondary-pastello-bordo-disabled: #b59ff2;
    --colore-secondary-pastello-hover: #9173ec;
    --colore-secondary-pastello-bordo-hover: #805ce9;
*/
    /* Verde grigio*/
    --colore-primary-pastello: #89efa3;
    --colore-primary-pastello-bordo: #5ec98a;
    --colore-primary-pastello-disabled: #93e5a8;
    --colore-primary-pastello-bordo-disabled: #93e5a8;
    --colore-primary-pastello-hover: #73ec91;
    --colore-primary-pastello-bordo-hover: #4bbd7a;
    --colore-secondary-pastello: #868e96;
    --colore-secondary-pastello-bordo: #6c757d;
    --colore-secondary-pastello-disabled: #a6abb1;
    --colore-secondary-pastello-bordo-disabled: #91989f;
    --colore-secondary-pastello-hover: #78818a;
    --colore-secondary-pastello-bordo-hover: #60686f;
    --colore-link-pastello: #7fa6f7;
    --colore-link-pastello-bordo: #6d99f6;
    --colore-link-pastello-hover: #487ff4;
    --colore-link-pastello-bordo-hover: #3573f2;
    --colore-sfondo: #e8e8ee;
    --colore-footer: #cbcbd8;
}

.material-symbols-rounded {
    font-weight: 700!important;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background: var(--colore-sfondo);
    margin-bottom: 60px;
}

.footer {
    background: var(--colore-footer);
}

.zona-card {
    background: var(--colore-zona);
    border-radius: 16px;
}

.zona-testo {
    color: #232933;
    font-weight: bold;
    font-size: 1.2rem;
}

.targa-card {
    background: var(--colore-targa);
    border-radius: 16px;
}

.targa-testo {
    font-size: 1.2rem;
}

.car-icon {
    font-size: 2rem;
    color: var(--colore-testo);
    flex-shrink: 0;
}

.zona-icon {
    font-size: 2rem;
    color: var(--colore-testo);
}

.targa-input-edit {
    background: #eaf6fb;
    border: 2px solid #b6eaff;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #232933;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    outline: none;
    padding: 6px 12px;
    margin: 0 8px;
    flex: 1 1 0;
    min-width: 0;
}

    .targa-input-edit:disabled {
        background: #e0e0e0;
        color: #a0a0a0;
        border-color: #cccccc;
        cursor: not-allowed;
        opacity: 1;
    }

    .targa-input-edit:focus {
        border-color: #0057b8;
        background: #fff;
    }

    .targa-input-edit::placeholder {
        color: #23293399;
        opacity: 1;
    }

.btn-outline-secondary.btn-sm {
    border-radius: 50%;
    padding: 6px 8px;
    font-size: 1.2rem;
    border: 2px solid #23293322;
    background: #fff;
    color: #232933;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}


    .btn-outline-secondary.btn-sm:hover {
        background: #e0e0e0;
        color: #232933;
    }

.timer-card {
    background: var(--colore-timer);
    border-radius: 20px;
    padding: 18px 20px;
    text-align: center;
}

.timer-duration {
    font-size: 1rem;
    color: #232933;
    font-weight: bold
}

.timer-data {
    font-size: 1.3rem;
    font-weight: bold;
    color: #232933;
}

.timer-ora {
    font-size: 5rem;
    font-weight: bolder;
    color: #232933;
}

.timer-card-pagamento {
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-timer {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    background: var(--colore-timer-btn);
    color: var(--colore-testo);
    font-size: 1.2rem;
    font-weight: bold;
    border: 2px solid #3a4976;
    border-radius: 12px;
    margin: 0 4px;
    padding: 10px 0;
    transition: background 0.2s;
}

    .btn-timer:active {
        background: #495c94;
        color: var(--colore-testo);
        border: 2px solid var(--colore-timer-btn);
        transform: translateY(2px) scale(0.98);
    }

    .btn-timer:disabled {
        opacity: 0.5;
    }



.btn-mobile {
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 16px;
    padding: 16px 0;
    margin-top: 8px;
    border: 2px solid #fff;
    transition: background 0.2s, color 0.2s;
}

.btn-reset {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 1.1rem;
    line-height: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3a4976;
    background: #415183;
    color: #ffffff;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
    margin-right: 8px;
}

    .btn-reset:active {
        background: #495c94;
        color: #ffffff;
        border: 2px solid var(--colore-timer-btn);
        transform: translateY(2px) scale(0.98);
    }

.btn-riprova-foto {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 1.1rem;
    background: var(--colore-targa-btn);
    border: 2px solid #b50e99;
    color: var(--colore-testo)
}

    .btn-riprova-foto:active {
        background: #b50e99;
        border: 2px solid #c710a9;
    }

.price-card {
    background: var(--colore-price);
    border-radius: 20px;
    padding: 2px 0;
    text-align: center;
    font-size: 4rem;
    font-weight: bolder;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.zona-card,
.targa-card,
.timer-card-pagamento {
    padding: 18px 20px;
    font-size: 1.3rem;
    min-height: 64px; /* opzionale, per forzare altezza minima */
    display: flex;
    align-items: center;
    gap: 12px;
}

.zona-card,
.targa-card,
.timer-card,
.timer-data,
.timer-ora,
.zona-testo,
.timer-duration,
.price-card {
    color: var(--colore-testo);
}

.spinner-inside-input {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
}

.input-targa-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.btn-primary-pastello {
    background: var(--colore-primary-pastello);
    border: 2px solid var(--colore-primary-pastello-bordo) !important;
    color: #232933 !important;
    font-weight: bold;
    border-radius: 16px;
    padding: 16px 0;
    font-size: 1.3rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

    .btn-primary-pastello:disabled,
    .btn-primary-pastello[disabled],
    .btn-primary-pastello[disabled]:focus,
    .btn-primary-pastello:disabled:focus {
        background: var(--colore-primary-pastello-bordo-disabled) !important;
        border-color: var(--colore-primary-pastello-bordo-disabled) !important;
        color: #7a7a7a !important;
        cursor: not-allowed;
        opacity: 1
    }

    .btn-primary-pastello:not(:disabled):hover,
    .btn-primary-pastello:not(:disabled):focus {
        background: var(--colore-primary-pastello-hover) !important;
        border-color: var(--colore-primary-pastello-bordo-hover) !important;
        color: #232933 !important;
    }

.btn-secondary-pastello {
    background: var(--colore-secondary-pastello) !important;
    border: 2px solid var(--colore-secondary-pastello-bordo) !important;
    color: #232933 !important;
    font-weight: bold;
    border-radius: 16px;
    padding: 16px 0;
    font-size: 1.3rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

    .btn-secondary-pastello:disabled,
    .btn-secondary-pastello[disabled] {
        background: var(--colore-secondary-pastello-disabled) !important;
        border-color: var(--colore-secondary-pastello-bordo-disabled) !important;
        color: #7a7a7a !important;
        cursor: not-allowed;
        opacity: 1;
    }

    .btn-secondary-pastello:hover,
    .btn-secondary-pastello:focus {
        background: var(--colore-secondary-pastello-hover) !important;
        border-color: var(--colore-secondary-pastello-bordo-hover) !important;
        color: #232933 !important;
    }


.btn-link-pastello {
    background: var(--colore-link-pastello) !important;
    border: 2px solid var(--colore-link-pastello-bordo) !important;
    color: #232933 !important;
    font-weight: bold;
    border-radius: 16px;
    padding: 16px 0;
    font-size: 1.3rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

    .btn-link-pastello:hover,
    .btn-link.pastello:focus {
        background: var(--colore-link-pastello-hover) !important;
        border-color: var(--colore-link-pastello-bordo-hover) !important;
        color: #232933 !important;
    }