/* =============================================
   Elite IPTV Trial v8 - Blue Theme + OTP
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }

#elite-trial-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
}

#elite-trial-card {
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(30,77,183,0.2), 0 0 0 1px rgba(30,77,183,0.1);
    animation: cardIn 0.5s ease both;
}

@keyframes cardIn {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* LEFT */
.elite-left {
    position: relative;
    width: 42%;
    background: linear-gradient(160deg, #1a3a6b 0%, #1e4db7 60%, #153080 100%);
    padding: 50px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.elite-left::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:260px; height:260px;
    background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
}

.elite-badge {
    display:inline-block; background:rgba(255,255,255,.2);
    color:#fff; font-size:11px; font-weight:700; letter-spacing:3px;
    padding:5px 14px; border-radius:20px; margin-bottom:20px;
    width:fit-content; border:1px solid rgba(255,255,255,.3);
}

.elite-left h1 {
    font-size:58px; line-height:1; color:#fff;
    margin:0 0 30px; font-weight:700;
}

.elite-left h1 span { color:rgba(255,255,255,.75); font-weight:300; font-size:42px; }

.elite-features { list-style:none; padding:0; margin:0; }
.elite-features li {
    color:rgba(255,255,255,.85); font-size:13px; padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; gap:10px;
}
.elite-features li:last-child { border-bottom:none; }
.elite-features li i { color:#fff; font-style:normal; font-size:14px; flex-shrink:0; }

.elite-glow {
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}

/* RIGHT */
.elite-right {
    flex:1; background:#fff; padding:50px 44px;
    display:flex; flex-direction:column; justify-content:center;
}

.elite-right h2 { font-size:24px; color:#0f1f3d; margin:0 0 6px; font-weight:700; }
.elite-subtitle  { color:#888; font-size:13px; margin:0 0 28px; }
.elite-subtitle strong { color:#0f1f3d; }

/* Fields */
.elite-field { margin-bottom:16px; }
.elite-field label {
    display:block; color:#444; font-size:11px; letter-spacing:1.5px;
    text-transform:uppercase; margin-bottom:7px; font-weight:600;
}
.elite-input-wrap { position:relative; display:flex; align-items:center; }
.elite-icon { position:absolute; left:14px; font-size:14px; pointer-events:none; }
.elite-input-wrap input {
    width:100%; background:#f8f9fc; border:1.5px solid #e2e8f0;
    border-radius:10px; padding:12px 14px 12px 42px; color:#0f1f3d;
    font-size:14px; font-family:'Inter',sans-serif;
    transition:border-color .2s,box-shadow .2s;
}
.elite-input-wrap input:focus {
    outline:none; border-color:#1e4db7;
    box-shadow:0 0 0 3px rgba(30,77,183,.12); background:#fff;
}
.elite-input-wrap input::placeholder { color:#aab; }

/* Errors */
#form-error-msg, #otp-error-msg {
    min-height:20px; margin-bottom:8px;
    font-size:13px; color:#dc2626; padding-left:2px;
}

/* Buttons */
#btn-send-otp, #btn-verify-otp {
    width:100%; background:#1e4db7; color:#fff; border:none;
    border-radius:10px; padding:14px; font-size:15px; font-weight:600;
    font-family:'Inter',sans-serif; cursor:pointer;
    transition:background .2s,transform .15s,box-shadow .2s;
}
#btn-send-otp:hover:not(:disabled),
#btn-verify-otp:hover:not(:disabled) {
    background:#1a3a8f; transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(30,77,183,.3);
}
#btn-send-otp:disabled, #btn-verify-otp:disabled { opacity:.7; cursor:not-allowed; }

.elite-spinner {
    display:inline-block; width:14px; height:14px;
    border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
    border-radius:50%; animation:spin .7s linear infinite;
    vertical-align:middle; margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

.elite-note { color:#aaa; font-size:12px; text-align:center; margin:10px 0 0; }
.elite-note a { color:#1e4db7; text-decoration:none; font-weight:600; }

/* OTP INPUTS */
.otp-inputs {
    display:flex; gap:10px; justify-content:center; margin:24px 0 16px;
}

.otp-box {
    width:48px; height:56px; text-align:center; font-size:24px; font-weight:700;
    color:#0f1f3d; background:#f8f9fc; border:2px solid #e2e8f0;
    border-radius:10px; font-family:'Inter',sans-serif;
    transition:border-color .2s,box-shadow .2s;
    caret-color: #1e4db7;
}
.otp-box:focus {
    outline:none; border-color:#1e4db7;
    box-shadow:0 0 0 3px rgba(30,77,183,.12); background:#fff;
}

@keyframes shake {
    0%,100% { transform:translateX(0); }
    20%,60%  { transform:translateX(-6px); }
    40%,80%  { transform:translateX(6px); }
}
.otp-shake { animation:shake .4s ease; border-color:#dc2626 !important; }

#otp-timer { color:#1e4db7; font-weight:600; }

/* SUCCESS */
#step-success { text-align:center; animation:fadeUp .5s ease both; }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

.elite-checkmark { width:60px; height:60px; margin:0 auto 16px; animation:popIn .5s ease both; }
@keyframes popIn {
    0%  { transform:scale(.4); opacity:0; }
    80% { transform:scale(1.1); }
    100%{ transform:scale(1); opacity:1; }
}
.elite-checkmark svg { width:100%; height:100%; }
.elite-checkmark circle {
    stroke:#1e4db7; stroke-width:2;
    stroke-dasharray:160; stroke-dashoffset:160;
    animation:drawCircle .6s ease .2s forwards;
}
.elite-checkmark path {
    stroke:#1e4db7; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:48; stroke-dashoffset:48;
    animation:drawCheck .4s ease .7s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset:0; } }
@keyframes drawCheck  { to { stroke-dashoffset:0; } }

#step-success h2 { font-size:22px; color:#0f1f3d; margin:0 0 4px; font-weight:700; }

.elite-creds-box {
    background:#f8f9fc; border:1.5px solid #e2e8f0;
    border-radius:12px; overflow:hidden; margin:16px 0; text-align:left;
}
.cred-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 16px; border-bottom:1px solid #e2e8f0;
}
.cred-item:last-child { border-bottom:none; }
.cred-label { color:#888; font-size:12px; flex-shrink:0; font-weight:500; }
.cred-val {
    color:#1e4db7; font-family:'Courier New',monospace; font-size:12px;
    word-break:break-all; text-align:right; margin-left:10px; font-weight:600;
}

.elite-copy-btn {
    background:#1e4db7; border:none; color:#fff; border-radius:8px;
    padding:11px 24px; font-size:13px; font-family:'Inter',sans-serif;
    font-weight:600; cursor:pointer; transition:background .2s,transform .15s;
}
.elite-copy-btn:hover { background:#1a3a8f; transform:translateY(-1px); }

/* RESPONSIVE */
@media (max-width:680px) {
    #elite-trial-card { flex-direction:column; }
    .elite-left { width:100%; padding:32px 24px; }
    .elite-left h1 { font-size:42px; }
    .elite-right { padding:32px 24px; }
    .otp-box { width:40px; height:48px; font-size:20px; }
    .otp-inputs { gap:7px; }
}