/* ============================================================
   HabbaTech 2026 — Warm Orange Theme (Light / Dark Mode)
   OCI Path: habbatech/css/style.css
   ============================================================ */

/* ===== DARK MODE VARIABLES (default) ===== */
:root,
html[data-theme="dark"] {
    --ht-bg:          #0b1120;
    --ht-surface:     #111b30;
    --ht-card:        #162038;
    --ht-card-hover:  #1c2a4a;
    --ht-accent:      #fb923c;
    --ht-accent2:     #f97316;
    --ht-glow:        rgba(251, 146, 60, 0.12);
    --ht-glow-strong: rgba(251, 146, 60, 0.25);
    --ht-text:        #e2e8f0;
    --ht-muted:       #7a9bb5;
    --ht-border:      rgba(251, 146, 60, 0.18);
    --ht-radius:      10px;
    --ht-shadow:      0 8px 32px rgba(0, 0, 0, 0.5);
    --ht-nav-bg:      rgba(11, 17, 32, 0.96);
    --ht-footer-bg:   #060e1c;
    --ht-footer-text: #4a6880;
    --ht-copyright-bg:#03080f;
}

/* ===== LIGHT MODE VARIABLES ===== */
html[data-theme="light"] {
    --ht-bg:          #f0f4f8;
    --ht-surface:     #e8eef4;
    --ht-card:        #ffffff;
    --ht-card-hover:  #fff7ed;
    --ht-accent:      #ea580c;
    --ht-accent2:     #c2410c;
    --ht-glow:        rgba(234, 88, 12, 0.10);
    --ht-glow-strong: rgba(234, 88, 12, 0.22);
    --ht-text:        #1e293b;
    --ht-muted:       #64748b;
    --ht-border:      rgba(234, 88, 12, 0.20);
    --ht-radius:      10px;
    --ht-shadow:      0 8px 32px rgba(0, 0, 0, 0.08);
    --ht-nav-bg:      rgba(255, 255, 255, 0.97);
    --ht-footer-bg:   #1e293b;
    --ht-footer-text: #94a3b8;
    --ht-copyright-bg:#0f172a;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', 'Raleway', sans-serif !important;
    background-color: var(--ht-bg) !important;
    color: var(--ht-text) !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 { color: var(--ht-text) !important; }
p { color: var(--ht-muted) !important; line-height: 1.8; }
a { transition: all 0.3s ease; }
.text-muted { color: var(--ht-muted) !important; }
.text-white { color: #fff !important; }

/* ===== SECTION LABELS (small.bg-primary) ===== */
small.bg-primary, small.d-inline.bg-primary {
    background: transparent !important;
    color: var(--ht-accent) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
small.bg-primary::before, small.d-inline.bg-primary::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--ht-accent), transparent);
    flex-shrink: 0;
}

