/* ============================================================
   WP Trading Signals — Subscribe Page  |  CRSniper Dark UI
   ============================================================ */

.wpts-sub-wrap *,
.wpts-sub-wrap *::before,
.wpts-sub-wrap *::after { box-sizing: border-box; }

/* ---- Force dark background everywhere -------------------- */
html,
body {
    background-color: #070c18 !important;
    background-image: none !important;
}

/* Common theme wrappers that might add a light/grey bg */
body .site,
body .site-main,
body main,
body #main,
body #primary,
body .content-area,
body .entry-content,
body .page-content,
body article,
body .wp-block-post-content,
body .elementor-section-wrap,
body .elementor-inner-section,
body .fl-content,
body .uagb-section-wrap,
body .thim-content,
body .main-content,
body .page-wrapper,
body .wrapper,
body #wrapper,
body #content,
body .content,
body .container,
body .site-content {
    background-color: transparent !important;
    background-image:  none !important;
}

.wpts-sub-wrap {
    --gold:    #f0a500;
    --gold2:   #e08c00;
    --dark:    #070c18;
    --border:  rgba(240,165,0,.18);
    --border2: rgba(240,165,0,.38);
    --text:    #e8eaf0;
    --muted:   #6b7a9a;
    font-family: 'Vazirmatn', 'Vazir', Tahoma, Arial, sans-serif;
    direction: rtl;
    position: relative;
    padding-bottom: 80px;
    min-height: 100vh;
    background: #070c18;
    background-image: none;
    /* Ensure it visually covers the full viewport */
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left:  calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    width: 100vw;
}

/* ---- Hero ------------------------------------------------- */
.wpts-sub-hero {
    text-align: center;
    padding: 72px 20px 48px;
    background: radial-gradient(ellipse 80% 60% at 50% 0%,
        rgba(240,165,0,.08) 0%, transparent 70%);
    position: relative;
    z-index: 1;
}
.wpts-sub-hero-inner { max-width: 780px; margin: 0 auto; }

.wpts-sub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(240,165,0,.08);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 20px;
    font-size: 13px;
    color: var(--gold);
    letter-spacing: .06em;
    margin-bottom: 24px;
    animation: wpts-fadein .7s ease both;
}
.wpts-sub-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: wpts-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes wpts-pulse-dot {
    0%,100% { box-shadow: 0 0 0 0 rgba(240,165,0,.6); }
    50%      { box-shadow: 0 0 0 6px rgba(240,165,0,0); }
}
.wpts-sub-title {
    color: #fff;
    font-size: clamp(26px,4vw,44px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 16px;
    animation: wpts-fadein .8s .1s ease both;
}
.wpts-sub-title span { color: var(--gold); }
.wpts-sub-desc {
    color: var(--muted);
    font-size: 16px;
    margin: 0 0 36px;
    animation: wpts-fadein .8s .2s ease both;
}
.wpts-sub-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    animation: wpts-fadein .8s .3s ease both;
}
.wpts-sub-stat {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 24px;
    min-width: 100px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: transform .3s, border-color .3s;
}
.wpts-sub-stat:hover { transform: translateY(-4px); border-color: var(--border2); }
.wpts-sub-stat-n { display:block; color:var(--gold); font-size:20px; font-weight:800; margin-bottom:4px; }
.wpts-sub-stat-l { display:block; color:var(--muted); font-size:12px; }

/* ---- Guide Banner ----------------------------------------- */
.wpts-sub-guide-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto 32px;
    padding: 16px 24px;
    background: rgba(240,165,0,.07);
    border: 1px solid var(--border2);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    animation: wpts-fadein .6s .1s ease both;
    position: relative;
    z-index: 1;
}
.wpts-sub-guide-icon { font-size: 28px; flex-shrink: 0; }
.wpts-sub-guide-banner strong { display:block; color:var(--gold); font-size:15px; margin-bottom:3px; }
.wpts-sub-guide-banner span   { color:var(--muted); font-size:13px; }

/* ---- Section Head ----------------------------------------- */
.wpts-sub-section-head { text-align:center; margin-bottom:40px; position:relative; z-index:1; }
.wpts-sub-section-head h2 { color:var(--text); font-size:28px; font-weight:700; margin:0 0 8px; }
.wpts-sub-section-head p  { color:var(--muted); font-size:15px; margin:0; }
.wpts-sub-noplans { text-align:center; color:var(--muted); padding:40px 0; position:relative; z-index:1; }

