/* SIC Tank Designer — Dynamic Configurator CSS */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;900&family=Barlow:wght@400;500;600&display=swap');

:root {
    --sic-navy:  #066aab;
    --sic-dark:  #1a2b48;
    --sic-green: #22aa55;
    --sic-border:#d0dde8;
    --sic-light: #f0f7ff;
    --sic-muted: #7f94a8;
    --sic-r:     8px;
}

.sictd-dynamic-wrap {
    font-family: 'Barlow', sans-serif;
    max-width: 960px;
    margin: 0 auto 40px;
}

/* Header */
.sictd-header { background: linear-gradient(135deg,var(--sic-navy),var(--sic-dark)); border-radius: 12px 12px 0 0; }
.sictd-header-inner { display:flex;align-items:center;gap:16px;padding:16px 24px; }
.sictd-header-text { flex:1; }
.sictd-header-brand { font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:3px; }
.sictd-header-model { font-size:16px;font-weight:600;color:#fff; }

/* Progress */
.sictd-progress { display:flex;background:#fff;border-left:1px solid var(--sic-border);border-right:1px solid var(--sic-border); }
.sictd-ps { flex:1;text-align:center;padding:10px 4px; }
.sictd-ps-dot { width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.08);border:1px solid var(--sic-border);color:var(--sic-muted);font-size:11px;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;transition:all .25s; }
.sictd-ps.active .sictd-ps-dot { background:var(--sic-navy);border-color:#5ab0e0;color:#fff;transform:scale(1.1); }
.sictd-ps.done   .sictd-ps-dot { background:var(--sic-green);border-color:var(--sic-green);color:#fff; }
.sictd-ps-label { font-size:9px;color:var(--sic-muted);text-transform:uppercase;letter-spacing:.5px; }
.sictd-ps.active .sictd-ps-label { color:var(--sic-navy); }
.sictd-ps.done   .sictd-ps-label { color:var(--sic-green); }

/* Main layout */
.sictd-main { display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--sic-border);border-top:0;border-radius:0 0 12px 12px;min-height:480px; }

/* Viewer */
.sictd-viewer-col { border-right:1px solid var(--sic-border);padding:20px;display:flex;flex-direction:column;gap:12px; }
.sictd-tank-viewer { background:var(--sic-light);border-radius:var(--sic-r);overflow:hidden;flex:1; }
.sictd-tank-wrap { position:relative;width:100%; }
.sictd-tank-base { width:100%;display:block; }
.sictd-tank-placeholder { display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;color:var(--sic-muted);text-align:center;padding:20px; }
.sictd-comp-ol { position:absolute; }
.sictd-code-bar { background:var(--sic-dark);border-radius:var(--sic-r);padding:10px 14px; }
.sictd-code-label { font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:3px; }
.sictd-code-value { font-size:13px;font-weight:700;color:#5ab0e0;letter-spacing:1px;word-break:break-all; }

/* Wizard column */
.sictd-wizard-col { padding:24px;display:flex;flex-direction:column; }
.sictd-step-content { flex:1; }
.sictd-step-title { font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--sic-dark);margin:0 0 6px; }
.sictd-step-sub { font-size:13px;color:var(--sic-muted);margin:0 0 18px;line-height:1.5; }
.sictd-field-label { font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--sic-muted);margin-bottom:8px; }

/* Fluid cards */
.sictd-fluid-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px; }
.sictd-fluid-card { border:1.5px solid var(--sic-border);border-radius:var(--sic-r);padding:16px;text-align:center;cursor:pointer;transition:all .2s; }
.sictd-fluid-card:hover { border-color:var(--sic-navy); }
.sictd-fluid-card.selected { border:2px solid var(--sic-green);background:color-mix(in srgb,var(--sic-green) 8%,#fff); }
.sictd-fluid-icon { font-size:28px;margin-bottom:6px; }
.sictd-fluid-name { font-size:14px;font-weight:600;color:var(--sic-dark); }

/* Num grid */
.sictd-num-grid { display:flex;gap:8px;margin-bottom:14px; }
.sictd-num-btn { width:46px;height:46px;border-radius:var(--sic-r);border:1.5px solid var(--sic-border);background:#fff;font-size:18px;font-weight:600;cursor:pointer;color:var(--sic-dark);transition:all .2s; }
.sictd-num-btn:hover { border-color:var(--sic-navy);color:var(--sic-navy); }
.sictd-num-btn.selected { background:var(--sic-navy);border-color:var(--sic-navy);color:#fff; }

/* Chips */
.sictd-chips { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; }
.sictd-chip { padding:6px 14px;border:1.5px solid var(--sic-border);border-radius:20px;font-size:13px;cursor:pointer;color:var(--sic-dark);transition:all .2s; }
.sictd-chip:hover { border-color:var(--sic-navy);color:var(--sic-navy); }
.sictd-chip.selected { background:var(--sic-navy);border-color:var(--sic-navy);color:#fff; }

/* Sensor cards */
.sictd-sensor-grid { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
.sictd-sensor-card { border:1.5px solid var(--sic-border);border-radius:var(--sic-r);padding:12px 14px;cursor:pointer;transition:all .2s; }
.sictd-sensor-card:hover { border-color:var(--sic-navy); }
.sictd-sensor-card.selected { border:2px solid var(--sic-green);background:color-mix(in srgb,var(--sic-green) 8%,#fff); }
.sictd-sensor-name { font-size:14px;font-weight:600;color:var(--sic-dark);margin-bottom:3px; }
.sictd-sensor-desc { font-size:11px;color:var(--sic-muted); }

/* Summary */
.sictd-code-box { background:var(--sic-dark);border-radius:var(--sic-r);padding:14px 18px;margin-bottom:14px; }
.sictd-code-lbl { font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px; }
.sictd-code-val { font-size:15px;font-weight:700;color:#5ab0e0;letter-spacing:1px;word-break:break-all; }
.sictd-summary-table { width:100%;font-size:13px;margin-bottom:14px;border-collapse:collapse; }
.sictd-summary-table td { padding:5px 0;border-bottom:1px solid var(--sic-border);color:var(--sic-dark); }
.sictd-summary-table td:first-child { color:var(--sic-muted);width:40%; }

/* Contact form */
.sictd-contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }
.sictd-contact-field { display:flex;flex-direction:column;gap:4px; }
.sictd-contact-field label { font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--sic-muted); }
.sictd-contact-field input { padding:8px 12px;border:1.5px solid var(--sic-border);border-radius:var(--sic-r);font-size:13px;color:var(--sic-dark); }
.sictd-contact-field input:focus { outline:none;border-color:var(--sic-navy); }
.sictd-privacy-label { display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--sic-muted);margin-bottom:14px;cursor:pointer;line-height:1.5; }
.sictd-send-btn { width:100%;padding:13px;background:linear-gradient(135deg,var(--sic-navy),#0550a0);color:#fff;border:none;border-radius:var(--sic-r);font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .2s; }
.sictd-send-btn:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 6px 18px rgba(6,106,171,.35); }
.sictd-send-btn:disabled { opacity:.6;cursor:not-allowed; }

/* Navigation */
.sictd-nav { display:flex;gap:8px;padding-top:16px;border-top:1px solid var(--sic-border);margin-top:auto; }
.sictd-btn-prev,.sictd-btn-next { flex:1;padding:10px;border-radius:var(--sic-r);font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s; }
.sictd-btn-prev { background:#f8fafc;border:1.5px solid var(--sic-border);color:#1e293b; }
.sictd-btn-prev:hover:not(:disabled) { background:#e2e8f0;border-color:#94a3b8;color:#1e293b; }
.sictd-btn-prev:disabled { opacity:.4;cursor:not-allowed; }
.sictd-btn-next { background:var(--sic-navy);border:none;color:#fff; }
.sictd-btn-next:hover { background:#0550a0; }

/* EPA overlay */
.sictd-epa-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999; }
.sictd-epa-box { background:#fff;border-radius:12px;padding:32px;max-width:380px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.2); }
.sictd-epa-box h3 { font-size:18px;color:var(--sic-dark);margin:0 0 10px; }
.sictd-epa-box p { font-size:13px;color:var(--sic-muted);line-height:1.6;margin:0 0 16px; }
.sictd-epa-yes { flex:1;padding:10px;background:var(--sic-green);color:#fff;border:none;border-radius:var(--sic-r);font-size:14px;font-weight:600;cursor:pointer; }
.sictd-epa-no  { flex:1;padding:10px;background:transparent;color:var(--sic-muted);border:1.5px solid var(--sic-border);border-radius:var(--sic-r);font-size:14px;cursor:pointer; }

/* Lang button */
.sictd-lang-btn { display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:5px 12px;cursor:pointer;color:#fff;font-size:12px;font-weight:600; }

/* Responsive */
@media (max-width:640px) {
    .sictd-main { grid-template-columns:1fr; }
    .sictd-viewer-col { border-right:0;border-bottom:1px solid var(--sic-border); }
    .sictd-contact-grid { grid-template-columns:1fr; }
    .sictd-fluid-grid { grid-template-columns:1fr 1fr; }
}

/* Disabled next button */
.sictd-btn-next.disabled,
.sictd-btn-next:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Pescante counter */
.sictd-pescante-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--sic-light);
    border-radius: var(--sic-r);
    border: 1px solid var(--sic-border);
}

/* Num buttons read-only */
#sictd-pescante-nums .sictd-num-btn {
    cursor: default;
    pointer-events: none;
}
#sictd-pescante-nums .sictd-num-btn.selected {
    background: var(--sic-navy);
    border-color: var(--sic-navy);
    color: #fff;
}

/* Clickable overlay hint */
.sictd-comp-ol[data-comp-id]:hover {
    outline: 2px solid rgba(6,106,171,0.4);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Selectable component (same type as current step, not yet chosen) */
@keyframes sictd-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(6,106,171,0.6); }
    50%  { box-shadow: 0 0 0 6px rgba(6,106,171,0); }
    100% { box-shadow: 0 0 0 0 rgba(6,106,171,0); }
}

.sictd-comp-ol.selectable {
    border-radius: 4px;
    animation: sictd-pulse 1.6s ease-in-out infinite;
    outline: 2px dashed var(--comp-color, rgba(6,106,171,0.7));
    outline-offset: 2px;
    transition: outline 0.2s;
}

.sictd-comp-ol.selectable:hover {
    outline: 2px solid var(--comp-color, #066aab);
    outline-offset: 2px;
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--comp-color, #066aab) 25%, transparent);
}

/* Selected/highlighted component */
.sictd-comp-ol.highlighted {
    outline: 2px solid var(--sic-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sensor icon */
.sictd-sensor-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

/* Pre-submit info box */
.sictd-info-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--sic-r);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #1e40af;
}
.sictd-info-icon { font-size: 20px; flex-shrink: 0; }
.sictd-info-text strong { display: block; margin-bottom: 4px; }

/* ── Riepilogo layout ──────────────────────────────────────────────────── */

/* In riepilogo, override main two-column to single full-width column */
#sictd-dynamic-app .sictd-wizard-col {
    overflow-y: auto;
}

/* Two-column row: viewer + summary */
.sictd-recap-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.sictd-recap-viewer {
    /* Tank drawing */
}
.sictd-recap-viewer img {
    border-radius: 8px;
    border: 1px solid var(--sic-border);
}

.sictd-recap-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Notes box full width */
.sictd-recap-notes {
    background: #f8fafc;
    border: 1px solid var(--sic-border);
    border-radius: var(--sic-r);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.sictd-recap-notes-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}
.sictd-recap-notes-text {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.6;
}

/* Form title */
.sictd-recap-form-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sic-dark);
    margin: 0 0 12px;
    padding-top: 4px;
    border-top: 1px solid var(--sic-border);
}

/* In riepilogo, make the step content full width instead of constrained */
.sictd-recap-row + .sictd-recap-notes,
.sictd-recap-notes + h3,
.sictd-recap-notes + .sictd-recap-form-title {
    width: 100%;
}

/* Send button rename */
.sictd-send-btn::before { content: '📧 '; }

@media (max-width: 640px) {
    .sictd-recap-row { grid-template-columns: 1fr; }
}

/* Riepilogo mode: collapse the two-column main layout to full-width */
.sictd-riepilogo-mode .sictd-main {
    grid-template-columns: 1fr;
}
.sictd-riepilogo-mode .sictd-viewer-col {
    display: none; /* viewer is now inside the wizard col */
}
.sictd-riepilogo-mode .sictd-wizard-col {
    padding: 24px 28px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

/* ── Order notice box ──────────────────────────────────────────────────── */
.sictd-order-notice {
    background: linear-gradient(135deg, #1a2b48 0%, #066aab 100%);
    border-radius: var(--sic-r);
    padding: 18px 20px;
    margin-bottom: 20px;
    color: #fff;
}
.sictd-order-notice-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .3px;
}
.sictd-order-notice-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sictd-order-notice-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 8px 12px;
}
.sictd-order-notice-item span { font-size: 18px; flex-shrink: 0; }

@media (max-width: 640px) {
    .sictd-order-notice-items { grid-template-columns: 1fr; }
}