/* ============================================================
   DLO TRADING (^_^) — Theme & Background Overrides
   Design-only file. No page logic lives here.
   ============================================================ */

:root {
    --accent: #ff1a2e;
    --accent-glow: rgba(255, 26, 46, 0.35);
    --gold: #ff3b4e;
    --gold-light: #ff6b7a;
    --green: #ff1a2e;
    --gradient-main: linear-gradient(135deg, #0a0000 0%, #1a0508 45%, #0a0000 100%);
}

/* Responsive background photography with a dark overlay so text
   stays fully readable on every screen size.
   NOTE: the "?v=2" on each image URL is a cache-buster. Browsers cache
   static files by URL, so swapping a file's content while keeping the
   same filename (e.g. bg-desktop.jpg) won't show up for visitors until
   they hard-refresh. Bump this number (v=3, v=4, ...) on ALL THREE
   urls below every time a background image is replaced, and every
   visitor's browser will fetch the new image automatically. */
body {
    background-image:
        linear-gradient(135deg, rgba(6, 0, 1, 0.74), rgba(10, 2, 3, 0.71)),
        url('/static/img/bg-tablet.jpg?v=2') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

@media (max-width: 768px) {
    body {
        background-image:
            linear-gradient(135deg, rgba(6, 0, 1, 0.80), rgba(10, 2, 3, 0.76)),
            url('/static/img/bg-mobile.jpg?v=2') !important;
        background-attachment: scroll !important;
    }
}

@media (min-width: 1401px) {
    body {
        background-image:
            linear-gradient(135deg, rgba(6, 0, 1, 0.71), rgba(10, 2, 3, 0.67)),
            url('/static/img/bg-desktop.jpg?v=2') !important;
    }
}

/* Give the content cards a touch more opacity so text stays crisp
   over busier parts of the photo, without hiding the background. */
.panel, .login-card, .signup-card, .analyst-card-simple,
.stat-box, .modal-body, .admin-container .card {
    background-color: rgba(15, 6, 7, 0.68) !important;
}

/* ============================================================
   Premium card treatment: glow border, top accent strip,
   deeper shadow, staggered entrance animation.
   ============================================================ */
.panel, .login-card, .signup-card, .analyst-card-simple,
.stat-box, .modal-body, .admin-container .card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 30, 46, 0.16) !important;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 30, 46, 0.04) inset !important;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
}

.panel::before, .login-card::before, .signup-card::before,
.analyst-card-simple::before, .stat-box::before, .modal-body::before,
.admin-container .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff1a2e 25%, #ff5468 50%, #ff1a2e 75%, transparent);
    opacity: 0.85;
}

.panel:hover, .stat-box:hover, .analyst-card-simple:hover {
    border-color: rgba(255, 30, 46, 0.38) !important;
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(255, 26, 46, 0.16) !important;
    transform: translateY(-2px);
}

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

.panel, .login-card, .signup-card, .analyst-card-simple,
.stat-box, .modal-body, .admin-container .card {
    animation: dloCardIn 0.55s ease both;
}

.stat-box:nth-of-type(1), .panel:nth-of-type(1) { animation-delay: 0.03s; }
.stat-box:nth-of-type(2), .panel:nth-of-type(2) { animation-delay: 0.09s; }
.stat-box:nth-of-type(3), .panel:nth-of-type(3) { animation-delay: 0.15s; }
.stat-box:nth-of-type(4), .panel:nth-of-type(4) { animation-delay: 0.21s; }
.stat-box:nth-of-type(5), .panel:nth-of-type(5) { animation-delay: 0.27s; }
.stat-box:nth-of-type(6), .panel:nth-of-type(6) { animation-delay: 0.33s; }

/* ============================================================
   Trading-settings controls: save buttons, main action buttons,
   quick-trade execute button and dropdowns — premium pass.
   ============================================================ */