/* ===== NAVBAR ===== */
.nav-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
}
.navbar {
    background: var(--ht-nav-bg) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--ht-border) !important;
    padding: 12px 24px !important;
    transition: all 0.3s;
}
.navbar-brand h1 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    margin: 0 !important;
}
html[data-theme="light"] .nav-bar .navbar-brand h1 { color: #1e293b !important; }
/* Footer brand always white — footer bg is always dark */
.container-fluid.bg-secondary .navbar-brand h1 { color: #ffffff !important; }
.navbar-brand h1 span.text-primary { color: var(--ht-accent) !important; }

.navbar-nav .nav-item.nav-link,
.navbar-nav a.nav-item.nav-link {
    color: var(--ht-muted) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 7px 13px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px;
}
.navbar-nav .nav-item.nav-link:hover,
.navbar-nav .nav-item.nav-link.active,
.navbar-nav a.nav-item.nav-link:hover {
    color: var(--ht-accent) !important;
    background: var(--ht-glow) !important;
}
.navbar-toggler { border-color: var(--ht-border) !important; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(251,146,60,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
html[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(234,88,12,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
html[data-theme="light"] .navbar {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-btn {
    background: var(--ht-glow) !important;
    border: 1px solid var(--ht-border) !important;
    color: var(--ht-accent) !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    margin-left: 6px;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: var(--ht-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--ht-glow) !important;
    transform: translateY(-1px) !important;
}
[dir="rtl"] .theme-toggle-btn { margin-left: 0; margin-right: 6px; }

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--ht-border) !important;
    border-radius: 7px !important;
    color: var(--ht-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin-left: 4px !important;
    transition: all 0.25s !important;
    line-height: 1 !important;
}
.lang-toggle i { font-size: 13px; }
.lang-toggle:hover {
    border-color: var(--ht-accent) !important;
    color: var(--ht-accent) !important;
    background: var(--ht-glow) !important;
    transform: translateY(-1px) !important;
}
[dir="rtl"] .lang-toggle { margin-left: 0 !important; margin-right: 4px !important; }

/* ===== PRODUCTS DROPDOWN — hover-open on desktop ===== */
/* On desktop, keep dropdown open while hovering over the nav-item (toggle + menu) */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
    .nav-item.dropdown > .dropdown-menu {
        margin-top: 0 !important;
    }
}

/* ===== PRODUCTS DROPDOWN ===== */
.nav-item.dropdown .nav-link.dropdown-toggle {
    color: var(--ht-muted) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 7px 13px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px;
    cursor: pointer;
}
.nav-item.dropdown:hover .nav-link.dropdown-toggle,
.nav-item.dropdown .nav-link.dropdown-toggle:focus,
.nav-item.dropdown.active .nav-link.dropdown-toggle {
    color: var(--ht-accent) !important;
    background: var(--ht-glow) !important;
}
.dropdown-menu {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
    padding: 8px !important;
    min-width: 180px !important;
    margin-top: -1px !important;
}
html[data-theme="light"] .dropdown-menu {
    box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}
.dropdown-item {
    color: var(--ht-text) !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--ht-glow) !important;
    color: var(--ht-accent) !important;
}
.dropdown-item .item-icon {
    width: 28px;
    height: 28px;
    background: var(--ht-glow);
    border: 1px solid var(--ht-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ht-accent);
    flex-shrink: 0;
}
.dropdown-divider { border-color: var(--ht-border) !important; }
/* Dropdown arrow color */
.dropdown-toggle::after {
    border-top-color: var(--ht-muted) !important;
    opacity: 0.7;
}

/* ===== BUTTON BASE ===== */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 18px var(--ht-glow) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.3px;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #38bdf8 0%, var(--ht-accent) 100%) !important;
    box-shadow: 0 6px 28px var(--ht-glow-strong) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}
.btn-outline-primary {
    border-color: var(--ht-accent) !important;
    color: var(--ht-accent) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--ht-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px var(--ht-glow) !important;
}

/* ===== COLOR UTILITIES ===== */
.text-primary { color: var(--ht-accent) !important; }
.bg-primary { background: linear-gradient(135deg, var(--ht-accent), var(--ht-accent2)) !important; }
.bg-secondary { background: var(--ht-footer-bg) !important; }

/* ===== HERO CAROUSEL ===== */
.container-fluid.p-0.mb-5 { margin-bottom: 0 !important; }
#header-carousel { min-height: 580px; position: relative; }
#header-carousel::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--ht-bg));
    z-index: 5;
    pointer-events: none;
}
.carousel-item img {
    filter: brightness(0.28) !important;
    object-fit: cover;
    min-height: 580px;
    width: 100%;
}
.carousel-caption {
    background: none !important;
    bottom: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 6;
}
.carousel-caption h5 {
    color: var(--ht-accent) !important;
    font-size: 15px !important;
    letter-spacing: 3.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}
.carousel-caption h1 {
    color: #ffffff !important;
    font-size: 2.7rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 30px rgba(0,0,0,0.7) !important;
}
.carousel-indicators li {
    background-color: var(--ht-accent) !important;
    opacity: 0.35;
    width: 34px !important;
    height: 3px !important;
    border-radius: 2px !important;
    border-top: none !important;
    border-bottom: none !important;
}
.carousel-indicators li.active { opacity: 1; }

/* ===== SECTION BACKGROUNDS ===== */
.container-fluid.pt-5.pb-3,
.container-fluid.pt-5.pb-2 {
    background-color: var(--ht-surface) !important;
}

/* ===== BORDERS ===== */
.border { border-color: var(--ht-border) !important; }

/* ===== INFO / CONTACT CARDS ===== */
.d-flex.align-items-center.border {
    background: var(--ht-card) !important;
    border-radius: var(--ht-radius) !important;
    transition: all 0.3s !important;
}
.d-flex.align-items-center.border:hover {
    border-color: var(--ht-accent) !important;
    box-shadow: 0 8px 30px var(--ht-glow) !important;
    transform: translateY(-3px) !important;
}
.d-flex.align-items-center.border h5 { color: var(--ht-text) !important; }
.d-flex.align-items-center.border p  { color: var(--ht-muted) !important; margin: 0; }

/* ===== ABOUT IMAGE ===== */
.img-thumbnail {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
}

/* ===== SERVICE ITEMS (inline d-flex cards on home) ===== */
.container-fluid.pt-5.pb-3 .col-md-6 .d-flex,
.container-fluid.pt-5.pb-3 .col-md-4 .d-flex {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    padding: 22px !important;
    transition: all 0.3s !important;
    height: 100%;
}
.container-fluid.pt-5.pb-3 .col-md-6 .d-flex:hover,
.container-fluid.pt-5.pb-3 .col-md-4 .d-flex:hover {
    border-color: var(--ht-accent) !important;
    box-shadow: 0 8px 30px var(--ht-glow) !important;
    transform: translateY(-4px) !important;
}
.container-fluid.pt-5.pb-3 h4 { color: var(--ht-text) !important; }
.container-fluid.pt-5.pb-3 a.font-weight-semi-bold:not(.btn) { color: var(--ht-accent) !important; }
.container-fluid.pt-5.pb-3 a.font-weight-semi-bold:not(.btn):hover { color: var(--ht-text) !important; }

/* ===== STATS / COUNTERS ===== */
.d-flex.flex-column.align-items-center.border.px-4 {
    background: var(--ht-card) !important;
    border-color: var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    padding: 28px 16px !important;
    transition: all 0.3s !important;
}
.d-flex.flex-column.align-items-center.border.px-4:hover {
    border-color: var(--ht-accent) !important;
    box-shadow: 0 8px 30px var(--ht-glow) !important;
    transform: translateY(-3px) !important;
}
.d-flex.flex-column.align-items-center.border.px-4 .display-3 {
    color: var(--ht-accent) !important;
    font-weight: 800 !important;
}
.d-flex.flex-column.align-items-center.border.px-4 h5 { color: var(--ht-text) !important; }

/* ===== TEAM ===== */
.team-item {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    overflow: hidden !important;
    transition: all 0.3s !important;
}
.team-item:hover {
    border-color: var(--ht-accent) !important;
    box-shadow: 0 10px 35px var(--ht-glow) !important;
    transform: translateY(-4px) !important;
}
.team-item .border.border-top-0.text-center {
    background: var(--ht-card) !important;
    border-color: var(--ht-border) !important;
}
.team-item h5 { color: var(--ht-text) !important; }
.team-item span { color: var(--ht-muted) !important; font-size: 13px; }

/* Team photo uniform size */
.team-item .position-relative img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}
@media (max-width: 767.98px) {
    .team-item .position-relative img { height: 220px !important; }
}

/* ===== PRICING CARDS ===== */
.col-md-4.mb-5 > div {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    overflow: hidden;
    transition: all 0.3s !important;
}
.col-md-4.mb-5 > div:hover {
    border-color: var(--ht-accent) !important;
    box-shadow: 0 14px 45px var(--ht-glow) !important;
    transform: translateY(-7px) !important;
}
.d-flex.flex-column.align-items-center.justify-content-center.bg-primary.p-4 {
    background: linear-gradient(135deg, var(--ht-accent), var(--ht-accent2)) !important;
    border-radius: 0 !important;
    padding: 28px !important;
}
.d-flex.flex-column.align-items-center.justify-content-center.bg-primary.p-4 h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.4rem;
}
.d-flex.flex-column.align-items-center.justify-content-center.bg-primary.p-4 h1,
.d-flex.flex-column.align-items-center.justify-content-center.bg-primary.p-4 h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}
.d-flex.flex-column.align-items-center.justify-content-center.bg-primary.p-4 small {
    color: #ffffff !important;
    background: transparent !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
}
.d-flex.flex-column.align-items-center.justify-content-center.bg-primary.p-4 small::before {
    display: none !important;
}
.border.border-top-0.d-flex.flex-column.align-items-center.py-4 {
    background: var(--ht-card) !important;
    border-color: var(--ht-border) !important;
}
.border.border-top-0.d-flex.flex-column.align-items-center.py-4 p {
    color: var(--ht-text) !important;
    width: 100%;
    text-align: center;
    padding: 7px 20px;
    border-bottom: 1px solid var(--ht-border);
    margin: 0;
}
.border.border-top-0.d-flex.flex-column.align-items-center.py-4 p:last-of-type {
    border-bottom: none;
}

