/* Fakhr Al-Jazeera - Corporate Security Theme - Reusable & Configurable */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Inter:wght@300;400;500;700&display=swap');
:root{
  --primary:#0B2347;
  --primary-2:#1E3A5F;
  --accent:#4A9EFF;
  --accent-hover:#3A8EEF;
  --text:#1A1A2E;
  --muted:#6B7280;
  --bg:#FFFFFF;
  --card-radius:12px;
  --btn-radius:8px;
  --hero-overlay:rgba(11,35,71,0.6);
  --nav-height:72px;
  --topbar-height:36px;
}
*{scroll-behavior:smooth}
html{font-size:15px}
body{font-family:'Tajawal','Inter',system-ui,-apple-system,sans-serif; color:var(--text); background:var(--bg); line-height:1.7}
[dir="ltr"] body{font-family:'Inter','Tajawal',sans-serif}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover)}

/* Topbar */
.topbar{background:var(--primary); color:#fff; font-size:13px; height:var(--topbar-height); display:flex; align-items:center}
.topbar a{color:#fff; opacity:.9}
.topbar a:hover{opacity:1}

/* Navbar - with rounded hero overlap like design */
.navbar-custom{background:#fff; border-radius:0 0 32px 0; box-shadow:0 2px 16px rgba(11,35,71,.08); padding:10px 0}
.navbar-custom .nav-link{color:var(--primary); font-weight:500; font-size:14px; padding:8px 14px !important; position:relative}
.navbar-custom .nav-link.active, .navbar-custom .nav-link:hover{color:var(--primary)}
.navbar-custom .nav-link.active::after{content:''; position:absolute; bottom:0; left:14px; right:14px; height:2px; background:var(--primary); border-radius:2px}
.brand-logo{height:44px}
.brand-logo-img{height:48px; width:auto; max-width:180px; object-fit:contain; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)); image-rendering:-webkit-optimize-contrast}
.brand-text small{display:block; font-size:10px; letter-spacing:.5px; color:var(--muted)}
.brand-text strong{font-size:15px; color:var(--primary); line-height:1}
.brand-badge{border:1.5px solid var(--primary); border-radius:10px; padding:4px 10px; display:flex; align-items:center; gap:8px}
.brand-badge .brand-shield{width:36px; height:36px; background:var(--primary); color:#fff; display:grid; place-items:center; border-radius:8px; font-weight:800; font-size:16px}

/* Hero */
.hero{position:relative; min-height:520px; background:var(--primary) url('/img/hero-fallback.jpg') center/cover no-repeat; display:flex; align-items:center; overflow:hidden}
.hero::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--primary) 0%, rgba(11,35,71,.85) 35%, rgba(11,35,71,.15) 70%, transparent 100%)}
.hero[dir="ltr"]::before{background:linear-gradient(270deg, var(--primary) 0%, rgba(11,35,71,.85) 35%, rgba(11,35,71,.15) 70%, transparent 100%)}
.hero-content{position:relative; z-index:2; color:#fff; padding:48px 0}
.hero h1{font-size:42px; font-weight:800; line-height:1.2; margin-bottom:12px}
.hero h1 span{color:var(--accent)}
.hero p{font-size:16px; opacity:.9; max-width:520px}
.btn-hero-primary{background:var(--accent); color:#fff; border:none; padding:10px 22px; border-radius:var(--btn-radius); font-weight:600}
.btn-hero-primary:hover{background:var(--accent-hover); color:#fff}
.btn-hero-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.9); padding:10px 22px; border-radius:var(--btn-radius); font-weight:600}
.btn-hero-outline:hover{background:#fff; color:var(--primary)}
.hero-deco{position:absolute; inset:0; opacity:.15; pointer-events:none; background-image:radial-gradient(circle at 20% 30%, var(--accent) 1px, transparent 1px); background-size:28px 28px}

/* Hero Slider - supports single image and multi-image with professional transitions */
.hero--slider{ background:none !important; }
.hero-slider{position:absolute; inset:0; overflow:hidden; z-index:0}
.hero-slide{position:absolute; inset:0; background-position:center; background-size:var(--object-fit, cover); background-repeat:no-repeat; opacity:0; transition:opacity var(--transition-duration, 900ms) ease, transform var(--transition-duration, 900ms) ease; will-change:opacity, transform}
.hero-slide.is-active{opacity:1; z-index:1}
.hero-slide.out{opacity:0; z-index:0}
.hero-overlay{position:absolute; inset:0; z-index:1; pointer-events:none}
/* Per-slide extra dimming — consumes --overlay-opacity/--overlay-color set inline per slide (0 = fully visible) */
.hero-slide::after{content:''; position:absolute; inset:0; background:var(--overlay-color,#0B2347); opacity:calc(var(--overlay-opacity,0)/100); pointer-events:none}
.hero-content-wrap{position:relative; z-index:2}
.hero[data-transition="fade"] .hero-slide{transition:opacity var(--transition-duration, 900ms) ease}
.hero[data-transition="fade"] .hero-slide.is-active{opacity:1}
.hero[data-transition="slide"] .hero-slide,
.hero[data-transition="slide-left"] .hero-slide{transform:translateX(100%)}
.hero[data-transition="slide"] .hero-slide.is-active,
.hero[data-transition="slide-left"] .hero-slide.is-active{transform:translateX(0); opacity:1}
.hero[data-transition="slide-right"] .hero-slide{transform:translateX(-100%)}
.hero[data-transition="slide-right"] .hero-slide.is-active{transform:translateX(0); opacity:1}
.hero[data-transition="slide-up"] .hero-slide{transform:translateY(40px)}
.hero[data-transition="slide-up"] .hero-slide.is-active{transform:translateY(0); opacity:1}
.hero[data-transition="zoom"] .hero-slide{transform:scale(1.08); opacity:0}
.hero[data-transition="zoom"] .hero-slide.is-active{transform:scale(1); opacity:1}
.hero[data-transition="kenburns"] .hero-slide{transform:scale(1); opacity:0; transition:opacity var(--transition-duration, 900ms) ease, transform 8000ms ease}
.hero[data-transition="kenburns"] .hero-slide.is-active{opacity:1; transform:scale(1.08)}
.hero[data-transition="kenburns"] .hero-slide.kenburns-active{transform:scale(1.08)}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); background:rgba(11,35,71,.25); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); transition:all .2s}
.hero-arrow:hover{background:rgba(255,255,255,.9); color:var(--primary); border-color:#fff}
.hero-arrow--prev{inset-inline-start:16px}
.hero-arrow--next{inset-inline-end:16px}
.hero-dots{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px}
.hero-dot{width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(255,255,255,.8); background:transparent; transition:all .2s}
.hero-dot.is-active{background:#fff; border-color:#fff; width:26px; border-radius:10px}
.hero-progress{position:absolute; bottom:0; inset-inline:0; height:3px; background:rgba(255,255,255,.2); z-index:3}
.hero-progress-bar{height:100%; width:0; background:var(--accent); animation:none}
@keyframes heroProgress{from{width:0} to{width:100%}}
@media (max-width: 991px){ .hero-arrow{display:none} .hero-dots{bottom:10px} }

/* Stats bar overlapping hero */
.stats-bar{background:var(--primary); color:#fff; border-radius:12px; margin:-36px auto 0; position:relative; z-index:3; max-width:1100px; box-shadow:0 12px 32px rgba(11,35,71,.25); border:1px solid rgba(255,255,255,.12)}
.stats-bar .stat-item{padding:18px 16px; text-align:center; border-inline-end:1px solid rgba(255,255,255,.12)}
.stats-bar .stat-item:last-child{border:none}
.stats-bar .stat-value{font-size:22px; font-weight:800; color:#fff; line-height:1}
.stats-bar .stat-label{font-size:12px; opacity:.8; line-height:1.4; margin-top:4px}
.stats-bar .stat-icon{width:38px; height:38px; opacity:.9}

/* Section */
.section{padding:56px 0}
.section-head{text-align:center; margin-bottom:36px}
.section-head .eyebrow{color:var(--accent); font-weight:700; font-size:13px; letter-spacing:1px}
.section-head h2{font-size:26px; font-weight:800; color:var(--primary)}
.section-head p{color:var(--muted); max-width:640px; margin:8px auto 0}

/* Service cards */
.service-card{background:#fff; border:1px solid #E5E7EB; border-radius:var(--card-radius); padding:20px 16px; text-align:center; height:100%; transition:all .25s; display:flex; flex-direction:column}
.service-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(11,35,71,.12); border-color:var(--accent)}
.service-card .icon-wrap{width:56px; height:56px; margin:0 auto 12px; border:1.5px solid var(--primary); border-radius:12px; display:grid; place-items:center; color:var(--primary); font-size:22px}
.service-card h3{font-size:14px; font-weight:800; color:var(--primary); line-height:1.4; min-height:40px}
.service-card p{font-size:12.5px; color:var(--muted); flex:1}
.service-card .more{font-size:13px; color:var(--primary); font-weight:600; margin-top:10px}
.service-card .more:hover{color:var(--accent)}

/* Why us - dark navy section with rounded top */
.whyus{background:var(--primary); color:#fff; border-radius:48px 0 0 0; padding:56px 0; position:relative; overflow:hidden}
.whyus::before{content:''; position:absolute; inset:0; opacity:.08; background-image:radial-gradient(circle, var(--accent) 1.2px, transparent 1.2px); background-size:22px 22px}
.whyus h2{color:#fff; font-weight:800; font-size:26px}
.why-item{text-align:center; padding:0 12px; border-inline-end:1px solid rgba(255,255,255,.12)}
.why-item:last-child{border:none}
.why-item .why-icon{width:52px; height:52px; border:1.5px solid rgba(255,255,255,.7); border-radius:50%; display:grid; place-items:center; margin:0 auto 12px; font-size:20px}
.why-item h4{font-size:14px; font-weight:700; margin-bottom:6px}
.why-item p{font-size:12.5px; opacity:.8; line-height:1.6}

/* Footer */
.footer-dark{background:var(--primary); color:rgba(255,255,255,.85); padding:40px 0 0; font-size:14px}
.footer-dark a{color:rgba(255,255,255,.85)}
.footer-dark a:hover{color:#fff}
.footer-dark h5{color:#fff; font-weight:700; font-size:15px; margin-bottom:14px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding:16px 0; font-size:12.5px; opacity:.7; text-align:center}

/* Breadcrumbs */
.breadcrumb{--bs-breadcrumb-divider: '›'; font-size:13px}
.breadcrumb a{color:var(--muted)}

/* Responsive */
@media (max-width: 991px){
  .hero h1{font-size:32px}
  .stats-bar{margin:-20px 16px 0; border-radius:10px}
  .stats-bar .stat-item{border:none; border-bottom:1px solid rgba(255,255,255,.12); padding:14px}
  .navbar-custom{border-radius:0}
  .whyus{border-radius:24px 0 0 0}
}
@media (max-width: 576px){
  .hero{min-height:460px}
  .hero h1{font-size:28px}
}

/* Admin tweaks */
.admin-sidebar{background:var(--primary); color:#fff; position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
.admin-sidebar a{color:rgba(255,255,255,.85); display:block; padding:10px 16px; border-radius:8px; margin:2px 8px}
.admin-sidebar a:hover, .admin-sidebar a.active{background:rgba(255,255,255,.12); color:#fff}
/* Internal scroll for the menu nav — header & footer stay pinned */
.admin-sidebar nav{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent}
/* Direct header/footer divs must never shrink — only nav scrolls */
.admin-sidebar > div{flex-shrink:0}
.admin-sidebar nav::-webkit-scrollbar{width:6px}
.admin-sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:3px}
.admin-sidebar nav::-webkit-scrollbar-track{background:transparent}
/* Numbered step group titles */
.admin-group-title{display:flex; align-items:center; gap:8px; padding:14px 16px 4px; font-size:11px; font-weight:700; color:rgba(255,255,255,.55)}
.admin-step{width:20px; height:20px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800}
.admin-sidebar-footer{border-top:1px solid rgba(255,255,255,.12); padding:8px 0}
.admin-card{border-radius:12px; border:1px solid #E5E7EB}
/* Dashboard stat cards — clickable only when permitted (href present) */
a.dash-card-link{display:block; text-decoration:none; color:inherit; border-radius:12px; transition:transform .15s ease, box-shadow .15s ease}
a.dash-card-link:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10)}
a.dash-card-link:hover .admin-card{border-color:var(--primary)}
a.dash-card-static{display:block; text-decoration:none; color:inherit; cursor:default}

/* Phone / WhatsApp / Fax - إصلاح جذري لعرض الأرقام في RTL: فقط أرقام الهاتف ltr */
.phone-ltr, a[href^="tel:"], a[href^="https://wa.me"], a[href^="https://api.whatsapp.com"]{ direction:ltr; unicode-bidi:plaintext; display:inline-block; text-align:left; font-variant-numeric:tabular-nums; }
.phone-ltr{ unicode-bidi:isolate; }

/* Utilities */
.lazy{opacity:0; transition:opacity .3s}

/* License advanced image viewer (lightbox): zoom + pan + download */
.lic-lightbox{position:fixed; inset:0; z-index:2000; background:rgba(5,12,24,.93); display:none; flex-direction:column}
.lic-lightbox.open{display:flex}
.lic-lb-toolbar{display:flex; align-items:center; gap:8px; padding:10px 16px; color:#fff}
.lic-lb-title{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw}
.lic-lb-toolbar .btn{min-width:38px}
#licZoomPct{font-variant-numeric:tabular-nums; min-width:48px; display:inline-block}
.lic-lb-viewport{flex:1 1 auto; min-height:0; overflow:hidden; position:relative; cursor:grab; touch-action:none}
.lic-lb-viewport.dragging{cursor:grabbing}
.lic-lb-viewport img{position:absolute; top:50%; left:50%; max-width:none; max-height:none; user-select:none; -webkit-user-select:none; will-change:transform}
.lic-lb-hint{text-align:center; color:rgba(255,255,255,.55); font-size:12px; padding:8px 16px 12px}

/* Floating admin shortcut — rendered only for users with Dashboard.View permission */
.admin-float-btn{position:fixed; bottom:24px; inset-inline-start:24px; z-index:1040; display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:#fff !important; font-size:13px; font-weight:700; padding:12px 18px; border-radius:50px; box-shadow:0 8px 24px rgba(0,0,0,.25); text-decoration:none; transition:transform .2s, box-shadow .2s}
.admin-float-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.3); color:#fff !important}
.admin-float-btn i{font-size:16px}
@media (max-width:576px){.admin-float-btn span{display:none}.admin-float-btn{padding:12px 14px}}

/* Chatbot widget */
#chatFab{position:fixed; bottom:24px; inset-inline-start:24px; z-index:1050; width:56px; height:56px; border:0; border-radius:50%; background:var(--accent); color:#fff; font-size:24px; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .2s}
#chatFab:hover{transform:scale(1.06)}
#chatFab.has-admin{bottom:92px}
#chatPanel{position:fixed; bottom:92px; inset-inline-start:24px; z-index:1050; width:370px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 120px); background:#fff; border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.3); display:flex; flex-direction:column; overflow:hidden}
#chatPanel.has-admin{bottom:160px}
#chatPanel[hidden]{display:none}
.chat-head{display:flex; align-items:center; gap:10px; background:var(--primary); color:#fff; padding:12px 14px}
.chat-avatar{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15); display:grid; place-items:center; font-size:20px; flex-shrink:0}
.chat-head strong{font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px}
.chat-status{font-size:11px; opacity:.75}
#chatClose{background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer; opacity:.8}
#chatClose:hover{opacity:1}
#chatMsgs{flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:#F8FAFC}
.chat-msg{display:flex; flex-direction:column; gap:6px; max-width:88%}
.chat-msg.user{align-self:flex-end; align-items:flex-end}
.chat-msg.bot{align-self:flex-start; align-items:flex-start}
.chat-bubble{padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word}
.chat-msg.bot .chat-bubble{background:#fff; border:1px solid #E5E7EB; color:var(--text); border-start-start-radius:4px}
.chat-msg.user .chat-bubble{background:var(--primary); color:#fff; border-start-end-radius:4px}
.chat-linkbtn{display:inline-block; font-size:12.5px; font-weight:700; color:var(--primary); background:#fff; border:1.5px solid var(--primary); border-radius:20px; padding:5px 14px; text-decoration:none; margin-top:2px}
.chat-linkbtn:hover{background:var(--primary); color:#fff}
.chat-linkbtn.chat-wa{border-color:#22c55e; color:#15803d}
.chat-linkbtn.chat-wa:hover{background:#22c55e; color:#fff}
#chatQuick{display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px; background:#fff; border-top:1px solid #F1F5F9}
#chatQuick:empty{display:none}
.chat-chip{font-size:12px; border:1px solid #CBD5E1; background:#F8FAFC; color:var(--primary); border-radius:20px; padding:5px 12px; cursor:pointer}
.chat-chip:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
#chatForm{display:flex; gap:8px; padding:10px 12px; border-top:1px solid #E5E7EB; background:#fff}
#chatInput{flex:1; border:1px solid #CBD5E1; border-radius:20px; padding:8px 14px; font-size:13.5px; outline:none; min-width:0}
#chatInput:focus{border-color:var(--accent)}
#chatForm button{width:40px; height:40px; flex-shrink:0; border:0; border-radius:50%; background:var(--primary); color:#fff; cursor:pointer; font-size:15px}
#chatForm button:hover{opacity:.9}
#chatAttach{background:#F1F5F9 !important; color:var(--primary) !important; font-size:17px}
#chatMic{background:#F1F5F9 !important; color:var(--primary) !important; font-size:16px}
#chatMic.recording{background:#DC2626 !important; color:#fff !important; animation:micpulse 1.2s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
#chatVoiceBar{display:flex; align-items:center; gap:8px; padding:8px 12px; background:#FEF2F2; border-top:1px solid #FECACA; cursor:pointer}
#chatVoiceBar[hidden]{display:none}
#chatVoiceBar .rec-dot{width:10px; height:10px; border-radius:50%; background:#DC2626; animation:micpulse 1.2s infinite; flex-shrink:0}
#chatVoiceBar .rec-time{font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; color:#991B1B}
#chatVoiceBar .rec-hint{font-size:12px; color:#991B1B; opacity:.8}
#chatVoiceBar .voice-preview-player{flex:1; min-width:0; height:36px}
#chatVoiceBar .voice-send{width:38px; height:38px; flex-shrink:0; border:0; border-radius:50%; background:var(--primary); color:#fff; cursor:pointer; font-size:16px}
#chatVoiceBar .voice-del{width:38px; height:38px; flex-shrink:0; border:1px solid #CBD5E1; border-radius:50%; background:#fff; color:#64748B; cursor:pointer; font-size:15px}
.rec-dot{width:10px; height:10px; border-radius:50%; background:#DC2626; animation:micpulse 1.2s infinite; flex-shrink:0}
.chat-attach-img{max-width:180px; max-height:140px; border-radius:10px; border:1px solid #E5E7EB; margin-top:6px; display:block}
.chat-attach-audio{max-width:230px; margin-top:6px; display:block}
.chat-attach-size{font-size:11px; opacity:.65; display:block; margin-top:2px}
.chat-tlink{color:var(--accent); text-decoration:underline; word-break:break-all}
.chat-msg.user .chat-tlink{color:#fff}
.agent-bubble a{color:#fff !important; text-decoration:underline; word-break:break-all}
.tdot{display:inline-block; width:7px; height:7px; margin:0 1.5px; border-radius:50%; background:#94A3B8; animation:tblink 1.2s infinite}
.tdot:nth-child(2){animation-delay:.2s}
.tdot:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* Live human support */
#chatSupport{padding:0 12px 8px; background:#fff}
#chatSupport:empty{display:none}
.chat-support-btn{border-color:var(--accent); color:var(--primary); font-weight:700}
.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:5px; vertical-align:baseline}
.live-dot.on{background:#22c55e}
.live-dot.off{background:#94A3B8}
.chat-msg.system{align-self:center; align-items:center; max-width:95%}
.chat-sysnote{background:#EEF2FF; border:1px solid #C7D2FE; color:#3730A3; font-size:12px; border-radius:12px; padding:6px 12px; text-align:center; line-height:1.7}
.chat-typingbar{font-size:12px; color:var(--muted); font-style:italic; padding:2px 6px}
.chat-msg[data-pending] .chat-bubble{opacity:.65}

/* Agent console: connection + drag&drop */
#connStatus{font-size:11px}
#dropOverlay{position:absolute; inset:8px; border:2px dashed var(--accent); border-radius:12px; background:rgba(74,158,255,.12); color:var(--primary); font-weight:700; display:none; place-items:center; z-index:5; pointer-events:none}
#dropOverlay.show{display:grid}
.lazy.loaded{opacity:1}
.btn-primary{background:var(--primary); border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-2); border-color:var(--primary-2)}
.text-primary{color:var(--primary) !important}
.bg-primary{background:var(--primary) !important}