/* ============================================================
   Digital Commerce Integration — Marketplace surface skin (tj-web)
   Extracted verbatim from resources/views/web/layout.blade.php
   (the former 2,000-line inline <style> block). Loaded after
   tj-tokens.css. Will be progressively rewritten on tj tokens.
   ============================================================ */

        /* Legacy marketplace tokens — bridged to the shared tj-* system
           (tj-tokens.css loads first). Single source of brand truth. */
        :root{
            --brand:var(--tj-orange);
            --brand-2:var(--tj-orange-400);
            --brand-dark:var(--tj-navy-900);
            --brand-dark-2:var(--tj-navy-800);
            --brand-dark-3:var(--tj-navy-600);
            --text:var(--tj-ink);
            --text-soft:var(--tj-muted);
            --line:var(--tj-border);
            --bg:var(--tj-bg);
            --card:var(--tj-surface);
            --card-soft:rgba(255,255,255,.08);
            --shadow-sm:var(--tj-shadow-sm);
            --shadow-md:var(--tj-shadow);
            --shadow-lg:var(--tj-shadow-lg);
            --radius:22px;
            --radius-lg:30px;
        }

        html, body{
            margin:0;
            padding:0;
            background:var(--bg);
            color:var(--text);
            overflow-x:hidden;
        }

        html[dir="rtl"] body{
            font-family:"Cairo","Inter","Open Sans",sans-serif;
        }

        html[dir="ltr"] body{
            font-family:"Inter","Cairo","Open Sans",sans-serif;
        }

        /* The tinted wash is a light-mode device: those two indigo/blue radials
           read as a glow on near-white and as muddy smears on #0a0f1e. Dark gets
           the flat canvas the console surfaces already use. `html[data-theme] body`
           is (0,1,2) so it beats the bare `body` rule without !important. */
        html[data-theme="light"] body{
            background:
                radial-gradient(circle at top right, rgba(var(--tj-brand-rgb),.10), transparent 28%),
                radial-gradient(circle at top left, rgba(25,118,210,.08), transparent 30%),
                linear-gradient(180deg, #f7faff 0%, #f3f7fc 100%);
        }

        html[data-theme="dark"] body{
            background: var(--tj-bg);
        }

        #page{
            overflow:hidden;
        }

        .container{
            width:100%;
            max-width:1320px;
            padding-left:18px;
            padding-right:18px;
        }

        a{
            transition:all .25s ease;
        }

        img{
            max-width:100%;
        }

        .flag-img{
            width:19px;
            height:19px;
            border-radius:50%;
            object-fit:cover;
        }

        .premium-header-wrapper{
            position:relative;
            padding:18px 0 0;
            margin-bottom:26px;
        }

        .premium-header-bg{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    height:auto;
    min-height:320px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    background:
        linear-gradient(130deg, rgba(8,19,34,.64) 0%, rgba(16,40,65,.66) 48%, var(--tj-brand-scrim) 100%),
        url('/web_assets/images/header-premium-bg.jpeg') center center / cover no-repeat;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    overflow:hidden;
}

        .premium-header-bg::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 12% 25%, rgba(255,255,255,.18), transparent 20%),
                radial-gradient(circle at 88% 15%, rgba(255,255,255,.10), transparent 16%),
                radial-gradient(circle at 82% 82%, rgba(255,255,255,.08), transparent 20%);
            pointer-events:none;
        }

        .premium-header-bg::after{
            content:"";
            position:absolute;
            width:520px;
            height:520px;
            border-radius:50%;
            background:rgba(255,255,255,.05);
            top:-200px;
            right:-120px;
            filter:blur(5px);
        }

        html[dir="rtl"] .premium-header-bg::after{
            right:auto;
            left:-120px;
        }

        .premium-header-content{
            position:relative;
            z-index:2;
        }

        .premium-announce{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            padding:10px 0 18px;
            color:rgba(255,255,255,.92);
        }

        .premium-announce-left,
        .premium-announce-right{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }

        .premium-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius: var(--tj-r-lg);
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.12);
            color: #fff !important;
            font-weight:700;
            text-decoration:none !important;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
        }

        .premium-chip:hover{
            background:rgba(255,255,255,.16);

        }

        .premium-chip--accent{
            background:var(--brand);
            border-color:transparent;
        }

        .premium-chip small{
            opacity:.86;
            font-weight:600;
        }

        .premium-header-card{
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.16);
            border-radius: var(--tj-r-lg);
            box-shadow:var(--shadow-lg);
            overflow:hidden;
        }

        .premium-main-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
            padding:24px 26px;
        }

        .premium-main-row > .premium-logo-box{
            flex:0 0 auto;
        }

        .premium-main-row > .premium-header-side{
            flex:0 1 auto;
        }

        .premium-logo-box{
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:88px;
            border-radius: var(--tj-r-lg);
            background:linear-gradient(180deg,var(--tj-surface) 0%, #f6f9fe 100%);
            border:1px solid rgba(15,23,42,.06);
            box-shadow:0 12px 28px rgba(21,13,46,.14);
            padding:12px 18px;
            transition:transform .2s ease, box-shadow .25s ease;
        }
        .premium-logo-box:hover{

            box-shadow:0 16px 34px rgba(21,13,46,.18);
        }

        .premium-logo-box a{
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .premium-logo-box img{
            max-height:60px;
            width:auto;
            display:block;
        }

        .premium-search-box{
            width:100%;
        }



        .premium-search-box .input-group{
            display:flex;
            align-items:stretch;
            width:100%;
            background:var(--tj-surface);
            border-radius: var(--tj-r-lg);
            overflow:hidden;
            border:1px solid rgba(15,23,42,.06);
            box-shadow:var(--shadow-sm);
        }

        html[dir="rtl"] .premium-search-box .input-group{
            flex-direction:row-reverse;
        }

        .premium-search-box .form-control{
            height:62px;
            border:0 !important;
            box-shadow:none !important;
            background:var(--tj-surface);
            padding-inline:20px;
            font-size:15px;
            font-weight:600;
            color:var(--text);
        }

        html[dir="rtl"] .premium-search-box .form-control{
            text-align:right;
            direction:rtl;
        }

        html[dir="ltr"] .premium-search-box .form-control{
            text-align:left;
            direction:ltr;
        }

        .premium-search-box .search-categories{
            display:flex;
            align-items:center;
            min-width:180px;
            border-left:1px solid var(--line);
            border-right:1px solid var(--line);
            background:#faf9ff;
            padding:0 14px;
        }

        html[dir="rtl"] .premium-search-box .search-categories{
            border-left:0;
            border-right:1px solid var(--line);
        }

        .premium-search-box .search-categories select{
            border:0;
            outline:none;
            background:transparent;
            width:100%;
            height:100%;
            font-weight:700;
            color:#334155;
        }

        .premium-search-box .btn{
            min-width:66px;
            border:0 !important;
            border-radius:0 !important;
            background:var(--brand);
            color: #fff !important;
            font-size:19px;
        }

        /* ===== Better logged-in header ===== */
.premium-header-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    min-width:0;
}

html[dir="rtl"] .premium-header-side{
    align-items:flex-start;
}

.premium-side-top,
.premium-side-main{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    min-width:0;
}

.premium-compact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 18px;
    border-radius: var(--tj-r-lg);
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.12);
    color: #fff !important;
    text-decoration:none !important;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:0 8px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10);
    white-space:nowrap;
    transition:background .25s ease, border-color .25s ease, transform .18s ease, box-shadow .25s ease;
}

.premium-compact-btn:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.34);

    box-shadow:0 14px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14);
}

.premium-compact-btn .flag-img{
    width:20px;
    height:20px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

.premium-quick-icon{
    position:relative;
    width:48px;
    height:48px;
    border-radius: var(--tj-r-lg);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.16);
    color: #fff !important;
    text-decoration:none !important;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.premium-quick-icon:hover{
    background:rgba(255,255,255,.22);

}

.premium-quick-icon i{
    font-size:18px;
}

.premium-quick-badge{
    position:absolute;
    top:-6px;
    inset-inline-end:-6px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius: var(--tj-r-lg);
    background:var(--tj-surface);
    color:var(--brand-dark);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:800;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.premium-cart-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:0 14px;
    border-radius: var(--tj-r-lg);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.14);
    color: #fff !important;
    text-decoration:none !important;
    font-weight:800;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    white-space:nowrap;
}

.premium-cart-btn:hover{
    background:rgba(255,255,255,.22);

}

.premium-cart-total{
    font-weight:800;
}

.premium-owner-console-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 16px;
    border-radius: var(--tj-r-lg);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.14);
    color: #fff !important;
    text-decoration:none !important;
    font-weight:800;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    white-space:nowrap;
}

.premium-owner-console-btn:hover{
    background:rgba(255,255,255,.22);

}

.premium-workspace-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 20px;
    border-radius: var(--tj-r-lg);
    background:var(--brand);
    color: #fff !important;
    text-decoration:none !important;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:0 12px 26px rgba(var(--tj-brand-rgb),.32), inset 0 1px 0 rgba(255,255,255,.22);
    white-space:nowrap;
    transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
}

.premium-workspace-pill:hover{

    filter:brightness(1.04);
    box-shadow:0 18px 34px rgba(var(--tj-brand-rgb),.42), inset 0 1px 0 rgba(255,255,255,.22);
    color: #fff !important;
}

.premium-user-menu{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:0 12px;
    border-radius: var(--tj-r-lg);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.14);
    color: #fff !important;
    text-decoration:none !important;
    font-weight:800;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    max-width:100%;
}

.premium-user-menu:hover{
    background:rgba(255,255,255,.22);
}

.premium-user-menu img{
    width:30px;
    height:30px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 30px;
}

