/*
===============================================================================
FILE: /public_html/assets/css/style.css
PROJECT: Jassas Net
VERSION: V212-UNIFIED-LIGHT-DARK-THEME
FUNCTION: Unified global design system for light/dark mode, pages, forms, cards, menus, buttons, and bottom navigation
AUTHOR: Jassas Net
STATUS: PRODUCTION READY
CREATED: 2026-06-16
UPDATED: 2026-06-16
===============================================================================
*/

/* ==========================================================================
   1. THEME TOKENS
   ========================================================================== */

:root{
    --j-bg:#f6f9fc;
    --j-bg-grid:rgba(20,99,255,.055);

    --j-surface:#ffffff;
    --j-surface-2:#f8fbff;
    --j-surface-3:#eef6ff;

    --j-card:#ffffff;
    --j-card-soft:#f8fbff;

    --j-title:#071437;
    --j-text:#1e293b;
    --j-muted:#64748b;
    --j-soft-text:#94a3b8;

    --j-border:#dbeafe;
    --j-border-soft:#e7eef8;

    --j-primary:#1463ff;
    --j-primary-2:#0f4fcf;
    --j-primary-soft:#eff6ff;

    --j-accent:#ff7a1a;
    --j-accent-2:#ea580c;
    --j-accent-soft:#fff7ed;

    --j-success:#16a34a;
    --j-danger:#dc2626;
    --j-warning:#f59e0b;

    --j-input:#f8fbff;
    --j-input-text:#0f172a;
    --j-placeholder:#94a3b8;

    --j-shadow:0 14px 34px rgba(15,40,80,.06);
    --j-shadow-strong:0 22px 55px rgba(15,40,80,.10);

    --j-radius-sm:14px;
    --j-radius-md:20px;
    --j-radius-lg:26px;
    --j-radius-xl:32px;

    --j-header-bg:rgba(255,255,255,.96);
    --j-bottom-bg:#0b1736;
    --j-bottom-border:rgba(255,255,255,.10);
    --j-bottom-text:#e2e8f0;
}