/* ---- Plans Grid ------------------------------------------- */
.wpts-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* ---- Plan Card -------------------------------------------- */
.wpts-plan-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(15,26,46,.92) 0%, rgba(7,12,24,.95) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 24px 24px;
    backdrop-filter: blur(12px);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .35s, box-shadow .35s;
    animation: wpts-cardin .6s ease both;
}
@keyframes wpts-cardin {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
.wpts-plan-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: var(--border2);
    box-shadow: 0 20px 60px rgba(240,165,0,.15), 0 0 0 1px rgba(240,165,0,.12);
}
.wpts-plan-featured {
    background: linear-gradient(160deg, rgba(20,30,48,.95) 0%, rgba(10,16,32,.97) 100%);
    border-color: rgba(240,165,0,.55);
    box-shadow: 0 0 0 1px rgba(240,165,0,.35), 0 8px 40px rgba(240,165,0,.1);
}
.wpts-plan-target {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px var(--gold), 0 12px 50px rgba(240,165,0,.22) !important;
}
.wpts-plan-orb {
    position: absolute;
    top: -60px; left: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,165,0,.08) 0%, transparent 70%);
    pointer-events: none;
    transition: transform .6s;
}
.wpts-plan-card:hover .wpts-plan-orb { transform: scale(1.6); }

/* ---- Top Badge -------------------------------------------- */
.wpts-plan-top-badge {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 14px;
    margin-bottom: 20px;
    letter-spacing: .04em;
}
.wpts-badge-target {
    background: rgba(240,165,0,.12);
    color: var(--gold);
    border: 1px solid var(--gold);
    animation: wpts-badge-glow 2s ease-in-out infinite;
}
@keyframes wpts-badge-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(240,165,0,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(240,165,0,0); }
}
.wpts-badge-feat {
    background: rgba(240,165,0,.08);
    color: var(--gold);
    border: 1px solid rgba(240,165,0,.4);
}

/* ---- Plan Head -------------------------------------------- */
.wpts-plan-head { text-align:center; margin-bottom:20px; }
.wpts-plan-icon-wrap {
    font-size: 40px;
    margin-bottom: 10px;
    display: block;
    animation: wpts-iconbounce 3s ease-in-out infinite;
}
@keyframes wpts-iconbounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.wpts-plan-name { color:#fff; font-size:20px; font-weight:800; margin-bottom:4px; }
.wpts-plan-desc-text { color:var(--muted); font-size:13px; }

/* ---- Price ------------------------------------------------ */
.wpts-plan-price-block {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 4px;
}
.wpts-plan-price {
    color: var(--gold);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 20px rgba(240,165,0,.3);
}
.wpts-plan-currency { color:var(--muted); font-size:14px; }
.wpts-plan-duration  { text-align:center; color:var(--muted); font-size:13px; margin-bottom:16px; }

/* ---- Separator -------------------------------------------- */
.wpts-plan-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border2), transparent);
    margin: 16px 0;
    position: relative;
}
.wpts-plan-sep::after {
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 3px;
    background: var(--gold);
    border-radius: 2px;
    animation: wpts-sep-glow 2.5s ease-in-out infinite;
}
@keyframes wpts-sep-glow {
    0%,100% { box-shadow: 0 0 6px rgba(240,165,0,.4); }
    50%      { box-shadow: 0 0 18px rgba(240,165,0,.8); }
}

/* ---- Wallet Section --------------------------------------- */
.wpts-wallet-section {
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    text-align: center;
    transition: border-color .3s;
}
.wpts-wallet-section:hover { border-color: var(--border2); }
.wpts-wallet-title { color:var(--gold); font-size:13px; font-weight:700; margin-bottom:6px; letter-spacing:.03em; }
.wpts-wallet-network {
    display: inline-block;
    background: rgba(240,165,0,.08);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 12px;
    font-size: 12px;
    color: var(--gold);
    margin-bottom: 12px;
}

/* ---- QR Box: single centered square ----------------------- */
.wpts-qr-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 12px;
}
.wpts-qr-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #070c18;
    border: 2px solid var(--border2);
    border-radius: 14px;
    width: 180px;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
    transition: box-shadow .3s;
}
.wpts-qr-box:hover { box-shadow: 0 0 24px rgba(240,165,0,.35); }
/* Kill anything QRCode.js adds beyond first child */
.wpts-qr-box > * { flex-shrink: 0; }
.wpts-qr-box img,
.wpts-qr-box canvas {
    display: block !important;
    width:  156px !important;
    height: 156px !important;
    max-width: none !important;
    border-radius: 6px;
}

