/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

[lang="ar"] body {
    font-family: 'Cairo', sans-serif;
}

html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* ==========================================================================
   Sports Ticker
   ========================================================================== */
.sports-ticker {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 8px 0;
    overflow: hidden;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Above site-header */
    direction: ltr;
    /* Ticker should always be LTR for animation consistency */
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: ticker 60s linear infinite;
    position: relative;
    left: 0;
    /* For animation start */
}

.ticker-content span {
    padding: 0 2rem;
    font-size: 0.9rem;
    display: inline-block;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* ==========================================================================
   Site Header
   ========================================================================== */
.site-header {
    padding: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    position: sticky;
    top: 36px;
    /* Height of the ticker */
    z-index: 1020;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    min-height: 90px;
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 0;
}

.header-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-right: 2rem;
    /* For LTR desktop */
}

.header-brand img {
    height: 40px;
    width: auto;
    vertical-align: middle;
    margin-right: 0.5rem;
    /* For LTR */
    filter: invert(var(--logo-invert));
    /* JS controlled variable for dark/light theme logo */
}

html[dir="rtl"] .header-brand img {
    margin-left: 0.5rem;
    margin-right: 0;
}

.header-brand span {
    /* Site name text if any */
    vertical-align: middle;
    font-weight: bold;
}

