/* ══════════════════════════════════════════════════════════════════════════════
   Wolf IPTV — CSS Design System v2
   Purple brand (#7C4DFF) + Dark theme + Sports/Entertainment vibe
   
   Structure:
   1. Variables & Reset
   2. Base & Typography
   3. Layout — Navbar, Footer, Breadcrumb, WhatsApp Float
   4. Components — Buttons, Cards, Forms, Modals, Toast
   5. Home Page — Hero, Trial Cards, Features, Reviews, Blog, FAQ
   6. Sub Pages — Subscription Details, Checkout, My Subscriptions
   7. Referrals & Rewards
   8. Vendor Overrides — intl-tel-input
   9. Animations
   10. Responsive
   ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   1. VARIABLES & RESET
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ──────────────────────────────── */
    --wolf-primary: #7C4DFF;
    --wolf-primary-dark: #5E35B1;
    --wolf-primary-light: #B388FF;
    --wolf-primary-glow: rgba(124,77,255,0.25);

    /* ── Surfaces ───────────────────────────── */
    --wolf-bg: #0a0a0f;
    --wolf-surface: #12121a;
    --wolf-surface2: #1a1a26;
    --wolf-border: rgba(124,77,255,0.12);
    --wolf-border2: rgba(255,255,255,0.06);

    /* ── Text ───────────────────────────────── */
    --wolf-text: #f0f0f5;
    --wolf-sub: #8888a0;
    --wolf-muted: #55556a;

    /* ── Semantic ────────────────────────────── */
    --wolf-red: #C8102E;
    --wolf-green: #22c55e;
    --wolf-gold: #f59e0b;
    --wolf-blue: #3b82f6;

    /* ── Radius ──────────────────────────────── */
    --wolf-radius: 16px;
    --wolf-radius-sm: 10px;

    /* ── Compatibility aliases ────────────────
       الصفحات الفرعية بتستخدم أسماء أقصر
       موحّدة مع الـ wolf- variables          ── */
    --red: #C8102E;
    --red-hover: #e01535;
    --red-glow: rgba(200, 16, 46, 0.15);
    --blue: var(--wolf-blue);
    --blue-glow: rgba(59, 130, 246, 0.12);
    --green: var(--wolf-green);
    --green-glow: rgba(34, 197, 94, 0.12);
    --gold: var(--wolf-gold);
    --bg: var(--wolf-bg);
    --surface: var(--wolf-surface);
    --surface2: var(--wolf-surface2);
    --border: var(--wolf-border);
    --border2: var(--wolf-border2);
    --text: var(--wolf-text);
    --muted: var(--wolf-muted);
    --whatsapp: #57AE4D;
    --accent: var(--wolf-primary);
    --accent-glow: var(--wolf-primary-glow);
}

/* ── Accent class overrides (subscription_details, checkout) ── */
.accent-red  { --accent: #C8102E; --accent-glow: rgba(200,16,46,0.12); }
.accent-blue { --accent: var(--wolf-blue); --accent-glow: rgba(59,130,246,0.12); }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:'Tajawal',sans-serif; background:var(--wolf-bg); color:var(--wolf-text); line-height:1.7; overflow-x:hidden; }
img { max-width:100%; height:auto; }

/* ── Focus Accessibility ────────────────────────────── */
:focus-visible { outline: 2px solid var(--wolf-primary); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--wolf-primary); outline-offset: 2px; }


/* ══════════════════════════════════════════════════════════════════════════════
   2. BASE & TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════════ */

.container { max-width:1200px; margin:0 auto; padding:0 20px; }


