/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT LOCK — content-lock.css
   ═══════════════════════════════════════════════════════════════════════════ */
#cl-gate-overlay {
    display: none;
}

/* ── Locked content wrapper ──────────────────────────────────────────────── */
#cl-locked-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-top: 10px;
}

#cl-blurred-preview {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    max-height: 280px;
    overflow: hidden;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

#cl-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.97) 40%);
}

#cl-overlay-inner {
    text-align: center;
    padding: 30px 20px;
}

#cl-overlay-inner .cl-lock-icon { font-size: 36px; display: block; margin-bottom: 10px; }
#cl-overlay-inner h3  { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; }
#cl-overlay-inner p   { color: #666; font-size: 15px; margin: 0 0 20px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.cl-btn {
    display: inline-block;
    padding: 13px 32px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.cl-btn-primary  { background: #2271b1; color: #fff; }
.cl-btn-primary:hover  { background: #135e96; color: #fff; }
.cl-btn-secondary { background: #f0f0f0; color: #333; border: 1px solid #ddd; }
.cl-btn-secondary:hover { background: #e5e5e5; }
.cl-btn-success  { background: #00a32a; color: #fff; }
.cl-btn-success:hover  { background: #008a20; }
.cl-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cl-btn-full { width: 100%; text-align: center; margin-top: 4px; }

/* ── Modal backdrop ──────────────────────────────────────────────────────── */
#cl-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cl-fade-in 0.2s ease;
}
@keyframes cl-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal box ───────────────────────────────────────────────────────────── */
#cl-modal {
    background: #E5E2DE;
    border-radius: 5px;
    padding: 36px 32px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    position: relative;
    animation: cl-slide-up 0.25s ease;
    z-index: 99999;
}
@keyframes cl-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

#cl-modal-close {
    position: absolute;
    top: 14px; right: 18px;
    font-size: 22px;
    color: var( --e-global-color-accent );
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s;
}
#cl-modal-close:hover { color: #333; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.cl-step { display: none; }
.cl-step.active { display: block; }

.cl-modal-icon     { font-size: 30px; text-align: center; display: block; margin-bottom: 10px; }
.cl-modal-title    { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; text-align: center; }
.cl-modal-subtitle { font-size: 14px; color: #777; text-align: center; margin: 0 0 24px; line-height: 1.5; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.cl-field { margin-bottom: 16px; }
.cl-field label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.cl-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    outline: none;
}
.cl-field input:focus { border-color: #2271b1; }
.cl-field input.error { border-color: #d63638; }

/* ── OTP input ───────────────────────────────────────────────────────────── */
#cl-otp-input {
    letter-spacing: 10px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    font-family: monospace;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.cl-alert {
    display: none;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 12px;
}

.cl-alert.cl-visible {
    display: block;
}

.cl-alert.cl-error {
    background: #fff0f0;
    color: #cc0000;
    border: 1px solid #f5c2c2;
}

.cl-alert.cl-success {
    background: #f0fff4;
    color: #1a7f37;
    border: 1px solid #b3e6c8;
}


/* ── Divider ─────────────────────────────────────────────────────────────── */
.cl-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: #ccc; font-size: 13px;
}
.cl-divider::before, .cl-divider::after {
    content: ''; flex: 1; height: 1px; background: #eee;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.cl-link {
    color: #2271b1; cursor: pointer; text-decoration: underline;
    background: none; border: none; font-size: 13px; padding: 0;
}
.cl-link:hover { color: #135e96; }

/* ── Resend row ──────────────────────────────────────────────────────────── */
.cl-resend-row { text-align: center; margin-top: 14px; font-size: 13px; color: #777; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.cl-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    border-radius: 50%; animation: cl-spin 0.7s linear infinite;
    vertical-align: middle; margin-right: 6px;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ── Success check ───────────────────────────────────────────────────────── */
.cl-success-check {
    font-size: 60px; text-align: center; display: block;
    margin-bottom: 10px; animation: cl-pop 0.4s ease;
}
@keyframes cl-pop {
    0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); }
}

/* ── Consent text ────────────────────────────────────────────────────────── */
.cl-consent-text {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin: 10px 0 0;
    line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #cl-modal { padding: 28px 20px; }
    .cl-modal-title { font-size: 19px; }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
#cl-modal {
    height: 340px;
    overflow: scroll;
}
}