.premium-user-menu .name{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.premium-user-menu-dropdown{
    min-width:260px !important;
}
/* fix user dropdown visibility globally */
.premium-header-card,
.premium-main-row,
.premium-header-side,
.premium-side-top,
.premium-side-main,
.premium-header-wrapper .dropdown{
    overflow: visible !important;
}

.premium-header-wrapper .dropdown-menu{
    z-index: 9999 !important;
}

.premium-user-menu-dropdown{
    min-width:260px !important;
}

html[dir="rtl"] .premium-user-menu-dropdown{
    right:0 !important;
    left:auto !important;
}

html[dir="ltr"] .premium-user-menu-dropdown{
    left:0 !important;
    right:auto !important;
}
.premium-user-menu-dropdown > li > a{
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:11px 16px !important;
    font-weight:700;
    color:var(--text) !important;
}

.premium-user-menu-dropdown > li > a i{
    width:18px;
    text-align:center;
    color:var(--brand);
}

@media (max-width:1199px){
    .premium-header-side{
        width:100%;
        align-items:stretch;
    }

    html[dir="rtl"] .premium-header-side{
        align-items:stretch;
    }

    .premium-side-top,
    .premium-side-main{
        justify-content:flex-start;
    }
}

@media (max-width:991px){
    .premium-side-top,
    .premium-side-main{
        justify-content:center;
    }

    .premium-user-menu .name{
        max-width:none;
    }
}

@media (max-width:767px){
    .premium-header-side{
        width:100%;
        gap:8px;
    }

    .premium-side-top{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
    }

    .premium-side-main{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
    }

    .premium-compact-btn,
    .premium-cart-btn,
    .premium-user-menu,
    .premium-workspace-pill,
    .premium-owner-console-btn,
    .premium-quick-icon{
        width:100%;
        justify-content:center;
        min-height:46px;
        border-radius: var(--tj-r-lg);
    }

    .premium-user-menu,
    .premium-cart-btn,
    .premium-workspace-pill,
    .premium-owner-console-btn{
        grid-column:1 / -1;
    }

    .premium-user-menu .name{
        max-width:none;
    }
}

        .premium-header-actions{
            display:flex;
            align-items:center;
            justify-content:flex-end;
            flex-wrap:wrap;
            gap:10px;
        }

        html[dir="rtl"] .premium-header-actions{
            justify-content:flex-start;
        }

        .premium-action-btn{
            display:inline-flex;
            align-items:center;
            gap:10px;
            min-height:54px;
            padding:0 16px;
            border-radius: var(--tj-r-lg);
            border:1px solid rgba(255,255,255,.18);
            background:rgba(255,255,255,.14);
            color: #fff !important;
            text-decoration:none !important;
            font-weight:800;
            box-shadow:0 10px 22px rgba(0,0,0,.08);
            white-space:nowrap;
        }

        .premium-action-btn:hover{

            background:rgba(255,255,255,.22);
        }

        .premium-action-btn--solid{
            background:var(--brand);
            border-color:transparent;
        }

        .premium-action-count{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:24px;
            height:24px;
            padding:0 7px;
            border-radius: var(--tj-r-lg);
            background:var(--tj-surface);
            color:var(--brand-dark);
            font-size:12px;
            font-weight:800;
        }

        .premium-nav-shell{
            padding:0 22px 22px;
        }

        .premium-nav-bar{
            background:var(--tj-surface);
            border-radius: var(--tj-r-lg);
            box-shadow:var(--shadow-sm);
            overflow:hidden;
            border:1px solid rgba(15,23,42,.06);
        }

        .premium-nav-bar ul{
            list-style:none;
            margin:0;
            padding:12px;
            display:flex;
            align-items:center;
            gap:8px;
            white-space:nowrap;
            overflow:auto hidden;
        }

        .premium-nav-bar ul::-webkit-scrollbar{
            height:0;
        }

        .premium-nav-bar li{
            display:inline-flex;
        }

        .premium-nav-bar a{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:48px;
            padding:0 18px;
            border-radius: var(--tj-r-lg);
            color:#334155;
            font-weight:800;
            letter-spacing:.2px;
            text-decoration:none !important;
            transition:background .22s ease, color .22s ease, box-shadow .22s ease, transform .18s ease;
        }

        .premium-nav-bar a:hover{
            background:#f4f7fc;
            color:var(--brand-dark);

        }

        .premium-nav-bar a.active{
            background:linear-gradient(135deg, rgba(var(--tj-brand-rgb),.14), rgba(255,143,70,.10));
            color:var(--brand);
            box-shadow:inset 0 0 0 1px rgba(var(--tj-brand-rgb),.24);
        }

        .premium-nav-bar a i{
            color:#94a3b8;
            transition:color .22s ease, transform .18s ease;
        }

        .premium-nav-bar a:hover i,
        .premium-nav-bar a.active i{
            color:var(--brand);

        }

        /* ===== Mobile menu trigger ===== */
.premium-mobile-nav-trigger{
    display:none;
}

.premium-mobile-menu-btn{
    width:100%;
    min-height:52px;
    border:0;
    border-radius: var(--tj-r-lg);
    background:rgba(255,255,255,.96);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 16px;
    font-weight:800;
    box-shadow:var(--shadow-sm);
    outline:none !important;
}

html[dir="rtl"] .premium-mobile-menu-btn{
    flex-direction:row-reverse;
}

.premium-mobile-menu-icon{
    width:24px;
    height:18px;
    position:relative;
    display:inline-flex;
    flex-direction:column;
    justify-content:space-between;
    flex:0 0 24px;
}

.premium-mobile-menu-icon span{
    display:block;
    width:100%;
    height:2px;
    border-radius: var(--tj-r-lg);
    background:var(--brand-dark);
    transition:.25s ease;
}

.premium-mobile-menu-btn.is-open .premium-mobile-menu-icon span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.premium-mobile-menu-btn.is-open .premium-mobile-menu-icon span:nth-child(2){
    opacity:0;
}

.premium-mobile-menu-btn.is-open .premium-mobile-menu-icon span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* ===== Desktop keeps normal menu ===== */
@media (min-width:768px){
    .premium-mobile-nav-trigger{
        display:none !important;
    }

    .premium-nav-bar{
        display:block !important;
        max-height:none !important;
        opacity:1 !important;
        transform:none !important;
        overflow:visible !important;
    }

    .premium-nav-bar ul{
        justify-content:center;
    }
}

/* ===== Mobile menu as icon ===== */
@media (max-width:767px){
    .premium-nav-shell{
        padding:0 12px 14px;
    }

    .premium-mobile-nav-trigger{
        display:block;
    }

    .premium-nav-bar{
        max-height:0;
        opacity:0;
        overflow:hidden;

        transition:max-height .35s ease, opacity .25s ease, transform .25s ease, margin-top .25s ease;
        border-radius: var(--tj-r-lg);
        margin-top:0;
    }

    .premium-nav-bar.is-open{
        max-height:650px;
        opacity:1;
        transform:translateY(0);
        margin-top:10px;
        overflow:hidden;
    }

    .premium-nav-bar ul{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        padding:12px;
        white-space:normal;
        overflow:visible;
    }

    .premium-nav-bar li{
        display:block;
        width:100%;
    }

    .premium-nav-bar a{
        display:flex;
        width:100%;
        min-height:46px;
        padding:0 14px;
        border-radius: var(--tj-r-lg);
        font-size:14px;
    }

    html[dir="rtl"] .premium-nav-bar a{
        justify-content:flex-start;
        text-align:right;
    }

    html[dir="ltr"] .premium-nav-bar a{
        justify-content:flex-start;
        text-align:left;
    }
}

        .premium-subline{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            padding:0 24px 22px;
            color:rgba(255,255,255,.92);
        }

        .premium-subline-left,
        .premium-subline-right{
            display:flex;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
        }

        .premium-mini-stat{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 14px;
            border-radius: var(--tj-r-lg);
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.10);
            color: #fff;
            font-weight:700;
        }

        .premium-mini-stat i{
            width:34px;
            height:34px;
            border-radius: var(--tj-r);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,255,255,.12);
        }

        .premium-header-wrapper .dropdown{
            position:relative;
        }

        .premium-header-wrapper .dropdown-menu{
            margin-top:10px;
            border:0;
            border-radius: var(--tj-r-lg);
            box-shadow:0 18px 45px rgba(15,23,42,.14);
            min-width:280px;
            padding:10px 0;
            overflow:hidden;
        }

        html[dir="rtl"] .premium-header-wrapper .dropdown-menu{
            left:auto;
            right:0;
            text-align:right;
        }

        html[dir="ltr"] .premium-header-wrapper .dropdown-menu{
            right:auto;
            left:0;
            text-align:left;
        }

        .premium-header-wrapper .dropdown-menu > li > a{
            padding:11px 18px;
            font-weight:700;
            color:var(--text);
        }

        .premium-header-wrapper .dropdown-menu > li > a:hover{
            background:#fff6f1;
            color:var(--brand);
        }

        .premium-notification-list{
            min-width:360px !important;
            max-width:420px;
        }

        .premium-notification-head{
            padding:14px 18px;
            background:var(--brand-dark);
            color: #fff;
            font-weight:800;
        }

        .premium-notification-item{
            display:flex;
            gap:12px;
            padding:14px 18px;
            border-bottom:1px solid #f1f5f9;
        }

        .premium-notification-item:last-child{
            border-bottom:0;
        }

        .premium-notification-icon{
            width:42px;
            height:42px;
            border-radius: var(--tj-r-lg);
            display:flex;
            align-items:center;
            justify-content:center;
            background:#fff3eb;
            color:var(--brand);
            flex:0 0 42px;
            font-size:16px;
        }

        .premium-notification-body strong{
            display:block;
            margin-bottom:5px;
            color:var(--text);
        }

        .premium-notification-body a{
            color:#475569;
            text-decoration:none;
            line-height:1.7;
        }

        .premium-notification-body small{
            display:block;
            margin-top:6px;
            color:#94a3b8;
        }

        .premium-notification-footer{
            padding:12px 18px;
            text-align:center;
            background:#f8fafc;
        }

        .premium-notification-footer a{
            color:var(--brand);
            font-weight:800;
            text-decoration:none;
        }

        .premium-mini-cart-menu{
            min-width:360px !important;
            max-width:420px;
        }

        .premium-mini-cart-menu .widget_shopping_cart_content{
            padding:12px 16px 10px;
        }

        .premium-mini-cart-menu .cart_list{
            list-style:none;
            margin:0;
            padding:0;
            max-height:380px;
            overflow:auto;
        }

        .premium-mini-cart-menu .mini_cart_item{
            position:relative;
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px 0;
            border-bottom:1px solid #eef2f7;
        }

        .premium-mini-cart-menu .mini_cart_item:last-child{
            border-bottom:0;
        }

        .premium-mini-cart-menu .mini_cart_item img{
            width:62px;
            height:62px;
            object-fit:cover;
            border-radius: var(--tj-r-lg);
            flex:0 0 62px;
        }

        .premium-mini-cart-menu .mini_cart_item > a{
            color:var(--text);
            font-weight:800;
            text-decoration:none;
            line-height:1.7;
        }

        .premium-mini-cart-menu .quantity{
            display:block;
            color:#64748b;
            margin-top:8px;
            font-weight:700;
        }

        .premium-mini-cart-menu .remove{
            position:absolute;
            top:14px;
            font-size:20px;
            color:#ef4444;
            text-decoration:none;
            line-height:1;
        }

        html[dir="rtl"] .premium-mini-cart-menu .remove{
            left:0;
            right:auto;
        }

        html[dir="ltr"] .premium-mini-cart-menu .remove{
            right:0;
            left:auto;
        }

        .premium-mini-cart-menu .buttons{
            margin:14px 0 0;
        }

        .premium-mini-cart-menu .buttons .button{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:46px;
            padding:0 18px;
            border-radius: var(--tj-r-lg);
            background:var(--brand);
            color: #fff !important;
            font-weight:800;
            text-decoration:none !important;
        }

        .premium-mini-cart-empty{
            padding:18px 6px 8px;
            text-align:center;
            color:var(--text-soft);
            font-weight:700;
        }

        #content.site-content,
        .site-content{
            position:relative;
            z-index:1;
        }

        .brands-carousel{
            background:var(--tj-surface);
            border:1px solid var(--line);
            border-radius: var(--tj-r-lg);
            box-shadow:var(--shadow-sm);
            margin:0 auto 30px;
            padding:24px 0 14px;
            overflow:hidden;
        }

        .brands-carousel .container{
            max-width:1280px;
        }

        .brands-carousel figure{
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:86px;
            margin:0;
            padding:10px;
            border-radius: var(--tj-r-lg);
            background:#faf9ff;
            border:1px solid #edf2f7;
        }

        .brands-carousel img{
            max-height:48px;
            width:auto;
            object-fit:contain;
            opacity:.9;
        }

        .site-footer.premium-footer{
            position:relative;
            margin-top:34px;
            color: #fff;
            overflow:hidden;
            background:
                linear-gradient(140deg, rgba(8,19,34,.68) 0%, rgba(16,40,65,.66) 48%, rgba(21,57,92,.65) 100%),
                url('/web_assets/images/footer-premium-bg.jpg') center center / cover no-repeat;
            border-top-left-radius:3px;
            border-top-right-radius:3px;
            box-shadow:0 -18px 50px rgba(0,0,0,.10);
        }

        .site-footer.premium-footer::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 22%),
                radial-gradient(circle at 84% 24%, rgba(var(--tj-brand-rgb),.16), transparent 18%),
                radial-gradient(circle at 50% 100%, rgba(255,255,255,.06), transparent 26%);
            pointer-events:none;
        }

        .premium-footer-inner{
            position:relative;
            z-index:1;
            padding:36px 0 20px;
        }

        .premium-footer-cta{
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
            border-radius: var(--tj-r-lg);
            padding:28px;
            box-shadow:var(--shadow-lg);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
            margin-bottom:28px;
        }

        .premium-footer-cta h3{
            margin:0 0 8px;
            color: #fff;
            font-size:29px;
            font-weight:800;
            line-height:1.35;
        }

        .premium-footer-cta p{
            margin:0;
            max-width:760px;
            color:rgba(255,255,255,.84);
            line-height:1.9;
            font-size:15px;
        }

        .premium-footer-cta-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        .premium-footer-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:52px;
            padding:0 20px;
            border-radius: var(--tj-r-lg);
            font-weight:800;
            text-decoration:none !important;
            white-space:nowrap;
        }

        .premium-footer-btn--primary{
            background:var(--brand);
            color: #fff !important;
        }

        .premium-footer-btn--light{
            background:var(--tj-surface);
            color:var(--brand-dark) !important;
        }

        .premium-footer-grid{
            display:grid;
            grid-template-columns:1.4fr 1fr 1fr 1.1fr;
            gap:24px;
            padding:12px 0 26px;
        }

        .premium-footer-col{
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
            border-radius: var(--tj-r-lg);
            padding:22px;
        }

        .premium-footer-title{
            margin:0 0 16px;
            color: #fff;
            font-size:19px;
            font-weight:800;
        }

        .premium-footer-brand img{
            max-height:56px;
            width:auto;
            display:block;
            margin-bottom:14px;
        }

        .premium-footer-brand p{
            margin:0 0 18px;
            color:rgba(255,255,255,.78);
            line-height:1.95;
        }

        .premium-footer-list{
            list-style:none;
            margin:0;
            padding:0;
        }

        .premium-footer-list li + li{
            margin-top:10px;
        }

        .premium-footer-list a{
            color:rgba(255,255,255,.82) !important;
            text-decoration:none !important;
            font-weight:700;
        }

        .premium-footer-list a:hover{
            color: #fff !important;
            padding-inline-start:4px;
        }

        .premium-socials{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }

        .premium-socials a{
            width:42px;
            height:42px;
            border-radius: var(--tj-r-lg);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
        }

        .premium-socials a:hover{

            background:rgba(255,255,255,.14);
        }

        .premium-socials img{
            width:22px;
            height:22px;
            object-fit:cover;
            border-radius:50%;
        }

        .premium-store-links{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            margin-top:18px;
        }

        .premium-store-links a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:52px;
            padding:8px 14px;
            border-radius: var(--tj-r-lg);
            background:var(--tj-surface);
            box-shadow:var(--shadow-sm);
        }

        .premium-store-links img{
            max-height:34px;
            width:auto;
            display:block;
        }

        .premium-newsletter-box{
            position:relative;
            background:linear-gradient(160deg, rgba(var(--tj-brand-rgb),.16), rgba(255,255,255,.04));
            border:1px solid rgba(255,255,255,.12);
            border-radius: var(--tj-r-lg);
            padding:22px 20px;
            margin-top:8px;
            overflow:hidden;
        }

        .premium-newsletter-box::before{
            content:"";
            position:absolute; inset-inline-end:-46px; top:-46px;
            width:150px; height:150px; border-radius:50%;
            background:radial-gradient(circle at 32% 32%, rgba(var(--tj-brand-rgb),.40), transparent 66%);
            pointer-events:none;
        }

        .premium-nl-head{
            display:flex; align-items:center; gap:12px;
            margin-bottom:12px; position:relative; z-index:1;
        }

        .premium-nl-icon{
            flex:0 0 auto; width:46px; height:46px; border-radius: var(--tj-r-lg);
            display:inline-flex; align-items:center; justify-content:center;
            background:var(--brand);
            box-shadow:0 12px 24px rgba(var(--tj-brand-rgb),.38);
        }

        .premium-nl-icon svg{ width:23px; height:23px; color: #fff; }

        .premium-nl-head h5{
            margin:0; color: #fff; font-size:16.5px; font-weight:800; line-height:1.4;
        }

        .premium-newsletter-box p{
            color:rgba(255,255,255,.82);
            line-height:1.85;
            margin:0 0 16px;
            font-size:14px;
            position:relative; z-index:1;
        }

        .premium-nl-form{
            position:relative; z-index:1;
            display:flex; flex-direction:column; gap:10px;
        }

        .premium-nl-field{ position:relative; }

        .premium-nl-field .premium-nl-ic{
            position:absolute; top:50%; transform:translateY(-50%);
            left:15px; right:auto; color:#9aa8ba; pointer-events:none; display:flex;
        }

        .premium-nl-field .premium-nl-ic svg{ width:18px; height:18px; }

        .premium-nl-input{
            width:100%; height:52px;
            padding-left:44px; padding-right:16px;
            border:1.6px solid rgba(255,255,255,.18) !important;
            border-radius: var(--tj-r-lg);
            background:rgba(255,255,255,.97);
            color:#0b1120; font-weight:700; font-size:14.5px;
            box-shadow:none !important;
            transition:border-color .2s ease, box-shadow .2s ease;
        }

        .premium-nl-input::placeholder{ color:#9aa8ba; font-weight:600; }

        .premium-nl-input:focus{
            outline:none; border-color:var(--brand) !important;
            box-shadow:0 0 0 4px rgba(var(--tj-brand-rgb),.22) !important;
        }

        html[dir="rtl"] .premium-nl-field .premium-nl-ic{ left:auto; right:15px; }
        html[dir="rtl"] .premium-nl-input{ padding-left:16px; padding-right:44px; text-align:right; }

        .premium-nl-btn{
            width:100%; height:52px; border:0; border-radius: var(--tj-r-lg); cursor:pointer;
            display:inline-flex; align-items:center; justify-content:center; gap:9px;
            background:var(--brand);
            color: #fff !important; font-weight:800; font-size:15px; letter-spacing:.2px;
            box-shadow:0 14px 26px rgba(var(--tj-brand-rgb),.34);
            transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
        }

        .premium-nl-btn svg{ width:18px; height:18px; }
        .premium-nl-btn:hover{  filter:brightness(1.05); box-shadow:0 18px 32px rgba(var(--tj-brand-rgb),.44); }
        .premium-nl-btn:active{ transform:translateY(0); }

        .premium-nl-note{
            display:flex; align-items:center; gap:7px;
            margin-top:4px; position:relative; z-index:1;
            color:rgba(255,255,255,.58); font-size:12px; line-height:1.7;
        }
        .premium-nl-note svg{ width:14px; height:14px; flex:0 0 auto; }

        .premium-footer-bottom{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            color:rgba(255,255,255,.74);
        }

        .premium-footer-bottom a{
            color: #fff !important;
            text-decoration:none !important;
            font-weight:800;
        }

        .copyright-mini-links{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
        }

        .product_list_widget li{
            padding:10px 0;
            border-bottom:1px solid #edf2f7;
        }

        .product_list_widget li:last-child{
            border-bottom:0;
        }

        /* تحسينات عامة مهمة للتجاوب */
.premium-main-row,
.premium-footer-grid,
.premium-footer-cta,
.premium-subline,
.premium-announce,
.premium-header-actions{
    min-width:0;
}

.premium-main-row > *,
.premium-footer-grid > *,
.premium-header-actions > *{
    min-width:0;
}

.premium-action-btn,
.premium-chip,
.premium-mini-stat,
.premium-footer-btn{
    -webkit-tap-highlight-color: transparent;
}

.premium-search-box .form-control,
.premium-newsletter-box .form-control{
    width:100%;
}

.premium-action-btn span,
.premium-chip span{
    max-width:100%;
}

/* شاشة لابتوب صغيرة / تابلت أفقي */
@media (max-width: 1199px){
    .container{
        max-width:100%;
        padding-left:16px;
        padding-right:16px;
    }

    .premium-main-row{
        grid-template-columns:170px minmax(0,1fr);
        gap:14px;
        padding:18px;
    }

    html[dir="rtl"] .premium-main-row{
        grid-template-columns:minmax(0,1fr) 170px;
    }

    .premium-header-actions{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
        width:100%;
        justify-content:stretch;
    }

    .premium-action-btn{
        width:100%;
        justify-content:center;
        text-align:center;
        white-space:normal;
        min-height:52px;
        padding:10px 14px;
    }

    .premium-footer-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:18px;
    }

    .premium-footer-cta{
        align-items:flex-start;
    }

    .premium-nav-bar a{
        padding:0 14px;
        font-size:14px;
    }
}

/* تابلت */
@media (max-width: 991px){
    .premium-header-wrapper{
        padding-top:14px;
        margin-bottom:22px;
    }

    .premium-header-bg{
        min-height:100%;
        border-bottom-left-radius:3px;
        border-bottom-right-radius:3px;
    }

    .premium-announce{
        justify-content:center;
        text-align:center;
        gap:10px;
    }

    .premium-announce-left,
    .premium-announce-right{
        width:100%;
        justify-content:center;
    }

    .premium-chip{
        justify-content:center;
        text-align:center;
    }

    .premium-main-row{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
        padding:16px;
    }

    .premium-main-row > .premium-header-side{
        align-items:center;
    }

    .premium-main-row .premium-side-top,
    .premium-main-row .premium-side-main{
        justify-content:center;
    }

    .premium-logo-box{
        min-height:82px;
    }

    .premium-logo-box img{
        max-height:54px;
    }

    .premium-header-actions{
        grid-template-columns:repeat(2, minmax(0,1fr));
        justify-content:stretch;
    }

    .premium-subline{
        padding:0 16px 18px;
        justify-content:center;
    }

    .premium-subline-left,
    .premium-subline-right{
        width:100%;
        justify-content:center;
    }

    .premium-mini-stat{
        width:calc(50% - 7px);
        justify-content:center;
        text-align:center;
    }

    .premium-nav-shell{
        padding:0 16px 18px;
    }

    .premium-footer-grid{
        grid-template-columns:1fr;
    }

    .premium-footer-cta{
        padding:22px;
        border-radius: var(--tj-r-lg);
    }

    .premium-footer-cta-actions{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
    }

    .premium-footer-btn{
        width:100%;
    }
}

/* موبايل كبير */
@media (max-width: 767px){
    .container{
        padding-left:14px;
        padding-right:14px;
    }

    .premium-header-wrapper{
        padding-top:12px;
        margin-bottom:18px;
    }

    .premium-header-bg{
        min-height:100%;
        border-bottom-left-radius:3px;
        border-bottom-right-radius:3px;
    }

    .premium-header-card{
        border-radius: var(--tj-r-lg);
    }

    .premium-main-row{
        padding:14px;
        gap:12px;
    }

    .premium-logo-box{
        min-height:74px;
        border-radius: var(--tj-r-lg);
    }

    .premium-logo-box img{
        max-height:48px;
    }

    .premium-search-box .input-group{
        display:block;
        border-radius: var(--tj-r-lg);
    }

    .premium-search-box .form-control{
        height:54px;
        padding-inline:14px;
        font-size:14px;
    }

    .premium-search-box .input-group-addon,
    .premium-search-box .search-categories,
    .premium-search-box .input-group-btn{
        display:block;
        width:100%;
    }

    .premium-search-box .search-categories{
        min-width:100%;
        height:52px;
        border-left:0;
        border-right:0;
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
        padding:0 14px;
    }

    .premium-search-box .search-categories select{
        height:52px;
        font-size:14px;
    }

    .premium-search-box .btn{
        display:block;
        width:100%;
        min-height:52px;
        border-radius:0 0 3px 3px !important;
        font-size:18px;
    }

    .premium-header-actions{
        grid-template-columns:1fr;
        gap:8px;
    }

    .premium-action-btn{
        width:100%;
        min-height:50px;
        justify-content:center;
        text-align:center;
        padding:10px 12px;
        border-radius: var(--tj-r-lg);
        font-size:14px;
    }

    .premium-action-count{
        min-width:22px;
        height:22px;
        font-size:11px;
    }

    .premium-nav-shell{
        padding:0 12px 14px;
    }

    .premium-nav-bar{
        border-radius: var(--tj-r-lg);
    }

    .premium-nav-bar ul{
        padding:10px;
        gap:6px;
    }

    .premium-nav-bar a{
        min-height:42px;
        padding:0 12px;
        font-size:13px;
        border-radius: var(--tj-r);
    }

    .premium-subline{
        padding:0 12px 14px;
    }

    .premium-mini-stat{
        width:100%;
        justify-content:center;
        text-align:center;
        padding:10px 12px;
        border-radius: var(--tj-r-lg);
        font-size:13px;
    }

    .premium-notification-list,
    .premium-mini-cart-menu{
        min-width:unset !important;
        width:92vw !important;
        max-width:92vw !important;
    }

    html[dir="rtl"] .premium-notification-list,
    html[dir="rtl"] .premium-mini-cart-menu{
        right:0 !important;
        left:auto !important;
    }

    html[dir="ltr"] .premium-notification-list,
    html[dir="ltr"] .premium-mini-cart-menu{
        left:0 !important;
        right:auto !important;
    }

    .premium-mini-cart-menu .widget_shopping_cart_content{
        padding:10px 12px;
    }

    .premium-mini-cart-menu .mini_cart_item{
        gap:10px;
        padding:12px 0;
    }

    .premium-mini-cart-menu .mini_cart_item img{
        width:54px;
        height:54px;
        border-radius: var(--tj-r);
    }

    .brands-carousel{
        border-radius: var(--tj-r-lg);
        padding:18px 0 10px;
        margin-bottom:22px;
    }

    .brands-carousel figure{
        min-height:72px;
        border-radius: var(--tj-r-lg);
    }

    .brands-carousel img{
        max-height:40px;
    }

    .site-footer.premium-footer{
        border-top-left-radius:3px;
        border-top-right-radius:3px;
    }

    .premium-footer-inner{
        padding:26px 0 18px;
    }

    .premium-footer-cta{
        padding:18px;
        border-radius: var(--tj-r-lg);
        margin-bottom:20px;
    }

    .premium-footer-cta h3{
        font-size:23px;
    }

    .premium-footer-cta p{
        font-size:14px;
        line-height:1.85;
    }

    .premium-footer-cta-actions{
        grid-template-columns:1fr;
        width:100%;
    }

    .premium-footer-col{
        padding:18px;
        border-radius: var(--tj-r-lg);
    }

    .premium-footer-title{
        font-size:17px;
    }

    .premium-newsletter-box{
        padding:14px;
        border-radius: var(--tj-r-lg);
    }

    .premium-newsletter-box .input-group{
        display:block;
        border-radius: var(--tj-r-lg);
    }

    .premium-newsletter-box .input-group-btn{
        display:block;
        width:100%;
    }

    .premium-newsletter-box .form-control{
        width:100%;
        height:50px;
        padding-inline:14px;
        font-size:14px;
    }

    .premium-newsletter-box .btn{
        display:block;
        width:100%;
        min-height:50px;
        border-radius:0 0 3px 3px !important;
    }

    .premium-footer-bottom{
        justify-content:center;
        text-align:center;
        font-size:12px;
        line-height:1.9;
    }

    .copyright-mini-links{
        justify-content:center;
        width:100%;
        gap:10px 14px;
    }
}




/* موبايل صغير جدًا */
@media (max-width: 575px){
    .container{
        padding-left:12px;
        padding-right:12px;
    }

    .premium-chip{
        width:100%;
        justify-content:center;
        padding:10px 12px;
        font-size:13px;
    }

    .premium-announce{
        padding:8px 0 14px;
    }

    .premium-main-row{
        padding:12px;
    }

    .premium-logo-box{
        min-height:68px;
    }

    .premium-logo-box img{
        max-height:44px;
    }

    .premium-nav-bar a{
        min-height:40px;
        padding:0 10px;
        font-size:12px;
    }

    .premium-footer-cta h3{
        font-size:20px;
    }

    .premium-footer-col{
        padding:16px;
    }

    .premium-store-links{
        gap:8px;
    }

    .premium-store-links a{
        min-height:46px;
        padding:6px 10px;
    }

    .premium-store-links img{
        max-height:28px;
    }
}

/* تحسين لمس الشاشات الصغيرة */
@media (hover:none){
    .premium-action-btn:hover,
    .premium-chip:hover,
    .premium-socials a:hover,
    .premium-footer-list a:hover,
    .premium-nav-bar a:hover{
        transform:none;
    }
}

/* ============================================================
   Marketplace body modernization (Phase 1 restyle)
   ------------------------------------------------------------
   CSS-only overrides of the legacy Electro classes used by the
   home / listing / product pages. No markup changes — carousels
   and cart/wishlist JS keep binding to the same classes.
   ============================================================ */

/* ── Product cards ── */
.products .product{
    padding: 0 10px 20px;
}
.products .product .product-outer{
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
    height: 100%;
}
.products .product .product-outer:hover{
    box-shadow: 0 4px 14px -6px rgba(16,20,32,.18);
    border-color: var(--tj-muted-2);
}
.products .product .product-inner{
    padding: 14px 16px 18px;
}
.product .product-thumbnail{
    background: var(--tj-surface-alt);
    border-radius: 0;
    border-bottom: 1px solid var(--tj-border);
    overflow: hidden;
}
.product .loop-product-categories a{
    color: var(--tj-muted-2) !important;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
}
html[lang="ar"] .product .loop-product-categories a{ letter-spacing: 0; text-transform: none; font-size: 12px; }
.product .loop-product-categories a:hover{ color: var(--tj-orange-deep) !important; }
.product h3{
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tj-ink) !important;
    line-height: 1.35 !important;
    margin: 8px 0 10px !important;
}
.product h3:hover{ color: var(--tj-orange-deep) !important; }