/* ══════════════════════════════════════════════════════════════════════════════
   3. LAYOUT — Navbar, Footer, Breadcrumb, WhatsApp Float
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── NAVBAR ─────────────────────────────────────────── */
.wolf-nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:14px 0; transition:all 0.3s; }
.wolf-nav.scrolled { background:rgba(10,10,15,0.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--wolf-border); padding:10px 0; }
.wolf-nav .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Start group: burger + logo */
.wolf-nav-start { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wolf-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.wolf-logo-img { width:40px; height:40px; border-radius:12px; }
.wolf-brand-text { font-size:20px; font-weight:900; color:var(--wolf-text); }
.wolf-brand-accent { color:var(--wolf-primary); }

/* Center: desktop links */
.wolf-nav-links { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; }
.wolf-link { color:var(--wolf-sub); text-decoration:none; font-size:14px; font-weight:700; padding:8px 14px; border-radius:8px; transition:all 0.2s; white-space:nowrap; }
.wolf-link:hover { color:var(--wolf-text); }
.wolf-link.active { color:var(--wolf-text); background:var(--wolf-primary-glow); border:1px solid rgba(124,77,255,0.2); }
.wolf-link-icon { display:none; }

/* Sidebar-only elements — hidden on desktop */
.wolf-sidebar-close { display:none; }
.wolf-sidebar-brand { display:none; }

/* End group: actions */
.wolf-nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wolf-notif { width:38px; height:38px; border-radius:10px; border:1px solid var(--wolf-border2); background:transparent; color:var(--wolf-sub); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; position:relative; }
.wolf-notif:hover { color:var(--wolf-primary); border-color:var(--wolf-primary); }
.wolf-notif-wrap { position: relative; }
.wolf-notif-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; background:var(--wolf-red); color:#fff; font-size:10px; font-weight:900; border-radius:50px; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--wolf-bg); }
.wolf-notif-dropdown { position:absolute; top:calc(100% + 10px); left:0; width:340px; background:var(--wolf-surface); border:1px solid var(--wolf-border); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,0.5); z-index:1001; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all 0.2s; overflow:hidden; }
.wolf-notif-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }
.wolf-notif-dd-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--wolf-border); font-size:14px; font-weight:900; }
.wolf-notif-dd-clear { font-size:11px; color:var(--wolf-primary-light); text-decoration:none; font-weight:700; }
.wolf-notif-dd-body { max-height:320px; overflow-y:auto; }
.wolf-notif-dd-empty { text-align:center; padding:30px 16px; color:var(--wolf-muted); font-size:13px; }
.wolf-notif-dd-empty i { display:block; font-size:24px; margin-bottom:8px; }
.wolf-notif-dd-item { display:flex; align-items:flex-start; gap:12px; padding:12px 18px; border-bottom:1px solid var(--wolf-border2); cursor:pointer; transition:background 0.2s; }
.wolf-notif-dd-item:last-child { border-bottom:none; }
.wolf-notif-dd-item:hover { background:var(--wolf-surface2); }
.wolf-notif-dd-item.unread { background:rgba(124,77,255,0.04); }
.wolf-notif-dd-icon { width:32px; height:32px; border-radius:9px; background:var(--wolf-surface2); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--wolf-primary-light); flex-shrink:0; }
.wolf-notif-dd-content { flex:1; min-width:0; }
.wolf-notif-dd-title { font-size:13px; font-weight:700; line-height:1.4; }
.wolf-notif-dd-time { font-size:11px; color:var(--wolf-muted); margin-top:2px; }
.wolf-notif-dd-dot { width:7px; height:7px; border-radius:50%; background:var(--wolf-red); flex-shrink:0; margin-top:4px; }
.wolf-notif-dd-footer { display:block; text-align:center; padding:12px; font-size:13px; font-weight:700; color:var(--wolf-primary-light); text-decoration:none; border-top:1px solid var(--wolf-border); transition:background 0.2s; }
.wolf-notif-dd-footer:hover { background:var(--wolf-surface2); color:var(--wolf-primary-light); }
.wolf-login-btn { display:flex; align-items:center; gap:8px; padding:8px 18px; border-radius:10px; border:none; background:var(--wolf-primary); color:#fff; font-family:'Tajawal'; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.wolf-login-btn:hover { background:var(--wolf-primary-dark); transform:scale(1.03); }
.wolf-user-btn { background:var(--wolf-surface2) !important; border:1px solid var(--wolf-border) !important; color:var(--wolf-text) !important; font-family:'Tajawal'; font-weight:700; font-size:14px; border-radius:10px !important; padding:8px 16px !important; }
.wolf-user-name { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wolf-dropdown { background:var(--wolf-surface) !important; border:1px solid var(--wolf-border) !important; border-radius:14px !important; overflow:hidden; margin-top:8px !important; }
.wolf-dropdown .dropdown-item { font-weight:700; font-size:14px; padding:10px 18px; }

/* Burger — hidden on desktop */
.wolf-burger { display:none; width:40px; height:40px; border:1px solid var(--wolf-border2); background:transparent; border-radius:10px; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:8px; flex-shrink:0; transition:border-color 0.2s; }
.wolf-burger:hover { border-color:var(--wolf-primary); }
.wolf-burger span { display:block; width:20px; height:2px; background:var(--wolf-text); border-radius:2px; }

/* Overlay */
.wolf-nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; opacity:0; visibility:hidden; transition:opacity 0.3s; }
.wolf-nav-overlay.open { opacity:1; visibility:visible; }
body.nav-open { overflow:hidden; }

/* ── FOOTER ─────────────────────────────────────────── */
.wolf-footer { padding:30px 0; border-top:1px solid var(--wolf-border2); }
.wolf-footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.wolf-footer-payments { display:flex; align-items:center; gap:10px; }
.pay-icon { width:44px; height:44px; border-radius:50%; background:var(--wolf-surface2); border:1px solid var(--wolf-border2); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--wolf-sub); transition:all 0.2s; }
.pay-icon:hover { border-color:var(--wolf-primary); color:var(--wolf-primary); }
.whatsapp-pay { color:#25D366; }
.whatsapp-pay:hover { border-color:#25D366; }
.wolf-footer-copy { font-size:13px; color:var(--wolf-muted); }
.wolf-footer-copy strong { color:var(--wolf-text); }

/* ── BREADCRUMB ─────────────────────────────────────── */
.breadcrumb-wrap {
    padding: 0 24px;
    margin-top: 80px;
    margin-bottom: 24px;
}
.breadcrumb-nav {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--wolf-border2);
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
}
.breadcrumb-nav a {
    color: var(--wolf-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}
.breadcrumb-nav a:hover { color: var(--wolf-text); }
.breadcrumb-sep { color: var(--wolf-border2); font-size: 10px; }
.breadcrumb-current {
    color: var(--wolf-primary-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── WHATSAPP FLOAT ─────────────────────────────────── */
.wolf-whatsapp { position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; text-decoration:none; z-index:999; transition:all 0.3s; box-shadow:0 4px 20px rgba(37,211,102,0.4); }
.wolf-whatsapp:hover { transform:scale(1.1); background:#20bd5a; color:#fff; }
.wolf-wa-pulse { position:absolute; inset:-4px; border-radius:50%; border:2px solid #25D366; animation:waPulse 2s infinite; }


/* ══════════════════════════════════════════════════════════════════════════════
   4. COMPONENTS — Buttons, Cards, Forms, Modals, Toast
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Primary & Ghost Buttons ────────────────────────── */
.btn-wolf-primary { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; border-radius:12px; background:var(--wolf-primary); color:#fff; font-family:'Tajawal'; font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:all 0.25s; }
.btn-wolf-primary:hover { background:var(--wolf-primary-dark); transform:translateY(-2px); box-shadow:0 8px 30px var(--wolf-primary-glow); color:#fff; }
.btn-wolf-ghost { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:12px; border:1px solid var(--wolf-border); background:transparent; color:var(--wolf-sub); font-family:'Tajawal'; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; transition:all 0.2s; }
.btn-wolf-ghost:hover { border-color:var(--wolf-primary); color:var(--wolf-primary); }

/* ── Section Headers ────────────────────────────────── */
.wolf-section { padding:90px 0; }
.wolf-section-alt { background:linear-gradient(180deg, var(--wolf-surface) 0%, rgba(124,77,255,0.03) 50%, var(--wolf-surface) 100%); }
.section-header { text-align:center !important; margin-bottom:50px; direction:rtl; }
.section-tag { display:inline-block; background:var(--wolf-primary-glow); color:var(--wolf-primary-light); font-size:12px; font-weight:900; padding:5px 16px; border-radius:50px; margin-bottom:14px; letter-spacing:1px; }
.section-title { font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:900; margin-bottom:12px; text-align:center !important; }
.section-desc { font-size:15px; color:var(--wolf-sub); max-width:500px; margin:0 auto; text-align:center !important; }

/* ── Modal ──────────────────────────────────────────── */
.wolf-modal { background:var(--wolf-surface) !important; border:1px solid var(--wolf-border) !important; border-radius:20px !important; color:var(--wolf-text); }
.wolf-modal-close { position:absolute; top:16px; left:16px; width:34px; height:34px; border-radius:10px; border:1px solid var(--wolf-border2); background:var(--wolf-surface2); color:var(--wolf-sub); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:all 0.2s; }
.wolf-modal-close:hover { color:var(--wolf-red); border-color:var(--wolf-red); }
.wolf-modal-icon { font-size:40px; text-align:center; margin-bottom:12px; }
.wolf-modal-title { text-align:center; font-size:22px; font-weight:900; margin-bottom:6px; }
.wolf-modal-sub { text-align:center; font-size:14px; color:var(--wolf-sub); margin-bottom:24px; }

/* ── Forms ──────────────────────────────────────────── */
.form-label-custom { font-size:13px; font-weight:700; color:var(--wolf-sub); margin-bottom:6px; display:block; }
.form-control-custom { background:var(--wolf-bg) !important; border:1px solid var(--wolf-border2) !important; color:var(--wolf-text) !important; border-radius:10px !important; padding:12px 16px !important; font-family:'Tajawal' !important; font-size:15px !important; }
.form-control-custom:focus { border-color:var(--wolf-primary) !important; box-shadow:0 0 0 3px var(--wolf-primary-glow) !important; }
.btn-modal-primary { width:100%; padding:14px; border-radius:12px; border:none; background:var(--wolf-primary); color:#fff; font-family:'Tajawal'; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.btn-modal-primary:hover { background:var(--wolf-primary-dark); }
.btn-modal-back { width:100%; padding:12px; border-radius:10px; border:1px solid var(--wolf-border2); background:none; color:var(--wolf-sub); font-family:'Tajawal'; font-size:14px; font-weight:700; cursor:pointer; }
.modal-switch-text { text-align:center; font-size:13px; color:var(--wolf-muted); margin-top:16px; margin-bottom:0; }
.modal-switch-link { color:var(--wolf-red); font-weight:700; text-decoration:none; transition:opacity 0.2s; }
.modal-switch-link:hover { opacity:0.8; }

/* ── OTP Input ──────────────────────────────────────── */
.otp-input { font-size: 2rem !important; letter-spacing: 10px !important; text-align: center !important; padding: 0 20px !important; height: 72px !important; -moz-appearance: textfield; }
.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── WhatsApp Hint ──────────────────────────────────── */
.whatsapp-hint { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(87, 174, 77, 0.08); border: 1px solid rgba(87, 174, 77, 0.2); border-radius: 10px; padding: 10px 16px; font-size: 13px; color: var(--whatsapp); font-weight: 700; margin-bottom: 20px; }

/* ── Toast ──────────────────────────────────────────── */
.toast-msg { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); padding:14px 28px; border-radius:12px; font-size:14px; font-weight:700; z-index:10000; animation:toastIn 0.3s; max-width:90%; }
.toast-success { background:#065f46; color:#6ee7b7; }
.toast-error { background:#7f1d1d; color:#fca5a5; }

/* ── Data Card (shared: details + checkout) ─────────── */
.data-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 22px; overflow: hidden; margin-bottom: 20px; animation: fadeUp 0.5s 0.1s ease both; }
.data-card-header { padding: 16px 24px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.data-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.data-item:last-child { border-bottom: none; }
.data-label { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 130px; }
.data-value { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; flex: 1; word-break: break-all; }

/* ── Copy Button ────────────────────────────────────── */
.copy-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-family: 'Tajawal', sans-serif; font-weight: 700; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.copy-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.copy-btn.copied { background: var(--green); border-color: var(--green); color: #fff; }

/* ── Back Button ────────────────────────────────────── */
.back-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; color: var(--muted); font-family: 'Tajawal', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: border-color 0.2s, color 0.2s; animation: fadeUp 0.5s 0.3s ease both; }
.back-btn:hover { border-color: var(--border2); color: var(--text); }

/* ── Section Label (shared: checkout, referrals) ────── */
.section-label { font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; margin-top:32px; display:flex; align-items:center; gap:8px; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Error Message ──────────────────────────────────── */
.error-msg { background: rgba(200,16,46,0.1); border: 1px solid rgba(200,16,46,0.3); color: #ff6070; border-radius: 12px; padding: 12px 18px; margin-bottom: 20px; font-size: 14px; font-weight: 700; text-align: center; }

/* ── Divider ────────────────────────────────────────── */
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Spinner ────────────────────────────────────────── */
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none; }

/* ── Back Link ──────────────────────────────────────── */
.back-link { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--text); }


/* ══════════════════════════════════════════════════════════════════════════════
   5. HOME PAGE — Hero, Trial Cards, Features, Reviews, Blog, FAQ
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────── */
.wolf-hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:120px 0 80px; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-gradient { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 20%, rgba(124,77,255,0.15) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(200,16,46,0.08) 0%, transparent 50%); }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(124,77,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124,77,255,0.04) 1px, transparent 1px); background-size:60px 60px; }
.hero-content { position:relative; z-index:1; text-align:center; max-width:750px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--wolf-primary-glow); border:1px solid var(--wolf-border); border-radius:50px; padding:8px 20px; font-size:13px; font-weight:700; color:var(--wolf-primary-light); margin-bottom:28px; }
.badge-pulse { width:8px; height:8px; border-radius:50%; background:var(--wolf-green); animation:pulse 2s infinite; }
.hero-title { font-size:clamp(2.2rem, 5vw, 3.8rem); font-weight:900; line-height:1.2; margin-bottom:20px; }
.hero-title-accent { background:linear-gradient(135deg, var(--wolf-primary), var(--wolf-primary-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:17px; color:var(--wolf-sub); margin-bottom:36px; line-height:1.9; }
.hero-desc strong { color:var(--wolf-text); }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:50px; }
.hero-stats { display:flex; justify-content:center; gap:0; }
.hero-stat { text-align:center; padding:0 28px; }
.hero-stat strong { display:block; font-size:24px; font-weight:900; color:var(--wolf-primary-light); }
.hero-stat span { font-size:12px; color:var(--wolf-muted); font-weight:700; }
.hero-stat-sep { width:1px; background:var(--wolf-border); }

/* ── TRIAL CARDS ────────────────────────────────────── */
.trial-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px; max-width:800px; margin:0 auto; }
.trial-card { background:var(--wolf-surface); border:1px solid var(--wolf-border); border-radius:var(--wolf-radius); padding:36px 28px; text-align:center; position:relative; transition:all 0.3s; }
.trial-card:hover { border-color:var(--wolf-primary); transform:translateY(-4px); box-shadow:0 12px 40px rgba(124,77,255,0.1); }
.trial-card.card-owned { border-color:var(--wolf-green); }
.trial-badge { position:absolute; top:16px; right:16px; background:var(--wolf-gold); color:#000; font-size:12px; font-weight:900; padding:5px 14px; border-radius:8px; }
.trial-badge.badge-owned { background:var(--wolf-green); color:#fff; }
.trial-logo { margin-bottom:20px; height:110px; display:flex; align-items:center; justify-content:center; }
.trial-logo svg { max-height:100px; width:auto; }
.trial-name { font-size:22px; font-weight:900; margin-bottom:8px; }
.trial-desc { font-size:13px; color:var(--wolf-sub); margin-bottom:20px; }
.trial-stats { display:flex; justify-content:center; gap:0; margin-bottom:24px; }
.trial-stat { flex:1; padding:12px 8px; text-align:center; border-left:1px solid var(--wolf-border2); }
.trial-stat:last-child { border-left:none; }
.trial-stat strong { display:block; font-size:18px; font-weight:900; }
.trial-stat span { font-size:11px; color:var(--wolf-muted); }

.btn-trial-wolf { width:100%; padding:14px 20px; border-radius:12px; border:none; font-family:'Tajawal'; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.25s; }
.btn-start-aroma { background:var(--wolf-red); color:#fff; }
.btn-start-aroma:hover { background:#a00d24; transform:scale(1.02); }
.btn-start-universe { background:var(--wolf-primary); color:#fff; }
.btn-start-universe:hover { background:var(--wolf-primary-dark); transform:scale(1.02); }
/* btn-view for home page trial cards */
.trial-card .btn-view { background:var(--wolf-green); color:#fff; }
.trial-card .btn-view:hover { background:#1a9e4a; }

/* ── FEATURES ───────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.feature-card { background:var(--wolf-bg); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius); padding:32px 24px; text-align:center; transition:all 0.3s; position:relative; overflow:hidden; }
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--wolf-primary), var(--wolf-primary-light)); opacity:0; transition:opacity 0.3s; }
.feature-card:hover { border-color:var(--wolf-primary); transform:translateY(-4px); box-shadow:0 8px 30px rgba(124,77,255,0.08); }
.feature-card:hover::before { opacity:1; }
.feature-icon-wrap { width:72px; height:72px; border-radius:18px; background:linear-gradient(135deg, rgba(124,77,255,0.15), rgba(179,136,255,0.08)); color:var(--wolf-primary-light); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; padding:14px; }
.feature-icon-wrap svg { width:100%; height:100%; color:var(--wolf-primary-light); }
.feature-card h4 { font-size:16px; font-weight:900; margin-bottom:8px; }
.feature-card p { font-size:13px; color:var(--wolf-sub); line-height:1.8; }

/* ── REVIEWS ────────────────────────────────────────── */
.reviews-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.review-card { background:var(--wolf-surface); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius); padding:28px; transition:all 0.3s; position:relative; }
.review-card::before { content:'\201C'; position:absolute; top:16px; left:20px; font-size:48px; font-weight:900; color:var(--wolf-primary); opacity:0.15; line-height:1; }
.review-card:hover { border-color:var(--wolf-primary); transform:translateY(-3px); box-shadow:0 8px 25px rgba(124,77,255,0.06); }
.review-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.review-avatar { width:50px; height:50px; border-radius:50%; background:var(--wolf-primary-glow); border:2px solid var(--wolf-primary); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; color:var(--wolf-primary-light); position:relative; }
.review-social { position:absolute; bottom:-4px; right:-4px; width:24px; height:24px; border-radius:50%; background:var(--wolf-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; text-decoration:none; border:2px solid var(--wolf-surface); transition:all 0.2s; }
.review-social:hover { background:var(--wolf-primary-dark); color:#fff; }
.review-name { font-size:15px; font-weight:900; }
.review-stars { color:var(--wolf-gold); font-size:12px; display:flex; gap:2px; }
.review-text { font-size:14px; color:var(--wolf-sub); line-height:1.8; }

/* ── BLOG ───────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.blog-card { background:var(--wolf-bg); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius); overflow:hidden; text-decoration:none; color:inherit; transition:all 0.3s; }
.blog-card:hover { border-color:var(--wolf-primary); transform:translateY(-4px); box-shadow:0 8px 25px rgba(124,77,255,0.06); color:inherit; }
.blog-img { height:140px; background:linear-gradient(135deg, var(--wolf-surface2), rgba(124,77,255,0.08)); display:flex; align-items:center; justify-content:center; color:var(--wolf-primary-light); }
.blog-img svg { stroke:var(--wolf-primary-light); }
.blog-body { padding:20px; }
.blog-date { font-size:11px; color:var(--wolf-muted); font-weight:700; }
.blog-title { font-size:15px; font-weight:900; margin:8px 0; }
.blog-excerpt { font-size:13px; color:var(--wolf-sub); line-height:1.7; }

/* ── FAQ ────────────────────────────────────────────── */
.faq-list { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--wolf-surface); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius-sm); overflow:hidden; transition:border-color 0.3s; }
.faq-item.open { border-color:var(--wolf-primary); }
.faq-question { width:100%; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; background:none; border:none; color:var(--wolf-text); font-family:'Tajawal'; font-size:15px; font-weight:700; cursor:pointer; text-align:right; }
.faq-question i { color:var(--wolf-muted); transition:transform 0.3s; font-size:13px; }
.faq-item.open .faq-question i { transform:rotate(180deg); color:var(--wolf-primary); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
.faq-item.open .faq-answer { max-height:300px; }
.faq-answer p { padding:0 22px 18px; font-size:14px; color:var(--wolf-sub); line-height:1.8; }

/* ── INLINE SVG LOGOS ───────────────────────────────── */
.card-logo-svg-wrap { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.server-card:hover .card-logo-svg-wrap { transform: scale(1.06); }
.aroma-logo-wrap svg { filter: drop-shadow(0 4px 18px rgba(200, 16, 46, 0.35)); transition: filter 0.3s ease; }
.server-card:hover .aroma-logo-wrap svg { filter: drop-shadow(0 6px 28px rgba(200, 16, 46, 0.6)); }
.universe-logo-wrap svg { filter: drop-shadow(0 4px 18px rgba(150, 100, 100, 0.4)); transition: filter 0.3s ease; }
.server-card:hover .universe-logo-wrap svg { filter: drop-shadow(0 6px 28px rgba(180, 120, 120, 0.65)); }


/* ══════════════════════════════════════════════════════════════════════════════
   6. SUB PAGES — Details, Checkout, My Subscriptions
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Sub-page padding logic ─────────────────────────── */
/* صفحات بـ breadcrumb (checkout, subscription_details): الـ breadcrumb بيعمل margin-top:80px + margin-bottom:24px
   فالـ page wrapper محتاج padding-top صغير بس
   صفحات بدون breadcrumb (subs, referrals, redeem): محتاجين padding-top:90px للـ navbar */

/* ── SUBSCRIPTION DETAILS ───────────────────────────── */
.details-header { text-align: center; margin-bottom: 40px; animation: fadeDown 0.5s ease both; }
.details-logo-wrap { width: 100px; height: 100px; background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 0 40px var(--accent-glow); }
.details-logo-wrap img { max-width: 70px; max-height: 70px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.details-title { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
.details-subtitle { font-size: 13px; color: var(--muted); }
.details-subtitle span { color: #f87171; font-weight: 700; }
.details-expiry-date { font-size:13px; color:var(--muted); margin-top:4px; }
.btn-renew-sub { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:12px 28px; background:var(--accent, #3b82f6); color:#fff; border:none; border-radius:12px; font-family:'Tajawal',sans-serif; font-size:15px; font-weight:700; text-decoration:none; transition:filter .2s, transform .15s; }
.btn-renew-sub:hover { filter:brightness(1.1); transform:translateY(-1px); color:#fff; }

/* ── Details Page v2 Layout ─────────────────────────── */
.details-page-v2 { padding: 0 0 80px; }
.details-page-v2 .container { max-width: 720px; }

/* Server Badge */
.server-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 50px; padding: 6px 18px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, #fff); margin-bottom: 16px; }

/* ── Device Tabs ────────────────────────────────────── */
.tabs-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.tabs-nav { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border2); border-radius: 18px; padding: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn { flex: 1; min-width: 72px; padding: 10px 6px; border: none; border-radius: 12px; background: transparent; color: var(--muted); font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: color 0.2s, background 0.2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tab-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 17px; transition: background 0.2s, color 0.2s; }
.tab-btn:hover { color: var(--text); }
.tab-btn:hover .tab-icon { background: var(--border2); }
.tab-btn.active { color: var(--text); background: var(--surface2); }
.tab-btn.active .tab-icon { background: var(--accent); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeUp 0.3s ease both; }

/* ── Device Card ────────────────────────────────────── */
.device-card { background: var(--surface); border: 1px solid var(--border2); border-top: 2px solid var(--accent); border-radius: 22px; overflow: hidden; }
.app-header { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.app-info { display: flex; align-items: center; gap: 14px; }
.app-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.app-title { font-size: 16px; font-weight: 900; margin-bottom: 3px; }
.app-sub { font-size: 12px; color: var(--muted); }

/* Download Buttons */
.dl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-download { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); border: 1px solid transparent; border-radius: 50px; padding: 10px 20px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; font-family: 'Tajawal', sans-serif; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.btn-download:hover { opacity: 0.88; transform: scale(1.02); color: #fff; }
.btn-download-secondary { background: transparent; border-color: var(--border2); color: var(--muted); }
.btn-download-secondary:hover { border-color: var(--accent); color: var(--text); background: var(--accent-glow); }

/* Store Notice */
.store-notice { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 12px; font-size: 13px; color: var(--muted); }
.store-notice i { color: var(--accent); flex-shrink: 0; }

/* Steps */
.steps-wrap { padding: 22px 24px; }
.steps-wrap h4 { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.step { font-size: 13px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.step-num { width: 22px; height: 22px; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 27%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.step-item { display: flex; gap: 14px; margin-bottom: 10px; padding: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; }
.step-item .step-num { width: 28px; height: 28px; font-size: 12px; }
.step-text { font-size: 14px; color: var(--muted); line-height: 1.8; }
.step-text strong { color: var(--text); font-weight: 700; }
.step-highlight { display: inline-block; background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 6px; padding: 2px 10px; margin: 2px 3px; font-family: 'Courier New', monospace; font-size: 13px; color: color-mix(in srgb, var(--accent) 80%, #fff); font-weight: 700; }
.step-warning { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 14px; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.2); border-radius: 10px; font-size: 13px; color: #fbbf24; font-weight: 700; }
.step-alert { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 14px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 10px; font-size: 13px; color: #fca5a5; font-weight: 700; }

/* Notes */
.notes-wrap { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.note-item { display: flex; gap: 14px; padding: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; }
.note-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-glow); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.note-text { font-size: 14px; color: var(--muted); line-height: 1.7; padding-top: 5px; }
.note-text strong { color: var(--text); }

/* Instructions Card */
.instructions-card { background: var(--surface); border: 1px solid var(--border2); border-top: 2px solid var(--accent); border-radius: 22px; overflow: hidden; margin-bottom: 20px; animation: fadeUp 0.5s 0.2s ease both; }
.instructions-header { padding: 20px 24px 16px; font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.instructions-header i { color: var(--accent); }
.app-box { margin: 0 24px 24px; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.app-name { font-size: 14px; font-weight: 900; color: var(--accent); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* ── CHECKOUT PAGE ──────────────────────────────────── */
.checkout-page { max-width: 600px; margin: 0 auto; padding: 0 24px 100px; }
.page-header { margin-bottom: 36px; animation: fadeUp .3s ease both; }
.page-header-top { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.srv-icon-lg { width:52px; height:52px; border-radius:15px; background:var(--accent-glow); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.page-title { font-size:24px; font-weight:900; }
.page-sub   { color:var(--muted); font-size:14px; margin-top:4px; }

/* Payment Methods */
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pay-card { background:var(--surface); border:2px solid var(--border2); border-radius:14px; padding:20px 16px; cursor:pointer; transition:border-color .2s, transform .15s; text-align:center; }
.pay-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.pay-card.selected { border-color:var(--accent); background:var(--accent-glow); }
.pay-card .pay-icon { font-size:28px; margin-bottom:10px; }
.pay-name { font-size:15px; font-weight:900; margin-bottom:4px; }
.pay-desc { font-size:12px; color:var(--muted); }

/* Activation Code */
.code-section { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:24px; }
.code-input-wrap { display:flex; gap:10px; margin-bottom:10px; }
.code-input { flex:1; background:var(--surface2); border:1.5px solid var(--border2); border-radius:12px; padding:14px 18px; font-family:'Tajawal',sans-serif; font-size:16px; font-weight:700; color:var(--text); letter-spacing:2px; text-transform:uppercase; transition:border-color .2s; direction:ltr; text-align:center; }
.code-input:focus { outline:none; border-color:var(--accent); }
.code-input::placeholder { letter-spacing:1px; color:var(--muted); font-size:14px; text-transform:none; }
.btn-verify { background:var(--accent); border:none; border-radius:12px; padding:14px 22px; font-family:'Tajawal',sans-serif; font-size:14px; font-weight:700; color:#fff; cursor:pointer; transition:filter .2s; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.btn-verify:hover { filter:brightness(1.1); }
.btn-verify:disabled { opacity:.5; cursor:not-allowed; }
.code-hint { font-size:13px; color:var(--muted); }
.code-hint a { color:var(--accent); text-decoration:none; }
.code-status { display:none; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; font-size:14px; font-weight:700; margin-top:12px; }
.code-status.show { display:flex; }
.code-status.success { background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.2); color:#4ade80; }
.code-status.error   { background:rgba(200,16,46,.1);  border:1px solid rgba(200,16,46,.2);  color:#f87171; }

/* WhatsApp Section in Checkout */
.whatsapp-section { background:var(--surface); border:1px solid rgba(37,211,102,.15); border-radius:16px; padding:28px 24px; text-align:center; }
.wa-icon  { font-size:44px; margin-bottom:12px; }
.wa-title { font-size:18px; font-weight:900; margin-bottom:8px; }
.wa-desc  { font-size:14px; color:var(--muted); margin-bottom:20px; line-height:1.7; }
.btn-whatsapp { display:inline-flex; align-items:center; gap:10px; background:#25D366; border:none; border-radius:50px; padding:14px 32px; font-family:'Tajawal',sans-serif; font-size:16px; font-weight:700; color:#fff; cursor:pointer; text-decoration:none; transition:filter .2s; }
.btn-whatsapp:hover { filter:brightness(1.08); color:#fff; }

/* Order Summary */
.order-summary { background:var(--surface); border:1px solid var(--border2); border-radius:16px; overflow:hidden; }
.summary-header { padding:16px 20px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--muted); }
.summary-row { padding:14px 20px; display:flex; justify-content:space-between; font-size:14px; border-bottom:1px solid var(--border); }
.summary-row:last-child { border-bottom:none; }
.summary-row .label { color:var(--muted); }
.summary-row .value { font-weight:700; }
.summary-total { padding:16px 20px; display:flex; justify-content:space-between; font-size:16px; font-weight:900; background:var(--surface2); }
.summary-total .price { color:var(--accent); font-size:20px; }

/* Submit Button */
.btn-submit { width:100%; background:var(--accent); border:none; border-radius:14px; padding:16px; font-family:'Tajawal',sans-serif; font-size:17px; font-weight:900; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:filter .2s, transform .15s; margin-top:16px; }
.btn-submit:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── ACCOUNT PAGE (حسابي) ───────────────────────────── */
.acc-page { max-width: 720px; margin: 0 auto; padding: 90px 16px 60px; }
.acc-header { text-align: center; margin-bottom: 28px; }
.acc-avatar { width: 76px; height: 76px; background: linear-gradient(135deg, var(--wolf-primary), var(--wolf-primary-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; color: #fff; margin: 0 auto 14px; box-shadow: 0 4px 24px var(--wolf-primary-glow); }
.acc-name { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.acc-phone { font-size: 14px; color: var(--wolf-sub); direction: ltr; display: inline-block; }
.acc-since { font-size: 12px; color: var(--wolf-muted); margin-top: 4px; }
.acc-card { background: var(--wolf-surface); border: 1px solid var(--wolf-border2); border-radius: 18px; padding: 22px; margin-bottom: 8px; }
.acc-field { margin-bottom: 16px; }
.acc-hint { font-size: 11px; color: var(--wolf-muted); margin-top: 6px; }
.acc-pass-wrap { position: relative; }
.acc-pass-wrap .form-control-custom { padding-left: 44px !important; }
.acc-pass-toggle { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--wolf-muted); cursor: pointer; font-size: 15px; padding: 4px; }
.acc-msg { padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; margin-bottom: 14px; display: none; }
.acc-msg.success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #4ade80; }
.acc-msg.error { background: rgba(200,16,46,0.1); border: 1px solid rgba(200,16,46,0.3); color: #ff6070; }
.acc-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.acc-links .back-btn { animation: none; }

@media (max-width: 480px) {
    .acc-links { grid-template-columns: 1fr; }
}

/* ── MY SUBSCRIPTIONS PAGE ──────────────────────────── */
.subs-page { max-width:860px; margin:0 auto; padding:90px 24px 100px; }
.greeting-wrap { margin-bottom:44px; animation:fadeUp .35s ease both; }
.greeting-top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.greeting { font-size:28px; font-weight:900; line-height:1.3; margin-bottom:6px; }
.greeting em { font-style:normal; color:var(--red); }
.greeting-sub { color:var(--muted); font-size:15px; }
.btn-new-sub { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--red),var(--red-hover)); color:#fff; border:none; border-radius:50px; padding:12px 24px; font-family:'Tajawal',sans-serif; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; flex-shrink:0; box-shadow:0 4px 16px rgba(200,16,46,.25); transition:transform .18s,filter .18s; }
.btn-new-sub:hover { transform:scale(1.04); filter:brightness(1.1); color:#fff; }

/* Subscription Cards */
.subs-cards { display:flex; flex-direction:column; gap:12px; }
.sub-card { background:var(--surface); border:1px solid var(--border2); border-radius:18px; overflow:hidden; transition:border-color .25s,transform .2s,box-shadow .25s; animation:fadeUp .4s ease both; text-decoration:none; color:inherit; display:block; cursor:pointer; -webkit-overflow-scrolling: touch; }
.sub-card:hover, .sub-card:focus { color:inherit; text-decoration:none; }
.sub-card:nth-child(1) { animation-delay:.05s; }
.sub-card:nth-child(2) { animation-delay:.1s; }
.sub-card:nth-child(3) { animation-delay:.15s; }
.sub-card:nth-child(4) { animation-delay:.2s; }
.sub-card:hover { transform:translateY(-2px); }
.sub-card.s-active { border-color:#1f3b2a; }
.sub-card.s-active:hover { border-color:rgba(22,163,74,.45); box-shadow:0 8px 32px rgba(22,163,74,.05); }
.sub-card.s-urgent { border-color:#3a2e1a; }
.sub-card.s-urgent:hover { border-color:rgba(212,175,55,.45); box-shadow:0 8px 32px rgba(212,175,55,.05); }
.sub-card.s-expired { border-color:var(--border); opacity:.65; }
.sub-card.s-expired:hover { opacity:1; border-color:var(--border2); }

.card-line { height:2px; }
.cl-green { background:linear-gradient(90deg,var(--wolf-green),transparent 70%); }
.cl-gold { background:linear-gradient(90deg,var(--gold),transparent 70%); }
.cl-gray { background:linear-gradient(90deg,var(--muted),transparent 70%); }
.card-inner { padding:20px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.srv-icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.si-aroma { background:rgba(200,16,46,.1); }
.si-universe { background:rgba(50,100,255,.1); }
.si-gray { background:rgba(100,100,100,.08); }
.srv-info { flex:1; min-width:0; }
.srv-name { font-size:16px; font-weight:900; }
.srv-pkg { font-size:13px; color:var(--muted); margin-top:3px; }
.srv-user { font-size:12px; color:var(--muted); margin-top:4px; direction:ltr; text-align:right; font-family:'Tajawal',monospace; }
.srv-user i { margin-left:4px; font-size:11px; }
.card-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:50px; font-size:12px; font-weight:700; white-space:nowrap; }
.sb-active { background:rgba(22,163,74,.1); color:#4ade80; border:1px solid rgba(22,163,74,.2); }
.sb-expired { background:rgba(100,100,100,.08); color:var(--muted); border:1px solid var(--border2); }
.bdot { width:6px; height:6px; border-radius:50%; }
.expiry-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.expiry-date { font-size:13px; font-weight:700; }
.expiry-left { font-size:12px; font-weight:700; padding:3px 10px; border-radius:50px; white-space:nowrap; }
.el-green { background:rgba(22,163,74,.1); color:#4ade80; }
.el-gold { background:rgba(212,175,55,.1); color:#fbbf24; }
.el-gray { background:rgba(100,100,100,.08); color:var(--muted); }
.card-divider { height:1px; background:var(--border); margin:0 24px; }
.card-footer { padding:14px 24px; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.btn-card { border:none; border-radius:50px; padding:10px 22px; font-family:'Tajawal',sans-serif; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .18s,filter .18s; white-space:nowrap; text-decoration:none; }
.btn-card:hover { transform:scale(1.03); filter:brightness(1.1); }
/* btn-view for subscription cards */
.subs-cards .btn-view { background:var(--surface2); border:1px solid var(--border2) !important; color:var(--text); }
.subs-cards .btn-view:hover { border-color:var(--red) !important; color:var(--text); }

/* Empty State */
.empty-wrap { text-align:center; padding:80px 20px; background:var(--surface); border:1px solid var(--border2); border-radius:20px; margin-top:12px; animation:fadeUp .4s ease both; }
.empty-emoji { font-size:52px; margin-bottom:16px; opacity:.3; }
.empty-title { font-size:20px; font-weight:900; margin-bottom:8px; }
.empty-sub { color:var(--muted); font-size:15px; margin-bottom:28px; }
.btn-go-pkgs { background:var(--red); border:none; border-radius:50px; padding:14px 32px; font-family:'Tajawal',sans-serif; font-size:15px; font-weight:700; color:#fff; cursor:pointer; text-decoration:none; display:inline-block; transition:background .2s; }
.btn-go-pkgs:hover { background:var(--red-hover); color:#fff; }


/* ── NOTIFICATIONS PAGE (إشعاراتي) ─────────────────── */
.notif-page { max-width: 620px; margin: 0 auto; padding: 90px 16px 60px; }
.notif-page-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.notif-page-title { font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.notif-page-title i { color: var(--wolf-primary-light); }
.notif-page-sub { font-size: 13px; color: var(--wolf-muted); margin-top: 2px; }
.notif-mark-all { background: var(--wolf-surface2); border: 1px solid var(--wolf-border2); border-radius: 10px; color: var(--wolf-sub); padding: 8px 16px; font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.notif-mark-all:hover { border-color: var(--wolf-primary); color: var(--wolf-primary-light); }
.notif-list { background: var(--wolf-surface); border: 1px solid var(--wolf-border2); border-radius: 18px; overflow: hidden; }
.notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--wolf-border2); cursor: pointer; transition: background 0.2s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--wolf-surface2); }
.notif-item.unread { background: rgba(124,77,255,0.04); }
.notif-item-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--wolf-primary-glow); color: var(--wolf-primary-light); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.notif-item-text { font-size: 12px; color: var(--wolf-muted); line-height: 1.6; }
.notif-item-time { font-size: 11px; color: var(--wolf-muted); margin-top: 4px; opacity: 0.7; }
.notif-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wolf-red); flex-shrink: 0; margin-top: 6px; }
.notif-empty { text-align: center; padding: 60px 20px; background: var(--wolf-surface); border: 1px solid var(--wolf-border2); border-radius: 18px; color: var(--wolf-muted); }
.notif-empty i { font-size: 32px; display: block; margin-bottom: 12px; }
.notif-empty p { font-size: 14px; }

@media (max-width: 500px) {
    .notif-page-header { flex-direction: column; align-items: flex-start; }
    .notif-item { gap: 10px; padding: 14px 16px; }
    .notif-item-icon { width: 34px; height: 34px; font-size: 13px; }
}


/* ── Confirm Modal (wolf-confirm) ──────────────────── */
.wolf-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.wolf-confirm-box { background:var(--wolf-surface); border:1px solid var(--wolf-border); border-radius:20px; padding:28px; text-align:center; max-width:340px; width:100%; animation:fadeUp 0.25s ease; }
.wolf-confirm-icon { width:52px; height:52px; border-radius:50%; background:rgba(200,16,46,0.1); color:var(--wolf-red); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 16px; }
.wolf-confirm-title { font-size:16px; font-weight:900; margin-bottom:4px; }
.wolf-confirm-sub { font-size:13px; color:var(--wolf-muted); margin-bottom:20px; }
.wolf-confirm-actions { display:flex; gap:8px; }
.wolf-confirm-btn { flex:1; padding:12px; border-radius:12px; border:none; font-family:'Tajawal',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.wolf-confirm-yes { background:var(--wolf-red); color:#fff; }
.wolf-confirm-yes:hover { filter:brightness(1.1); }
.wolf-confirm-no { background:var(--wolf-surface2); border:1px solid var(--wolf-border2); color:var(--wolf-sub); }
.wolf-confirm-no:hover { border-color:var(--wolf-border); color:var(--wolf-text); }


/* ══════════════════════════════════════════════════════════════════════════════
   7. REFERRALS & REWARDS
   ══════════════════════════════════════════════════════════════════════════════ */

.ref-page { max-width: 720px; margin: 0 auto; padding: 90px 16px 60px; }
.ref-header { margin-bottom: 24px; }
.ref-header-title { font-size: 22px; font-weight: 900; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.ref-header-sub { font-size: 13px; color: var(--muted); }

/* Stats Row */
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.ref-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; text-align: center; position: relative; overflow: hidden; }
.ref-stat::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; }
.ref-stat.gold::before  { background: var(--gold); }
.ref-stat.green::before { background: var(--green); }
.ref-stat.blue::before  { background: var(--blue); }
.ref-stat-val { font-size: 28px; font-weight: 900; line-height: 1; }
.ref-stat.gold  .ref-stat-val { color: var(--gold); }
.ref-stat.green .ref-stat-val { color: var(--green); }
.ref-stat.blue  .ref-stat-val { color: var(--blue); }
.ref-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* Progress Bar */
.progress-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 24px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; }
.progress-header .label { color: var(--muted); font-weight: 700; }
.progress-header .val   { font-weight: 900; color: var(--gold); }
.progress-bar-bg { height: 8px; background: var(--surface2); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar-fill { height: 100%; background: var(--gold); border-radius: 8px; transition: width 0.6s ease; min-width: 2%; }
.progress-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* Tabs */
.ref-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ref-tabs::-webkit-scrollbar { display: none; }
.ref-tab { padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); transition: all 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 6px; user-select: none; }
.ref-tab:hover { color: var(--text); }
.ref-tab.active { border-bottom-color: var(--gold); color: var(--gold); }
.ref-tab-badge { background: rgba(22,163,74,0.15); color: var(--green); font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 6px; line-height: 1.4; }
.ref-tab-content { display: none; }
.ref-tab-content.active { display: block; }

/* Shared Card */
.ref-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }

/* ── Tab 1: Referral Link ─────────────────────────── */
.ref-link-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.ref-link-title { font-size: 14px; font-weight: 900; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.ref-link-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.ref-link-row { display: flex; gap: 8px; align-items: center; }
.ref-link-input { flex: 1; background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; color: var(--text); font-family: 'Tajawal', monospace; font-size: 12px; font-weight: 700; padding: 10px 14px; direction: ltr; text-align: left; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-copy-link { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; color: var(--text); font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: 12px; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.2s; white-space: nowrap; }
.btn-copy-link:hover { border-color: var(--gold); color: var(--gold); }
.btn-copy-link.copied { border-color: var(--green); color: var(--green); }
.btn-wa-share { background: var(--whatsapp); border: none; border-radius: 10px; color: #fff; font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: 12px; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; text-decoration: none; transition: opacity 0.2s; white-space: nowrap; }
.btn-wa-share:hover { opacity: 0.85; color: #fff; }

/* ── Tab 2: Rewards ───────────────────────────────── */
.reward-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); gap: 12px; }
.reward-item:last-child { border-bottom: none; }
.reward-item.is-used   { opacity: 0.5; }
.reward-item.is-expired { opacity: 0.35; }
.reward-code { font-family: monospace; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: var(--text); }
.reward-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.reward-badge.available { background: rgba(34,197,94,0.12); color: var(--green); }
.reward-badge.used      { background: rgba(59,130,246,0.12); color: var(--blue); }
.reward-badge.expired   { background: rgba(102,102,102,0.12); color: var(--muted); }
.reward-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.reward-actions { display: flex; gap: 6px; align-items: center; }
.btn-use-reward { background: var(--green); border: none; border-radius: 8px; color: #fff; font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: 11px; padding: 6px 12px; cursor: pointer; text-decoration: none; transition: opacity 0.2s; white-space: nowrap; }
.btn-use-reward:hover { opacity: 0.85; color: #fff; }

/* ── Tab 3: Referrals List ────────────────────────── */
.ref-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); gap: 12px; }
.ref-item:last-child { border-bottom: none; }
.ref-item-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ref-item-avatar { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.ref-item-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-item-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.ref-item-meta .sep { opacity: 0.4; }
.ref-item-points { font-size: 13px; font-weight: 900; color: var(--gold); white-space: nowrap; display: flex; align-items: center; gap: 3px; }

/* ── Tab 4: How it works ──────────────────────────── */
.how-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.how-steps { display: flex; gap: 0; }
.how-step { flex: 1; text-align: center; padding: 14px 8px; }
.how-divider { width: 1px; background: var(--border); align-self: stretch; margin: 20px 0; }
.how-step-num { width: 40px; height: 40px; background: rgba(200,16,46,0.12); color: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; margin: 0 auto 10px; }
.how-step-title { font-size: 13px; font-weight: 900; margin-bottom: 4px; }
.how-step-desc  { font-size: 11px; color: var(--muted); line-height: 1.6; }

/* Empty State */
.ref-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.ref-empty i { font-size: 28px; margin-bottom: 12px; display: block; }
.ref-empty p { font-size: 13px; }

/* ── REDEEM REWARD PAGE ─────────────────────────────── */
.redeem-page { max-width: 620px; margin: 0 auto; padding: 90px 16px 60px; }
.redeem-header { text-align: center; margin-bottom: 28px; }
.redeem-header h1 { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.redeem-header p { font-size: 13px; color: var(--muted); }
.reward-info { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 24px; }
.reward-info .code { font-family: monospace; font-size: 20px; font-weight: 900; letter-spacing: 2px; color: var(--gold); margin-bottom: 6px; }
.reward-info .meta { font-size: 12px; color: var(--muted); }

/* Redeem — section-title override */
.redeem-page .section-title { font-size: 15px; font-weight: 900; margin-bottom: 14px; text-align: right; display: flex; align-items: center; gap: 8px; }
.redeem-page .section-title i { color: var(--muted); }

.option-card { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 14px; }
.option-card:hover { border-color: var(--gold); }
.option-card.selected { border-color: var(--gold); background: rgba(245,158,11,0.06); }
.option-card input[type="radio"] { display: none; }
.option-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.option-icon.universe { background: rgba(50,100,255,0.12); }
.option-icon.aroma { background: rgba(200,16,46,0.12); }
.option-icon.renew { background: rgba(34,197,94,0.12); }
.option-title { font-size: 15px; font-weight: 700; }
.option-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.btn-redeem { display: block; width: 100%; background: var(--gold); color: #000; border: none; border-radius: 14px; font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 900; padding: 14px; cursor: pointer; transition: opacity 0.2s; margin-top: 24px; }
.btn-redeem:hover { opacity: 0.85; }
.btn-redeem:disabled { opacity: 0.4; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════════════════════
   8. VENDOR OVERRIDES — intl-tel-input
   ══════════════════════════════════════════════════════════════════════════════ */

.iti { width: 100%; display: block; }
.iti__flag-container { left: 0; right: auto; }
.iti--separate-dial-code .iti__selected-flag { background: transparent; }
.iti--separate-dial-code input { padding-left: 90px !important; padding-right: 16px !important; direction: ltr; }
.iti__country-list { background:var(--wolf-surface); color:var(--wolf-text); border:1px solid var(--wolf-border); }
.iti__country.iti__highlight { background:var(--wolf-surface2); }


/* ══════════════════════════════════════════════════════════════════════════════
   9. ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }
@keyframes waPulse { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.5);opacity:0} }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }


/* ══════════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE — All breakpoints in one place
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 992px — Tablet ─────────────────────────────────── */
@media (max-width: 992px) {
    /* Show burger */
    .wolf-burger { display:flex; }

    /* Sidebar */
    .wolf-nav-links {
        position:fixed; top:0; right:-300px; width:280px; height:100vh;
        background:var(--wolf-surface); flex-direction:column;
        justify-content:flex-start; padding:24px;
        gap:4px; transition:right 0.3s cubic-bezier(0.4,0,0.2,1);
        z-index:1001; border-left:1px solid var(--wolf-border);
        overflow-y:auto;
    }
    .wolf-nav-links.open { right:0; }

    /* Close button inside sidebar */
    .wolf-sidebar-close {
        display:flex; align-items:center; justify-content:center;
        width:36px; height:36px; border-radius:10px;
        border:1px solid var(--wolf-border2); background:var(--wolf-surface2);
        color:var(--wolf-sub); font-size:16px; cursor:pointer;
        position:absolute; top:18px; left:18px;
        transition:all 0.2s; z-index:2;
    }
    .wolf-sidebar-close:hover { color:var(--wolf-red); border-color:var(--wolf-red); }

    /* Brand inside sidebar */
    .wolf-sidebar-brand {
        display:flex; align-items:center; gap:10px;
        font-size:18px; font-weight:900; color:var(--wolf-text);
        padding:0 4px 20px; margin-bottom:8px;
        border-bottom:1px solid var(--wolf-border);
    }

    /* Sidebar links */
    .wolf-link {
        font-size:15px; padding:13px 16px; width:100%;
        border-radius:12px; transition:all 0.2s;
    }
    .wolf-link:hover { background:var(--wolf-surface2); color:var(--wolf-text); }
    .wolf-link.active { background:var(--wolf-primary-glow); }

    /* Show icons in sidebar */
    .wolf-link-icon { display:inline; margin-left:4px; font-size:13px; color:var(--wolf-muted); width:20px; text-align:center; }

    .features-grid, .reviews-grid, .blog-grid { grid-template-columns:1fr 1fr; }
}

/* ── 768px — Mobile landscape ───────────────────────── */
@media (max-width: 768px) {
    .hero-stats { flex-wrap:wrap; gap:16px; }
    .hero-stat-sep { display:none; }
    .hero-stat { min-width:40%; }
    .trial-grid { grid-template-columns:1fr; max-width:400px; }
    .features-grid, .reviews-grid, .blog-grid { grid-template-columns:1fr; }
    .wolf-footer-inner { flex-direction:column; text-align:center; }
}

/* ── 640px — Subscription cards ─────────────────────── */
@media (max-width: 640px) {
    .card-inner { gap:14px; flex-direction:column; align-items:stretch; }
    .card-meta { align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:8px; }
    .card-footer { flex-wrap:wrap; }
    .btn-card { flex:1; justify-content:center; }
    .greeting { font-size:22px; }
}

/* ── 600px — Referrals ──────────────────────────────── */
@media (max-width: 600px) {
    .ref-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ref-stat { padding: 14px 8px; }
    .ref-stat-val { font-size: 22px; }
    .ref-link-row { flex-direction: column; }
    .ref-link-row > * { width: 100%; justify-content: center; }
    .how-steps { flex-direction: column; gap: 0; }
    .how-divider { width: auto; height: 1px; margin: 0 20px; }
    .how-step { padding: 12px 8px; }
}

/* ── 500px — Checkout ───────────────────────────────── */
@media (max-width: 500px) {
    .pay-methods { grid-template-columns:1fr; }
    .code-input-wrap { flex-direction:column; }
}

/* ── 480px — Mobile portrait ────────────────────────── */
@media (max-width: 480px) {
    .hero-title { font-size:1.9rem; }
    .hero-desc { font-size:15px; }
    .wolf-user-name { display:none; }
    .data-item { flex-direction: column; align-items: flex-start; }
    .data-value { font-size: 14px; }
    .copy-btn { width: 100%; justify-content: center; }
    .app-header { flex-direction: column; align-items: flex-start; }
    .dl-btns { width: 100%; }
    .btn-download { flex: 1; justify-content: center; }
    .tab-btn { min-width: 60px; font-size: 11px; }
    .tab-icon { width: 34px; height: 34px; font-size: 15px; }
    .breadcrumb-nav { font-size: 12px; padding: 8px 16px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .breadcrumb-nav::-webkit-scrollbar { display: none; }
    .store-notice { flex-direction: column; align-items: flex-start; gap: 6px; }
}