.wpts-wallet-addr {
    word-break: break-all;
    font-size: 11px;
    color: var(--muted);
    font-family: monospace;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    transition: border-color .3s;
}
.wpts-wallet-addr:hover { border-color: var(--border2); }
.wpts-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--gold);
    font-size: 13px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background .25s, transform .2s, box-shadow .25s;
    font-family: inherit;
}
.wpts-copy-btn:hover {
    background: rgba(240,165,0,.1);
    transform: scale(1.04);
    box-shadow: 0 0 14px rgba(240,165,0,.25);
}
.wpts-copy-btn:active { transform: scale(.97); }

/* ---- Payment Form ----------------------------------------- */
.wpts-pay-form { margin-top: 4px; }
.wpts-form-hint { color:var(--muted); font-size:12px; margin-bottom:14px; line-height:1.5; }

.wpts-field {
    width: 100%;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-family: inherit;
    transition: border-color .3s, box-shadow .3s;
    outline: none;
}
.wpts-field::placeholder { color:var(--muted); }
.wpts-field:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(240,165,0,.12);
}

/* ---- Screenshot Upload Button ----------------------------- */
.wpts-screenshot-input { display: none !important; }

.wpts-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 18px;
    background: rgba(240,165,0,.06);
    border: 2px dashed rgba(240,165,0,.4);
    border-radius: 12px;
    cursor: pointer;
    transition: background .25s, border-color .3s, transform .2s, box-shadow .25s;
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.wpts-upload-label::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(240,165,0,.08) 50%,
        transparent 70%);
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position .6s;
}
.wpts-upload-label:hover {
    background: rgba(240,165,0,.12);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(240,165,0,.2);
}
.wpts-upload-label:hover::before { background-position: -200% 0; }
.wpts-upload-label:active { transform: scale(.97); }

.wpts-upload-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    animation: wpts-upload-bounce 2.5s ease-in-out infinite;
}
@keyframes wpts-upload-bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.wpts-upload-texts { display:flex; flex-direction:column; gap:2px; text-align:right; }
.wpts-upload-main  { font-size:13px; font-weight:700; color:var(--gold); }
.wpts-upload-sub   { font-size:11px; color:var(--muted); font-weight:400; }

/* When file is selected, show a success state */
.wpts-upload-label.has-file {
    background: rgba(0,230,118,.06);
    border-color: #00e676;
    color: #00e676;
}
.wpts-upload-label.has-file .wpts-upload-main { color: #00e676; }
.wpts-upload-label.has-file .wpts-upload-icon { animation: none; }

/* ---- Submit Button ---------------------------------------- */
.wpts-pay-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
    border: none;
    border-radius: 12px;
    color: #0a0e1a;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 20px;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .25s;
}
.wpts-pay-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position .6s;
}
.wpts-pay-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(240,165,0,.4);
    filter: brightness(1.05);
}
.wpts-pay-btn:hover::after { background-position: -200% 0; }
.wpts-pay-btn:active  { transform: scale(.97); }
.wpts-pay-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.wpts-pay-msg { margin-top:10px; font-size:13px; min-height:20px; text-align:center; font-weight:600; }

/* ---- Login CTA -------------------------------------------- */
.wpts-login-cta { text-align:center; padding:8px 0 4px; }
.wpts-login-cta p { color:#f0a500; font-size:13px; margin-bottom:12px; }
.wpts-login-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: #0a0e1a;
    border-radius: 10px;
    padding: 11px 28px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.wpts-login-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 28px rgba(240,165,0,.35);
}

/* ---- My Subscriptions ------------------------------------- */
.wpts-my-subs { max-width:860px; margin:60px auto 0; padding:0 20px; position:relative; z-index:1; }
.wpts-my-subs h2 {
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.wpts-subs-table { width:100%; border-collapse:collapse; font-size:14px; }
.wpts-subs-table th {
    background: rgba(240,165,0,.07);
    color: var(--gold);
    padding: 12px 16px;
    text-align: right;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.wpts-subs-table td {
    color: var(--text);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .2s;
}
.wpts-subs-table tr:hover td { background: rgba(240,165,0,.04); }

/* ---- Keyframes -------------------------------------------- */
@keyframes wpts-fadein {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ---- Responsive ------------------------------------------- */
@media (max-width:640px) {
    .wpts-plans-grid { grid-template-columns:1fr; padding:0 14px; }
    .wpts-sub-hero   { padding:48px 16px 32px; }
    .wpts-sub-stats  { gap:10px; }
    .wpts-sub-stat   { min-width:80px; padding:10px 14px; }
    .wpts-sub-wrap   { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; width: 100%; }
}