/* ── Prices ── */
.electro-price .amount,
.price .amount{
    color: var(--tj-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.price del .amount,
.electro-price del .amount{
    color: var(--tj-muted-2) !important;
    font-weight: 500 !important;
    font-size: .85em;
}

/* ── Add to cart / action buttons ── */
.add_to_cart_button,
.button.product_type_simple,
.single_add_to_cart_button{
    background: var(--tj-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--tj-r) !important;
    font-weight: 600 !important;
    transition: background 100ms ease-out, box-shadow 100ms ease-out !important;
    box-shadow: none;
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover{
    background: var(--tj-orange-hover) !important;
}
.add_to_cart_button:active,
.single_add_to_cart_button:active{
    background: var(--tj-orange-deep) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.22);
}
.add_to_cart_button.added_cart{
    background: var(--tj-success) !important;
    box-shadow: none;
}
.action-buttons a{
    color: var(--tj-muted);
    transition: color .2s;
}
.action-buttons a:hover{ color: var(--tj-orange); }
.add_to_wishlist.fa-heart,
.action-buttons .fa-heart{ color: #f43f5e; }

/* ── Ratings ── */
.star-rating span,
.rate-stars .fa-star{ color: #f59e0b; }

/* ── Section headers on home ── */
.home-v1-deals-and-tabs h2.h1,
.section-onsale-product header h2,
.section-products-carousel header h2{
    color: var(--tj-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -.022em;
}
html[lang="ar"] .home-v1-deals-and-tabs h2.h1,
html[lang="ar"] .section-onsale-product header h2,
html[lang="ar"] .section-products-carousel header h2{ letter-spacing: 0; }

/* ── Breadcrumbs ── */
.woocommerce-breadcrumb{
    background: transparent !important;
    border: 0 !important;
    color: var(--tj-muted) !important;
    font-size: 12.5px !important;
    font-weight: 600;
}
.woocommerce-breadcrumb a{ color: var(--tj-navy-500) !important; }
.woocommerce-breadcrumb a:hover{ color: var(--tj-orange) !important; }

/* ── Shop control bar (listing toolbar) ── */
.shop-control-bar{
    background: var(--tj-surface);
    border: 1px solid var(--tj-border) !important;
    border-radius: var(--tj-r);
    box-shadow: none;
    padding: 10px 16px !important;
}
.shop-control-bar .woocommerce-ordering select,
.shop-control-bar select{
    border: 1px solid var(--tj-border) !important;
    border-radius: var(--tj-r) !important;
    background: var(--tj-surface) !important;
    color: var(--tj-ink) !important;
    padding: 6px 10px !important;
}

/* ── Pagination ── */
.pagination > li > a,
.pagination > li > span,
ul.page-numbers li a,
ul.page-numbers li span{
    border: 1px solid var(--tj-border) !important;
    color: var(--tj-muted) !important;
    border-radius: var(--tj-r) !important;
    margin: 0 3px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: border-color 100ms ease-out;
}
.pagination > .active > a,
.pagination > .active > span,
ul.page-numbers li .current{
    background: var(--tj-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600;
}
.pagination > li > a:hover,
ul.page-numbers li a:hover{
    background: var(--tj-surface) !important;
    border-color: var(--tj-muted-2) !important;
    color: var(--tj-ink) !important;
}

/* ── Generic legacy buttons on marketplace body ── */
.site-content .btn-primary,
.site-content .button:not(.add_to_cart_button):not(.single_add_to_cart_button){
    background: var(--tj-ink) !important;
    border-color: var(--tj-ink) !important;
    color: var(--tj-bg) !important;
    border-radius: var(--tj-r) !important;
    font-weight: 600 !important;
    transition: background 100ms ease-out;
}
.site-content .btn-primary:hover{
    background: var(--tj-orange) !important;
    border-color: var(--tj-orange) !important;
}

/* ── Forms on marketplace body ── */
.site-content .form-control,
.site-content input[type="text"],
.site-content input[type="email"],
.site-content input[type="password"],
.site-content input[type="tel"],
.site-content select,
.site-content textarea{
    border: 1px solid var(--tj-input-border, #c9ccd4) !important;
    border-radius: var(--tj-r) !important;
    background: var(--tj-surface) !important;
    color: var(--tj-ink) !important;
    box-shadow: none !important;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out !important;
}
.site-content .form-control:focus,
.site-content input:focus,
.site-content select:focus,
.site-content textarea:focus{
    border-color: var(--tj-orange) !important;
    box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.16) !important;
    outline: none !important;
}

/* ── Tabs on product page ── */
.nav-tabs .nav-link.active,
.nav-tabs > li.active > a{
    color: var(--tj-ink) !important;
    border-bottom: 2px solid var(--tj-orange) !important;
    font-weight: 600;
}

/* ============================================================
   Phase 2 — transactional & account pages (cart, orders, packs,
   wishlist, addresses, profile, inbox). CSS-only overrides of
   the Electro/WooCommerce classes these pages use.
   ============================================================ */

/* ── Cart / order tables (shop_table) ── */
.site-content .shop_table{
    background: var(--tj-surface);
    border: 1px solid var(--tj-border) !important;
    border-radius: var(--tj-r);
    overflow: hidden;
    box-shadow: none;
    border-collapse: separate !important;
    border-spacing: 0;
}
.site-content .shop_table thead th,
.site-content .shop_table > tr > th{
    background: var(--tj-surface-alt) !important;
    color: var(--tj-muted-2) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    border: 0 !important;
    border-bottom: 1px solid var(--tj-border) !important;
    padding: 11px 16px !important;
}
html[lang="ar"] .site-content .shop_table thead th,
html[lang="ar"] .site-content .shop_table > tr > th{ letter-spacing: 0; text-transform: none; font-size: 11px !important; font-weight: 700 !important; }
.site-content .shop_table td{
    border: 0 !important;
    border-bottom: 1px solid var(--tj-border-2) !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}
.site-content .shop_table tbody tr:hover{
    background: var(--tj-surface-alt);
}
.site-content .shop_table .product-name a{
    color: var(--tj-ink) !important;
    font-weight: 600;
}
.site-content .shop_table .product-name a:hover{ color: var(--tj-orange-deep) !important; }
.site-content .shop_table .product-price .amount,
.site-content .shop_table .amount{
    color: var(--tj-ink) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── WPCF7-style form inputs (contact/profile forms) ── */
.site-content .wpcf7-form-control:not(.send-button),
.site-content .input-text{
    border: 1px solid var(--tj-input-border, #c9ccd4) !important;
    border-radius: var(--tj-r) !important;
    background: var(--tj-surface) !important;
    color: var(--tj-ink) !important;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out !important;
}
.site-content .wpcf7-form-control:not(.send-button):focus,
.site-content .input-text:focus{
    border-color: var(--tj-orange) !important;
    box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.16) !important;
    outline: none !important;
}
.site-content .send-button,
.site-content input[type="submit"],
.site-content button[type="submit"]:not(.slx-btn):not(.rst-btn){
    background: var(--tj-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--tj-r) !important;
    font-weight: 600 !important;
    box-shadow: none;
    transition: background 100ms ease-out, box-shadow 100ms ease-out !important;
}
.site-content .send-button:hover,
.site-content input[type="submit"]:hover{
    background: var(--tj-orange-hover) !important;
}
.site-content .send-button:active,
.site-content input[type="submit"]:active{
    background: var(--tj-orange-deep) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.22);
}

/* ── Modals ── */
.modal-content{
    border-radius: var(--tj-r) !important;
    border: 1px solid var(--tj-border) !important;
    box-shadow: var(--tj-shadow-lg) !important;
}
.modal-header{
    border-bottom: 1px solid var(--tj-border-2) !important;
    background: var(--tj-surface);
    border-radius: var(--tj-r) var(--tj-r) 0 0 !important;
}
.modal-title{
    color: var(--tj-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -.015em;
}
.modal-footer{
    border-top: 1px solid var(--tj-border-2) !important;
    background: var(--tj-surface-alt);
}

/* ── Tabs on account pages ── */
.site-content .nav-tabs{
    border-bottom: 1px solid var(--tj-border) !important;
}
.site-content .nav-tabs .nav-link{
    color: var(--tj-muted-2);
    font-weight: 500;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    transition: color 100ms ease-out;
}
.site-content .nav-tabs .nav-link:hover{ color: var(--tj-ink); }
.site-content .nav-tabs .nav-link.active{
    color: var(--tj-ink) !important;
    font-weight: 600;
    border-bottom-color: var(--tj-orange) !important;
    background: transparent !important;
}

/* ════════════════════════════════════════════════════════════
   MODERN REDESIGN LAYER — header, footer, global controls
   (loaded last; overrides the legacy premium-* dark/photo skin)
   ════════════════════════════════════════════════════════════ */

/* ── Page canvas: warm, calm ── */
body{
    background: var(--tj-bg, var(--tj-bg)) !important;
}

/* ── Header: clean light bar, no photo, no glass ── */
.premium-header-wrapper{ padding: 14px 0 0; margin-bottom: 22px; }
.premium-header-bg{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    border-bottom: 1px solid var(--tj-border);
}
.premium-header-bg::before,
.premium-header-bg::after{ display:none !important; }

.premium-header-card{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.premium-main-row{ padding: 14px 6px 18px; }

.premium-logo-box{
    background: var(--tj-surface) !important;
    border: 1px solid var(--tj-border) !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    border-radius: var(--tj-r) !important;
}

/* announce strip (top chips) — dark text on light */
.premium-announce{ color: var(--tj-ink) !important; padding: 8px 0 12px; }
.premium-chip{
    background: var(--tj-surface) !important;
    border: 1px solid var(--tj-border) !important;
    color: var(--tj-ink) !important;
    box-shadow: none !important;
}
.premium-chip:hover{ border-color: var(--tj-muted-2) !important; background: var(--tj-surface-alt) !important; }
.premium-chip--accent{
    background: var(--tj-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* compact buttons (lang, login) — white pills */
.premium-compact-btn{
    background: var(--tj-surface) !important;
    border: 1px solid var(--tj-border) !important;
    color: var(--tj-navy) !important;
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: border-color 100ms ease-out, background 100ms ease-out !important;
}
.premium-compact-btn:hover{
    border-color: var(--tj-muted-2) !important;
    background: var(--tj-surface-alt) !important;
}
.premium-compact-btn span, .premium-compact-btn i{ color: var(--tj-navy) !important; }

/* register / workspace pill — the crafted primary */
.premium-workspace-pill{
    background: var(--tj-orange) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--tj-r) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 100ms ease-out !important;
}
.premium-workspace-pill:hover{
    background: var(--tj-orange-hover) !important;
}
.premium-workspace-pill span, .premium-workspace-pill i{ color: #fff !important; }

/* quick icons (inbox / notifications) */
.premium-quick-icon{
    background: var(--tj-surface) !important;
    border: 1px solid var(--tj-border) !important;
    color: var(--tj-muted) !important;
    box-shadow: none !important;
    transition: border-color 100ms ease-out, color 100ms ease-out !important;
}
.premium-quick-icon:hover{
    border-color: var(--tj-muted-2) !important;
    color: var(--tj-ink) !important;
}
.premium-quick-badge{
    background: var(--tj-orange) !important;
    border-radius: var(--tj-r) !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* nav shell — floating white bar with crisp active pill */
.premium-nav-shell{
    background: var(--tj-surface) !important;
    border: 1px solid var(--tj-border) !important;
    box-shadow: var(--tj-shadow-sm) !important;
}

/* search box — soft inset field with glow focus */
.premium-search-box .input-group{
    border: 1px solid var(--tj-input-border, #c9ccd4) !important;
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.premium-search-box .input-group:focus-within{
    border-color: var(--tj-orange) !important;
    box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.16) !important;
}

/* ── Footer: flat deep navy, no photo ── */
.site-footer.premium-footer{
    background: #0d1424 !important;
    border-top: 1px solid #263049;
    border-radius: 0;
    box-shadow: none !important;
}
.site-footer.premium-footer::before{ content: none; }
.premium-footer-btn--primary{
    background: var(--tj-orange) !important;
    box-shadow: none !important;
    border-radius: var(--tj-r) !important;
    font-weight: 600 !important;
}
.premium-footer-btn--primary:hover{ background: var(--tj-orange-hover) !important; }
.premium-footer-btn--light{
    background: #131a2c !important;
    border: 1px solid #263049 !important;
    border-radius: var(--tj-r) !important;
    font-weight: 600 !important;
}
.premium-footer-btn--light:hover{ background: var(--tj-ink-2) !important; border-color: #465575 !important; }

/* ════════════════════════════════════════════════════════════
   TAJER ID — REBUILT COMPONENT SYSTEM
   Header, footer, buttons, inputs, cards. Modern markup +
   modern CSS; replaces the legacy premium-* / Electro layer.
   ════════════════════════════════════════════════════════════ */

/* ─────────── TYPE BASE ───────────
   16px/1.6 body, tight display headings. Applies to the marketing
   surface (body.page) only — admin/B2B surfaces bring their own. */
body.page{
    font-size: var(--tj-fs-body, 16px);
    line-height: var(--tj-lh-body, 1.6);
}
body.page h1, body.page h2, body.page h3{
    line-height: var(--tj-lh-heading, 1.1);
    letter-spacing: var(--tj-ls-heading, -0.02em);
}
html[dir="rtl"] body.page h1,
html[dir="rtl"] body.page h2,
html[dir="rtl"] body.page h3{
    letter-spacing: 0;          /* negative tracking breaks Arabic script */
    line-height: 1.3;           /* Arabic needs taller lines for marks    */
}

/* ─────────── SECTION RHYTHM ───────────
   One spacing scale for every landing/marketing section. */
.tj-section{ margin-block-start: var(--tj-sec-y); }
.tj-section--sm{ margin-block-start: var(--tj-sec-y-sm); }

/* full-bleed band: escapes the .container to span the viewport */
.tj-bleed{
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* ─────────── DARK SECTION VARIANT ───────────
   Add .tj-dark to a section and every tj-* consumer re-themes via
   the tokens below — inverted text, borders and card surfaces, not
   just a background override. */
.tj-dark{
    --tj-navy:        #f3f5fa;
    --tj-ink:         #f3f5fa;
    --tj-ink-2:       #c3cbdb;
    --tj-muted:       #98a1b8;
    --tj-muted-2:     #6e7891;
    --tj-border:      #263049;
    --tj-border-2:    #1b2338;
    --tj-surface:     #131a2c;
    --tj-surface-alt: #1e293b;
    --tj-bg:          transparent;
    --tj-bg-2:        #131a2c;
    --tj-orange-50:   rgba(var(--tj-brand-rgb),.14);
    --tj-orange-100:  rgba(var(--tj-brand-rgb),.18);
    /* .tj-dark is dark in BOTH themes, so these must NOT use --tj-orange-deep or
       --adm-accent-300: those flip with data-theme and would resolve to the dark-on-
       light ink here, landing at ~1.4:1 on this band. --tj-brand-300/-400 are declared
       once at :root and never flip, which is exactly what an always-dark scope needs. */
    --tj-orange-200:  var(--tj-brand-400);
    --tj-orange-deep: var(--tj-brand-300);
    background: #0d1424;
    border-block: 1px solid #263049;
    color: var(--tj-ink);
}
.tj-dark h2, .tj-dark h3, .tj-dark h4{ color: #fff; }

/* ─────────── SECTION HEADER ───────────
   Replaces the centered-heading + purple-underline ornament.
   Left-aligned by default; add .tj-sec-head--center to center. */
.tj-sec-head{ margin-block-end: var(--tj-sec-head); max-width: 780px; padding-block-end: 12px; border-block-end: 1px solid #d8dae0; }
.tj-dark .tj-sec-head{ border-block-end-color: #263049; }
.tj-sec-head-eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tj-orange);
    margin-bottom: 12px;
}
.tj-dark .tj-sec-head-eyebrow{ color: var(--tj-brand-300); }
html[lang="ar"] .tj-sec-head-eyebrow{ letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; }
.tj-sec-head-eyebrow::before{
    content: ""; width: 22px; height: 2px; border-radius: 0;
    background: currentColor;
}
.tj-sec-head h2{
    margin: 0;
    color: var(--tj-ink);
    font-size: clamp(24px, 2.7vw, 34px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.08;
}
html[lang="ar"] .tj-sec-head h2{ letter-spacing: 0; line-height: 1.3; }
.tj-sec-head p{
    margin: 12px 0 0;
    color: var(--tj-muted);
    font-size: 16px;
    max-width: 640px;
}
.tj-sec-head--center{ margin-inline: auto; text-align: center; }
.tj-sec-head--center .tj-sec-head-eyebrow{ justify-content: center; }
.tj-sec-head--center p{ margin-inline: auto; }

/* ─────────── HEADER ─────────── */
.tj-header{
    position: sticky; top: 0; z-index: 900;
    background: #0d1424;
    border-bottom: 1px solid #263049;
    box-shadow: none;
    padding: 0;
    margin-bottom: 26px;
}
.tj-header-inner{
    display: flex; align-items: center; gap: 18px;
    min-height: 74px;
    padding-block: 10px;
}
.tj-brand-link{ flex: 0 0 auto; display: flex; align-items: center; }
.tj-brand-link img{ height: 42px; width: auto; display: block; }

/* nav */
.tj-nav{
    display: flex; align-items: center; gap: 2px;
    margin-inline: auto;
    flex-wrap: wrap;
}
.tj-nav-link{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border-radius: var(--tj-r);
    color: #98a1b8 !important;
    font-size: 13.5px; font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    transition: color 100ms ease-out;
}
.tj-nav-link i{ font-size: 16px; opacity: .75; transition: opacity 100ms ease-out; }
.tj-nav-link:hover{ color: #f3f5fa !important; }
.tj-nav-link:hover i{ opacity: 1; }
.tj-nav-link.active{
    color: #f3f5fa !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--tj-orange-400);
}
.tj-nav-link.active i{ opacity: 1; }

/* actions */
.tj-header-actions{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.tj-icon-btn{
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; min-width: 40px; padding: 0 10px;
    border-radius: var(--tj-r);
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    color: var(--tj-ink-2) !important;
    font-size: 13px; font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 100ms ease-out, background 100ms ease-out, color 100ms ease-out;
}
.tj-icon-btn i{ font-size: 18px; }
.tj-icon-btn:hover{
    border-color: var(--tj-muted-2);
    color: var(--tj-ink) !important;
    background: var(--tj-surface-alt);
}
.tj-lang-btn img{ width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

.tj-dot-badge{
    position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: var(--tj-r);
    background: var(--tj-orange);
    color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px #fff;
}

.tj-btn-ghost-nav{
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 16px;
    border-radius: var(--tj-r);
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    color: var(--tj-navy) !important;
    font-size: 13.5px; font-weight: 700;
    text-decoration: none !important;
    box-shadow: none;
    transition: background 100ms ease-out, border-color 100ms ease-out;
}
.tj-btn-ghost-nav:hover{ background: var(--tj-surface-alt); border-color: var(--tj-muted-2); }

.tj-btn-cta{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px;
    border: 0; border-radius: var(--tj-r);
    background: var(--tj-orange);
    color: #fff !important;
    font-family: var(--tj-font);
    font-size: 13.5px; font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none;
    transition: background 100ms ease-out, box-shadow 100ms ease-out;
}
.tj-btn-cta:hover{ background: var(--tj-orange-hover); }
.tj-btn-cta:active{ background: var(--tj-orange-deep); box-shadow: inset 0 2px 4px rgba(0,0,0,.22); }
.tj-btn-cta:focus-visible{ outline: 2px solid var(--tj-orange); outline-offset: 2px; }
.tj-btn-cta.lg{ height: 50px; padding: 0 26px; font-size: 15px; border-radius: var(--tj-r-lg); }

.tj-btn-glass{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px;
    border-radius: var(--tj-r);
    background: var(--tj-ink-2);
    border: 1px solid #33405c;
    color: #e5e9f2 !important;
    font-weight: 600; font-size: 13.5px;
    text-decoration: none !important;
    transition: background 100ms ease-out, border-color 100ms ease-out;
}
.tj-btn-glass:hover{ background: #26324a; border-color: #465575; }
.tj-btn-glass.lg{ height: 50px; padding: 0 26px; font-size: 15px; border-radius: var(--tj-r-lg); }
/* footer sits on a light surface now */
.tj-footer .tj-btn-glass{
    background: var(--tj-surface) !important;
    border: 1px solid var(--tj-input-border, #c9ccd4) !important;
    color: var(--tj-ink) !important;   /* literal ink: keeps contrast inside .tj-dark */
    box-shadow: none !important;
}
.tj-footer .tj-btn-glass:hover{ background: var(--tj-surface-alt) !important; border-color: var(--tj-muted-2) !important; }

.tj-pill-status{
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 16px;
    border-radius: var(--tj-r);
    background: var(--tj-warning-50);
    border: 1px solid #f0d6ac;
    color: var(--tj-warning-ink) !important;
    font-size: 12px; font-weight: 600;
    text-decoration: none !important;
}

.tj-user-btn{
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 12px 0 6px;
    border-radius: var(--tj-r-lg);
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    color: var(--tj-ink) !important;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 100ms ease-out;
}
.tj-user-btn:hover{ border-color: var(--tj-muted-2); }
.tj-user-btn img{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.tj-user-btn i{ font-size: 16px; color: var(--tj-muted); }

/* dropdown menus (CSS-only, no jQuery) */
.tj-menu{ position: relative; }
.tj-menu-panel{
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
    min-width: 250px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    box-shadow: var(--tj-shadow-lg);
    padding: 8px;
    opacity: 0; visibility: hidden;
    transition: opacity 180ms cubic-bezier(.2,.8,.2,1), visibility 180ms;
    z-index: 950;
}
.tj-menu:hover .tj-menu-panel,
.tj-menu:focus-within .tj-menu-panel{
    opacity: 1; visibility: visible;
}
.tj-menu-panel > a{
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    border-radius: var(--tj-r);
    color: var(--tj-ink-2) !important;
    font-size: 13.5px; font-weight: 500;
    text-decoration: none !important;
    transition: background 100ms ease-out, color 100ms ease-out;
}
.tj-menu-panel > a i{ font-size: 17px; opacity: .7; }
.tj-menu-panel > a:hover{ background: var(--tj-surface-alt); color: var(--tj-ink) !important; }
.tj-menu-panel > a.tj-menu-danger:hover{ background: var(--tj-danger-50); color: var(--tj-danger-ink) !important; }
.tj-menu-sep{ height: 1px; background: var(--tj-border); margin: 6px 4px; }
.tj-menu-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 12px;
    font-size: 13px; font-weight: 600; color: var(--tj-ink);
    border-bottom: 1px solid var(--tj-border);
    margin-bottom: 6px;
}
.tj-count-chip{
    background: var(--tj-orange-50); color: var(--tj-orange-deep);
    border-radius: var(--tj-r); padding: 3px 6px; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tj-notif-panel{ width: 330px; }
.tj-menu-scroll{ max-height: 320px; overflow-y: auto; }
.tj-notif-item{
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 12px; border-radius: var(--tj-r);
    text-decoration: none !important;
    transition: background .18s;
}
.tj-notif-item:hover{ background: var(--tj-bg-2); }
.tj-notif-icon{
    flex: 0 0 auto; width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--tj-r);
    background: var(--tj-orange-50);
    border: 1px solid var(--tj-orange-200);
    color: var(--tj-orange-deep); font-size: 16px;
}
.tj-notif-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tj-notif-body strong{ color: var(--tj-ink); font-size: 13px; font-weight: 700; }
.tj-notif-body small{ color: var(--tj-muted); font-size: 11.5px; }
.tj-menu-empty{ padding: 26px 12px; text-align: center; color: var(--tj-muted); font-size: 13px; }
.tj-menu-empty i{ display: block; font-size: 30px; margin-bottom: 8px; color: var(--tj-muted-2); }
.tj-menu-foot{
    display: block; text-align: center;
    padding: 11px; margin-top: 6px;
    border-top: 1px solid var(--tj-border);
    color: var(--tj-orange-deep) !important;
    font-size: 12.5px; font-weight: 800;
    text-decoration: none !important;
}

/* burger */
.tj-burger{
    display: none;
    width: 42px; height: 40px;
    border-radius: var(--tj-r);
    background: var(--tj-surface); border: 1px solid var(--tj-border);
    cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    box-shadow: none;
}
.tj-burger span{
    display: block; width: 18px; height: 2px; border-radius: var(--tj-r);
    background: var(--tj-navy);
    transition: transform .25s, opacity .2s;
}
.tj-burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.tj-burger.is-open span:nth-child(2){ opacity: 0; }
.tj-burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.tj-hero-slot{ padding-block: 4px 34px; }

/* Desktop nav stays horizontal and never wraps into a column */
.tj-nav{ flex-direction: row !important; }

/* Tablet: tighten spacing before switching to the drawer */
@media (max-width: 1180px){
    .tj-nav-link{ padding: 9px 11px; font-size: 13px; gap: 6px; }
    .tj-nav-link i{ font-size: 15px; }
    .tj-header-inner{ gap: 12px; }
}
@media (max-width: 1024px){
    .tj-nav-link span{ display: none; }          /* icon-only nav */
    .tj-nav-link{ padding: 10px 12px; }
    .tj-nav-link i{ font-size: 18px; opacity: .9; }
}

/* Phone / small tablet: real drawer, toggled by the burger.
   Top row keeps only logo + one primary Register + burger; language
   and Login move into the drawer. All tap targets >= 44px. */
@media (max-width: 860px){
    .tj-nav{
        display: none !important;                 /* hard hide when closed */
        position: absolute; inset-block-start: 100%; inset-inline: 0;
        flex-direction: column !important; align-items: stretch; gap: 4px;
        background: #0d1424;
        border-block-end: 1px solid #263049;
        box-shadow: var(--tj-shadow-lg);
        padding: 12px 16px 18px;
        margin: 0;
        max-height: 78vh; overflow-y: auto;
    }
    .tj-nav.is-open{ display: flex !important; }
    .tj-nav-link{ padding: 13px 14px; font-size: 14.5px; min-height: 44px; }
    .tj-nav-link span{ display: inline !important; }
    .tj-burger{ display: flex; width: 44px; height: 44px; }
    .tj-hide-sm{ display: none !important; }
    .tj-user-name{ display: none; }
    .tj-header{ position: relative; }             /* anchor the drawer */

    .tj-lang-btn,
    .tj-btn-ghost-nav{ display: none; }           /* live in the drawer now */
    .tj-btn-cta{ min-height: 44px; }
    .tj-icon-btn{ height: 44px; min-width: 44px; }

    .tj-nav-drawer-extra{
        display: flex; flex-direction: column; gap: 4px;
        border-top: 1px solid var(--tj-border);
        margin-top: 8px; padding-top: 10px;
    }
}
/* Drawer-only items are invisible on desktop */
@media (min-width: 861px){
    .tj-nav-drawer-extra{ display: none; }
}
@media (max-width: 560px){
    .tj-brand-link img{ height: 34px; }
    .tj-header-inner{ min-height: 64px; gap: 10px; }
    .tj-lang-btn span{ display: none; }
}

/* ─────────── FOOTER ─────────── */
.tj-footer{
    position: relative;
    margin-top: 60px;
    background: transparent;
    color: var(--tj-ink-2);
    overflow: hidden;
    border-top: 1px solid var(--tj-border);
    padding-top: 54px;
}

.tj-footer > *{ position: relative; z-index: 1; }

/* Final CTA: the page's closing dark beat (pairs with .tj-dark tokens) */
.tj-foot-cta{
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 26px;
    flex-wrap: wrap;
    background: #0d1424;
    border: 1px solid #263049;
    border-radius: var(--tj-r-lg);
    padding: 38px 40px;
    box-shadow: none;
    margin-bottom: 40px;
    overflow: hidden;
}
.tj-foot-cta::after{ content: none; }
[dir="rtl"] .tj-cta-arrow{ transform: scaleX(-1); }

/* ── Trust strip ── */
.tj-trust{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 46px;
}
.tj-trust-item{
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px;
    border-radius: var(--tj-r-lg);
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    box-shadow: none;
    transition: border-color 140ms ease-out;
}
.tj-trust-item:hover{
    border-color: var(--tj-muted-2);
}
.tj-trust-item > i{
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--tj-r);
    background: var(--tj-orange-50);
    border: 1px solid var(--tj-orange-200);
    color: var(--tj-orange-deep); font-size: 20px;
}
.tj-trust-item > div{
    display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.tj-trust-item strong{
    display: block !important;
    color: var(--tj-ink); font-size: 13.5px; font-weight: 600;
    line-height: 1.5;
}
.tj-trust-item span{
    display: block !important;
    color: var(--tj-muted); font-size: 12.5px; line-height: 1.7;
}
@media (max-width: 860px){
    .tj-trust{ grid-template-columns: 1fr; }
}
.tj-foot-cta h3{
    margin: 0 0 10px;
    color: #f3f5fa; font-size: clamp(21px, 2.5vw, 30px); font-weight: 700; letter-spacing: -.022em;
    line-height: 1.2;
}
.tj-foot-cta p{ margin: 0; color: #98a1b8; font-size: 14.5px; line-height: 1.7; max-width: 620px; }
html[lang="ar"] .tj-foot-cta h3{ letter-spacing: 0; line-height: 1.4; }
.tj-foot-cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; }

.tj-foot-grid{
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
    grid-template-areas:
        "brand cats pages news"
        "brand cats pages quick";
    grid-template-rows: auto 1fr;
    gap: 24px 40px;
    padding-bottom: 46px;
}
.tj-foot-brand{ grid-area: brand; }
.tj-foot-col--cats{ grid-area: cats; }
.tj-foot-col--pages{ grid-area: pages; }
.tj-foot-col--news{ grid-area: news; }
.tj-foot-col--quick{ grid-area: quick; align-self: start; }
.tj-foot-logo{
    height: 58px; width: auto;
    margin-bottom: 20px;
    display: block;
}
.tj-foot-brand p{ color: var(--tj-muted); line-height: 2; font-size: 13.5px; max-width: 380px; }
.tj-foot-socials{ display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.tj-foot-socials a{
    width: 40px; height: 40px; border-radius: var(--tj-r);
    display: grid; place-items: center;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    box-shadow: none;
    transition: border-color 100ms ease-out;
}
.tj-foot-socials a:hover{ border-color: var(--tj-muted-2); }
.tj-foot-socials img{ width: 18px; height: 18px; object-fit: contain; }
.tj-foot-apps{ display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tj-foot-apps img{ height: 40px; width: auto; border-radius: var(--tj-r); }

.tj-foot-col h4{
    color: var(--tj-ink); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    margin: 0 0 18px; position: relative; padding-bottom: 12px;
}
html[lang="ar"] .tj-foot-col h4{ letter-spacing: 0; text-transform: none; font-size: 13px; }
.tj-foot-col h4::after{
    content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
    width: 100%; height: 1px; border-radius: 0;
    background: var(--tj-border);
}
/* Column titles double as accordion toggles on phones; on desktop the
   button is inert and reads exactly like the plain heading. */
.tj-foot-col-toggle{
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 0; border: 0; background: none;
    font: inherit; color: inherit; letter-spacing: inherit;
    text-align: start;
    cursor: default; pointer-events: none;
}
.tj-foot-col-toggle i{
    display: none;
    font-size: 20px; color: var(--tj-muted-2);
    transition: transform .25s;
}
.tj-foot-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tj-foot-col ul a{
    color: var(--tj-muted) !important; font-size: 13.5px; font-weight: 500;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 100ms ease-out;
}
.tj-foot-col ul a::before{
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--tj-border); transition: background 100ms ease-out;
}
.tj-foot-col ul a:hover{ color: var(--tj-ink) !important; }
.tj-foot-col ul a:hover::before{ background: var(--tj-orange); }

.tj-foot-note{ color: var(--tj-muted); font-size: 13px; line-height: 1.9; margin: 0 0 16px; }
.tj-nl-form{ display: flex; gap: 10px; flex-wrap: wrap; }
.tj-nl-field{
    position: relative; flex: 1; min-width: 190px;
    display: flex; align-items: center;
}
.tj-nl-field i{
    position: absolute; inset-inline-start: 14px;
    color: var(--tj-muted-2); font-size: 17px; pointer-events: none;
}
.tj-nl-field input{
    width: 100%; height: 46px;
    padding-inline: 42px 14px;
    border-radius: var(--tj-r);
    background: var(--tj-surface);
    border: 1px solid var(--tj-input-border, #c9ccd4);
    color: var(--tj-ink); font-size: 14px; font-family: var(--tj-font);
    outline: none;
    box-shadow: none;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.tj-nl-field input::placeholder{ color: var(--tj-muted-2); }
.tj-nl-field input:focus{
    border-color: var(--tj-orange);
    box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.16);
}
.tj-nl-form .tj-btn-cta{ height: 46px; }
.tj-foot-fine{ display: block; margin-top: 12px; color: var(--tj-muted-2); font-size: 11.5px; line-height: 1.8; }
.tj-foot-quick{ margin-top: 28px; }

.tj-foot-bottom{
    border-top: 1px solid var(--tj-border);
    background: transparent;
    padding-block: 20px;
    margin-top: 8px;
}
.tj-foot-bottom-inner{
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap;
    font-size: 12.5px;
}
.tj-foot-copy{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--tj-muted); }
.tj-foot-copy-brand{ color: var(--tj-navy) !important; font-weight: 800; text-decoration: none !important; }
.tj-foot-legal{ display: flex; gap: 18px; flex-wrap: wrap; }
.tj-foot-legal a{ color: var(--tj-muted) !important; text-decoration: none !important; transition: color .2s; }
.tj-foot-legal a:hover{ color: var(--tj-orange) !important; }
.tj-foot-rights{ color: var(--tj-muted-2); display: flex; gap: 8px; flex-wrap: wrap; }
.tj-foot-rights a{ color: var(--tj-orange-deep) !important; text-decoration: none !important; }

@media (max-width: 991px){
    .tj-foot-grid{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "news  news"
            "cats  pages"
            "quick quick";
        gap: 32px;
    }
}
@media (max-width: 620px){
    /* Newsletter first and full-width; link groups become accordions. */
    .tj-foot-grid{
        display: flex; flex-direction: column;
        gap: 0;
    }
    .tj-foot-col--news{ order: -2; margin-bottom: 26px; }
    .tj-foot-brand{ order: -1; margin-bottom: 18px; }
    .tj-nl-form .tj-nl-field{ flex: 1 1 100%; }
    .tj-nl-form .tj-btn-cta{ width: 100%; }

    .tj-foot-col--cats,
    .tj-foot-col--pages,
    .tj-foot-col--quick{
        border-top: 1px solid var(--tj-border);
    }
    .tj-foot-col--quick{ border-bottom: 1px solid var(--tj-border); }
    .tj-foot-col--cats h4,
    .tj-foot-col--pages h4,
    .tj-foot-col--quick h4{ margin: 0; padding-bottom: 0; }
    .tj-foot-col--cats h4::after,
    .tj-foot-col--pages h4::after,
    .tj-foot-col--quick h4::after{ display: none; }
    .tj-foot-col-toggle{
        pointer-events: auto; cursor: pointer;
        min-height: 52px;
    }
    .tj-foot-col-toggle i{ display: block; }
    .tj-foot-col-toggle[aria-expanded="true"] i{ transform: rotate(180deg); }
    .tj-foot-col.is-collapsed .tj-foot-col-panel{ display: none; }
    .tj-foot-col-panel{ padding-block: 4px 18px; }

    .tj-foot-cta{ padding: 24px 22px; }
    .tj-footer{ border-radius: var(--tj-r-lg) 3px 0 0; }
    .tj-foot-bottom-inner{ justify-content: center; text-align: center; }
}

/* ─────────── GLOBAL INPUT / CARD UPGRADE (public pages) ─────────── */
.site-content input[type="text"],
.site-content input[type="email"],
.site-content input[type="password"],
.site-content input[type="tel"],
.site-content input[type="number"],
.site-content input[type="search"],
.site-content select,
.site-content textarea,
.site-content .form-control{
    height: auto;
    min-height: 48px;
    padding: 12px 14px !important;
    border-radius: var(--tj-r) !important;
    border: 1px solid var(--tj-input-border, #c9ccd4) !important;
    background: var(--tj-surface) !important;
    color: var(--tj-ink) !important;
    font-family: var(--tj-font) !important;
    font-size: 14px !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out !important;
}
.site-content input:focus,
.site-content select:focus,
.site-content textarea:focus,
.site-content .form-control:focus{
    background: var(--tj-surface) !important;
    border-color: var(--tj-orange) !important;
    box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.16) !important;
    outline: none !important;
}
.site-content select{
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-inline-end: 40px !important;
}
[dir="rtl"] .site-content select{ background-position: left 16px center !important; }

/* ════════════════════════════════════════════════════════════
   PUBLIC PAGES REDESIGN — about / contact / search-request /
   terms / privacy / login / register
   Shared shell (.tj-page), breadcrumb, gradient page hero, and
   the page-specific components. Everything is token-driven and
   RTL-safe (logical properties only). Legacy Electro/Bootstrap
   styles are neutralized inside .tj-page — never globally.
   ════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.tj-page{
    padding-block: 10px var(--tj-sec-y-sm);
}
.tj-page a{ transition: color .18s ease; }

/* Neutralize the legacy error partial inside redesigned pages */
.tj-page .help-block{
    float: none !important;
    display: block;
    padding: 0 !important;
    margin: 6px 0 0;
}
.tj-page .help-block strong{
    color: var(--tj-danger) !important;
    font-size: 12.5px;
    font-weight: 700;
}

/* Shared focus ring for every interactive element on these pages */
.tj-page a:focus-visible,
.tj-page button:focus-visible,
.tj-page input:focus-visible,
.tj-page select:focus-visible,
.tj-page textarea:focus-visible,
.tj-page [tabindex]:focus-visible,
.tj-page summary:focus-visible{
    outline: 2px solid var(--tj-orange);
    outline-offset: 2px;
    border-radius: var(--tj-r);
}

/* ── Breadcrumb ── */
.tj-crumb{
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    box-shadow: none;
    padding: 11px 18px;
    margin-block-end: 16px;
    font-size: 13px;
    color: var(--tj-muted);
}
.tj-crumb a{
    color: var(--tj-muted) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.tj-crumb a:hover{ color: var(--tj-orange-deep) !important; }
.tj-crumb-sep{ color: var(--tj-muted-2); font-size: 16px; }
[dir="rtl"] .tj-crumb-sep{ transform: scaleX(-1); }

/* ── Gradient page hero ── */
.tj-page-hero{
    position: relative;
    overflow: hidden;
    background: var(--tj-brand-hero, var(--tj-brand-950));
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--tj-r-xl);
    padding: 34px 32px;
    box-shadow: none;
    margin-block-end: 26px;
}
.tj-page-hero::before,
.tj-page-hero::after{ content: none; }
.tj-page-hero > *{ position: relative; z-index: 1; }
.tj-page-hero-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    background: #131a2c;
    border: 1px solid #263049;
    border-radius: var(--tj-r);
    padding: 6px 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tj-brand-300);
}
html[lang="ar"] .tj-page-hero-eyebrow{ letter-spacing: 0; text-transform: none; font-size: 12px; }
.tj-page-hero h1{
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.08;
}
html[lang="ar"] .tj-page-hero h1{ letter-spacing: 0; line-height: 1.3; }
.tj-page-hero p{
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 70ch;
}
[dir="rtl"] .tj-page-hero p{ line-height: 1.9; }
.tj-page-hero-chip{
    display: inline-flex; align-items: center; gap: 7px;
    margin-block-start: 14px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--tj-r-lg);
    padding: 6px 13px;
    font-size: 12.5px; font-weight: 700;
}
.tj-page-hero--compact{ padding: 24px 28px; }
.tj-page-hero--compact h1{ font-size: clamp(22px, 2.4vw, 30px); }

/* ── Two-column page layout (content + sidebar) ── */
.tj-page-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}
@media (max-width: 992px){
    .tj-page-grid{ grid-template-columns: 1fr; }
}

/* ── Required marker + phone prefix affix ── */
.tj-req{ color: var(--tj-orange); font-weight: 800; margin-inline-start: 2px; }
.tj-affix{ position: relative; }
.tj-affix > span{
    position: absolute; inset-block-start: 50%; inset-inline-start: 14px;
    transform: translateY(-50%);
    color: var(--tj-muted-2); font-size: 13px; font-weight: 700;
    pointer-events: none;
    direction: ltr;
}
.tj-affix > input,
.site-content .tj-affix > input,
.tj-page .tj-affix > input{ padding-inline-start: 62px !important; }

/* ── Custom select (kills the native OS look) ── */
.tj-selectwrap{ position: relative; }
.tj-selectwrap select{
    appearance: none; -webkit-appearance: none;
    padding-inline-end: 42px !important;
    background-image: none !important;
    cursor: pointer;
}
.tj-selectwrap::after{
    content: "\ea4e"; /* ri-arrow-down-s-line */
    font-family: 'remixicon';
    position: absolute; inset-block-start: 50%; inset-inline-end: 14px;
    transform: translateY(-50%);
    color: var(--tj-muted-2); font-size: 18px;
    pointer-events: none;
    transition: color .18s;
}
.tj-selectwrap:focus-within::after{ color: var(--tj-orange); }

/* ── Card footer strip (anchors submit buttons) ── */
.tj-card-foot{
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 16px 22px;
    border-top: 1px solid var(--tj-border-2);
    background: var(--tj-surface-alt);
}
.tj-card-foot .grow{ flex: 1 1 auto; }

/* Button loading state (JS toggles .is-loading on submit) */
.tj-btn.is-loading{ pointer-events: none; opacity: .75; }
.tj-btn.is-loading i{ animation: tjSpin 1s linear infinite; }
@keyframes tjSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .tj-btn.is-loading i{ animation: none; }
}

/* ── Icon tile (shared by feature grids / tips / channel cards) ──
   display/font sizes carry !important because the legacy Electro CSS
   restyles bare <span>/<i> elements inside .site-content. */
.tj-icon-tile{
    flex: 0 0 auto;
    display: grid !important; place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--tj-r);
    background: var(--tj-orange-50);
    border: 1px solid var(--tj-orange-200);
    color: var(--tj-orange-deep);
    font-size: 20px;
}
.tj-icon-tile > i{
    font-size: inherit !important;
    line-height: 1 !important;
}

/* ── Contact channel cards ── */
.tj-contact-cards{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-block-end: 22px;
}
.tj-contact-card{
    display: flex; align-items: center; gap: 13px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    padding: 15px 16px;
    text-decoration: none !important;
    box-shadow: none;
    transition: border-color 140ms ease-out;
}
a.tj-contact-card:hover{
    border-color: var(--tj-muted-2);
}
.tj-contact-card small{
    display: block;
    color: var(--tj-muted-2); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    margin-block-end: 4px;
}
html[lang="ar"] .tj-contact-card small{ letter-spacing: 0; text-transform: none; font-size: 11px; }
.tj-contact-card strong{
    display: block;
    color: var(--tj-ink); font-size: 13.5px; font-weight: 600;
    overflow-wrap: anywhere;
}
.tj-contact-card strong.ltr{ direction: ltr; unicode-bidi: embed; }
@media (max-width: 992px){ .tj-contact-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .tj-contact-cards{ grid-template-columns: 1fr; } }

/* ── Sidebar tip rows (single column — no word-wrap grids) ── */
.tj-tip{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 2px;
}
.tj-tip + .tj-tip{ border-top: 1px solid var(--tj-border-2); }
.tj-tip .tj-icon-tile{ width: 38px; height: 38px; font-size: 17px; border-radius: var(--tj-r); }
.tj-tip strong{ display: block; color: var(--tj-navy); font-size: 14px; font-weight: 700; margin-block-end: 2px; }
.tj-tip span{ display: block; color: var(--tj-muted); font-size: 13px; line-height: 1.6; }
[dir="rtl"] .tj-tip span{ line-height: 1.85; }

/* ── Segmented toggle (Product / Seller) ── */
.tj-seg{
    display: inline-flex; gap: 0;
    background: var(--tj-surface);
    border: 1px solid var(--tj-input-border, #c9ccd4);
    border-radius: var(--tj-r);
    padding: 0;
    overflow: hidden;
}
.tj-seg button{
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border: 0; border-radius: 0;
    border-inline-start: 1px solid var(--tj-input-border, #c9ccd4);
    background: transparent;
    color: var(--tj-muted);
    font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background 100ms ease-out, color 100ms ease-out;
}
.tj-seg button:first-child{ border-inline-start: 0; }
.tj-seg button:hover{ background: var(--tj-surface-alt); }
.tj-seg button[aria-pressed="true"]{
    background: var(--tj-orange);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

/* ── File drop zone ── */
.tj-drop{
    position: relative;
    border: 1px dashed #cfd2d9;
    border-radius: var(--tj-r);
    background: var(--tj-surface);
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.tj-drop:hover,
.tj-drop.is-drag{
    border-color: var(--tj-orange);
    background: var(--tj-orange-50);
}
.tj-drop input[type="file"]{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.tj-drop i{
    font-size: 30px; color: var(--tj-orange-deep);
    display: block; margin-block-end: 8px;
}
.tj-drop strong{ display: block; color: var(--tj-navy); font-size: 14px; font-weight: 700; }
.tj-drop small{ display: block; margin-block-start: 5px; color: var(--tj-muted); font-size: 12px; }
.tj-drop-list{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-block-start: 10px;
}
.tj-drop-list:empty{ display: none; }
.tj-drop-file{
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-orange-200);
    border-radius: var(--tj-r-lg);
    padding: 6px 8px;
    padding-inline-start: 13px;
    color: var(--tj-ink-2);
    font-size: 12.5px; font-weight: 600;
    max-width: 100%;
}
.tj-drop-file b{ max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tj-drop-file button{
    display: grid; place-items: center;
    width: 20px; height: 20px;
    border: 0; border-radius: 50%;
    background: var(--tj-orange-50);
    color: var(--tj-orange-deep);
    font-size: 13px; cursor: pointer;
}
.tj-drop-file button:hover{ background: var(--tj-danger-50); color: var(--tj-danger); }

/* ── Legal pages (terms / privacy) ── */
.tj-legal-grid{
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 992px){
    .tj-legal-grid{ grid-template-columns: 1fr; }
}
.tj-toc{
    position: sticky; top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.tj-toc-title{
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--tj-muted-2);
    margin-block-end: 10px;
}
.tj-toc ol{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.tj-toc a{
    display: block;
    padding: 8px 12px;
    border-inline-start: 2px solid var(--tj-border);
    color: var(--tj-muted) !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    line-height: 1.5;
    transition: color .18s, border-color .18s, background .18s;
}
.tj-toc a:hover{ color: var(--tj-navy) !important; background: var(--tj-bg-2); }
.tj-toc a.is-active{
    color: var(--tj-orange-deep) !important;
    border-inline-start-color: var(--tj-orange);
    background: var(--tj-orange-50);
    font-weight: 700;
}
@media (max-width: 992px){
    .tj-toc{ position: static; max-height: none; }
}

.tj-legal{
    max-width: 72ch;
    color: var(--tj-ink-2);
    font-size: 15.5px;
    line-height: 1.8;
}
[dir="rtl"] .tj-legal,
.tj-legal[dir="rtl"]{ line-height: 2; }
.tj-legal h2{
    color: var(--tj-navy);
    font-size: 21px; font-weight: 800;
    margin: 34px 0 14px;
    padding-block-start: 22px;
    border-top: 1px solid var(--tj-border-2);
    scroll-margin-top: 96px;
}
.tj-legal h2:first-of-type{ border-top: 0; padding-block-start: 0; margin-block-start: 6px; }
.tj-legal h3{
    color: var(--tj-ink);
    font-size: 17px; font-weight: 700;
    margin: 22px 0 10px;
    scroll-margin-top: 96px;
}
.tj-legal p{ margin: 0 0 13px; }
.tj-legal ul, .tj-legal ol{ margin: 0 0 16px; padding-inline-start: 24px; }
.tj-legal li{ margin-block-end: 8px; }
.tj-legal li::marker{ color: var(--tj-orange); font-weight: 800; }
.tj-legal hr{ display: none; }  /* chapter breaks are drawn by the h2 top border */
.tj-legal strong{ color: var(--tj-ink); }

.tj-totop{
    position: fixed;
    inset-block-end: 26px; inset-inline-end: 26px;
    z-index: 500;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--tj-input-border, #c9ccd4); border-radius: var(--tj-r);
    background: var(--tj-surface);
    color: var(--tj-ink);
    font-size: 21px;
    box-shadow: var(--tj-shadow);
    cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.tj-totop.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.tj-totop:hover{ background: var(--tj-orange-50); }

@media print{
    .tj-header, .tj-footer, .tj-crumb, .tj-toc, .tj-totop,
    .tj-page-hero::before, .tj-page-hero::after{ display: none !important; }
    .tj-page-hero{ background: none; color: #000; box-shadow: none; padding: 0 0 12px; }
    .tj-page-hero h1{ color: #000; }
    .tj-page-hero p, .tj-page-hero-eyebrow, .tj-page-hero-chip{ color: #000; background: none; border: 0; padding: 0; }
    .tj-legal-grid{ grid-template-columns: 1fr; }
    .tj-legal{ max-width: none; color: #000; }
    .tj-legal h2, .tj-legal h3{ color: #000; }
    .tj-card{ border: 0; box-shadow: none; }
}

/* ── About page ── */
.tj-about-intro{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: 26px;
    align-items: start;
}
@media (max-width: 992px){ .tj-about-intro{ grid-template-columns: 1fr; } }
.tj-about-story{ max-width: 65ch; color: var(--tj-ink-2); font-size: 16px; line-height: 1.75; }
[dir="rtl"] .tj-about-story{ line-height: 2; }
.tj-about-story p{ margin: 0 0 14px; }
.tj-fact-tiles{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}
.tj-fact-tile{
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    padding: 16px;
    box-shadow: none;
}
.tj-fact-tile i{ font-size: 22px; color: var(--tj-orange-deep); display: block; margin-block-end: 8px; }
.tj-fact-tile strong{ display: block; color: var(--tj-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.tj-fact-tile span{ display: block; margin-block-start: 3px; color: var(--tj-muted); font-size: 12.5px; line-height: 1.55; }

.tj-feature-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}
@media (max-width: 992px){ .tj-feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .tj-feature-grid{ grid-template-columns: 1fr; } }
.tj-feature{
    display: flex; align-items: flex-start; gap: 13px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    padding: 17px 18px;
    box-shadow: none;
    transition: border-color 140ms ease-out;
}
.tj-feature:hover{
    border-color: var(--tj-muted-2);
}
.tj-feature strong{ display: block; color: var(--tj-ink); font-size: 14.5px; font-weight: 600; margin-block-end: 3px; line-height: 1.45; }
.tj-feature span{ display: block; color: var(--tj-muted); font-size: 13px; line-height: 1.6; }

.tj-vision-band{
    border-radius: var(--tj-r-lg);
    padding: clamp(28px, 4vw, 46px);
    margin-block-start: var(--tj-sec-y-sm);
}
.tj-vision-band .tj-sec-head{ margin-block-end: 12px; }
.tj-vision-band p{
    margin: 0;
    color: var(--tj-muted);
    font-size: 16.5px; line-height: 1.7;
    max-width: 72ch;
}
[dir="rtl"] .tj-vision-band p{ line-height: 2; }

/* ── Auth (login) ── */
.tj-auth{
    display: flex;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    overflow: hidden;
    box-shadow: none;
    max-width: 1000px;
    margin-inline: auto;
}
.tj-auth-brand{
    position: relative;
    flex: 1 1 45%;
    padding: 48px 42px;
    color: #fff;
    background: var(--tj-brand-hero, var(--tj-brand-950));
    border-inline-end: 1px solid #263049;
    overflow: hidden;
}
.tj-auth-brand::after{ content: none; }
.tj-auth-brand > *{ position: relative; z-index: 1; }
.tj-auth-brand img{ height: 46px; width: auto; margin-block-end: 24px; }
.tj-auth-brand h2{
    margin: 0 0 10px; color: #fff;
    font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15;
}
html[lang="ar"] .tj-auth-brand h2{ letter-spacing: 0; line-height: 1.4; }
.tj-auth-brand .tag{
    margin: 0 0 26px; color: rgba(255,255,255,.82);
    font-size: 15px; line-height: 1.7; max-width: 360px;
}
[dir="rtl"] .tj-auth-brand .tag{ line-height: 2; }
.tj-auth-feats{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tj-auth-feats li{
    display: flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,.92);
    font-size: 14.5px; font-weight: 600;
}
.tj-auth-feats li i{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: var(--tj-r);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: var(--tj-brand-200); font-size: 17px;
}
.tj-auth-brand .foot{
    margin-block-start: 30px; padding-block-start: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.6); font-size: 12.5px;
}
.tj-auth-form{
    flex: 1 1 55%;
    padding: 48px 44px;
    display: flex; flex-direction: column; justify-content: center;
}
.tj-auth-form h1,
.tj-auth-form .tj-auth-title{
    margin: 0 0 6px;
    color: var(--tj-navy);
    font-size: 26px; font-weight: 800;
}
.tj-auth-form .sub{ margin: 0 0 24px; color: var(--tj-muted); font-size: 14.5px; }

.tj-field-icon{ position: relative; }
.tj-field-icon > i{
    position: absolute; inset-block-start: 50%; inset-inline-start: 15px;
    transform: translateY(-50%);
    color: var(--tj-muted-2); font-size: 18px;
    pointer-events: none;
    transition: color .18s;
    z-index: 1;
}
.tj-field-icon:focus-within > i{ color: var(--tj-orange); }
/* Doubled selector out-specifies the legacy
   `.site-content input[type=...] { padding: ... !important }` rule. */
.tj-field-icon input,
.site-content .tj-field-icon input,
.tj-page .tj-field-icon input{
    height: 48px !important;
    padding-inline-start: 46px !important;
}
.tj-field-icon input::placeholder{ color: var(--tj-muted-2); }
.tj-eye{
    position: absolute; inset-block-start: 50%; inset-inline-end: 8px;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 0; border-radius: var(--tj-r);
    background: transparent;
    color: var(--tj-muted-2); font-size: 18px;
    cursor: pointer;
    transition: color .18s, background .18s;
}
.tj-eye:hover{ color: var(--tj-orange-deep); background: var(--tj-orange-50); }
.tj-field-icon input.has-eye,
.site-content .tj-field-icon input.has-eye,
.tj-page .tj-field-icon input.has-eye{ padding-inline-end: 48px !important; }

.tj-auth-row{
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 4px 0 20px;
}
.tj-auth-row a{ font-size: 13.5px; font-weight: 700; color: var(--tj-muted) !important; text-decoration: none !important; }
.tj-auth-row a:hover{ color: var(--tj-orange-deep) !important; }

.tj-check{
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer;
    color: var(--tj-ink-2); font-size: 13.5px; font-weight: 600;
    margin: 0;
}
.tj-check input[type="checkbox"]{
    position: static !important;
    inset-inline-start: auto !important;
    appearance: auto !important; -webkit-appearance: checkbox !important;
    width: 18px; height: 18px; margin: 0 !important;
    opacity: 1 !important;
    accent-color: var(--tj-orange);
    cursor: pointer;
    flex: 0 0 auto;
}
.tj-check::before, .tj-check::after{ content: none !important; }

.tj-auth-alt{
    margin-block-start: 18px;
    text-align: center;
    color: var(--tj-muted); font-size: 13.5px;
}
.tj-auth-alt a{ color: var(--tj-orange-deep) !important; font-weight: 700; text-decoration: none !important; }
.tj-auth-alt a:hover{ text-decoration: underline !important; }

@media (max-width: 992px){
    .tj-auth{ flex-direction: column; max-width: 520px; }
    .tj-auth-brand{ padding: 26px 28px; }
    .tj-auth-brand .tag, .tj-auth-feats, .tj-auth-brand .foot{ display: none; } /* slim branded header */
    .tj-auth-brand img{ height: 38px; margin-block-end: 12px; }
    .tj-auth-brand h2{ font-size: 20px; }
    .tj-auth-form{ padding: 30px 24px; }
}

/* ── Register ── */
.tj-reg-wrap{ max-width: 880px; margin-inline: auto; }
.tj-reg-progress{
    position: sticky; top: 88px; z-index: 40;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    padding: 0;
    gap: 0;
    margin-block-end: 22px;
    box-shadow: var(--tj-shadow-sm);
}
.tj-reg-progress a{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px;
    border-radius: 0;
    color: var(--tj-muted) !important;
    font-size: 13px; font-weight: 500;
    text-decoration: none !important;
    transition: background 100ms ease-out, color 100ms ease-out;
}
.tj-reg-progress a .n{
    display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--tj-border-2);
    color: var(--tj-muted);
    font-size: 11.5px; font-weight: 800;
    transition: background .18s, color .18s;
}
.tj-reg-progress a:hover{ background: var(--tj-surface-alt); }
.tj-reg-progress a.is-active{ background: var(--tj-orange-50); color: var(--tj-ink) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--tj-orange); }
.tj-reg-progress a.is-active .n{ background: var(--tj-orange); color: #fff; }
@media (max-width: 768px){
    .tj-reg-progress a span.t{ display: none; }   /* numbers only on phones */
    .tj-reg-progress a{ min-height: 40px; }
}

.tj-reg-section{ scroll-margin-top: 150px; }
.tj-reg-section + .tj-reg-section{ margin-block-start: 18px; }

.tj-mode-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}
@media (max-width: 768px){ .tj-mode-cards{ grid-template-columns: 1fr; } }
.tj-mode-card{
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    height: 100%;
    margin: 0;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    padding: 18px 16px;
    cursor: pointer;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out, background 100ms ease-out;
}
.tj-mode-card:hover{ border-color: var(--tj-muted-2); }
.tj-mode-card::before, .tj-mode-card::after{ content: none !important; }
.tj-mode-card input[type="radio"]{
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
}
.tj-mode-card .tj-icon-tile{ width: 40px; height: 40px; font-size: 18px; }
.tj-mode-card h3{
    margin: 0; color: var(--tj-ink);
    font-size: 15px; font-weight: 600;
}
.tj-mode-card p{ margin: 0; color: var(--tj-muted); font-size: 13px; line-height: 1.6; }
[dir="rtl"] .tj-mode-card p{ line-height: 1.85; }
.tj-mode-check{
    position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--tj-border-2);
    color: transparent; font-size: 15px;
    transition: background .18s, color .18s;
}
.tj-mode-card.is-selected{
    border-color: var(--tj-orange);
    background: var(--tj-orange-50);
    box-shadow: inset 0 0 0 1px var(--tj-orange);
}
.tj-mode-card.is-selected .tj-mode-check{
    background: var(--tj-orange);
    color: #fff;
}
.tj-mode-card:focus-within{
    outline: 2px solid var(--tj-orange);
    outline-offset: 2px;
}

.tj-chips-select{
    display: flex; flex-wrap: wrap; gap: 8px;
}
.tj-chip-toggle{
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0;
    padding: 9px 15px;
    min-height: 40px;
    border: 1.5px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    background: var(--tj-surface);
    color: var(--tj-ink-2);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}
.tj-chip-toggle::before, .tj-chip-toggle::after{ content: none !important; }
/* chips may live inside .tj-field — undo the field-label typography */
.tj-field label.tj-chip-toggle{
    display: inline-flex;
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0;
    margin-bottom: 0;
    color: var(--tj-ink-2);
}
.tj-chip-toggle input[type="checkbox"]{
    position: absolute !important;
    inset-inline-start: 0 !important;
    width: 1px; height: 1px;
    opacity: 0 !important;
    margin: 0 !important;
}
.tj-chip-toggle i{ font-size: 15px; color: var(--tj-muted-2); transition: color .18s; }
.tj-chip-toggle:hover{ border-color: var(--tj-orange-200); }
.tj-chip-toggle.is-on{
    background: var(--tj-orange-50);
    border-color: var(--tj-orange);
    color: var(--tj-orange-deep);
}
.tj-chip-toggle.is-on i{ color: var(--tj-orange); }
.tj-chip-toggle:focus-within{ outline: 2px solid var(--tj-orange); outline-offset: 2px; }
.tj-chips-count{
    margin-block-start: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--tj-muted);
}

.tj-meter{
    display: flex; gap: 5px;
    margin-block-start: 8px;
}
.tj-meter b{
    flex: 1; height: 5px; border-radius: var(--tj-r);
    background: var(--tj-border);
    transition: background .25s;
}
.tj-meter.s1 b:nth-child(-n+1){ background: var(--tj-danger); }
.tj-meter.s2 b:nth-child(-n+2){ background: var(--tj-warning); }
.tj-meter.s3 b:nth-child(-n+3){ background: var(--tj-info); }
.tj-meter.s4 b:nth-child(-n+4){ background: var(--tj-success); }
.tj-meter-label{ margin-block-start: 5px; font-size: 12px; font-weight: 700; color: var(--tj-muted); }

/* Terms modal (register) */
.tj-modal{
    position: fixed; inset: 0; z-index: 99998;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(4,7,15,.62);
    padding: 20px;
}
.tj-modal.is-open{ display: flex; }
.tj-modal-card{
    display: flex; flex-direction: column;
    width: 100%; max-width: 720px; max-height: 88vh;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r);
    box-shadow: var(--tj-shadow-lg);
    overflow: hidden;
}
.tj-modal-head{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--tj-border-2);
}
.tj-modal-head h3{ margin: 0; color: var(--tj-ink); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.tj-modal-x{
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 0; border-radius: var(--tj-r);
    background: var(--tj-bg);
    color: var(--tj-muted);
    font-size: 18px; cursor: pointer;
    transition: background .18s, color .18s;
}
.tj-modal-x:hover{ background: var(--tj-orange-50); color: var(--tj-orange-deep); }
.tj-modal-body{
    flex: 1; overflow-y: auto;
    padding: 20px 24px;
    color: var(--tj-ink-2); font-size: 14px; line-height: 1.8;
}
[dir="rtl"] .tj-modal-body{ line-height: 2; }
.tj-modal-body a{ color: var(--tj-orange-deep) !important; font-weight: 700; }
.tj-modal-foot{
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 15px 22px;
    border-top: 1px solid var(--tj-border-2);
    background: var(--tj-surface-alt);
}

/* Motion discipline for everything above */
@media (prefers-reduced-motion: reduce){
    .tj-page *, .tj-auth *, .tj-reg-wrap *{ transition-duration: .01ms !important; }
}