/* File Name: assets/style_v5.css
   Chat Name: Preventivatore PHP
   Date: 2026-01-22 10:00
   Version: 4.0.6
*/

:root {
    --primary: #2563eb; --primary-dark: #1e40af;
    --secondary: #64748b;
    --bg-body: #f8fafc; --bg-card: #ffffff;
    --border: #e2e8f0;
    --col-ut: #2563eb; --col-ric: #d97706;
    --danger: #ef4444; --success: #10b981;
    --active-bg: #f0fdf4; --active-border: #16a34a; 
    --toast-bg: #1e293b; --toast-text: #f8fafc;
}

body { font-family: 'Inter', sans-serif; background: var(--bg-body); color: #0f172a; margin: 0; padding-bottom: 100px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* GRID MEDIA: 2 COLONNE (IMPORTANTE) */
#list-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

header { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 1rem 2rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.header-top { display: flex; justify-content: space-between; align-items: center; }
h1 { margin: 0; font-size: 1.25rem; color: var(--primary); font-weight: 800; }
.badge { background: #dbeafe; color: var(--primary-dark); padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-left: 10px; border: 1px solid #bfdbfe; }
.header-sub { font-size: 0.85rem; color: #64748b; margin-top: 5px; font-weight: 500; }

.card-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 1rem; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 1rem; }
.input-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } 
.counter-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.urgency-row { width: 100%; }

.selection-card { background: white; border: 2px solid var(--border); border-radius: 10px; padding: 1rem 0.5rem; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; position: relative; }
.selection-card:hover { transform: translateY(-2px); border-color: #cbd5e1; }
.selection-card.active { background-color: var(--active-bg); border-color: var(--active-border); box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.1); }
.selection-card.active h4 { color: #15803d; }
.selection-card .icon { font-size: 1.8rem; margin-bottom: 0.5rem; display: block; }
.selection-card h4 { margin: 0; font-size: 0.85rem; font-weight: 700; color: #334155; line-height: 1.2; }
.selection-card small { font-size: 0.7rem; color: #64748b; margin-top: 4px; display: block; line-height: 1.3; }

.kit-container { max-width: 1500px; margin: 1.5rem auto 0; padding: 0 1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.kit-card { background: white; border: 2px solid var(--border); border-radius: 10px; padding: 1rem; text-align: center; cursor: pointer; transition: 0.2s; position: relative; opacity: 0.7; z-index: 2; }
.kit-card:hover { opacity: 1; transform: translateY(-2px); }
.kit-card.active { border-color: var(--primary); background: #eff6ff; opacity: 1; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1); z-index: 3; border-bottom: 2px solid var(--primary); }
.kit-card h3 { margin: 0; font-size: 0.9rem; color: #1e293b; font-weight: 700; }
.kit-card small { font-size: 0.75rem; color: var(--secondary); display: block; margin-top: 4px; }
.kit-tag { position: absolute; top: -10px; right: 10px; background: #cbd5e1; color: white; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.active .kit-tag { background: var(--primary); }

.subkit-panel { max-width: 1500px; margin: 0 auto 2rem; padding: 1.5rem 1rem 1rem; background: #f1f5f9; border: 1px solid #cbd5e1; border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; display: none; animation: slideDown 0.3s ease-out; }
.subkit-panel.open { display: block; }
.subkit-options { display: flex; gap: 10px; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.subkit-btn { background: white; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #475569; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.05); white-space: nowrap; }
.subkit-btn:hover { background: #e2e8f0; }
.subkit-btn.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); }
.summary-strip { background: #e0f2fe; border-left: 4px solid var(--primary); padding: 10px 15px; border-radius: 4px; font-size: 0.85rem; color: #0369a1; text-align: center; display: flex; justify-content: center; gap: 15px; font-weight: 500; align-items: center; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-text); padding: 12px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 2000; opacity: 0; transition: opacity 0.3s, bottom 0.3s; pointer-events: none; width: max-content; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; bottom: 80px; }

.container { max-width: 1500px; margin: 1.5rem auto; padding: 0 1rem; display: grid; grid-template-columns: 1fr 460px; gap: 2rem; }
.section-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.brief-card { border-left: 5px solid var(--primary); background: #f8fafc; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.full-width { grid-column: span 2; }

label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; color: #334155; display: flex; align-items: center; }
input, select, textarea { width: 100%; padding: 0.7rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; background: #fff; box-sizing: border-box; font-family: inherit; }
textarea { height: 46px; resize: vertical; } 

.hosting-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1rem; }
.hosting-card { border: 2px solid var(--border); border-radius: 8px; padding: 1rem; cursor: pointer; text-align: center; background: white; transition: 0.2s; position: relative; }
.hosting-card.selected { border-color: var(--primary); background: #eff6ff; color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }

.option-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: white; margin-bottom: 0.8rem; transition: 0.2s; gap: 10px; height: 100%; box-sizing: border-box; }
.option-item.disabled { opacity: 0.5; pointer-events: none; background: #f1f5f9; }
.option-item input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; cursor: pointer; }
.option-item > div:nth-child(2) { flex-grow: 1; }
.dynamic-wrapper { display: flex; gap: 8px; align-items: center; background: #f8fafc; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); margin-right: 5px; }
.dynamic-wrapper input { width: 60px; padding: 4px; text-align: center; border: 1px solid #cbd5e1; }
.price-box { text-align: right; min-width: 80px; font-size: 0.85rem; flex-shrink: 0; }
.tag-ut { color: var(--col-ut); font-weight: 700; display: block;}
.tag-ric { color: var(--col-ric); font-weight: 600; font-size: 0.75rem; display: block; margin-top: 2px; }

.urgency-compact { display: flex; align-items: center; gap: 6px; height: 43px; border: 1px solid #fecdd3; background: #fff1f2; padding: 0 1rem; border-radius: 6px; cursor: pointer; justify-content: center; }
.urgency-compact input { width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0; }
.urgency-compact span { font-weight: 700; color: #9f1239; font-size: 0.9rem; margin-left: 5px; }

.summary-panel { position: sticky; top: 90px; height: fit-content; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.receipt-list { list-style: none; padding: 0; margin: 0 0 1rem 0; font-size: 0.9rem; }
.receipt-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed #cbd5e1; }
.item-col-name { display: flex; flex-direction: column; max-width: 70%; }
.item-col-name span { font-weight: 600; color: #1e293b; line-height: 1.3; }
.math-info { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
.item-col-price { font-weight: 700; color: #0f172a; text-align: right; }

.box-header { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.5px; border-bottom: 2px solid rgba(0,0,0,0.05); padding-bottom: 5px; }
.box-a { background: #f0f9ff; padding: 1rem; border-radius: 8px; border: 1px solid #bae6fd; margin-bottom: 1rem; }
.box-b { background: #fffbeb; padding: 1rem; border-radius: 8px; border: 1px solid #fcd34d; margin-bottom: 1rem; }
.total-row { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid rgba(0,0,0,0.1); padding-top: 10px; margin-top: 10px; font-weight: 800; font-size: 1.1rem; }

.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: bold; cursor: help; margin-left: 8px; border: 1px solid #cbd5e1; flex-shrink: 0; transition: all 0.2s; }
.info-btn:hover { background: var(--primary); color: white; border-color: var(--primary); transform: scale(1.1); }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
.modal-box { background: white; width: 90%; max-width: 500px; border-radius: 12px; padding: 2rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; animation: slideUp 0.3s ease-out; max-height: 80vh; overflow-y: auto; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; z-index: 1001; }
.modal-title { font-size: 1.25rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; padding-right: 20px;}
.modal-text { font-size: 0.95rem; color: #475569; line-height: 1.6; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: white; border-top: 1px solid #ccc; padding: 1rem; box-shadow: 0 -4px 10px rgba(0,0,0,0.1); z-index: 999; justify-content: space-between; align-items: center; box-sizing: border-box; }

body.blind-mode-active .tag-ut, body.blind-mode-active .tag-ric, body.blind-mode-active .receipt-item .item-col-price, body.blind-mode-active .hosting-card > div[style*="color:#d97706"] { display: none !important; }
body.blind-mode-active .total-row, body.blind-mode-active .total-row span { display: flex !important; }

@media (max-width: 1024px) {
    .container { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
    .summary-panel { display: none; }
    .mobile-sticky { display: flex; }
    .kit-container { grid-template-columns: 1fr 1fr; } 
    .card-grid-5 { grid-template-columns: repeat(3, 1fr); } 
    .card-grid-3 { grid-template-columns: repeat(2, 1fr); } 
    .counter-row { grid-template-columns: repeat(3, 1fr); gap: 10px; } 
    .hosting-selector { grid-template-columns: 1fr; } 
    .input-pair { grid-template-columns: 1fr; gap: 10px; }
    .selection-card h4 { font-size: 0.75rem; }
    .selection-card small { font-size: 0.65rem; }
    .selection-card .icon { font-size: 1.5rem; }
    .summary-strip { flex-direction: column; gap: 5px; text-align: left; align-items: flex-start; }
    .subkit-btn { flex-grow: 1; text-align: center; }
    header { padding: 1rem; }
    .header-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .header-sub { margin-top: 10px; }
    .section-card { padding: 1rem; }
    .dynamic-wrapper { display: none; } 
}

/* RESPONSIVE: Torna a 1 colonna SOLO sotto i 768px */
@media (max-width: 768px) {
    #list-media { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .card-grid-5 { grid-template-columns: repeat(3, 1fr); gap: 5px; } 
    .selection-card { padding: 0.5rem 0.2rem; min-height: 80px; }
}

@media print {
    .mobile-sticky, header, .cta-button, .kit-container, .subkit-panel, .info-btn, .disclaimer-box { display: none !important; }
    .container { display: block; }
    .summary-panel { display: block; position: static; border: 2px solid #000; }
}