/* ===== TESTIMONIALS ===== */
.testimonial-item .testimonial-text {
    background: var(--ht-card) !important;
    border-color: var(--ht-border) !important;
    border-radius: var(--ht-radius) !important;
    color: var(--ht-text) !important;
    position: relative;
}
.testimonial-item .testimonial-text::before {
    content: '\201C';
    position: absolute;
    top: -5px;
    left: 18px;
    font-size: 72px;
    color: var(--ht-accent);
    opacity: 0.14;
    font-family: Georgia, serif;
    line-height: 1;
}
.testimonial-item h6 { color: var(--ht-text) !important; }
.testimonial-item i.text-muted,
.testimonial-item .text-muted { color: var(--ht-muted) !important; }
.img-fluid.rounded-circle {
    border: 2px solid var(--ht-accent) !important;
    box-shadow: 0 0 14px var(--ht-glow) !important;
}

/* ===== PAGE HEADER (inner pages) ===== */
.page-header {
    background: linear-gradient(140deg, #071828 0%, #0c2848 55%, #071020 100%) !important;
    padding: 90px 0 55px !important;
    min-height: 220px !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 60%, rgba(251,146,60,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 35%, rgba(249,115,22,0.06) 0%, transparent 55%);
    pointer-events: none;
}
.page-header h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
    position: relative;
    z-index: 1;
}
.page-header .d-inline-flex { position: relative; z-index: 1; }
.page-header .d-inline-flex p,
.page-header .d-inline-flex a { color: rgba(255,255,255,0.65) !important; }
.page-header .d-inline-flex a:hover { color: #fff !important; }
.page-header .d-inline-flex .px-2 { color: rgba(255,255,255,0.4) !important; }

html[data-theme="light"] .page-header {
    background: linear-gradient(140deg, #c2410c 0%, #ea580c 55%, #fb923c 100%) !important;
}

/* ===== SECTION CONTENT H1 TITLES ===== */
.container-fluid .text-center h1,
.container-fluid .col-lg-4 > h1,
.container-fluid .col-lg-7 > h1,
.container-fluid .col-lg-6 > h1,
.container-fluid .col-lg-8 > h1 {
    font-size: 2.3rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}
@media (max-width: 767.98px) {
    .container-fluid .text-center h1,
    .container-fluid .col-lg-4 > h1,
    .container-fluid .col-lg-7 > h1,
    .container-fluid .col-lg-6 > h1,
    .container-fluid .col-lg-8 > h1 { font-size: 1.75rem !important; }
}

/* ===== WHY CHOOSE US LIST ===== */
.list-inline p.font-weight-semi-bold { color: var(--ht-text) !important; }
.container-fluid.pt-5.pb-2 h1 { color: var(--ht-text) !important; }

/* ===== PRODUCT DETAIL SECTIONS (service page) ===== */
.container-fluid.py-5 h1 { color: var(--ht-text) !important; }
.container-fluid.py-5 p    { color: var(--ht-muted) !important; }

/* ===== CONTACT FORM ===== */
.form-control {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    color: var(--ht-text) !important;
    border-radius: var(--ht-radius) !important;
    transition: all 0.3s !important;
}
.form-control:focus {
    background: var(--ht-card) !important;
    border-color: var(--ht-accent) !important;
    box-shadow: 0 0 0 3px var(--ht-glow) !important;
    color: var(--ht-text) !important;
}
.form-control::placeholder { color: var(--ht-muted) !important; }
textarea.form-control { resize: vertical; }

/* ===== RTL / ARABIC ALIGNMENT ===== */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] p,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6 { text-align: right; }
[dir="rtl"] .list-inline p,
[dir="rtl"] .col-lg-4 p,
[dir="rtl"] .col-lg-7 p,
[dir="rtl"] .col-lg-6 p { text-align: right; }
[dir="rtl"] .container-fluid.bg-secondary a.text-white:hover {
    padding-left: 0 !important;
    padding-right: 8px !important;
}
[dir="rtl"] small.bg-primary::before,
[dir="rtl"] small.d-inline.bg-primary::before {
    background: linear-gradient(270deg, var(--ht-accent), transparent);
}

/* ===== OWL CAROUSEL ===== */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
    color: var(--ht-accent) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    transition: all 0.3s !important;
}
.owl-nav button:hover {
    background: var(--ht-accent) !important;
    color: #fff !important;
}
.owl-dot span { background: var(--ht-border) !important; }
.owl-dot.active span { background: var(--ht-accent) !important; }