.main-navigation {
    /* Desktop navigation */
    flex-grow: 1;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

.navbar-nav .nav-link.active {
    font-weight: bold;
    color: var(--bs-primary);
}

.header-controls {
    display: flex;
    align-items: center;
    margin-left: 2rem;
    /* For LTR desktop */
}

html[dir="rtl"] .header-brand {
    margin-left: 2rem;
    margin-right: 0;
}

html[dir="rtl"] .header-controls {
    margin-left: 0;
    margin-right: 2rem;
    /* For RTL desktop */
}

/* --- Header Responsive (Tablets and Mobile) --- */
@media (max-width: 1199.98px) {
    .header-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .header-brand {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0.75rem;
    }

    .header-controls {
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        /* Centers items like lang switcher and toggler */
    }

    /* RTL specific gap for controls if margin on btn-group is not enough or for other items */
    /* The existing html[dir="rtl"] .header-controls { gap: 0.5rem; } can be kept if preferred over margins */
    /* Or rely on Bootstrap's me-2/ms-2 classes on child elements of .header-controls if present in HTML */

    .main-navigation {
        /* Desktop nav hidden, mobile nav is in offcanvas */
        order: 3;
        /* If it were part of flex column layout, but it's usually hidden entirely */
        width: 100%;
        margin-top: 1rem;
        /* Likely not visible due to d-none d-xl-flex */
    }

    .header-controls .btn-theme {
        /* Theme toggle button in header */
        display: none !important;
        /* Ensure it's hidden as per original intent; Bootstrap d-xl-inline-block hides it too */
    }
}

/* --- Offcanvas Mobile Menu --- */
.offcanvas .main-navigation .navbar-nav {
    /* Styles for nav links inside mobile offcanvas */
    flex-direction: column;
}

.offcanvas .main-navigation .nav-link {
    padding: 0.75rem 1rem;
    text-align: left;
}

html[dir="rtl"] .offcanvas .main-navigation .nav-link {
    text-align: right;
}

.offcanvas-body {
    /* Ensure offcanvas body allows button at bottom */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ==========================================================================
   Main Content & Page Structure
   ========================================================================== */
main {
    min-height: 60vh;
    /* Ensure main has some height */
}

main>.page-content {
    display: none;
    /* Hide all pages by default */
    animation: fadeIn 0.5s ease-in-out;
}

main>.page-content.active-page {
    display: block;
    /* Show the active page */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Generic Image Block Styling (used by cards, carousel, etc.) --- */
.event-card img,
.graphic-block img,
.carousel-item img,
/* Base styling for carousel images, overridden by specifics below */
.employee-photo img {
    display: block;
    width: 100%;
    height: 200px;
    /* Default height, often overridden */
    object-fit: cover;
    object-position: center;
    border-radius: .25rem;
    background-color: var(--bs-secondary-bg);
    /* Placeholder background */
    color: var(--bs-body-color);
    /* For alt text if image fails */
}

/* --- Carousel --- */
.carousel-item {
    position: relative;
    height: 600px;
    /* Default desktop height */
    background-color: #000;
    /* Background for letterboxing under overlay */
}

.carousel-item::before {
    /* Dark overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.carousel-item img {
    /* Specifics for carousel images */
    height: 100%;
    /* Fill the .carousel-item height */
    object-fit: cover;
    /* Default, overridden for tablet/mobile */
    border-radius: 0;
    /* Override generic image style */
    position: relative;
    /* Ensures it's under the overlay and text */
}

.carousel-main-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: white;
    font-size: 3rem;
    /* Desktop font size */
    font-weight: bold;
    text-align: center;
    width: 80%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.carousel-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 15%;
    right: 15%;
    padding: 1rem;
    color: #ffffff !important;
    /* Original uses !important, preserving */
    border-radius: 0.25rem;
    z-index: 2;
}

.carousel-caption h5,
.carousel-caption p {
    color: #ffffff !important;
    /* Original uses !important */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: brightness(0) invert(1) !important;
    /* Ensure visibility on varied backgrounds */
}

/* No theme-specific override needed if always inverted */
/* [data-bs-theme="dark"] .carousel-control-prev-icon,
[data-bs-theme="dark"] .carousel-control-next-icon {
    filter: brightness(0) invert(1) !important;
} */

.carousel-indicators [data-bs-target] {
    background-color: #ffffff !important;
    opacity: 0.5;
}

.carousel-indicators .active {
    opacity: 1;
}

/* --- Carousel Responsive (Tablet) --- */
@media (max-width: 991.98px) {
    .carousel-item {
        /* Includes .carousel-item img due to height: 100% on img */
        height: 450px;
    }

    .carousel-item img {
        object-fit: cover;
        /* Changed from 'contain' to 'cover' from latest user feedback style file. Retaining 'cover'. */
    }

    .carousel-main-title {
        font-size: 2.0rem;
        line-height: 1.3;
        width: 80%;
        /* Retained from original tablet suggestion */
    }

    .carousel-caption {
        bottom: 20px;
        padding: 0.75rem;
    }

    .carousel-caption h5 {
        font-size: 1.1rem;
        margin-bottom: 0.3rem;
    }

    .carousel-caption p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}

/* --- Carousel Responsive (Mobile) --- */
@media (max-width: 767.98px) {
    .carousel-item {
        height: 50vh;
        /* As per latest active style */
        background-color: #000;
    }

    .carousel-item img {
        /* width: 100%; height: 100%; are defaults from .carousel-item img now */
        object-fit: cover;
        /* As per latest active style */
        object-position: center;
    }

    .carousel-main-title {
        font-size: 1.4rem;
        /* As per latest active style */
        line-height: 1.3;
        width: 85%;
    }

    .carousel-caption {
        bottom: 15px;
        /* As per latest active style */
        padding: 0.5rem;
        width: 90%;
        left: 5%;
        right: 5%;
    }

    .carousel-caption h5 {
        font-size: 0.9rem;
        /* As per latest active style */
        margin-bottom: 0.2rem;
    }

    .carousel-caption p {
        font-size: 0.75rem;
        /* As per latest active style */
        line-height: 1.2;
    }
}

/* --- Employee Photos (specifics if any beyond the generic rule) --- */
.employee-photo img {
    height: 150px;
    /* Overrides generic 200px */
    width: 150px;
    /* Make it circular */
    border-radius: 50%;
    margin: 0 auto 0.5rem auto;
    /* Centering and bottom margin */
    background-color: var(--bs-tertiary-bg);
    /* Different bg for employee photos */
}

/* --- Testimonial Cards --- */
.testimonial-card {
    border-left: 5px solid var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
}

.testimonial-card .blockquote-footer {
    background: transparent;
    /* Bootstrap default might have a background */
    padding: 0;
    margin-top: 1rem;
}

/* --- CTA (Call to Action) Sections --- */
.cta-section {
    background-color: var(--bs-primary);
    color: white;
    padding: 4rem 0;
}

.cta-section h2 {
    font-weight: bold;
}

/* --- Pricing Cards --- */
.pricing-card {
    border: none;
    position: relative;
    background: white;
    /* Ensure background is white for gradient border to work */
}

.pricing-card::before {
    /* Gradient border effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.375rem;
    padding: 2px;
    /* Thickness of the border */
    background: linear-gradient(to right, #343a40, #6c757d);
    /* Default border gradient */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    /* So content below is clickable */
}

.pricing-card.popular::before {
    background: linear-gradient(to right, #343a40, #ffd700);
    /* Gold border for popular */
}

.pricing-card.platinum::before {
    background: linear-gradient(to right, #343a40, #000000);
    /* Black/dark border for platinum */
}

.pricing-card .card-header {
    background: linear-gradient(to right, #343a40, #6c757d);
    /* Default header gradient */
    color: white;
    border: none;
    border-radius: 0.375rem 0.375rem 0 0;
    /* Match card rounding */
}

.pricing-card.popular .card-header {
    background: linear-gradient(to right, #343a40, #ffd700);
    position: relative;
    /* For badge positioning */
}

.pricing-card.platinum .card-header {
    background: linear-gradient(to right, #343a40, #000000);
}

.pricing-card .card-header h4 {
    font-weight: normal;
    /* Or customize as needed */
}

.pricing-card .card-body {
    position: relative;
    /* Ensure content is above ::before pseudo-element if z-index issues */
    z-index: 1;
    color: #000000 !important;
    /* Force black text color on white background */
}

.pricing-card ul {
    /* Assuming ul is inside card-body */
    list-style: none;
    padding-left: 0;
    /* Reset default padding */
}

.pricing-card ul li {
    color: #000000 !important;
    /* Force black text color */
}

.pricing-card ul li::before {
    content: "✅";
    margin-right: 0.5em;
    /* LTR */
    /* margin-left: 0; Removed as it's default */
    display: inline-block;
    /* For proper alignment */
    vertical-align: middle;
}

html[dir="rtl"] .pricing-card ul li::before {
    margin-left: 0.5em;
    /* RTL */
    margin-right: 0;
}

.pricing-card.popular {
    /* Popular card stands out */
    transform: scale(1.05);
    z-index: 1;
    /* Ensure it's above other cards if they overlap due to transform */
}

.pricing-card.popular .popular-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(to right, #343a40, #ffd700);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Pricing Card Buttons (specific gradients) */
.pricing-card .btn-outline-primary {
    /* Silver package button */
    background: linear-gradient(to right, #343a40, #6c757d);
    border: none;
    color: white;
}

.pricing-card .btn-outline-primary:hover {
    background: linear-gradient(to right, #495057, #868e96);
}

.pricing-card.popular .btn-primary {
    /* Gold package button */
    background: linear-gradient(to right, #343a40, #ffd700);
    border: none;
}

.pricing-card.popular .btn-primary:hover {
    background: linear-gradient(to right, #495057, #ffdf4d);
}

.pricing-card.platinum .btn-primary {
    /* Platinum package button */
    background: linear-gradient(to right, #343a40, #000000);
    border: none;
}

.pricing-card.platinum .btn-primary:hover {
    background: linear-gradient(to right, #495057, #1a1a1a);
}


/* --- Pricing Cards Responsive --- */
@media (max-width: 991.98px) {

    /* Tablet and smaller */
    .pricing-card {
        margin-bottom: 2rem;
        min-width: 0;
        /* Reset min-width if any */
        max-width: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        /* Add shadow if border is less prominent */
    }

    .pricing-card.popular {
        transform: none;
        /* Reset scale on tablet */
    }

    .pricing-card .card-header,
    .pricing-card .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
    }

    .pricing-card ul {
        text-align: start;
        /* Align list items left (or right in RTL) */
        margin-bottom: 1.5rem;
    }

    .pricing-card ul li {
        font-size: 1rem;
        word-break: break-word;
        /* Prevent long feature text from breaking layout */
    }

    .pricing-card .btn {
        width: 100%;
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }

    .pricing-card.popular .popular-badge {
        right: 10px;
        left: 10px;
        /* Center badge on smaller screens */
        top: -18px;
        font-size: 0.85rem;
        padding: 4px 10px;
        text-align: center;
    }
}

@media (max-width: 575.98px) {

    /* Mobile */
    .pricing-card {
        /* No specific changes, inherits from tablet or defaults */
        margin-left: 0;
        /* If any specific horizontal margin was there */
        margin-right: 0;
        border-radius: 0.5rem;
        /* Consistent rounding */
    }

    .pricing-card .card-header,
    .pricing-card .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 1rem;
        /* Adjust if needed */
    }

    .pricing-card ul li {
        font-size: 0.97rem;
    }

    .pricing-card .btn {
        font-size: 1rem;
        padding: 0.7rem 0.5rem;
    }
}

/* --- Modals (General) --- */
.modal-content {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
    position: relative;
    /* create a containing block for absolute positioning */
}

/* Style close button as circular badge outside the modal header */
.modal-header .btn-close {
    position: absolute;
    top: -0.75rem;
    /* pull it outside the modal header */
    right: -0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1;
    /* stay above modal */
    /* Keep default bootstrap icon */
    background-image: none;
    /* remove bootstrap svg */
    padding: 0;
    /* reset padding */
}

.modal-header .btn-close::before {
    content: "\00d7";
    /* multiplication sign */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-body-color);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

/* --- Chat Modal Specifics --- */
.chat-modal .modal-content {
    border-radius: 1rem;
    /* More rounded chat modal */
}

.chat-modal .modal-header {
    background: linear-gradient(to right, var(--bs-primary), var(--bs-primary-dark, #0056b3));
    color: white;
    border-radius: 1rem 1rem 0 0;
    /* Match content rounding */
}

.chat-modal .modal-header .btn-close {
    /* Ensure close button is visible on dark header */
    filter: none !important;
    /* prevent theme-based inversion so cross color stays */
}

.chat-modal .chat-input .form-control {
    border-radius: 1.5rem;
    /* Pill-shaped input */
    padding: 0.75rem 1.25rem;
}

.chat-modal .chat-input .btn {
    border-radius: 1.5rem;
    /* Pill-shaped button */
    padding: 0.75rem 1.25rem;
}

html[dir="rtl"] .chat-modal .input-group {
    /* Reverse order for RTL chat input */
    flex-direction: row-reverse;
}

/* --- Chat Messages & Sticky Icon --- */
.sticky-chat-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1030;
    background-color: var(--bs-primary);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

html[dir="rtl"] .sticky-chat-icon {
    right: auto;
    left: 20px;
}

.sticky-chat-icon:hover {
    transform: scale(1.1);
}

.message {
    display: flex;
    margin-bottom: 1rem;
}

.message.received {
    justify-content: flex-start;
}

.message.sent {
    justify-content: flex-end;
}

.message-content {
    word-wrap: break-word;
    /* Prevent long words from breaking layout */
    padding: 0.5rem 0.75rem;
    /* Consistent padding, can be adjusted */
    border-radius: 0.5rem;
    /* Consistent rounding */
}

.message.sent .message-content {
    background-color: var(--bs-primary) !important;
    /* From original, preserved important */
    color: white !important;
}

.message.received .message-content {
    background-color: var(--bs-tertiary-bg) !important;
    /* From original, preserved important */
    color: var(--bs-body-color) !important;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg);
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

/* ==========================================================================
   Buttons & Forms (General Overrides / Enhancements)
   ========================================================================== */
.btn {
    /* General button styling */
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    /* Assuming this uses Bootstrap variables correctly */
    background: linear-gradient(to right, var(--bs-primary), var(--bs-primary-dark, #0056b3));
    border: none;
    /* Remove default border if any */
}

.btn-primary:hover {
    background: linear-gradient(to right, var(--bs-primary-dark, #0056b3), var(--bs-primary));
    transform: translateY(-1px);
    /* Subtle hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-primary {
    border-width: 2px;
    /* Make outline more prominent if desired */
    /* color: var(--bs-primary); Already default */
}

.btn-outline-primary:hover {
    /* background: var(--bs-primary); color: white; Already default */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-lang,
.btn-theme {
    min-width: 40px;
    /* Ensure buttons don't get too small */
}

/* Language Switcher Group Styling */
.btn-group .btn-lang {
    /* Remove individual border radius for middle buttons */
    border-radius: 0;
}

.btn-group .btn-lang:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.btn-group .btn-lang:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* RTL specific border radius for language switcher */
html[dir="rtl"] .btn-group .btn-lang:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

html[dir="rtl"] .btn-group .btn-lang:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.btn-lang:hover,
/* Standardize hover/selected for lang buttons */
.btn-lang.selected {
    background-color: var(--bs-secondary);
    /* Using secondary, or bs-border-color if preferred */
    color: var(--bs-light);
    /* Ensure text is readable */
}

/* Was .btn-lang:hover { background-color: var(--bs-border-color); color: white; } */
/* Was .btn-lang.selected { background-color: var(--bs-border-color); color: white; } */


.form-control {
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease-in-out;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    /* Bootstrap focus shadow */
}

/* Ensure select text doesn't overlap caret */
.form-select {
    padding-inline-end: 2.5rem;
    /* space for arrow on end side */
}

.form-select {
    border-radius: 0.375rem;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    /* extra space on end side for caret */
    height: auto !important;
    min-height: calc(1.5em + 1.5rem + 1px);
    /* ensure same vertical size as padded .form-control */
}

html[dir="rtl"] .form-select {
    /* existing padding rule retained */
    text-align: left;
    direction: ltr;
}

[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-dark);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-light);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    background-color: var(--bs-dark);
    /* Using Bootstrap variable */
    color: #ffffff;
    padding: 3rem 0;
}

.footer-logo img {
    height: 30px;
    width: auto;
    margin-right: 10px;
    /* LTR */
    filter: invert(1);
    /* Make logo white on dark background */
}

html[dir="rtl"] .footer-logo img {
    margin-left: 10px;
    margin-right: 0;
}

.footer-logo span {
    /* If text is part of footer logo */
    color: #ffffff;
}

footer a {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    /* Ensure cursor indicates link */
}

footer a:hover {
    color: #e9ecef;
    /* Slightly lighter on hover */
    text-decoration: underline;
}

/* .footer a.nav-link-internal is covered by footer a */

footer h5 {
    /* Footer section titles */
    color: #ffffff;
    margin-bottom: 1rem;
}

footer ul {
    list-style: none;
    padding-left: 0;
}

footer .bottom-text {
    /* Copyright area */
    border-top: 1px solid var(--bs-gray-700);
    /* Using Bootstrap variable */
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

footer .bottom-text p {
    /* Text within copyright area */
    color: #ffffff;
    opacity: 0.8;
    /* Slightly muted */
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-dark);
    /* Bootstrap dark variable */
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .form-control {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color);
    color: var(--bs-light);
    /* Light text on dark background */
}

[data-bs-theme="dark"] .form-control:focus {
    /* Ensure focus style is visible */
    background-color: var(--bs-dark);
    /* Or slightly lighter dark shade */
    color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-close {
    /* For modals, offcanvas */
    filter: brightness(0) invert(1);
    /* Make default close button white */
}

[data-bs-theme="dark"] .message.received .message-content {
    background-color: var(--bs-dark) !important;
    /* Darker received messages */
    color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .chat-messages::-webkit-scrollbar-track {
    background: var(--bs-dark);
}

[data-bs-theme="dark"] .chat-messages::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    /* Or another contrast color */
}

/* [data-bs-theme="dark"] .chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary); // Keep primary for hover
} */

/* Dark theme overrides for circular close button */
[data-bs-theme="dark"] .modal-header .btn-close {
    filter: none !important;
    /* cancel global inversion */
    background-color: var(--bs-gray-800, #343a40) !important;
    border-color: var(--bs-gray-700, #454d55) !important;
}

[data-bs-theme="dark"] .modal-header .btn-close::before {
    color: var(--bs-light, #ffffff) !important;
}

/* Тёмная тема для информационного блока в попапе */
[data-bs-theme="dark"] .alert-info {
    background: linear-gradient(135deg, #23272f 0%, #2d223a 100%) !important;
    border-left: 4px solid #42a5f5 !important;
    color: #e3e3e3;
}

[data-bs-theme="dark"] .alert-info .alert-heading {
    color: #42a5f5 !important;
}

[data-bs-theme="dark"] .alert-info p {
    color: #cccccc !important;
}

/* ================= Cookie Policy Banner ================= */
.cookie-policy-banner {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1050;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    transition: transform 0.3s, opacity 0.3s;
    width: 100vw;
}

.cookie-policy-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 1rem;
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    border: none;
}

.cookie-policy-text {
    font-size: 1rem;
    color: var(--bs-body-color, #222);
    text-align: center;
    margin-bottom: 0.5rem;
    line-height: 1.6;
    word-break: break-word;
}

.cookie-policy-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0;
    align-items: center;
}

@media (min-width: 576px) {
    .cookie-policy-content {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: right;
        padding: 0.5rem 2rem;
    }

    .cookie-policy-text {
        margin-bottom: 0;
        margin-left: 1.5rem;
        margin-right: 0;
        text-align: right;
    }

    .cookie-policy-actions {
        width: auto;
        margin-top: 0;
        justify-content: flex-end;
    }

    .cookie-policy-actions .btn {
        font-size: 1rem;
        min-width: 110px;
    }
}

@media (max-width: 575.98px) {
    .cookie-policy-content {
        padding: 0.5rem 0.5rem;
    }

    .cookie-policy-text {
        font-size: 0.97rem;
    }

    .cookie-policy-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .cookie-policy-actions .btn {
        font-size: 0.97rem;
        min-width: 90px;
        padding-left: 0.7em;
        padding-right: 0.7em;
    }
}

[data-bs-theme="dark"] .cookie-policy-banner,
[data-bs-theme="dark"] .cookie-policy-content {
    background: #23272f !important;
    border-color: #343a40 !important;
}

[data-bs-theme="dark"] .cookie-policy-text {
    color: #e3e3e3 !important;
}

[data-bs-theme="dark"] .cookie-policy-actions .btn-outline-secondary {
    color: #fff;
    border-color: #888;
}

[data-bs-theme="dark"] .cookie-policy-actions .btn-outline-secondary:hover {
    background: #444;
    color: #fff;
}

.cookie-policy-banner.d-none {
    display: none !important;
}


/* ==========================================================================
   Miscellaneous & Utility
   ========================================================================== */
/* Toggler icon for light theme (Bootstrap 5.3 might handle this better by default) */
[data-bs-theme="light"] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-image: var(--bs-navbar-toggler-icon-bg);
}

/* Ensure text-start aligns right in RTL - this is a good utility */
html[dir="rtl"] .text-start {
    text-align: right !important;
}