/* FILE: /v2/include/css/03-components.css
   COSA FA:
   Componenti UI riutilizzabili /v2.
   Include bottoni, badge, stepper, drawer, modali, QR, form e utility comuni.
   Usa variabili template per supportare temi chiari/scuri.
*/

/* =========================
   UTILITY COMPONENTI
========================= */

.cm-icon-sm{
    font-size:18px;
    vertical-align:text-bottom;
}

.cm-icon-md{
    font-size:20px;
    vertical-align:middle;
}

.cm-modal-rounded{
    border-radius:var(--cm-radius-md);
    overflow:hidden;
}

/* =========================
   BOTTONI / BADGE
========================= */

.btn-pill{
    border-radius:var(--cm-btn-radius) !important;
    font-weight:900;
}

.btn-cta{
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
    color:#fff;
    border:0;
}

.btn-cta:hover{
    color:#fff;
    filter:brightness(.98);
}

.btn-ghost{
    border-radius:var(--cm-radius-md);
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    color:var(--cm-text);
    font-weight:900;
    padding:10px 12px;
}

.badge-soft{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:.25rem .55rem;
    border-radius:999px;
    background:var(--cm-bg-soft);
    border:1px solid var(--cm-line);
    color:var(--cm-text);
    font-size:.82rem;
    font-weight:700;
}

.badge-soft .material-icons{
    font-size:16px;
}

/* =========================
   STEPPER
========================= */

.stepper{
    display:flex;
    justify-content:center;
    margin:10px 0 16px;
}

.stepper .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--cm-line);
    margin:0 6px;
    transition:.25s;
}

.stepper .dot.active{
    width:24px;
    border-radius:8px;
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
}

.step{
    display:none;
}

.step.active{
    display:block;
}

/* =========================
   DATE / SELETTORI
========================= */

.btn-date{
    border-radius:999px;
    white-space:normal;
    text-align:center;
    min-height:64px;
}

.btn-date.two-line .day{
    display:block;
    line-height:1.05;
    font-weight:900;
}

.btn-date.two-line .date{
    display:block;
    line-height:1.05;
    opacity:.9;
}

#date-buttons .btn{
    border-color:var(--cm-line);
}

#date-buttons .btn.btn-primary{
    border-color:transparent;
    box-shadow:0 8px 16px rgba(14,165,233,.25);
}

#date-buttons .btn.btn-primary,
#date-buttons .btn.active{
    color:#fff !important;
    font-weight:700;
}

#date-buttons .btn.btn-primary .day,
#date-buttons .btn.btn-primary .date{
    color:#fff !important;
}

.covers-wrap .cbtn{
    border-radius:var(--cm-radius-md);
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    color:var(--cm-text);
    padding:12px 14px;
    text-align:center;
    cursor:pointer;
    box-shadow:var(--cm-shadow-sm);
    transition:transform .12s ease, box-shadow .12s ease;
    font-weight:700;
}

.covers-wrap .cbtn:hover{
    transform:translateY(-1px);
    box-shadow:var(--cm-shadow-md);
}

.covers-wrap .cbtn.active{
    color:#fff;
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
    border-color:transparent;
    box-shadow:0 10px 20px rgba(99,102,241,.22);
}

/* =========================
   DRAWER / BACKDROP
========================= */

.drawer-backdrop,
.pmodal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:120;
    background:rgba(2,8,23,.55);
}

.pmodal-backdrop.show{
    display:block;
}

.drawer{
    position:fixed;
    left:0;
    right:0;
    bottom:-110%;
    z-index:121;
    background:var(--cm-card);
    color:var(--cm-text);
    border-top-left-radius:var(--cm-radius-xl);
    border-top-right-radius:var(--cm-radius-xl);
    box-shadow:0 -20px 50px rgba(2,8,23,.30);
    transition:.22s ease;
    max-height:88vh;
    overflow:auto;
}

.drawer.open{
    bottom:0;
}