/* small "حفظ" buttons next to each limit input */
.btn-sm {
    padding: 0.22rem 0.75rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 30, 46, 0.45) !important;
    background: linear-gradient(135deg, rgba(255, 26, 46, 0.22), rgba(122, 0, 16, 0.30)) !important;
    color: #ff8a94 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(255, 26, 46, 0.12) !important;
}
.btn-sm:hover {
    background: linear-gradient(135deg, #ff1a2e, #7a0010) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 26, 46, 0.35) !important;
    transform: translateY(-1px);
}

/* main call-to-action buttons: ربط المنصة / بدء التداول
   State colors are intentional and must stay distinct — this is a
   status toggle (idle/start = green, live/stop = red), not a brand
   accent. Both states share the same premium shimmer treatment. */
.btn-main.green {
    background: linear-gradient(135deg, #34d399 0%, #10b981 45%, #065f46 100%) !important;
    color: #04140c !important;
    letter-spacing: 0.4px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn-main.green::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-main.green:hover::after { left: 130%; }
.btn-main.green:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.btn-main.red {
    background: linear-gradient(135deg, #ff3b4e 0%, #ff1a2e 45%, #7a0010 100%) !important;
    color: #fff !important;
    letter-spacing: 0.4px;
    box-shadow: 0 8px 24px rgba(255, 26, 46, 0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn-main.red::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-main.red:hover::after { left: 130%; }
.btn-main.red:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(255, 26, 46, 0.45), inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

/* quick-trade execute (send) button */
.btn-exec {
    background: linear-gradient(135deg, #ff3b4e, #7a0010) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 26, 46, 0.3) !important;
    border-radius: 6px !important;
}
.btn-exec:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(255, 26, 46, 0.5) !important;
}

/* dropdowns across the dashboard (asset / duration / direction / amount) */
.quick-box .qrow select,
.f-group select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: rgba(10, 3, 4, 0.65) !important;
    background-image: linear-gradient(45deg, transparent 50%, #ff5468 50%),
                       linear-gradient(135deg, #ff5468 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(255, 30, 46, 0.28) !important;
    border-radius: 8px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.quick-box .qrow select:focus,
.f-group select:focus {
    border-color: #ff1a2e !important;
    box-shadow: 0 0 0 3px rgba(255, 26, 46, 0.14) !important;
}
.quick-box .qrow input,
.f-group input[type="number"],
.ctrl-row input[type="number"] {
    background-color: rgba(10, 3, 4, 0.55) !important;
    border: 1px solid rgba(255, 30, 46, 0.22) !important;
    border-radius: 8px !important;
}

/* toggle switch (التداول الذكي on/off) */
input[type="checkbox"]:checked + .slider,
.toggle input:checked + span,
.switch input:checked + .slider {
    background: linear-gradient(135deg, #ff3b4e, #7a0010) !important;
    box-shadow: 0 0 12px rgba(255, 26, 46, 0.4) !important;
}

/* ============================================================
   Site-wide premium look, matching the admin PIN screen's
   glassy / rounded / dashed-box language everywhere.
   ============================================================ */
.panel, .login-card, .signup-card, .analyst-card-simple,
.stat-box, .modal-body, .admin-container .card,
.feature-item, .stat-card, .quick-box {
    border-radius: 18px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.btn-main, .btn-connect, .btn-cancel, .btn-login,
.login-card button[type="submit"], .signup-card button[type="submit"] {
    border-radius: 12px !important;
}

/* distinctive dashed-border highlight boxes, echoing the PIN
   display box: used for key value/summary readouts */
.quick-box, .feature-item, .stat-card {
    border: 2px dashed rgba(255, 59, 78, 0.22) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    transition: border-color 0.3s ease, background 0.3s ease !important;
}
.quick-box:hover, .feature-item:hover, .stat-card:hover {
    border-color: rgba(255, 59, 78, 0.45) !important;
    background: rgba(255, 59, 78, 0.05) !important;
}

/* ============================================================
   Branded social icon badges (footer)
   ============================================================ */
.social-badges-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem !important;
}
.social-badge {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none !important;
    width: 64px;
}
.social-badge .sb-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-gradient, var(--sb-color, #ff1a2e));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(255, 26, 46, 0);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.social-badge .sb-label {
    font-size: 0.68rem;
    color: var(--text-dim, #9a9a9a);
    font-weight: 600;
    transition: color 0.3s ease;
}
.social-badge:hover .sb-icon {
    transform: translateY(-4px) scale(1.06);
    border-color: rgba(255, 107, 122, 0.6);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 18px 2px rgba(255, 26, 46, 0.45);
}
.social-badge:hover .sb-label { color: #ff6b7a; }