/* الأساسيات - تعتمد الآن على modern-design-system.css */
body {
 font-family: 'Outfit', 'Tajawal', sans-serif;
 direction: rtl;
 text-align: right;
 margin: 0;
 padding: 0;
 padding-bottom: 80px;
 background-color: var(--bg) !important;
 color: var(--tx-primary);
 pointer-events: auto;
}

/* الشريط العلوي */
.top-bar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: var(--glass-bg);
 backdrop-filter: blur(20px);
 padding: 12px 24px;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 1001;
 border-bottom: 1px solid var(--border);
 pointer-events: auto;
}

.logo {
 height: 40px;
}

.top-profile-pic {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 border: 1.5px solid var(--border);
 object-fit: cover;
 cursor: pointer;
 transition: transform 0.2s ease;
}

.top-profile-pic:hover {
 transform: scale(1.05);
 border-color: var(--accent);
}

/* الإشعارات */
.notification-btn {
 background: transparent;
 border: none;
 cursor: pointer;
 font-size: 22px;
 color: var(--tx-secondary);
 position: relative;
 transition: color 0.2s;
}

.notification-btn:hover {
 color: var(--accent);
}

.notification-list {
 position: absolute;
 top: 50px;
 right: 20px;
 background: var(--glass-bg);
 backdrop-filter: blur(30px);
 border: 1px solid var(--border);
 box-shadow: var(--shadow-lg);
 width: 280px;
 max-height: 400px;
 overflow-y: auto;
 border-radius: 16px;
 padding: 16px;
 display: none;
 z-index: 1002;
}

.notification-list.show {
 display: block;
}

/* شريط التنقل السفلي - تم نقله إلى modern-design-system.css */

/* الخلفيات */
.video-background, .page-background-iframe {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 object-fit: cover;
 pointer-events: none;
}

/* الحاوية الرئيسية */
.container {
 padding: 24px;
 max-width: 800px;
 margin: 100px auto 40px;
}

/* الأزرار العامة */
.btn {
 background: var(--accent);
 color: #fff;
 border: none;
 padding: 12px 24px;
 border-radius: 12px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 text-decoration: none;
 display: inline-block;
}

.btn:hover {
 transform: translateY(-2px);
 filter: brightness(1.1);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
 .container {
 padding: 16px;
 }
}

/* Responsive layout for home cards across laptop and phone */
@media (min-width: 1024px) {
 .home-cards {
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 }
}

@media (max-width: 1023px) and (min-width: 600px) {
 .home-cards {
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 }
}

@media (max-width: 599px) {
 .home-cards {
 grid-template-columns: 1fr;
 gap: 12px;
 }
}

/* Home Card Styling - Modernized */
.home-card {
 background: var(--glass-bg);
 border: 1px solid var(--border);
 border-radius: 20px;
 overflow: hidden;
 aspect-ratio: 16/9;
 position: relative;
 transition: transform 0.3s ease, border-color 0.3s ease;
}

.home-card:hover {
 transform: translateY(-5px);
 border-color: var(--accent);
}

.home-card .thumb {
 position: absolute;
 inset: 0;
}

