/* ==================== FREE TRIAL — TauQuantX dark/glass theme ==================== */
/* Covers ONLY: dashboard card lock overlay + the activation/OTP/expired  */
/* modal. Top status rendering reuses dashboard.html's existing          */
/* #user-plan-badge / #dashboard-plan-card and upgrade.html's existing   */
/* #active-plan-section / #trial-expired-section styling — no duplicate  */
/* status-bar CSS lives here.                                            */

:root {
    --tqx-trial-accent: #facc15;
    --tqx-trial-danger: #ef4444;
    --tqx-trial-border: #334155;
    --tqx-trial-text: #f1f5f9;
    --tqx-trial-text-dim: #94a3b8;
}

/* ==================== DASHBOARD CARD LOCK ==================== */

/* AI Trade Plan ticker button — locked variant. Reuses the existing
   .mkt-btn sizing/shape entirely (defined in dashboard.html); this
   only dims it and swaps the icon so it reads as locked, matching the
   same lock icon used everywhere else rather than inventing a new
   visual language for this one button. */
.mkt-btn-locked {
    opacity: 0.55;
    cursor: pointer;
}
.mkt-btn-locked:hover { opacity: 0.75; }

.trial-locked-card {
    position: relative;
    overflow: hidden;
}

/* Never changes the card's own size/layout — overlay sits on top */
.trial-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: inherit;
    animation: tqx-fade-in 0.25s ease;
}

.trial-lock-icon {
    font-size: 22px;
    animation: tqx-lock-pulse 2.6s ease-in-out infinite;
}

.trial-lock-text {
    font-size: 12px;
    color: var(--tqx-trial-text-dim);
    max-width: 180px;
    line-height: 1.4;
}

@keyframes tqx-lock-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.08); opacity: 1; }
}

@keyframes tqx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Dashboard content-card variant (weekly AI strength cards + Intraday
   Trading Levels cards). Same overlay mechanism as the sidebar nav-item
   lock above — larger icon and two-line "Premium Feature / Activate
   7-Day Trial" copy to suit a bigger card, subtle glow only, no
   continuous whole-card animation. ────────────────────────────────── */
.trial-lock-overlay-card {
    gap: 8px;
}

.trial-lock-icon-card {
    font-size: 30px;
    animation: tqx-lock-pulse 2.6s ease-in-out infinite, tqx-lock-glow 2.6s ease-in-out infinite;
}

.trial-lock-text-card {
    font-size: 13px;
    font-weight: 700;
    color: var(--tqx-trial-text);
    letter-spacing: 0.02em;
}

.trial-lock-subtext-card {
    font-size: 11.5px;
    color: var(--tqx-trial-accent);
    font-weight: 600;
}

@keyframes tqx-lock-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); }
    50%      { filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.45)); }
}

/* ==================== MODAL ==================== */

.trial-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(4px);
    animation: tqx-fade-in 0.2s ease;
    padding: 16px;
}

.trial-modal.glass-panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid var(--tqx-trial-border);
    border-radius: 16px;
    padding: 28px 24px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    font-family: Inter, sans-serif;
    color: var(--tqx-trial-text);
    animation: tqx-modal-in 0.25s ease;
}

@keyframes tqx-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.trial-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--tqx-trial-text-dim);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
.trial-modal-close:hover { color: var(--tqx-trial-text); }

.trial-modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--tqx-trial-text);
}

.trial-modal-text {
    font-size: 13px;
    color: var(--tqx-trial-text-dim);
    line-height: 1.5;
    margin: 0 0 16px;
}

.trial-modal-dates {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.trial-modal-dates > div {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tqx-trial-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.trial-modal-dates span {
    display: block;
    font-size: 11px;
    color: var(--tqx-trial-text-dim);
    margin-bottom: 2px;
}
.trial-modal-dates strong {
    font-size: 13px;
    color: var(--tqx-trial-text);
}

/* ==================== SIGNED-IN GMAIL DISPLAY ==================== */

.trial-gmail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tqx-trial-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}
.trial-gmail-label {
    font-size: 11px;
    color: var(--tqx-trial-text-dim);
}
.trial-gmail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--tqx-trial-text);
}

.trial-footnote {
    text-align: center;
    font-size: 11px;
    color: var(--tqx-trial-text-dim);
    margin: 10px 0 0;
}

/* ==================== FORM ELEMENTS ==================== */

.trial-label {
    display: block;
    font-size: 12px;
    color: var(--tqx-trial-text-dim);
    margin: 12px 0 6px;
}

.trial-input,
.trial-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--tqx-trial-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tqx-trial-text);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
}
.trial-input:focus,
.trial-select:focus {
    border-color: var(--tqx-trial-accent);
}

.trial-phone-row {
    display: flex;
    gap: 8px;
}
.trial-phone-row .trial-select { flex: 0 0 110px; }
.trial-phone-row .trial-input  { flex: 1; }

.trial-error {
    color: var(--tqx-trial-danger);
    font-size: 12px;
    min-height: 16px;
    margin: 8px 0;
}

.trial-btn-primary {
    width: 100%;
    padding: 11px;
    margin-top: 6px;
    border: none;
    border-radius: 10px;
    background: var(--tqx-trial-accent);
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.trial-btn-primary:hover { filter: brightness(1.08); }
.trial-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.trial-link-btn {
    background: none;
    border: none;
    color: var(--tqx-trial-accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

/* ==================== OTP BOXES ==================== */

.trial-otp-boxes {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 4px;
}

.trial-otp-box {
    width: 42px;
    height: 48px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--tqx-trial-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tqx-trial-text);
    outline: none;
    transition: border-color 0.15s ease;
}
.trial-otp-box:focus {
    border-color: var(--tqx-trial-accent);
}

.trial-resend-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--tqx-trial-text-dim);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 420px) {
    .trial-otp-box { width: 38px; height: 44px; font-size: 16px; }
    .trial-modal.glass-panel { padding: 22px 18px 18px; }
}

/* ==================== IB REFERRAL CODE FIELD ==================== */
/* Two new classes for the optional referral code field added to the
   activation form step (§33, §34) and the discount badge shown on
   the success step (§37). Everything above this point is unchanged. */

.trial-optional {
    font-weight: 400;
    color: var(--tqx-trial-text-dim);
    text-transform: none;
}

.trial-discount-badge {
    display: inline-block;
    margin: 14px auto 4px;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    color: #0f172a;
    background: var(--tqx-trial-accent);
    box-shadow: 0 6px 20px rgba(250, 204, 21, 0.35);
}

/* ==================== 2-HOUR PREVIEW ACTIVATION BUTTON ==================== */
/* Sits in the Intraday header's right-side meta slot (dashboard.html),
   replacing the old "Live · 15s refresh" / "Full Analysis" text for
   eligible users still inside their one-time 2-hour preview window.
   Shown/hidden and updated entirely by free-trial.js — never CSS-only. */

.dlvl-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: rgba(250, 204, 21, 0.12);
    color: var(--tqx-trial-accent);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, filter 0.15s ease;
}
.dlvl-preview-btn:hover { background: rgba(250, 204, 21, 0.2); filter: brightness(1.06); }
.dlvl-preview-btn i { font-size: 0.6rem; }
.dlvl-preview-btn #dlvl-preview-timer { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .dlvl-preview-btn { font-size: 0.6rem; padding: 4px 9px; }
}