/* ================================================
   STOR — Global Design System
   ================================================ */

/* ---- Base ---- */
:root {
    --primary:    #667eea;
    --primary-2:  #764ba2;
    --secondary:  #f093fb;
    --accent:     #f5576c;
    --orange:     #ff6b6b;
    --orange-2:   #ff8e53;
    --dark:       #1a1a2e;
    --grad-1:     linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-2:     linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --grad-3:     linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --grad-orange: linear-gradient(135deg, #ff6b6b, #ff8e53);
    --shadow-sm:  0 4px 15px rgba(0,0,0,.06);
    --shadow-md:  0 8px 30px rgba(0,0,0,.10);
    --shadow-lg:  0 20px 60px rgba(0,0,0,.15);
    --radius-sm:  10px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-pill: 50px;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f8f9ff;
    color: #333;
    overflow-x: hidden;
}

a { transition: .3s; }
a:hover { color: var(--primary) !important; }
.remove-hover:hover { color: white !important; }

input:focus, textarea:focus, select:focus {
    box-shadow: none !important;
    border-color: var(--primary) !important;
}

/* ---- Topbar ---- */
.topbar {
    background: var(--grad-1);
    color: #fff;
    font-size: 13px;
    letter-spacing: .3px;
}
.topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.topbar a:hover { color: #fff !important; }

/* ---- Navbar ---- */
.navbar {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(102,126,234,.12);
}
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--grad-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nav-link {
    font-weight: 500;
    color: #444 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill);
    transition: all .3s;
}
.nav-link:hover, .nav-link.active {
    background: rgba(102,126,234,.1);
    color: var(--primary) !important;
}
.icon-box {
    font-size: 20px;
    cursor: pointer;
    transition: .3s;
    color: #444;
    padding: 6px;
    border-radius: 50%;
}
.icon-box:hover {
    background: rgba(102,126,234,.1);
    color: var(--primary);
}
.icon-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--grad-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1.4;
}
.search-box {
    position: absolute;
    top: 60px;
    right: 0;
    width: 280px;
    background: #fff;
    padding: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    border-radius: var(--radius-md);
    border: 1px solid rgba(102,126,234,.15);
}
.search-box input {
    border-radius: var(--radius-pill);
}

/* ---- Hero Slider ---- */
.hero-slider {
    position: relative;
    height: 85vh;
    min-height: 600px;
    overflow: hidden;
}
.hero-slide {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.badge-wrapper { display: inline-block; }
.trending-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: white;
    border: 1px solid rgba(255,255,255,.3);
    animation: pulse 2s infinite;
}
.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,.1);
    line-height: 1.2;
    animation: slideInUp .8s ease-out;
}
.hero-description {
    font-size: 1.1rem;
    max-width: 90%;
    animation: slideInUp .8s ease-out .2s both;
}
.cta-buttons { animation: slideInUp .8s ease-out .4s both; }
.image-wrapper {
    position: relative;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}