/* ===== FOOTER ===== */
.container-fluid.bg-secondary.text-white {
    background: var(--ht-footer-bg) !important;
    border-top: 1px solid var(--ht-border);
}
.container-fluid.bg-secondary.text-white p { color: var(--ht-footer-text) !important; }
.container-fluid.bg-secondary h5.text-primary { color: var(--ht-accent) !important; }
.container-fluid.bg-secondary h1 span { color: var(--ht-accent) !important; }
.container-fluid.bg-secondary a.text-white {
    color: var(--ht-footer-text) !important;
    font-size: 14px;
    text-decoration: none;
}
.container-fluid.bg-secondary a.text-white:hover {
    color: var(--ht-accent) !important;
    padding-left: 8px !important;
}

/* Copyright bar */
.container-fluid.py-4.px-sm-3 {
    background: var(--ht-copyright-bg) !important;
    border-top: 1px solid var(--ht-border) !important;
}
.container-fluid.py-4.px-sm-3 p { color: var(--ht-footer-text) !important; }
.container-fluid.py-4.px-sm-3 a { color: var(--ht-accent) !important; }
.container-fluid.py-4.px-sm-3 a:hover { color: #fff !important; }

/* ===== BACK TO TOP ===== */
/* Opacity-based show/hide — avoids jQuery display conflicts with main.js */
.back-to-top {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    right: auto !important;
    z-index: 9999 !important;
    background: linear-gradient(135deg, var(--ht-accent), var(--ht-accent2)) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px var(--ht-glow) !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, transform 0.3s ease !important;
}
.back-to-top.ht-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.back-to-top:hover {
    box-shadow: 0 8px 32px var(--ht-glow-strong) !important;
    transform: translateY(-3px) !important;
}

/* ===== SHOOF-POS PRODUCT PAGE ===== */
.product-hero {
    background: linear-gradient(140deg, #060f1e 0%, #0b1d38 50%, #071018 100%);
    padding: 110px 0 90px;
    position: relative;
    overflow: hidden;
}
.product-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(251,146,60,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 40%, rgba(249,115,22,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.product-hero .container { position: relative; z-index: 1; animation: none; }
.product-hero h1 {
    font-size: 3.4rem !important;
    font-weight: 900 !important;
    line-height: 1.1;
    color: #fff !important;
}
.product-hero h1 span.accent-text {
    background: linear-gradient(135deg, var(--ht-accent), #7dd3fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.product-hero p.lead {
    color: #7ea8c8 !important;
    font-size: 1.1rem;
    line-height: 1.75;
}
.product-hero .badge-pill {
    background: var(--ht-glow);
    border: 1px solid var(--ht-border);
    color: var(--ht-accent) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 20px;
    text-transform: uppercase;
}

html[data-theme="light"] .product-hero {
    background: linear-gradient(140deg, #e0f2fe 0%, #f0f9ff 50%, #e8f4fd 100%);
}
html[data-theme="light"] .product-hero h1 { color: #0f172a !important; }
html[data-theme="light"] .product-hero p.lead { color: #475569 !important; }

/* Feature grid cards (SHOOF-POS page) */
.feature-grid-card {
    background: var(--ht-card);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    padding: 28px;
    height: 100%;
    transition: all 0.3s;
}
.feature-grid-card:hover {
    border-color: var(--ht-accent);
    box-shadow: 0 8px 30px var(--ht-glow);
    transform: translateY(-4px);
    background: var(--ht-card-hover);
}
.feature-grid-card .icon-wrap {
    width: 50px;
    height: 50px;
    background: var(--ht-glow);
    border: 1px solid var(--ht-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.feature-grid-card .icon-wrap i {
    font-size: 20px;
    color: var(--ht-accent);
}
.feature-grid-card h5 {
    color: var(--ht-text) !important;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 10px;
}
.feature-grid-card p {
    color: var(--ht-muted) !important;
    font-size: 13.5px;
    margin: 0;
    line-height: 1.7;
}

/* Step cards (How it works) */
.step-card {
    background: var(--ht-card);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}
.step-card:hover {
    border-color: var(--ht-accent);
    box-shadow: 0 8px 30px var(--ht-glow);
    transform: translateY(-4px);
}
.step-number {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, var(--ht-accent), var(--ht-accent2));
    color: #ffffff;
    font-weight: 900;
    font-size: 1.3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px var(--ht-glow);
}
.step-card h5 { color: var(--ht-text) !important; font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.step-card p  { color: var(--ht-muted) !important; font-size: 14px; margin: 0; }

/* CTA Banner */
.cta-banner {
    background: linear-gradient(140deg, #0c2040 0%, #071628 100%);
    border: 1px solid var(--ht-border);
    border-radius: 16px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(251,146,60,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.cta-banner h2 { color: #fff !important; font-weight: 800 !important; position: relative; z-index: 1; }
.cta-banner p  { position: relative; z-index: 1; }
.cta-banner .btn-primary { position: relative; z-index: 1; }

html[data-theme="light"] .cta-banner {
    background: linear-gradient(140deg, #e0f2fe 0%, #f0f9ff 100%);
}
html[data-theme="light"] .cta-banner h2 { color: #0f172a !important; }

/* ===== GRADIENT TEXT UTILITY ===== */
.gradient-text {
    background: linear-gradient(135deg, var(--ht-accent), #7dd3fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== SECTION ACCENT DIVIDER ===== */
.section-divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--ht-accent), transparent);
    border-radius: 2px;
    margin: 12px auto 0;
}
[dir="rtl"] .section-divider {
    background: linear-gradient(270deg, var(--ht-accent), transparent);
}

/* ===== STATS SECTION ===== */
.container-fluid.bg-primary {
    background: linear-gradient(140deg, var(--ht-accent2) 0%, var(--ht-accent) 100%) !important;
}
.container-fluid.bg-primary p,
.container-fluid.bg-primary h1,
.container-fluid.bg-primary h2,
.container-fluid.bg-primary h3 {
    color: #ffffff !important;
}

/* ===== HERO HEADLINE POLISH ===== */
.carousel-caption h1 em,
.carousel-caption h1 span {
    color: var(--ht-accent) !important;
    font-style: normal;
}

/* ===== CARD ACCENT BORDER ON HOVER ===== */
.feature-grid-card:hover,
.team-item:hover,
.step-card:hover {
    border-left-width: 3px !important;
    border-left-color: var(--ht-accent) !important;
}
[dir="rtl"] .feature-grid-card:hover,
[dir="rtl"] .team-item:hover,
[dir="rtl"] .step-card:hover {
    border-left-width: 1px !important;
    border-right-width: 3px !important;
    border-right-color: var(--ht-accent) !important;
}

/* ===== ABOUT IMAGE GLOW ===== */
.img-thumbnail {
    transition: box-shadow 0.3s !important;
}
.img-thumbnail:hover {
    box-shadow: 0 16px 48px var(--ht-glow-strong) !important;
}

/* ===== NAVBAR SCROLLED SHADOW ===== */
.navbar.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.35) !important;
}

/* ===== PRICING POPULAR BADGE ===== */
.col-md-4.mb-5 > div[style*="box-shadow"] {
    border-color: var(--ht-accent) !important;
}

/* ===== FONT-WEIGHT SEMI-BOLD ===== */
.font-weight-semi-bold { font-weight: 600 !important; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.container { animation: fadeInUp 0.5s ease-out both; }
.product-hero .container { animation: fadeInUp 0.6s ease-out both; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
    .carousel-caption h1 { font-size: 1.9rem !important; }
    .carousel-item img   { min-height: 420px; }
    .product-hero h1     { font-size: 2.6rem !important; }
    .navbar-collapse {
        background: var(--ht-nav-bg);
        border-radius: 0 0 10px 10px;
        padding: 10px;
    }
}
@media (max-width: 767.98px) {
    .carousel-caption h1 { font-size: 1.4rem !important; }
    .carousel-item img   { min-height: 320px; }
    .product-hero { padding: 80px 0 60px; }
    .product-hero h1     { font-size: 2rem !important; }
    .cta-banner { padding: 50px 24px; }
    #header-carousel { min-height: 320px; }
}

/* ===== RTL (Arabic) ===== */
[dir="rtl"] body {
    font-family: 'Tajawal', 'Cairo', 'Inter', sans-serif !important;
}
[dir="rtl"] .navbar-nav {
    margin-right: auto !important;
    margin-left: 0 !important;
}
[dir="rtl"] small.bg-primary,
[dir="rtl"] small.d-inline.bg-primary {
    flex-direction: row-reverse;
}
[dir="rtl"] small.bg-primary::before,
[dir="rtl"] small.d-inline.bg-primary::before {
    background: linear-gradient(270deg, var(--ht-accent), transparent);
}
[dir="rtl"] .d-flex.justify-content-start { justify-content: flex-end !important; }
[dir="rtl"] .container-fluid.bg-secondary a.text-white:hover {
    padding-left: 0 !important;
    padding-right: 8px !important;
}
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .navbar-brand { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .fa-angle-right::before { content: "\f104" !important; }
[dir="rtl"] .feature-grid-card,
[dir="rtl"] .step-card { text-align: right; }
[dir="rtl"] .feature-grid-card .icon-wrap { margin-right: 0; }
[dir="rtl"] .product-hero h1 { text-align: right; }
[dir="rtl"] .product-hero p.lead { text-align: right; }
[dir="rtl"] .navbar-collapse { text-align: right; }


/* ===== ACCESSIBILITY: Keyboard Focus States ===== */
*:focus-visible{outline:3px solid var(--ht-accent)!important;outline-offset:2px!important;box-shadow:0 0 0 4px var(--ht-glow-strong)!important}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ht-accent)!important;outline-offset:2px!important}


/* ===== ACCESSIBILITY: Skip Link ===== */
.skip-to-main{position:absolute;top:-60px;left:0;background:var(--ht-accent);color:#fff;padding:12px 24px;z-index:99999;font-weight:700;text-decoration:none;transition:top .3s;font-size:14px;border-radius:0 0 var(--ht-radius) 0}
.skip-to-main:focus{top:0;position:fixed}


/* ===== ACCESSIBILITY: Colour Contrast Fixes ===== */
/* CONTRAST-FIX */
html[data-theme="dark"] p{color:#c8d6e5!important}
html[data-theme="dark"] .text-muted{color:#94b8d4!important}
html[data-theme="light"] .text-muted{color:#475569!important}
.help-block.text-danger{color:#ef4444!important;font-size:.875rem}
html[data-theme="light"] .help-block.text-danger{color:#dc2626!important}


/* ===== i18n / RTL Layout & Typography ===== */
/* RTL-FIXES */
html[dir="rtl"] body{font-family:'Tajawal','Inter',sans-serif!important}
html[dir="rtl"] p{line-height:2!important}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6{line-height:1.6!important}
html[dir="rtl"] .mr-2{margin-right:0!important;margin-left:.5rem!important}
html[dir="rtl"] .mr-3{margin-right:0!important;margin-left:1rem!important}
html[dir="rtl"] .mr-4{margin-right:0!important;margin-left:1.5rem!important}
html[dir="rtl"] .ml-auto{margin-left:unset!important;margin-right:auto!important}
html[dir="rtl"] .pl-4{padding-left:0!important;padding-right:1.5rem!important}
html[dir="rtl"] .fa-angle-right::before{content:"\f104"}
html[dir="rtl"] .fa-angle-double-right::before{content:"\f100"}
html[dir="rtl"] .navbar-nav .nav-link{white-space:nowrap;overflow:visible}
html[dir="rtl"] .carousel-caption h1,html[dir="rtl"] .carousel-caption h5{word-break:normal;overflow-wrap:break-word}
html[dir="rtl"] .dropdown-menu{text-align:right}


/* ===== FORMS: Validation Styles ===== */
.form-control.is-invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}
.form-control.is-valid{border-color:#22c55e!important;box-shadow:0 0 0 3px rgba(34,197,94,.15)!important}
.form-control:focus{border-color:var(--ht-accent)!important;box-shadow:0 0 0 3px var(--ht-glow)!important}
.invalid-feedback{color:#ef4444;font-size:.85rem;margin-top:4px;display:none}
.form-control.is-invalid~.invalid-feedback{display:block}


/* ===== PERFORMANCE: GPU hints ===== */
.carousel-item{will-change:transform,opacity}
.back-to-top{will-change:opacity,transform}