.drawer-head{
    padding:12px 14px;
    border-bottom:1px solid var(--cm-line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    background:var(--cm-card);
    color:var(--cm-text);
    z-index:5;
}

.drawer-title{
    font-weight:950;
    display:flex;
    align-items:center;
    gap:8px;
}

.drawer-close{
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    color:var(--cm-text);
    border-radius:999px;
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.line{
    height:6px;
    width:54px;
    background:var(--cm-line);
    border-radius:999px;
    margin:10px auto 0;
}

/* =========================
   PRODUCT MODAL / BOTTOM SHEET
========================= */

.pmodal{
    position:fixed;
    left:0;
    right:0;
    bottom:-120%;
    background:var(--cm-card);
    color:var(--cm-text);
    z-index:141;
    border-top-left-radius:var(--cm-radius-xl);
    border-top-right-radius:var(--cm-radius-xl);
    box-shadow:0 -20px 50px rgba(2,8,23,.30);
    transition:.22s ease;
    max-height:90vh;
    overflow:auto;
}

.pmodal.open,
.pmodal.show{
    bottom:0;
}

.pmodal-head{
    padding:12px 14px;
    border-bottom:1px solid var(--cm-line);
    position:sticky;
    top:0;
    background:var(--cm-card);
    color:var(--cm-text);
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.pmodal-title{
    font-weight:950;
    display:flex;
    align-items:center;
    gap:8px;
}

.pmodal-body{
    padding:12px 14px;
}

.pmodal-img{
    width:100%;
    height:210px;
    border-radius:var(--cm-radius-md);
    overflow:hidden;
    background:linear-gradient(120deg, rgba(14,165,233,.18), rgba(99,102,241,.18));
    border:1px solid var(--cm-line);
    box-shadow:var(--cm-shadow-sm);
}

.pmodal-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.psec{
    margin-top:14px;
}

.psec h6{
    font-weight:950;
    margin:0 0 8px;
    display:flex;
    align-items:center;
    gap:8px;
}

.pmodal-foot{
    position:sticky;
    bottom:0;
    background:color-mix(in srgb, var(--cm-card) 94%, transparent);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--cm-line);
    padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.pmodal-price{
    font-weight:950;
    font-size:1.05rem;
    white-space:nowrap;
}

.pmodal-add{
    border-radius:999px;
    border:0;
    padding:11px 14px;
    color:#fff;
    font-weight:950;
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
    box-shadow:0 12px 22px rgba(14,165,233,.22);
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.pmodal-qty{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--cm-line);
    border-radius:999px;
    padding:6px 10px;
    background:var(--cm-card);
    color:var(--cm-text);
    box-shadow:var(--cm-shadow-sm);
}

.pmodal-qty .q{
    min-width:22px;
    text-align:center;
    font-weight:950;
}

.pmodal-qty button{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    color:var(--cm-text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   PILLS / VARIANTI
========================= */

.pill,
.pillx{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:6px 10px;
    color:var(--cm-text);
}

.pill{
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    font-weight:900;
    font-size:.82rem;
}

.pillx{
    padding:7px 10px;
    background:var(--cm-bg-soft);
    border:1px solid var(--cm-line);
    color:var(--cm-text);
    font-size:.88rem;
    font-weight:700;
}

.plist,
.variant-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.variant-box{
    border:1px solid var(--cm-line);
    border-radius:var(--cm-radius-md);
    padding:12px;
    background:var(--cm-card);
    color:var(--cm-text);
    margin-bottom:10px;
}

.variant-title{
    font-weight:900;
    margin-bottom:8px;
    color:var(--cm-text);
}

/* =========================
   RIEPILOGO / SUMMARY
========================= */

.summary{
    background:var(--cm-bg-soft);
    border-radius:var(--cm-radius-md);
    padding:12px;
    margin-bottom:12px;
    border:1px solid var(--cm-line);
    color:var(--cm-text);
}

.summary .k{
    font-weight:700;
    margin-right:6px;
    color:var(--cm-text);
}

.summary .v{
    color:var(--cm-muted);
}

.sum-card{
    border:1px solid var(--cm-line);
    border-radius:var(--cm-radius-md);
    padding:12px;
    background:var(--cm-bg-soft);
    color:var(--cm-text);
}

.sum-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:6px 0;
    border-bottom:1px dashed var(--cm-line);
}

.sum-row:last-child{
    border-bottom:0;
}

.sum-row .l{
    color:var(--cm-muted);
}

.sum-row .r{
    font-weight:900;
    text-align:right;
    color:var(--cm-text);
}

.sum-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.sum-thumb{
    width:54px;
    height:54px;
    border-radius:var(--cm-radius-md);
    overflow:hidden;
    flex:0 0 54px;
    background:linear-gradient(120deg, rgba(14,165,233,.18), rgba(99,102,241,.18));
    border:1px solid var(--cm-line);
    box-shadow:var(--cm-shadow-sm);
}

.sum-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sum-main{
    flex:1 1 auto;
    min-width:0;
}

/* =========================
   FORM
========================= */

.required:after{
    content:" *";
    color:#ef4444;
}

/* =========================
   ALERT / LOADING
========================= */

.cm-alert{
    display:none;
    border-radius:var(--cm-radius-md);
    font-weight:700;
}

.disabled-note{
    background:var(--cm-bg-soft);
    border:1px solid var(--cm-line);
    color:var(--cm-text);
    border-radius:var(--cm-radius-md);
    padding:12px;
}

.spin{
    display:inline-block;
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.55);
    border-top-color:#fff;
    border-radius:50%;
    animation:cm-spin .8s linear infinite;
    vertical-align:text-bottom;
    margin-right:8px;
}

@keyframes cm-spin{
    to{
        transform:rotate(360deg);
    }
}

/* =========================
   QR / CODICI
========================= */

.qr-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--cm-card);
    border:1px solid var(--cm-line);
    border-radius:var(--cm-radius-md);
    padding:14px;
}

.qr-info{
    background:var(--cm-bg-soft);
    border:1px solid var(--cm-line);
    border-radius:var(--cm-radius-md);
    padding:12px;
    color:var(--cm-text);
}

.code-big{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    background:var(--cm-card);
    color:var(--cm-text);
    border:1px dashed var(--cm-line);
    border-radius:12px;
    padding:12px 10px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:clamp(.92rem, 4vw, 1.15rem);
    font-weight:900;
    letter-spacing:.06em;
    line-height:1.35;
    word-break:break-word;
    overflow-wrap:anywhere;
    text-align:center;
}

.copy-row{
    display:flex;
    gap:10px;
}

.copy-row .btn{
    flex:1 1 0;
    border-radius:12px;
}