.hero-image {
    max-height: 450px;
    width: auto;
    filter: drop-shadow(20px 20px 40px rgba(0,0,0,.2));
    transition: all .3s ease;
}
.hero-image:hover { transform: scale(1.05); }
.discount-badge {
    position: absolute;
    top: -20px;
    right: 20px;
    background: var(--grad-orange);
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: bold;
    font-size: 18px;
    animation: bounce 2s infinite;
    z-index: 10;
}
.floating-element {
    position: absolute;
    font-size: 24px;
    color: rgba(255,255,255,.3);
    animation: float 4s ease-in-out infinite;
}
.element-1 { top: 10%; left: 5%; animation-delay: 0s; }
.element-2 { bottom: 20%; right: 10%; animation-delay: 1s; }
.element-3 { top: 30%; right: 20%; animation-delay: 2s; }
.stats { border-top: 1px solid rgba(255,255,255,.2); }
.stat-item h3 { font-size: 1.8rem; font-weight: bold; }
.shape-divider {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}
.shape-fill { fill: #f8f9ff; }

/* Swiper customisation */
.swiper-button-next,
.swiper-button-prev {
    color: white;
    background: rgba(255,255,255,.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all .3s;
    backdrop-filter: blur(8px);
}
.swiper-button-next:after,
.swiper-button-prev:after { font-size: 18px; }
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(255,255,255,.35);
    transform: scale(1.1);
}
.swiper-pagination-bullet {
    background: white;
    opacity: .5;
}
.swiper-pagination-bullet-active {
    background: white;
    opacity: 1;
    width: 30px;
    border-radius: 10px;
    transition: width .3s;
}

/* ---- Page Hero (non-slider pages) ---- */
.page-hero {
    background: var(--grad-1);
    padding: 50px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    color: white;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}
.page-hero h1 { font-weight: 800; font-size: 2.8rem; animation: slideInUp .8s ease-out; }
.page-hero p { font-size: 1.1rem; opacity: .85; animation: slideInUp .8s ease-out .2s both; }
.page-hero .shape-divider .shape-fill { fill: #f8f9ff; }

/* Page breadcrumb bar (below hero) */
.page-breadcrumb-bar {
    background: #f8f9ff;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
}

/* ---- Product Cards ---- */
.product-card {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
    overflow: hidden;
    position: relative;
    background: white;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .4s ease;
}
.product-card:hover img { transform: scale(1.06); }
.product-card .card-body { padding: 16px; }
.product-card h6 {
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
    font-size: .9rem;
}
.product-price {
    background: var(--grad-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 1rem;
}
.product-card .btn-sm {
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    font-size: .8rem;
    font-weight: 600;
}
.wish-btn {
    position: absolute;
    top: 10px; right: 10px;
    background: white;
    border-radius: 50%;
    padding: 6px 8px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.addedwish {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* ---- Category Filter ---- */
.category-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.category-filter span {
    cursor: pointer;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: .9rem;
    background: white;
    color: #555;
    border: 2px solid #e9ecef;
    transition: all .25s;
}
.category-filter span:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.category-filter .active {
    background: var(--grad-1);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 15px rgba(102,126,234,.4);
}

/* Section title */
.section-title {
    font-size: 1.9rem;
    font-weight: 800;
    background: var(--grad-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
}
.section-subtitle {
    color: #888;
    font-size: .95rem;
}

/* ---- Buttons ---- */
.btn-primary {
    background: var(--grad-1);
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 10px 28px;
    transition: all .3s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102,126,234,.45);
    background: var(--grad-1);
    filter: brightness(1.08);
}
.btn-outline-light {
    border-radius: var(--radius-pill);
    padding: 10px 28px;
    font-weight: 600;
    transition: all .3s;
}
.btn-outline-light:hover {
    transform: translateY(-2px);
    background: white;
    color: var(--primary);
}
.btn-dark {
    border-radius: var(--radius-pill);
    font-weight: 600;
    background: var(--dark);
    border-color: var(--dark);
    transition: all .3s;
}
.btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26,26,46,.35);
}

/* ---- Cards (generic) ---- */
.card {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.card-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-weight: 600;
}

/* ---- Pagination ---- */
.pagination { gap: 6px; }
.pagination .page-link {
    border-radius: var(--radius-sm) !important;
    border: none;
    padding: 8px 15px;
    color: #555;
    background: white;
    box-shadow: var(--shadow-sm);
    font-weight: 500;
    transition: .3s;
}
.pagination .page-link:hover {
    background: var(--grad-1);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102,126,234,.3);
}
.pagination .active .page-link {
    background: var(--grad-1);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(102,126,234,.35);
}
.pagination .disabled .page-link {
    background: #f0f0f0;
    color: #aaa;
}
.text-muted.sr-only, span.text-muted { display: none; }

/* ---- Loader overlay ---- */
.section-loader {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-md);
}
.spinner-border.text-primary { color: var(--primary) !important; }

/* ---- Feature/Icon boxes ---- */
.feature-card {
    border-radius: var(--radius-md);
    padding: 30px 20px;
    text-align: center;
    background: white;
    box-shadow: var(--shadow-sm);
    transition: all .35s;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.feature-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--grad-1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
    box-shadow: 0 8px 20px rgba(102,126,234,.3);
}

/* ---- Stats bar ---- */
.stats-bar {
    background: var(--grad-1);
    padding: 50px 0;
}
.stats-bar .stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
}
.stats-bar .stat-label {
    color: rgba(255,255,255,.8);
    font-size: .9rem;
    font-weight: 500;
}

/* ---- CTA section ---- */
.cta-section {
    background: var(--dark);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(102,126,234,.15);
    top: -100px; right: -100px;
}
.cta-section::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(118,75,162,.15);
    bottom: -80px; left: -80px;
}