.home-card .thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.home-card .content-info {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 20px;
 background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.home-card .content-title {
 color: #fff;
 font-weight: 700;
 font-size: 1rem;
 margin-bottom: 8px;
}

/* Utilities */
.social-icon-custom {
 color: var(--tx-primary);
 font-size: 1.5rem;
 transition: transform 0.2s, color 0.2s;
}

.social-icon-custom:hover {
 color: var(--accent);
 transform: scale(1.1);
}

/* تعديل خاص لأيقونة X لضمان ظهورها بشكل جيد (دعم fa-x و fa-x-twitter) */
.social-icon-custom .fa-x,
.social-icon-custom .fa-x-twitter {
 font-size: 1.25rem;
}

/* Card Action Button (e.g. Start Exercise / ابدأ التمرين) */
.card-action-btn,
a.btn-primary[onclick*="trackToolClick"] {
 padding: 12px 30px !important;
 font-size: 14px !important;
 text-decoration: none !important;
 display: inline-block !important;
 margin-top: 20px !important;
 width: fit-content !important;
 align-self: center !important;
 border-radius: 99px !important;
 box-sizing: border-box !important;
}

@media (max-width: 768px) {
 .card-action-btn,
 a.btn-primary[onclick*="trackToolClick"],
 .tool-showcase-card a.btn-primary,
 .preview-item a.btn-primary {
 padding: 5px 12px !important;
 font-size: 9.5px !important;
 margin-top: 8px !important;
 width: fit-content !important;
 box-shadow: none !important;
 font-weight: 700 !important;
 align-self: center !important;
 border-radius: 20px !important;
 min-height: auto !important;
 height: auto !important;
 line-height: 1.2 !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 }
}

/* ==========================================================================
 PREMIUM NIGHT-GLOW BRAND IDENTITY — وعيك Design System v2
 --------------------------------------------------------------------------
 Core philosophy: Every accent-colored element carries a living, breathing
 light on its edge — like a neon sign glowing in a dark room.
 The light "orbits" the border smoothly using a rotating conic gradient,
 leaving subtle dark gaps between the glowing spots for elegance.

 DEVELOPER RULE 
 ─────────────────────────────────────────────────────────────────────────
 Primary (cyan→purple) → .glow-border-primary or .btn-primary
 Gold/Orange (warn) → .glow-border-gold or .p-card.pro / .p-card.ultra
 Success (green) → .glow-border-green
 Danger/Red → .glow-border-danger
 General cards → .glow-border (inherits accent)
 ─────────────────────────────────────────────────────────────────────────
 All backgrounds stay #0a0a0f (night-dark). The conic gradient
 angle changes via @keyframes, creating the smooth orbiting light.
 ========================================================================== */

/* ── Shared orbit animation ─────────────────────────────────────── */
@keyframes glowOrbit {
 from { --glow-angle: 0deg; }
 to { --glow-angle: 360deg; }
}

/* Register the custom property so the browser can interpolate it */
@property --glow-angle {
 syntax: '<angle>';
 initial-value: 0deg;
 inherits: false;
}

/* ── Shared pseudo-element mixin via a data-glow-color mechanism ── */
/* We reuse one animation with a CSS custom-property so each color
 variant only needs to override --glow-c1 and --glow-c2. */

/* ── 1. PRIMARY — Cyan → Purple (brand identity) ──────────────────
 Applied to: .btn-primary, .join-btn-premium, .navbar a.active,
 .btn-wizard.next, .glow-border-primary */
.join-btn-premium,
.navbar a.active,
.btn-wizard.next,
.btn-primary,
.glow-border-primary {
 --glow-c1: #00d2ff;
 --glow-c2: #9933ff;
 background: #0a0a0f !important;
 color: #ffffff !important;
 position: relative !important;
 z-index: 1 !important;
 border: 1px solid transparent !important;
 box-shadow:
 0 6px 20px rgba(153, 51, 255, 0.10),
 inset 0 0 6px rgba(0, 210, 255, 0.04) !important;
 transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
 overflow: visible !important;
}

.join-btn-premium::before,
.navbar a.active::before,
.btn-wizard.next::before,
.btn-primary::before,
.glow-border-primary::before {
 content: '' !important;
 position: absolute !important;
 inset: -1.5px !important;
 border-radius: inherit !important;
 padding: 0 !important;
 background: conic-gradient(
 from var(--glow-angle),
 transparent 0deg,
 transparent 60deg,
 var(--glow-c1) 100deg,
 var(--glow-c2) 180deg,
 var(--glow-c1) 220deg,
 transparent 260deg,
 transparent 360deg
 ) !important;
 -webkit-mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 -webkit-mask-composite: xor !important;
 mask-composite: exclude !important;
 padding: 1.5px !important;
 z-index: -1 !important;
 animation: glowOrbit 4s linear infinite !important;
 pointer-events: none !important;
 filter: blur(0.4px) !important;
}

.join-btn-premium:hover,
.navbar a.active:hover,
.btn-wizard.next:hover,
.btn-primary:hover,
.glow-border-primary:hover {
 background: #11111a !important;
 box-shadow:
 0 10px 28px rgba(0, 210, 255, 0.18),
 inset 0 0 10px rgba(153, 51, 255, 0.07) !important;
 transform: translateY(-2px) !important;
}

/* ── 2. GOLD / ORANGE — Amber → Deep Orange ───────────────────────
 Applied to: .p-card.pro, .p-card.ultra, .glow-border-gold,
 elements with border: var(--gold) */
.p-card.pro,
.p-card.ultra,
.glow-border-gold {
 --glow-c1: #f59e0b;
 --glow-c2: #ea580c;
 position: relative !important;
 z-index: 1 !important;
 overflow: visible !important;
}

.p-card.pro::before,
.p-card.ultra::before,
.glow-border-gold::before {
 content: '' !important;
 position: absolute !important;
 inset: -1.5px !important;
 border-radius: inherit !important;
 padding: 1.5px !important;
 background: conic-gradient(
 from var(--glow-angle),
 transparent 0deg,
 transparent 60deg,
 var(--glow-c1) 100deg,
 var(--glow-c2) 180deg,
 var(--glow-c1) 220deg,
 transparent 260deg,
 transparent 360deg
 ) !important;
 -webkit-mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 -webkit-mask-composite: xor !important;
 mask-composite: exclude !important;
 z-index: -1 !important;
 animation: glowOrbit 4s linear infinite !important;
 pointer-events: none !important;
 filter: blur(0.4px) !important;
}

/* ── 3. SUCCESS / GREEN — Emerald → Teal ──────────────────────────
 Applied to: .glow-border-green, success badges */
.glow-border-green {
 --glow-c1: #10b981;
 --glow-c2: #14b8a6;
 position: relative !important;
 z-index: 1 !important;
 overflow: visible !important;
}

.glow-border-green::before {
 content: '' !important;
 position: absolute !important;
 inset: -1.5px !important;
 border-radius: inherit !important;
 padding: 1.5px !important;
 background: conic-gradient(
 from var(--glow-angle),
 transparent 0deg,
 transparent 60deg,
 var(--glow-c1) 100deg,
 var(--glow-c2) 180deg,
 var(--glow-c1) 220deg,
 transparent 260deg,
 transparent 360deg
 ) !important;
 -webkit-mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 -webkit-mask-composite: xor !important;
 mask-composite: exclude !important;
 z-index: -1 !important;
 animation: glowOrbit 4s linear infinite !important;
 pointer-events: none !important;
 filter: blur(0.4px) !important;
}

/* ── 4. DANGER / RED — Light-Orange → Deep Red ────────────────────
 Applied to: .glow-border-danger, error/alert borders */
.glow-border-danger {
 --glow-c1: #fb923c;
 --glow-c2: #dc2626;
 position: relative !important;
 z-index: 1 !important;
 overflow: visible !important;
}

.glow-border-danger::before {
 content: '' !important;
 position: absolute !important;
 inset: -1.5px !important;
 border-radius: inherit !important;
 padding: 1.5px !important;
 background: conic-gradient(
 from var(--glow-angle),
 transparent 0deg,
 transparent 60deg,
 var(--glow-c1) 100deg,
 var(--glow-c2) 180deg,
 var(--glow-c1) 220deg,
 transparent 260deg,
 transparent 360deg
 ) !important;
 -webkit-mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 -webkit-mask-composite: xor !important;
 mask-composite: exclude !important;
 z-index: -1 !important;
 animation: glowOrbit 4s linear infinite !important;
 pointer-events: none !important;
 filter: blur(0.4px) !important;
}

/* ── 5. GENERAL .glow-border — uses CSS accent vars ───────────────
 Overrides modern-design-system.css with the smooth orbit style */
.glow-border {
 position: relative;
 z-index: 1;
 overflow: visible;
}

.glow-border::before {
 content: '' !important;
 position: absolute !important;
 inset: -1.5px !important;
 border-radius: inherit !important;
 padding: 1.5px !important;
 background: conic-gradient(
 from var(--glow-angle),
 transparent 0deg,
 transparent 55deg,
 var(--accent, #00d2ff) 95deg,
 var(--accent-secondary, #9933ff) 180deg,
 var(--accent, #00d2ff) 225deg,
 transparent 265deg,
 transparent 360deg
 ) !important;
 -webkit-mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0) !important;
 -webkit-mask-composite: xor !important;
 mask-composite: exclude !important;
 z-index: -1 !important;
 animation: glowOrbit 5s linear infinite !important;
 pointer-events: none !important;
 filter: blur(0.3px) !important;
}