html[data-theme="dark"]{
    --j-bg:#071437;
    --j-bg-grid:rgba(255,255,255,.045);

    --j-surface:#0b1736;
    --j-surface-2:#102452;
    --j-surface-3:#132b5c;

    --j-card:#0b1736;
    --j-card-soft:#102452;

    --j-title:#ffffff;
    --j-text:#e2e8f0;
    --j-muted:#cbd5e1;
    --j-soft-text:#94a3b8;

    --j-border:rgba(255,255,255,.14);
    --j-border-soft:rgba(255,255,255,.10);

    --j-primary:#3b82f6;
    --j-primary-2:#2563eb;
    --j-primary-soft:#102452;

    --j-accent:#ff8a2a;
    --j-accent-2:#f97316;
    --j-accent-soft:#2c1b0c;

    --j-success:#22c55e;
    --j-danger:#f87171;
    --j-warning:#fbbf24;

    --j-input:#132b5c;
    --j-input-text:#ffffff;
    --j-placeholder:#cbd5e1;

    --j-shadow:none;
    --j-shadow-strong:none;

    --j-header-bg:#f8fafc;
    --j-bottom-bg:#0b1736;
    --j-bottom-border:rgba(255,255,255,.12);
    --j-bottom-text:#e2e8f0;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    background:var(--j-bg) !important;
    color:var(--j-text) !important;
    font-family:'Tajawal','Segoe UI',Arial,sans-serif;
    font-weight:700;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

.page,
main,
.main,
.content,
.container{
    background:transparent !important;
}

/* ==========================================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4,h5,h6,
strong,b{
    color:var(--j-title) !important;
    opacity:1 !important;
}

p,li,small,label,span{
    opacity:1;
}

p,
li,
small,
label,
.counter,
.info-label,
.step-box span,
.service-content small{
    color:var(--j-muted) !important;
}

.hero h1,
.card h1,
.card h2,
.section-title h2,
.service-content strong,
.step-box b,
.info-value,
.company-row span:last-child{
    color:var(--j-title) !important;
}

.hero p,
.card p,
.section-title p,
.modal-subtitle{
    color:var(--j-muted) !important;
}

/* ==========================================================================
   4. BACKGROUND GRID
   ========================================================================== */

.bg-grid{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(var(--j-bg-grid) 1px,transparent 1px),
        linear-gradient(90deg,var(--j-bg-grid) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(180deg,#000,transparent 82%);
}

/* ==========================================================================
   5. HEADER / SIDE MENU
   ========================================================================== */

.jassas-header{
    background:var(--j-header-bg) !important;
    border-color:var(--j-border-soft) !important;
}

.burger-btn,
.close-menu{
    background:#0b1736 !important;
    color:#93c5fd !important;
}

.jassas-brand img,
.menu-brand img{
    background:#fff;
    border-radius:18px;
}

.menu-overlay{
    z-index:999998 !important;
    background:rgba(15,23,42,.55) !important;
}

.side-menu{
    background:var(--j-surface) !important;
    color:var(--j-text) !important;
    z-index:999999 !important;
}

.menu-top{
    border-color:var(--j-border-soft) !important;
}

.menu-brand h2,
.menu-links a{
    color:var(--j-title) !important;
}

.menu-brand p,
.menu-title,
.menu-footer{
    color:var(--j-muted) !important;
}

.menu-icon,
.theme-toggle-icon{
    background:var(--j-primary-soft) !important;
    color:var(--j-primary) !important;
    border-color:var(--j-border) !important;
}

.menu-divider{
    background:var(--j-border-soft) !important;
}

.theme-toggle-btn,
.language-pill{
    background:var(--j-surface-2) !important;
    color:var(--j-title) !important;
    border-color:var(--j-border) !important;
}

.language-pill.active{
    background:var(--j-primary) !important;
    color:#fff !important;
}

.language-pill.active *{
    color:#fff !important;
}

/* ==========================================================================
   6. CARDS / SECTIONS
   ========================================================================== */

.card,
.section-card,
.content-card,
.legal-card,
.info-card,
.support-card,
.form-card,
.order-form,
.step-box,
.info-item,
.company-row,
.ticket-details div,
.ticket-box,
.box{
    background:var(--j-card) !important;
    color:var(--j-text) !important;
    border:1px solid var(--j-border-soft) !important;
    box-shadow:var(--j-shadow) !important;
}

.card,
.order-form,
.support-card,
.form-card{
    border-radius:var(--j-radius-lg) !important;
}

/* لا تجعل كل section كرت حتى لا تتخرب الصفحة */
section.card,
section.order-form,
section.support-card,
section.form-card{
    background:var(--j-card) !important;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

.jassas-hero-clean{
    background:
        radial-gradient(circle at 88% 18%,rgba(255,122,26,.18),transparent 28%),
        radial-gradient(circle at 12% 90%,rgba(56,189,248,.12),transparent 32%),
        linear-gradient(135deg,#071437 0%,#102b63 48%,#1463ff 100%) !important;
    color:#fff !important;
}

.jassas-hero-clean h1,
.jassas-hero-clean p,
.jassas-hero-clean span,
.hero-badge{
    color:#fff !important;
}

html[data-theme="dark"] .jassas-hero-clean{
    background:
        radial-gradient(circle at 88% 18%,rgba(255,122,26,.16),transparent 28%),
        radial-gradient(circle at 12% 90%,rgba(59,130,246,.14),transparent 32%),
        linear-gradient(135deg,#071437 0%,#0b1736 55%,#102452 100%) !important;
}

/* ==========================================================================
   8. SERVICE CARDS - مهم للوضوح
   ========================================================================== */

.service-card,
.icon-service-card,
.trust-item{
    background:var(--j-card) !important;
    border-color:var(--j-border-soft) !important;
    color:var(--j-text) !important;
    opacity:1 !important;
}

.service-card *,
.icon-service-card *,
.trust-item *{
    opacity:1 !important;
}

.service-content strong{
    color:var(--j-title) !important;
}

.service-content small{
    color:var(--j-muted) !important;
}

.service-icon-bubble{
    background:var(--j-primary-soft) !important;
    border-color:var(--j-border) !important;
    color:var(--j-primary) !important;
}

.service-card.selected,
.service-card.active,
.service-card:hover{
    border-color:var(--j-accent) !important;
    box-shadow:0 16px 38px rgba(255,122,26,.14) !important;
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */

input,
textarea,
select{
    background:var(--j-input) !important;
    color:var(--j-input-text) !important;
    border:1px solid var(--j-border) !important;
    outline:none !important;
}

input::placeholder,
textarea::placeholder{
    color:var(--j-placeholder) !important;
    opacity:1 !important;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--j-primary) !important;
    box-shadow:0 0 0 4px rgba(59,130,246,.14) !important;
}

select option{
    background:var(--j-card) !important;
    color:var(--j-text) !important;
}

.check,
.check span{
    color:var(--j-muted) !important;
}

.check a{
    color:var(--j-primary) !important;
}

.check input{
    accent-color:var(--j-primary);
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

.submit-btn,
.hero-actions .primary{
    background:linear-gradient(135deg,var(--j-accent),var(--j-accent-2)) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 18px 46px rgba(255,122,26,.25) !important;
}

.hero-actions .secondary,
.back-btn{
    background:var(--j-surface-2) !important;
    color:var(--j-title) !important;
    border:1px solid var(--j-border) !important;
}

button:disabled,
.submit-btn:disabled,
.disabled{
    background:var(--j-surface-2) !important;
    color:var(--j-muted) !important;
    opacity:1 !important;
    cursor:not-allowed !important;
}

/* ==========================================================================
   11. NOTICE / ALERTS
   ========================================================================== */

.notice,
.alert,
.hint,
.note{
    background:var(--j-surface-2) !important;
    border:1px solid var(--j-border) !important;
    color:var(--j-text) !important;
}

/* ==========================================================================
   12. CITIES STRIP
   ========================================================================== */

.cities-strip-section{
    background:var(--j-card) !important;
    border-color:var(--j-border-soft) !important;
    box-shadow:var(--j-shadow) !important;
}

.cities-strip-head h2{
    color:var(--j-title) !important;
}

.cities-legend span{
    color:var(--j-muted) !important;
}

.cities-track .served{
    background:linear-gradient(135deg,var(--j-primary),var(--j-primary-2)) !important;
    color:#fff !important;
}

.cities-track .soon{
    background:var(--j-surface-2) !important;
    color:var(--j-muted) !important;
    border:1px solid var(--j-border) !important;
}

/* ==========================================================================
   13. MODALS
   ========================================================================== */

.success-modal{
    background:rgba(15,23,42,.62) !important;
}

.success-box{
    background:var(--j-card) !important;
    color:var(--j-text) !important;
    border:1px solid var(--j-border-soft) !important;
}

.success-box h2,
.ticket-box strong,
.ticket-details strong{
    color:var(--j-title) !important;
}

.ticket-box span,
.ticket-details span{
    color:var(--j-muted) !important;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.jassas-rights,
footer{
    background:var(--j-card) !important;
    color:var(--j-muted) !important;
    border-color:var(--j-border-soft) !important;
    box-shadow:var(--j-shadow) !important;
}

.jassas-rights strong,
footer strong{
    color:var(--j-title) !important;
}

/* ==========================================================================
   15. BOTTOM NAV
   ========================================================================== */

.bottom-nav,
.jassas-bottom-nav,
.mobile-bottom-nav{
    background:var(--j-bottom-bg) !important;
    border-color:var(--j-bottom-border) !important;
    box-shadow:0 -10px 30px rgba(0,0,0,.22) !important;
}

.bottom-nav *,
.jassas-bottom-nav *,
.mobile-bottom-nav *{
    color:var(--j-bottom-text) !important;
    opacity:1 !important;
}

.bottom-nav .active,
.jassas-bottom-nav .active,
.mobile-bottom-nav .active{
    background:rgba(20,99,255,.20) !important;
    color:#fff !important;
}

/* ==========================================================================
   16. TABLES
   ========================================================================== */

table,
th,
td{
    background:var(--j-card) !important;
    color:var(--j-text) !important;
    border-color:var(--j-border) !important;
}

/* ==========================================================================
   17. LEGAL / CONTENT PAGES
   ========================================================================== */

.legal-page,
.privacy-page,
.terms-page,
.about-page,
.support-page{
    background:transparent !important;
}

.legal-page .card,
.privacy-page .card,
.terms-page .card,
.about-page .card,
.support-page .card{
    background:var(--j-card) !important;
    border-color:var(--j-border-soft) !important;
}

.badge,
.pill,
.tag{
    background:var(--j-surface-2) !important;
    color:var(--j-primary) !important;
    border-color:var(--j-border) !important;
}

/* ==========================================================================
   18. DARK MODE SPECIAL FIXES
   ========================================================================== */

html[data-theme="dark"] .card,
html[data-theme="dark"] .order-form,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .trust-item,
html[data-theme="dark"] .step-box,
html[data-theme="dark"] .info-item{
    background:#0b1736 !important;
}

html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .service-card.selected,
html[data-theme="dark"] .service-card.active{
    background:#102452 !important;
}

html[data-theme="dark"] .service-icon-bubble{
    background:#132b5c !important;
    color:#93c5fd !important;
    border-color:rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .white-card,
html[data-theme="dark"] .light-card{
    background:#0b1736 !important;
}

/* ==========================================================================
   19. MOBILE
   ========================================================================== */

@media(max-width:760px){
    body.menu-open .bottom-nav,
    body.menu-open .jassas-bottom-nav,
    body.menu-open .mobile-bottom-nav{
        display:none !important;
    }

    .card,
    .order-form,
    .support-card,
    .form-card{
        border-radius:22px !important;
    }

    .service-card{
        background:var(--j-card) !important;
    }
}
/* ===== JASSAS CARD SLIDER ===== */

.services-grid{
    display:flex !important;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:10px 5px 20px;
    -webkit-overflow-scrolling:touch;
}

.services-grid::-webkit-scrollbar{
    display:none;
}

.services-grid .service-card{
    min-width:85%;
    scroll-snap-align:center;
    border-radius:32px !important;
    padding:28px;
    position:relative;
    overflow:hidden;
    transition:.35s;
    background:
    linear-gradient(
        135deg,
        #071437 0%,
        #102b63 50%,
        #1463ff 100%
    ) !important;
    color:#fff !important;
}

.services-grid .service-card strong,
.services-grid .service-card small{
    color:#fff !important;
}

.services-grid .service-card:hover{
    transform:scale(1.03);
}

.services-grid .service-icon-bubble{
    width:80px;
    height:80px;
    border-radius:24px;
    background:rgba(255,255,255,.15) !important;
    color:#fff !important;
}

.services-grid .service-card.selected{
    border:3px solid #ff7a1a !important;
    box-shadow:0 20px 50px rgba(255,122,26,.35) !important;
}