/* ── Immobiliare Manager — Frontend Contract CSS ── */

.imm-contract-wrap {
    max-width: 780px;
    margin: 0 auto;
    font-family: inherit;
}

/* ── Steps ── */
.imm-step { margin-bottom: 32px; }
.imm-step-hidden { display: none !important; }

.imm-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0ece3;
}
.imm-step-num {
    width: 36px; height: 36px;
    background: #1B2FBF;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    flex-shrink: 0;
}
.imm-step-header h3 { margin: 0; font-size: 20px; color: #1B2FBF; }
.imm-step-desc { color: #666; margin: 0 0 20px; }

/* ── Contract text ── */
.imm-contract-text {
    background: #fafaf8;
    border: 1px solid #e5ddd0;
    border-radius: 8px;
    padding: 28px 32px;
    max-height: 480px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.85;
    color: #2c2c2c;
    margin-bottom: 20px;
    scroll-behavior: smooth;
}
.imm-contract-text h1, .imm-contract-text h2, .imm-contract-text h3 { color: #1B2FBF; }
.imm-contract-text p { margin-bottom: 14px; }

/* ── Read confirm ── */
.imm-read-confirm {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #F5F6FA;
    border-radius: 8px;
    padding: 16px 20px;
}
.imm-read-confirm label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
}
.imm-read-confirm input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

/* ── Form grid ── */
.imm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.imm-field { display: flex; flex-direction: column; gap: 5px; }
.imm-field label { font-size: 13px; font-weight: 600; color: #444; }
.imm-field label span { color: #c00; }
.imm-field input {
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
}
.imm-field input:focus { outline: none; border-color: #1B2FBF; }

/* ── Placeholder blanks nel contratto ── */
.imm-blank {
    display: inline-block;
    background: #FFF8DC;
    border-bottom: 2px dashed #E8A317;
    color: #1B2FBF;
    font-weight: 600;
    font-style: italic;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .92em;
    transition: background .2s, border-color .2s, color .2s;
    cursor: default;
}
.imm-blank--filled {
    background: #e8f0fe;
    border-bottom: 2px solid #1B2FBF;
    color: #1B2FBF;
    font-style: normal;
}

/* ── Pulsante toggle anteprima ── */
.imm-preview-toggle { margin: 16px 0 0; }
.imm-btn-sm { padding: 8px 16px !important; font-size: 13px !important; }

/* ── Pannello anteprima live ── */
.imm-live-preview {
    border: 1.5px solid #1B2FBF;
    border-radius: 8px;
    margin: 12px 0 16px;
    overflow: hidden;
}
.imm-live-preview__header {
    background: #1B2FBF;
    color: #fff;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.imm-live-preview__note { font-size: 12px; opacity: .75; }
.imm-live-preview__body {
    padding: 20px 24px;
    max-height: 360px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.8;
    color: #2c2c2c;
    background: #fafafa;
}

/* ── Riepilogo dati in Step 4 ── */
.imm-recap-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.imm-recap-table tr { border-bottom: 1px solid #eee; }
.imm-recap-table tr:last-child { border: none; }
.imm-recap-label { padding: 8px 12px 8px 0; color: #6670A0; white-space: nowrap; width: 40%; }
.imm-recap-value { padding: 8px 0; font-weight: 600; color: #1B2FBF; }

/* ── Details/summary per anteprima contratto compilato ── */
.imm-contract-details > summary {
    cursor: pointer;
    color: #1B2FBF;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    user-select: none;
}
.imm-contract-details > summary:hover { text-decoration: underline; }

/* ── Select field ── */
.imm-field select {
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}
.imm-field select:focus { outline: none; border-color: #1B2FBF; }

/* ── Form grid 3 cols ── */
.imm-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.imm-field--wide { grid-column: span 2; }

/* ── Extra fields block ── */
.imm-extra-fields {
    background: #F5F6FA;
    border: 1px solid #DDE0EE;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.imm-extra-intro { font-size: 13px; color: #6670A0; margin: 0 0 14px; }
.imm-extra-intro strong { color: #1B2FBF; }
.imm-section-divider {
    border: none;
    border-top: 1px solid #DDE0EE;
    margin: 16px 0;
}

/* ── Privacy ── */
.imm-privacy {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f9f9f9;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
}
.imm-privacy label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.imm-privacy input { margin-top: 3px; flex-shrink: 0; }
.imm-privacy a { color: #E8A317; }

/* ── OTP ── */
.imm-otp-wrap { margin: 20px 0; }
.imm-otp-input {
    width: 200px;
    padding: 16px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    border: 2px solid #1B2FBF;
    border-radius: 10px;
    color: #1B2FBF;
    display: block;
}
.imm-otp-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(26,43,75,.15); }

/* ── Sign summary ── */
.imm-sign-summary {
    background: #F5F6FA;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
}

/* ── Sign confirm ── */
.imm-sign-confirm {
    margin-bottom: 20px;
    padding: 16px;
    background: #fff8e1;
    border: 1.5px solid #ffc107;
    border-radius: 8px;
    font-size: 14px;
}
.imm-sign-confirm label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.imm-sign-confirm input { margin-top: 3px; flex-shrink: 0; }

/* ── Buttons ── */
.imm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all .25s;
    text-decoration: none;
}
.imm-btn:disabled { opacity: .5; cursor: not-allowed; }
.imm-btn-primary { background: #1B2FBF; color: #fff; }
.imm-btn-primary:hover:not(:disabled) { background: #0f1929; }
.imm-btn-success { background: #1a7c34; color: #fff; }
.imm-btn-success:hover:not(:disabled) { background: #145c27; }
.imm-btn-ghost { background: transparent; color: #555; border: 1.5px solid #ccc; }
.imm-btn-ghost:hover { border-color: #888; color: #333; }
.imm-link-btn { background: none; border: none; color: #E8A317; cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; }

/* ── Spinner ── */
.imm-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: imm-spin .7s linear infinite;
}
@keyframes imm-spin { to { transform: rotate(360deg); } }

/* ── Error ── */
.imm-error {
    color: #c00;
    background: #fde8e8;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 14px;
    display: none;
}
.imm-error.imm-visible { display: block; }

/* ── Success ── */
.imm-success-box {
    text-align: center;
    padding: 40px 32px;
    background: #f0fdf4;
    border: 2px solid #4ade80;
    border-radius: 16px;
}
.imm-success-icon { font-size: 56px; margin-bottom: 16px; }
.imm-success-box h2 { color: #1a7c34; margin-bottom: 8px; }
.imm-success-ref { font-weight: 700; color: #1B2FBF; font-size: 18px; margin-bottom: 12px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .imm-form-grid,
    .imm-form-grid--3 { grid-template-columns: 1fr; }
    .imm-field--wide { grid-column: span 1; }
    .imm-contract-text { padding: 16px; max-height: 320px; }
    .imm-read-confirm { flex-direction: column; }
    .imm-otp-input { width: 100%; }
    .imm-extra-fields { padding: 16px; }
    .imm-live-preview__header { flex-direction: column; align-items: flex-start; }
    .imm-live-preview__body { padding: 16px; }
    .imm-recap-label { width: auto; }
}