/* =========================================================
           ROOT & RESET
        ========================================================= */
        :root {
            --primary: #2563eb; --primary-dark: #1d4ed8; --primary-deep: #173a9b;
            --success: #10b981; --success-dark: #059669;
            --danger: #ef4444; --danger-dark: #dc2626;
            --text: #334155; --text-dark: #0f172a; --muted: #64748b;
            --border: #d7e0eb; --border-light: #e2e8f0;
            --background: #f4f7fb; --input-background: #f8fafc;
            --white: #ffffff;
            --radius: 10px; --input-height: 45px;
        }

        * { box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        html, body { margin: 0; padding: 0; min-height: 100%; }
        body {
            color: var(--text);
            background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 30%),
                        linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
        }

        /* =========================================================
           HEADER
        ========================================================= */
        .top-header { width: 100%; background: rgba(255,255,255,.97); border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 18px rgba(15,23,42,.06); position: sticky; top: 0; z-index: 1000; }
        .header-inner { width: 100%; max-width: 1450px; min-height: 76px; margin: auto; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
        .site-logo { height: 52px; display: inline-flex; align-items: center; text-decoration: none !important; flex-shrink: 0; }
        .site-logo img { height: 48px; width: auto; max-width: 215px; object-fit: contain; display: block; }
        .header-actions { display: flex; align-items: center; gap: 10px; }
        .header-btn { min-height: 42px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; text-decoration: none !important; font-size: 13px; font-weight: 600; transition: all .2s ease; }
        .header-btn i { font-size: 14px; }
        .login-btn { color: #1e40af !important; background: #eff6ff; border: 1px solid #dbeafe; }
        .login-btn:hover { color: #1d4ed8 !important; background: #dbeafe; transform: translateY(-1px); }
        .dashboard-btn { color: #ffffff !important; background: linear-gradient(135deg, #2563eb, #1d4ed8); border: 1px solid #1d4ed8; box-shadow: 0 5px 12px rgba(37,99,235,.20); }
        .dashboard-btn:hover { color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(37,99,235,.28); }

        /* =========================================================
           MAIN CARD & LAYOUT
        ========================================================= */
        .page-wrapper { width: 100%; padding: 26px 0 45px; }
        .registration-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 35px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.03); }
        .card-header-custom { min-height: 80px; padding: 22px 30px; display: flex; align-items: center; justify-content: center; gap: 16px; color: #ffffff; background: radial-gradient(circle at 15% 30%, rgba(255,255,255,.15), transparent 25%), linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #173a9b 100%); }
        .header-icon { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; font-size: 23px; }
        .card-header-custom h1 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; }
        .card-header-custom p { margin: 5px 0 0; font-size: 12.5px; opacity: .90; font-weight: 400; }
        .card-body-custom { padding: 28px 32px 32px; }

        /* =========================================================
           FORM ELEMENTS
        ========================================================= */
        .section-title { width: 100%; display: flex; align-items: center; gap: 10px; margin: 12px 0 17px; padding: 0 0 10px; color: #1e3a8a; font-size: 15px; font-weight: 700; border-bottom: 1px solid #e2e8f0; }
        .section-title:first-child { margin-top: 0; }
        .section-icon { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #2563eb; background: #eff6ff; font-size: 13px; }
        .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
        .form-group { margin-bottom: 0; display: flex; flex-direction: column; }
        .form-group label { min-height: 21px; margin-bottom: 6px; color: #475569; font-size: 12px; font-weight: 600; line-height: 1.4; }
        .required { color: #ef4444; font-weight: 700; }
        
        .form-control { width: 100%; height: var(--input-height) !important; min-height: var(--input-height); padding: 8px 12px; color: #334155; background: #f8fafc; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-weight: 400; box-shadow: inset 0 1px 1px rgba(15,23,42,.02); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
        .form-control::placeholder { color: #94a3b8; font-size: 12px; }
        .form-control:hover { border-color: #b9c7d8; }
        .form-control:focus { color: #1e293b; background: #ffffff; border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.10), 0 2px 5px rgba(15,23,42,.03); }
        .form-control[readonly] { background: #eef2f7; color: #64748b; cursor: not-allowed; }
        textarea.form-control { height: auto !important; min-height: 82px !important; resize: vertical; }
        .address-control { min-height: 82px !important; }
        select.form-control { cursor: pointer; }

        /* =========================================================
           MULTI-STEP WIZARD
        ========================================================= */
        .wizard-wrap { margin:0 0 26px; padding:18px 18px 16px; background:linear-gradient(135deg,#f8fbff,#f1f5ff); border:1px solid #dbe7f7; border-radius:16px; }
        .wizard-progress { height:6px; margin:0 42px; background:#e2e8f0; border-radius:99px; overflow:hidden; }
        .wizard-progress-bar { width:25%; height:100%; background:linear-gradient(90deg,#2563eb,#4f46e5); border-radius:99px; transition:width .3s ease; }
        .wizard-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:-21px; }
        .wizard-step { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; cursor:pointer; color:#94a3b8; font-size:11px; font-weight:600; transition:.25s ease; }
        .wizard-step-circle { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:3px solid #e2e8f0; box-shadow:0 3px 10px rgba(15,23,42,.06); font-size:14px; transition:.25s ease; }
        .wizard-step.active, .wizard-step.completed { color:#1d4ed8; }
        .wizard-step.active .wizard-step-circle { color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); border-color:#2563eb; box-shadow:0 6px 16px rgba(37,99,235,.24); transform:scale(1.04); }
        .wizard-step.completed .wizard-step-circle { color:#fff; background:#10b981; border-color:#10b981; }
        .wizard-step small { font-size:10px; font-weight:500; color:#94a3b8; }
        .wizard-step.active small, .wizard-step.completed small { color:#64748b; }
        .wizard-panel { display:none; animation:wizardFade .25s ease; }
        .wizard-panel.active { display:block; }
        @keyframes wizardFade{ from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
        .wizard-panel .section-title { margin-top:0; }
        .wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid #e2e8f0; }
        .wizard-actions-left, .wizard-actions-right { display:flex; align-items:center; gap:10px; }
        .btn-wizard { min-height:44px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; transition:.2s ease; }
        .btn-wizard-back { color:#475569; background:#f1f5f9; border:1px solid #dbe3ec; }
        .btn-wizard-back:hover { background:#e8eef5; transform:translateY(-1px); }
        .btn-wizard-next { color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 6px 14px rgba(37,99,235,.18); }
        .btn-wizard-next:hover { color:#fff; transform:translateY(-1px); box-shadow:0 8px 18px rgba(37,99,235,.25); }
        .wizard-summary { display:none; margin-top:16px; padding:12px 14px; border:1px solid #dbeafe; background:#eff6ff; border-radius:10px; color:#334155; font-size:11px; }
        .wizard-summary.show { display:block; }
        .wizard-invalid { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.10) !important; }

        /* =========================================================
           BUTTONS & UPLOADS
        ========================================================= */
        .btn-custom { min-height: 45px !important; height: 45px !important; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 9px; font-size: 13px; font-weight: 600; transition: all .2s ease; }
        .btn-location { width: 100%; color: #ffffff !important; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 5px 12px rgba(37,99,235,.16); }
        .btn-location:hover { color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 7px 15px rgba(37,99,235,.23); }
        
        .file-control { padding: 4px 6px !important; font-size: 11px !important; }
        input[type=file]::file-selector-button { height: 32px; margin-right: 8px; padding: 0 10px; color: #334155; background: #eaf0f7; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
        
        .doc-upload-card { padding:12px; border:1px solid #dbe3ef; border-radius:11px; background:#f8fafc; }
        .doc-upload-card .form-group { gap:0; }
        .doc-limit { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; color:#64748b; font-size:9.5px; }
        .doc-limit strong { color:#1d4ed8; }
        .doc-preview-box { display:none; margin-top:9px; padding:8px; border:1px dashed #bfdbfe; border-radius:9px; background:#fff; }
        .doc-preview-box.show { display:flex; align-items:center; gap:9px; }
        .doc-preview-box img { width:52px; height:52px; object-fit:cover; border-radius:7px; border:1px solid #dbe3ef; background:#f1f5f9; }
        .doc-preview-meta { min-width:0; flex:1; }
        .doc-preview-meta strong { display:block; font-size:10.5px; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .doc-preview-meta span { display:block; margin-top:2px; font-size:9px; color:#64748b; }
        .doc-edit-btn { border:0; border-radius:7px; padding:7px 9px; background:#2563eb; color:#fff; font-size:9.5px; font-weight:700; cursor:pointer; white-space:nowrap; }

        /* =========================================================
           MODALS (PREVIEW, SUCCESS, EDITOR)
        ========================================================= */
        /* Preview Modal */
        .preview-overlay { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.62); backdrop-filter:blur(5px); }
        .preview-overlay.show { display:flex; }
        .preview-modal { width:min(1050px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:18px; box-shadow:0 25px 70px rgba(15,23,42,.30); animation:previewIn .22s ease; }
        @keyframes previewIn{ from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
        .preview-header { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:15px; color:#fff; background:linear-gradient(135deg,#2563eb,#173a9b); }
        .preview-kicker { font-size:9px; font-weight:700; letter-spacing:1.2px; opacity:.75; }
        .preview-header h2 { margin:3px 0 2px; font-size:19px; font-weight:700; }
        .preview-header p { margin:0; font-size:11px; opacity:.88; }
        .preview-close { width:38px; height:38px; flex:0 0 38px; border:1px solid rgba(255,255,255,.25); border-radius:9px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:15px; }
        .preview-body { padding:20px; }
        .preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
        .preview-card { padding:15px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
        .preview-card-title { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:9px; color:#1e3a8a; border-bottom:1px solid #e2e8f0; font-size:12px; font-weight:700; }
        .preview-card-title i { color:#2563eb; }
        .preview-row { display:flex; justify-content:space-between; gap:15px; padding:6px 0; border-bottom:1px dashed #e2e8f0; font-size:10.5px; }
        .preview-row:last-child { border-bottom:0; }
        .preview-row span { color:#64748b; }
        .preview-row strong { color:#1e293b; text-align:right; word-break:break-word; }
        .online-registration-cta { margin-top:16px; padding:15px 17px; display:flex; align-items:center; gap:13px; border:1px solid #bfdbfe; border-radius:13px; background:linear-gradient(135deg,#eff6ff,#f8fbff); }
        .cta-icon { width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:11px; color:#2563eb; background:#dbeafe; font-size:17px; }
        .online-registration-cta > div:nth-child(2) { flex:1; }
        .online-registration-cta strong { display:block; color:#1e3a8a; font-size:12px; line-height:1.5; }
        .online-registration-cta span { display:block; margin-top:3px; color:#64748b; font-size:10.5px; }
        .cta-submit { min-height:42px; padding:0 16px; border:0; border-radius:9px; color:#fff; background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 5px 12px rgba(16,185,129,.18); font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
        .cta-submit:hover { transform:translateY(-1px); }

        /* Success Popup */
        .success-overlay { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.68); backdrop-filter:blur(6px); }
        .success-overlay.show { display:flex; }
        .success-modal { width:min(510px,100%); overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 28px 80px rgba(15,23,42,.35); animation:successPopupIn .25s ease; }
        @keyframes successPopupIn{ from{opacity:0;transform:translateY(20px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
        .success-top { display:flex; align-items:center; gap:14px; padding:23px 23px 20px; color:#fff; background:linear-gradient(135deg,#059669,#10b981); }
        .success-check { width:52px; height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#059669; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12); font-size:21px; }
        .success-kicker { font-size:8.5px; font-weight:800; letter-spacing:1.1px; opacity:.8; }
        .success-top h2 { margin:3px 0 2px; font-size:19px; font-weight:750; }
        .success-top p { margin:0; font-size:10.5px; line-height:1.5; opacity:.9; }
        .success-body { padding:20px; }
        .success-message { display:flex; align-items:center; gap:8px; margin-bottom:13px; padding:10px 12px; color:#1e40af; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; font-size:10.5px; }
        .success-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
        .success-detail { padding:12px; border:1px solid #e2e8f0; border-radius:11px; background:#f8fafc; }
        .success-detail span { display:flex; align-items:center; gap:6px; color:#64748b; font-size:9.5px; }
        .success-detail span i { color:#2563eb; }
        .success-detail strong { display:block; margin-top:6px; color:#0f172a; font-size:12.5px; word-break:break-word; }
        .success-detail.password-detail { border-color:#bbf7d0; background:#f0fdf4; }
        .success-detail.password-detail strong { color:#047857; letter-spacing:.4px; }
        .success-warning { display:flex; gap:8px; margin-top:13px; padding:10px 12px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:9px; font-size:9.5px; line-height:1.5; }
        .success-close-btn { width:100%; min-height:44px; margin-top:15px; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 7px 16px rgba(37,99,235,.2); font-size:12px; font-weight:700; cursor:pointer; }
        .success-close-btn:hover { transform:translateY(-1px); }

        /* Image Editor Overlay */
        .image-editor-overlay { position:fixed; inset:0; z-index:200000; display:none; align-items:center; justify-content:center; padding:12px; background:rgba(15,23,42,.76); backdrop-filter:blur(6px); }
        .image-editor-overlay.show { display:flex; }
        .image-editor-modal { width:min(920px,100%); max-height:95vh; overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
        .image-editor-head { padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff; background:linear-gradient(135deg,#2563eb,#173a9b); }
        .image-editor-head strong { font-size:14px; }
        .image-editor-head span { display:block; margin-top:2px; font-size:9.5px; opacity:.82; }
        .image-editor-close { width:34px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
        .image-editor-body { padding:14px; display:grid; grid-template-columns:minmax(0,1fr) 245px; gap:14px; }
        .crop-stage { min-height:430px; max-height:62vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#0f172a; border-radius:12px; }
        .crop-stage img { display:block; max-width:100%; max-height:62vh; }
        .editor-tools { padding:12px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
        .editor-tool-title { font-size:11px; font-weight:700; color:#334155; margin-bottom:10px; }
        .editor-tool-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:9px; }
        .editor-tool-btn { min-height:38px; border:1px solid #dbe3ef; border-radius:8px; background:#fff; color:#334155; font-size:10px; font-weight:700; cursor:pointer; }
        .editor-tool-btn:hover { border-color:#93c5fd; background:#eff6ff; }
        .editor-range { width:100%; accent-color:#2563eb; }
        .editor-help { margin:10px 0; padding:9px; border-radius:8px; background:#eff6ff; color:#475569; font-size:9.5px; line-height:1.5; }
        .editor-actions { display:flex; gap:8px; margin-top:12px; }
        .editor-cancel, .editor-apply { flex:1; min-height:40px; border:0; border-radius:8px; font-size:10.5px; font-weight:700; cursor:pointer; }
        .editor-cancel { background:#e2e8f0; color:#334155; }
        .editor-apply { background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
        .editor-size-note { font-size:9px; color:#64748b; margin-top:7px; text-align:center; }

        /* =========================================================
           RESPONSIVE GRIDS
        ========================================================= */
        @media (min-width: 992px) {
            .registration-card .row.g-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; margin: 0 !important; }
            .registration-card .row.g-3 > .form-group, .registration-card .row.g-3 > div.form-group { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
            .registration-card .row.g-3:has(> .form-group:nth-child(2)):not(:has(> .form-group:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            .registration-card .row.g-3 > .col-12:only-child { grid-column: 1 / -1 !important; }
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
            .registration-card .row.g-3 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 13px !important; width: 100% !important; margin: 0 !important; }
            .registration-card .row.g-3 > .form-group, .registration-card .row.g-3 > div.form-group { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
        }
        @media (max-width: 767.98px) {
            .registration-card .row.g-3 { display: grid !important; grid-template-columns: 1fr !important; gap: 11px !important; width: 100% !important; margin: 0 !important; }
            .registration-card .row.g-3 > .form-group, .registration-card .row.g-3 > div.form-group { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
            .wizard-steps { gap:3px; margin-top:-18px; }
            .wizard-step { gap:5px; font-size:9px; }
            .wizard-step-circle { width:36px; height:36px; border-width:2px; font-size:12px; }
            .wizard-step small { display:none; }
            .image-editor-body { grid-template-columns:1fr; padding:10px; overflow:auto; max-height:calc(96vh - 65px); }
            .crop-stage { min-height:300px; max-height:48vh; }
            .crop-stage img { max-height:48vh; }
        }
		
		
		
		
.success-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.success-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 125px;
    padding: 11px 18px;

    border-radius: 10px;
    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    transition: all 0.2s ease;
}

.success-btn-login {
    background: #0d6efd;
    color: #fff !important;
}

.success-btn-home {
    background: #198754;
    color: #fff !important;
}

.success-btn-registration {
    background: #fff;
    color: #0d6efd !important;
    border: 1px solid #0d6efd;
}

.success-btn:hover {
    transform: translateY(-2px);
    opacity: .92;
}

@media (max-width: 576px) {

    .success-actions {
        flex-direction: column;
        width: 100%;
    }

    .success-btn {
        width: 100%;
    }

}		
		
	.password-wrapper {
    position: relative;
}

.password-input {
    padding-right: 45px !important;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.password-toggle:hover {
    color: #0d6efd;
}	
	
		
		
		
/* =========================================================
   MOBILE PREVIEW RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {

    /* Preview Overlay */
    .preview-overlay {
        padding: 6px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto;
    }

    /* Preview Main Box */
    .preview-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 96vh !important;
        margin: 5px auto !important;
        border-radius: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Header */
    .preview-header {
        padding: 14px !important;
        gap: 8px !important;
    }

    .preview-kicker {
        font-size: 8px !important;
    }

    .preview-header h2 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .preview-header p {
        font-size: 9.5px !important;
        line-height: 1.4 !important;
    }

    .preview-close {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    /* Body */
    .preview-body {
        padding: 10px !important;
    }

    /* ONE COLUMN ON MOBILE */
    .preview-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
    }

    /* Cards */
    .preview-card {
        width: 100% !important;
        padding: 11px !important;
        border-radius: 10px !important;
    }

    .preview-card-title {
        font-size: 11px !important;
        margin-bottom: 7px !important;
        padding-bottom: 7px !important;
    }

    /* Rows */
    .preview-row {
        display: grid !important;
        grid-template-columns: 42% 58% !important;
        align-items: start !important;
        gap: 6px !important;
        padding: 7px 0 !important;
        font-size: 10px !important;
    }

    .preview-row span {
        min-width: 0 !important;
        font-size: 9.5px !important;
    }

    .preview-row strong {
        min-width: 0 !important;
        font-size: 10px !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
    }

    /* Long Address */
    .preview-row.preview-full {
        grid-template-columns: 100% !important;
    }

    .preview-row.preview-full strong {
        text-align: left !important;
        margin-top: 3px !important;
    }

    /* Terms + Submit */
    .online-registration-cta {
        margin-top: 10px !important;
        padding: 11px !important;
        border-radius: 10px !important;
    }

    .online-registration-cta label {
        width: 100% !important;
    }

    .online-registration-cta label span {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }

    .cta-submit {
        width: 100% !important;
        min-height: 44px !important;
        margin-top: 8px !important;
        font-size: 11px !important;
    }
}


/* Very Small Mobile */
@media (max-width: 380px) {

    .preview-overlay {
        padding: 4px !important;
    }

    .preview-modal {
        max-height: 97vh !important;
        border-radius: 11px !important;
    }

    .preview-header {
        padding: 11px !important;
    }

    .preview-header h2 {
        font-size: 14px !important;
    }

    .preview-body {
        padding: 7px !important;
    }

    .preview-card {
        padding: 9px !important;
    }

    .preview-row {
        grid-template-columns: 40% 60% !important;
        font-size: 9px !important;
    }

    .preview-row span {
        font-size: 9px !important;
    }

    .preview-row strong {
        font-size: 9.5px !important;
    }
}