/* ============================================================
   ScobeBundle — CSS admin + frontend
   ============================================================ */

/* ── ADMIN PANEL ── */
.scobe-admin-wrap { padding: 16px 20px; }
.scobe-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.scobe-row label { min-width: 180px; font-weight: 600; color: #1d2327; }
.scobe-row .description { color: #666; font-size: .85em; margin: 4px 0 0; }
.scobe-inline { gap: 8px; }
.scobe-inline label { min-width: unset; }
.scobe-sec-title { color: #1d2327; border-bottom: 2px solid #6EC4A0; padding-bottom: 6px; margin: 20px 0 10px; font-size: .95em; text-transform: uppercase; letter-spacing: .5px; }
.scobe-table th { background: #f6f7f7; font-weight: 600; font-size: .85em; }
.scobe-table td, .scobe-table th { padding: 8px 10px; vertical-align: middle; }
.scobe-table .tiny-text { width: 56px !important; }
.scobe-slot-block { border: 1.5px solid #DDE8E4; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #F9FCF9; }
.scobe-slot-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.scobe-slot-hd strong { font-size: 1em; color: #2D4A3E; }


/* ── FRONTEND — WRAP ── */
.scobe-bundle-wrap { margin-top: 24px; }
.scobe-bundle-title { font-size: 1.4em; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; font-family: 'Space Grotesk','Inter',sans-serif; }
.scobe-bundle-sub   { color: #666; margin: 0 0 20px; font-size: 1em; line-height: 1.6; }


/* ── PICK: griglia ── */
.scobe-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.scobe-pick-item {
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    padding: 0 0 10px;
    cursor: pointer;
    transition: all .2s;
    overflow: hidden;
    text-align: center;
    background: #fff;
    position: relative;
}
.scobe-pick-item:hover  { border-color: #6EC4A0; box-shadow: 0 4px 14px rgba(110,196,160,.18); }
.scobe-pick-item.selected { border-color: #6EC4A0; background: #F0FAF6; }
.scobe-pick-cover { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #f5f5f5; }
.scobe-pick-cover img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s; }
.scobe-pick-item:hover .scobe-pick-cover img { transform: scale(1.04); }
.scobe-pick-placeholder { display:flex; align-items:center; justify-content:center; height:100%; font-size:2.5em; color:#ccc; }
.scobe-pick-check {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #6EC4A0; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85em; font-weight: 800;
    opacity: 0; transform: scale(.6);
    transition: all .2s;
}
.scobe-pick-item.selected .scobe-pick-check { opacity: 1; transform: scale(1); }
.scobe-pick-name { font-size: .82em; font-weight: 600; color: #1A1A1A; margin: 8px 8px 0; line-height: 1.3; }

/* PICK: tier table */
.scobe-tier-table { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.scobe-tier-row {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 14px; border-radius: 8px;
    border: 1.5px solid #E0E0E0; background: #fff;
    transition: all .2s; min-width: 90px;
}
.scobe-tier-row.active  { border-color: #6EC4A0; background: #F0FAF6; }
.scobe-tier-heading { font-size: .78em; text-transform: uppercase; letter-spacing: 1px; color: #999; font-weight: 600; margin: 0 0 8px; width: 100%; }
.scobe-tier-lbl   { font-size: .82em; color: #666; }
.scobe-tier-price { font-size: .9em; font-weight: 700; color: #1A1A1A; }
.scobe-tier-row.active .scobe-tier-price { color: #4FA882; }

/* PICK: summary */
.scobe-pick-summary {
    display: flex; justify-content: space-between;
    background: #F7FAF8; border-radius: 8px; padding: 12px 18px;
    margin-bottom: 16px; font-size: 1em;
}
.scobe-pick-summary strong { font-size: 1.15em; color: #4FA882; }
.scobe-pick-hint { font-size: .85em; color: #999; margin: 6px 0 0; }


/* ── CHOICE ── */
.scobe-choice-fixed { margin-bottom: 20px; }
.scobe-choice-sec { font-size: 1em; font-weight: 700; color: #1A1A1A; margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.scobe-slot-req { font-size: .8em; font-weight: 400; color: #6EC4A0; background: #F0FAF6; padding: 2px 10px; border-radius: 20px; }
.scobe-fixed-list { margin: 0; padding: 0 0 0 4px; list-style: none; }
.scobe-fixed-list li { padding: 4px 0; color: #444; font-size: .95em; }
.scobe-choice-slot { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #E8F0ED; }
.scobe-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 12px; margin-bottom: 8px;
}
.scobe-choice-item {
    border: 2px solid #E0E0E0; border-radius: 10px;
    overflow: hidden; cursor: pointer; transition: all .2s;
    background: #fff; text-align: center;
    padding-bottom: 10px; position: relative;
}
.scobe-choice-item:hover   { border-color: #6EC4A0; }
.scobe-choice-item.selected { border-color: #6EC4A0; background: #F0FAF6; }
.scobe-choice-cover { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #f5f5f5; }
.scobe-choice-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.scobe-choice-check {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #6EC4A0; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8em; font-weight: 800;
    opacity: 0; transform: scale(.6); transition: all .2s;
}
.scobe-choice-item.selected .scobe-choice-check { opacity: 1; transform: scale(1); }
.scobe-choice-name { font-size: .82em; font-weight: 600; margin: 8px 6px 0; color: #1A1A1A; line-height: 1.3; }
.scobe-slot-counter { font-size: .82em; color: #888; margin: 0; }
.scobe-slot-cnt { font-weight: 700; color: #4FA882; }
.scobe-choice-price { font-size: 1.2em; font-weight: 700; color: #1A1A1A; margin-bottom: 16px; }
.scobe-choice-hint { font-size: .85em; color: #999; margin: 6px 0 0; }


/* ── BOTTONE CARRELLO ── */
.scobe-cart-btn { margin-top: 8px !important; width: 100%; }
.scobe-cart-btn:disabled { opacity: .5; cursor: not-allowed; }

@media(max-width:480px){
    .scobe-pick-grid  { grid-template-columns: repeat(3,1fr); gap:8px; }
    .scobe-choice-grid { grid-template-columns: repeat(2,1fr); }
}