/* ---- Footer ---- */
footer {
    background: var(--dark);
    color: #bbb;
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-1);
}
footer ul{
    padding: 0px;
}
footer h5 {
    color: white;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 16px;
}
footer ul li { margin-bottom: 8px; }
footer a {
    color: #999;
    text-decoration: none;
    font-size: .9rem;
    transition: .3s;
}
footer a:hover { color: #fff !important; padding-left: 4px; }
.footer-brand {
    font-size: 1.6rem;
    font-weight: 800;
    background: var(--grad-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #ccc !important;
    font-size: 16px;
    margin-right: 8px;
    transition: all .3s;
}
.footer-social a:hover {
    background: var(--grad-1);
    color: white !important;
    transform: translateY(-3px);
    padding-left: 0 !important;
}
footer hr { border-color: rgba(255,255,255,.08); }
footer .copyright {
    font-size: .85rem;
    color: #666;
}

/* ---- Tables ---- */
.table thead th {
    background: linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.08));
    font-weight: 600;
    color: #444;
    border: none;
    padding: 14px 16px;
}
.table td { padding: 14px 16px; vertical-align: middle; border-color: #f0f0f0; }
.table tbody tr:hover { background: rgba(102,126,234,.03); }

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 2px solid #e9ecef;
    padding: 10px 14px;
    font-size: .9rem;
    transition: border-color .3s;
}
.form-label { font-weight: 600; color: #444; font-size: .9rem; }
.input-group-text {
    background: rgba(102,126,234,.08);
    border: 2px solid #e9ecef;
    border-right: none;
    color: var(--primary);
}

/* Search button — rounded on the trailing side, flat on the leading side */
.search-btn {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
}

/* ---- Badges ---- */
.badge {
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-weight: 600;
}

/* ---- Tabs ---- */
.nav-tabs .nav-link {
    border: none;
    border-radius: var(--radius-pill) !important;
    color: #666;
    padding: 8px 20px;
    font-weight: 500;
    margin-right: 4px;
}
.nav-tabs .nav-link.active {
    background: var(--grad-1);
    color: white !important;
    box-shadow: 0 4px 15px rgba(102,126,234,.35);
}
.nav-tabs { border-bottom: none; gap: 4px; flex-wrap: wrap; }
.tab-content { border: none !important; }
.tab-content.p-3.border.border-top-0 {
    border: none !important;
    padding: 20px 0 !important;
}

/* ---- FAQ ---- */
.faq-item {
    border-bottom: 1px solid #eee;
    padding: 18px 0;
    transition: .3s;
}
.faq-item h6 { font-weight: 700; color: #333; margin-bottom: 6px; }

/* ---- Breadcrumb ---- */
.breadcrumb-item a { color: var(--primary); text-decoration: none; }
.breadcrumb-item.active { color: #888; }
.breadcrumb-item + .breadcrumb-item::before { color: #aaa; }

/* ---- Step boxes (Help page) ---- */
.step-box {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all .35s;
    height: 100%;
    background: white;
}
.step-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grad-1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 auto 12px;
    box-shadow: 0 6px 18px rgba(102,126,234,.35);
}

/* ---- Animations ---- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-20px); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .hero-slider { height: auto; min-height: 500px; }
    .hero-title { font-size: 2.5rem; }
    .hero-image { max-height: 300px; margin-top: 30px; }
    .hero-description { max-width: 100%; }
    .shape-divider svg { height: 40px; }
    .page-hero h1 { font-size: 2.2rem; }
}
@media (max-width: 768px) {
    .hero-slider { min-height: 400px; }
    .hero-title { font-size: 2rem; }
    .cta-buttons .btn { padding: 8px 20px; font-size: 14px; }
    .stat-item h3 { font-size: 1.3rem; }
    .discount-badge { font-size: 12px; padding: 5px 12px; }
    .page-hero { padding: 60px 0 80px; }
    .page-hero h1 { font-size: 1.8rem; }
    .stats-bar .stat-number { font-size: 1.6rem; }
}

/* ================================================
   RTL — Arabic Layout Overrides (Bootstrap 5 LTR build)
   Bootstrap's standard CSS uses physical margin-left/right for ms-N/me-N
   and physical padding-left/right for ps-N/pe-N. These don't auto-flip
   with dir="rtl", so we override every size explicitly.
   ================================================ */

[dir="rtl"] {
    font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
}

/* ---- Margin-start (ms-*): LTR = margin-left  →  RTL = margin-right ---- */
[dir="rtl"] .ms-0    { margin-left: 0       !important; margin-right: 0       !important; }
[dir="rtl"] .ms-1    { margin-left: 0       !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2    { margin-left: 0       !important; margin-right: 0.5rem  !important; }
[dir="rtl"] .ms-3    { margin-left: 0       !important; margin-right: 1rem    !important; }
[dir="rtl"] .ms-4    { margin-left: 0       !important; margin-right: 1.5rem  !important; }
[dir="rtl"] .ms-5    { margin-left: 0       !important; margin-right: 3rem    !important; }
[dir="rtl"] .ms-auto { margin-left: 0       !important; margin-right: auto    !important; }

/* ---- Margin-end (me-*): LTR = margin-right  →  RTL = margin-left ---- */
[dir="rtl"] .me-0    { margin-right: 0       !important; margin-left: 0       !important; }
[dir="rtl"] .me-1    { margin-right: 0       !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2    { margin-right: 0       !important; margin-left: 0.5rem  !important; }
[dir="rtl"] .me-3    { margin-right: 0       !important; margin-left: 1rem    !important; }
[dir="rtl"] .me-4    { margin-right: 0       !important; margin-left: 1.5rem  !important; }
[dir="rtl"] .me-5    { margin-right: 0       !important; margin-left: 3rem    !important; }
[dir="rtl"] .me-auto { margin-right: 0       !important; margin-left: auto    !important; }

/* ---- Padding-start (ps-*): LTR = padding-left  →  RTL = padding-right ---- */
[dir="rtl"] .ps-0 { padding-left: 0       !important; padding-right: 0       !important; }
[dir="rtl"] .ps-1 { padding-left: 0       !important; padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0       !important; padding-right: 0.5rem  !important; }
[dir="rtl"] .ps-3 { padding-left: 0       !important; padding-right: 1rem    !important; }
[dir="rtl"] .ps-4 { padding-left: 0       !important; padding-right: 1.5rem  !important; }
[dir="rtl"] .ps-5 { padding-left: 0       !important; padding-right: 3rem    !important; }

/* ---- Padding-end (pe-*): LTR = padding-right  →  RTL = padding-left ---- */
[dir="rtl"] .pe-0 { padding-right: 0       !important; padding-left: 0       !important; }
[dir="rtl"] .pe-1 { padding-right: 0       !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0       !important; padding-left: 0.5rem  !important; }
[dir="rtl"] .pe-3 { padding-right: 0       !important; padding-left: 1rem    !important; }
[dir="rtl"] .pe-4 { padding-right: 0       !important; padding-left: 1.5rem  !important; }
[dir="rtl"] .pe-5 { padding-right: 0       !important; padding-left: 3rem    !important; }

/* ---- Text alignment — all breakpoint variants ---- */
[dir="rtl"] .text-start,
[dir="rtl"] .text-sm-start,
[dir="rtl"] .text-md-start,
[dir="rtl"] .text-lg-start,
[dir="rtl"] .text-xl-start  { text-align: right !important; }

[dir="rtl"] .text-end,
[dir="rtl"] .text-sm-end,
[dir="rtl"] .text-md-end,
[dir="rtl"] .text-lg-end,
[dir="rtl"] .text-xl-end    { text-align: left  !important; }

/* ---- Float utilities ---- */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }

/* ---- Border radius ---- */
[dir="rtl"] .rounded-start {
    border-top-right-radius:    var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
    border-top-left-radius:     0 !important;
    border-bottom-left-radius:  0 !important;
}
[dir="rtl"] .rounded-end {
    border-top-left-radius:     var(--bs-border-radius, 0.375rem) !important;
    border-bottom-left-radius:  var(--bs-border-radius, 0.375rem) !important;
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ---- Border-start / border-end ---- */
[dir="rtl"] .border-start {
    border-right: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color, #dee2e6) !important;
    border-left: 0 !important;
}
[dir="rtl"] .border-end {
    border-left: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color, #dee2e6) !important;
    border-right: 0 !important;
}

/* ---- Search box icon position ---- */
[dir="rtl"] .search-box {
    right: auto;
    left: 0;
}

/* ---- Value cards with inline left-border: flip to right ---- */
[dir="rtl"] .card[style*="border-left"] {
    border-left: none !important;
    border-right: 4px solid;
}
[dir="rtl"] .card[style*="border-left:4px solid #667eea"] { border-right-color: #667eea !important; }
[dir="rtl"] .card[style*="border-left:4px solid #f5576c"] { border-right-color: #f5576c !important; }
[dir="rtl"] .card[style*="border-left:4px solid #4facfe"] { border-right-color: #4facfe !important; }

/* ---- Breadcrumb separator ---- */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    float: right;
    padding-right: var(--bs-breadcrumb-item-padding-x, 0.5rem);
    padding-left: var(--bs-breadcrumb-item-padding-x, 0.5rem);
}

/* ---- Navbar ---- */
[dir="rtl"] .navbar-collapse .navbar-nav {
    text-align: right;
}

/* ---- Hero section flex alignment ---- */
[dir="rtl"] .justify-content-lg-start { justify-content: flex-end !important; }

/* ---- Directional icons: mirror arrows for RTL reading ---- */
[dir="rtl"] .bi-arrow-right-short,
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-arrow-left-short {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---- Input group: flip borders for RTL ---- */
[dir="rtl"] .input-group-text {
    border-right: 2px solid #e9ecef;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[dir="rtl"] .input-group .form-control {
    border-left: 2px solid #e9ecef;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---- Search button: rounded leading edge in RTL ---- */
[dir="rtl"] .search-btn {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
}

/* ---- Footer: flip hover padding and social margin ---- */
[dir="rtl"] footer a:hover { padding-left: 0 !important; padding-right: 4px; }
[dir="rtl"] .footer-social a { margin-right: 0; margin-left: 8px; }