/* styles.css - Final Theme Applied */
:root {
    /* ===== NEW FINAL COLOR PALETTE ===== */
    --primary-color: #003f5c;
    /* آبی نفتی */
    --secondary-color: #2f9e9e;
    /* سبز-آبی */
    --accent-color: #d7263d;
    /* قرمز */
    /* Derived Colors */
    --warm-red: var(--accent-color);
    --warm-orange: var(--secondary-color);
    --warm-yellow: #f1c40f;
    /* keeping a yellow for potential notices */
    --dark-color: #002a3d;
    /* A darker shade of primary */
    --dark-color-rgb: 0, 42, 61;
    /* For use in RGBA */
    --light-color: #f8f9fa;
    --white: #ffffff;
    --black: #000000;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --gray-light: #f1f1f1;
    /* Gradients */
    --gradient-warm: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-accent: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    --gradient-hover: linear-gradient(135deg, #002e44, #257e7e);
    /* Darker shades for hover */
    --gradient-instagram: linear-gradient(45deg, #003f5c 0%, #176a75 50%, #2f9e9e 100%);
    /* Shadows */
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.2);
    --shadow-creative: 0 20px 40px rgba(0, 63, 92, 0.3);
    /* Shadow based on primary color */
    /* Border Radius */
    --border-radius: 20px;
    --border-radius-small: 12px;
    /* Transitions */
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Border Colors */
    --border-light: rgba(0, 63, 92, 0.1);
    --border-medium: rgba(0, 63, 92, 0.2);
    --border-white-transparent: rgba(255, 255, 255, 0.2);
    /* New: Max width for container elements, for sticky ul centering */
    --container-max-width-sm: 540px;
    --container-max-width-md: 720px;
    --container-max-width-lg: 960px;
    --container-max-width-xl: 1140px;
    --container-max-width-xxl: 1320px;
    /* Opacity variables for hero section */
    --opacity-light: 0.1;
    --opacity-high: 0.7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--light-color);
    overflow-x: hidden;
}

/* ===== NAVIGATION ===== */
.navbar {
    background: var(--white);
    box-shadow: var(--shadow-light);
    transition: opacity 0.3s ease-in-out;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Make navbar sticky by default */
    position: sticky;
    top: 0;
    z-index: 1020;
    /* Default z-index for navbar */
    transform: translateY(0);
    /* Ensure it's visible by default */
    opacity: 1;
    /* Ensure it's visible by default */
    pointer-events: auto;
    /* Ensure it's interactive by default */
}

/* Hide the navbar when filter-tabs-section is active (i.e., sticky) */
body.filter-active .navbar {
    transform: translateY(-100%);
    /* Move it up out of view */
    opacity: 0;
    /* Fade it out */
    pointer-events: none;
    /* Disable interaction */
    z-index: 1010;
    /* Lower z-index so it definitely doesn't block the filter section */
}

.navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
}

    .navbar-brand:hover {
        transform: scale(1.05);
    }

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--dark-color) !important;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    position: relative;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--gradient-warm);
        transition: var(--transition);
        transform: translateX(-50%);
    }

    .nav-link:hover::after {
        width: 70%;
    }

    .nav-link:hover {
        color: var(--primary-color) !important;
        transform: translateY(-2px);
    }

.nav-login-btn,
.navbar .btn-outline-primary {
    font-size: 0.95rem;
    padding: 0.6rem 1.3rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.navbar .btn-outline-primary {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

    .navbar .btn-outline-primary:hover {
        background: rgba(0, 63, 92, 0.1);
        transform: translateY(-3px);
        box-shadow: var(--shadow-light);
    }

.nav-login-btn {
    background: var(--gradient-warm);
    border: none;
    box-shadow: var(--shadow-light);
    color: var(--white);
}

    .nav-login-btn:hover {
        box-shadow: var(--shadow-creative);
        transform: translateY(-3px);
    }

/* Hamburger Menu Animation */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 0.5rem;
    transition: var(--transition);
}

    .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }

.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    width: 24px;
    height: 2px;
    background: var(--primary-color);
    display: inline-block;
    transition: var(--transition);
}

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background: var(--primary-color);
        left: 0;
        transition: var(--transition);
    }

    .navbar-toggler-icon::before {
        top: -8px;
    }

    .navbar-toggler-icon::after {
        bottom: -8px;
    }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
}

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        bottom: 0;
        transform: rotate(-45deg);
    }

/* Mobile Menu Styling */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        border-radius: var(--border-radius);
        padding: 1.5rem;
        margin-top: 1rem;
        box-shadow: var(--shadow-medium);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--border-light);
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar-nav.d-flex {
        flex-direction: column !important;
        width: 100%;
        margin-top: 1rem;
    }

        .navbar-nav.d-flex .btn {
            margin: 0.5rem 0;
            width: 100%;
            text-align: center;
        }
}

/* ===== MAIN CONTENT AREA ===== */
.main-content {
    /* padding-top will be set by JS dynamically based on navbar/filter height */
    transition: padding-top 0.4s ease;
    /* Smooth transition for padding change */
}


/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    height: 50vh; /* <<<<<<< ارتفاع ثابت 50% صفحه نمایش */
    min-height: 400px; /* حداقل ارتفاع برای جلوگیری از بهم ریختگی در صفحات کوتاه */
    overflow: hidden;
    background: var(--white);
    padding: 1rem 0; /* کاهش پدینگ */
    margin-bottom: 3rem; /* افزایش فاصله با بخش بعدی */
    display: flex; /* <<<<<<< برای وسط‌چین کردن عمودی */
    align-items: center; /* <<<<<<< برای وسط‌چین کردن عمودی */
}

.hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45vh; /* <<<<<<< محدود کردن ارتفاع والد تصویر */
    min-height: 380px;
}

.hero-floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-warm);
    opacity: var(--opacity-light);
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 15%;
    animation-delay: 2s;
}

.shape-3 {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 20%;
    animation-delay: 4s;
}

@keyframes float {

    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.hero-main-image {
    width: 100%;
    height: 100%; /* <<<<<<< تصویر ارتفاع والد خود را می‌گیرد */
    object-fit: cover; /* <<<<<<< تصویر بدون دفورمه شدن فضا را پر می‌کند */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-creative);
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

    .hero-main-image:hover {
        transform: scale(1.05) rotate(2deg);
    }

/* Tonight Card - Compact Version */
.hero-tonight-card {
    position: relative;
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 1.25rem; /* <<<<<<< کاهش پدینگ داخلی */
    box-shadow: var(--shadow-heavy);
    border: 2px solid var(--border-light);
    width: 100%;
    max-width: 380px;
    z-index: 3;
    transition: var(--transition);
}

    .hero-tonight-card:hover {
        transform: translateY(-10px) scale(1.02); /* هاور ظریف‌تر */
        box-shadow: var(--shadow-creative);
    }

.tonight-header {
    margin-bottom: 1rem; /* کاهش فاصله */
    text-align: center;
}

.tonight-title {
    color: var(--primary-color);
    font-weight: 600;
    margin: 0;
    font-size: 1rem; /* کاهش فونت */
}

.tonight-artist {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* کاهش فاصله */
    padding-bottom: 0.75rem; /* کاهش پدینگ */
    border-bottom: 1px solid var(--border-light);
}

.artist-avatar-tonight {
    width: 55px; /* کاهش سایز آواتار */
    height: 55px; /* کاهش سایز آواتار */
    border-radius: 50%;
    overflow: hidden;
    margin-left: 1rem;
    border: 2px solid var(--primary-color); /* کاهش ضخامت */
}

    .artist-avatar-tonight img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.artist-info h5 {
    margin: 0;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 1.1rem; /* کاهش فونت */
}

.venue-name {
    margin: 0.25rem 0 0 0; /* کاهش فاصله */
    font-size: 0.8rem; /* کاهش فونت */
    color: var(--dark-color);
    opacity: var(--opacity-high);
}

.tonight-details {
    margin-bottom: 1rem; /* کاهش فاصله */
}

.time-location {
    display: flex;
    flex-direction: row;
    gap: 0.4rem; /* کاهش فاصله */
    margin-bottom: 0.75rem; /* کاهش فاصله */
}

.tonight-time,
.tonight-location {
    font-size: 0.85rem; /* کاهش فونت */
    color: var(--dark-color);
    font-weight: 500;
}

.ticket-status {
    padding: 0.4rem 0.8rem; /* کاهش پدینگ */
    border-radius: 20px;
    font-size: 0.75rem; /* کاهش فونت */
    font-weight: 600;
    display: inline-block;
}

    .ticket-status.available {
        background: rgba(40, 167, 69, 0.1);
        color: var(--success-color);
        border: 1px solid rgba(40, 167, 69, 0.2);
    }

    .ticket-status.limited {
        background: rgba(255, 193, 7, 0.1);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.2);
    }


.tonight-price {
    text-align: center;
    margin-bottom: 0.75rem; /* کاهش فاصله */
    padding: 0.75rem; /* کاهش پدینگ */
    background: rgba(0, 63, 92, 0.05);
    border-radius: var(--border-radius-small);
    display: flex;
    justify-content: space-between;
}

.price-label {
    display: block;
    font-size: 0.8rem; /* کاهش فونت */
    color: var(--dark-color);
    opacity: var(--opacity-high);
    margin-bottom: 0.15rem; /* کاهش فاصله */
}

.price-amount {
    display: block;
    font-size: 1rem; /* کاهش فونت */
    font-weight: 700;
    color: var(--primary-color);
}

.tonight-btn {
    background: var(--gradient-warm);
    border: none;
    border-radius: var(--border-radius-small);
    padding: 0.6rem; /* کاهش پدینگ */
    font-weight: 600;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    font-size: 0.9rem; /* کاهش فونت */
}

    .tonight-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--gradient-hover);
        transition: var(--transition);
        z-index: -1;
    }

    .tonight-btn:hover::before {
        left: 0;
    }

    .tonight-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }

/* Tonight Controls - Only under tonight card */
.tonight-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem; /* کاهش فاصله */
}

.tonight-control-btn {
    background: var(--white);
    border: 2px solid var(--border-medium);
    color: var(--primary-color);
    width: 35px; /* کاهش سایز دکمه */
    height: 35px; /* کاهش سایز دکمه */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem; /* کاهش فونت آیکن */
}

    .tonight-control-btn:hover {
        background: var(--gradient-warm);
        color: var(--white);
        transform: scale(1.1);
        box-shadow: var(--shadow-medium);
    }


/* Adjustments for smaller screens */
@media (max-width: 991.98px) {
    .hero-section {
        height: auto; /* <<<<<<< حذف ارتفاع ثابت در موبایل */
        min-height: auto; /* حذف حداقل ارتفاع */
        padding: 3rem 0; /* تنظیم پدینگ مناسب موبایل */
    }

    .hero-image-wrapper, .hero-main-image {
        height: auto; /* ارتفاع تصویر به حالت خودکار برمی‌گردد */
        min-height: unset;
    }

    .hero-tonight-card {
        margin-top: 2rem; /* فاصله مناسب در حالت زیر هم */
        max-width: 400px; /* تنظیم عرض کارت */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 2rem;
    }
}


/* ===== FILTER TABS ===== */
.filter-tabs-section {
    margin-bottom: 2rem;
    /* Default margin */
    z-index: 1010;
    /* Default z-index for normal flow, below navbar */
    background-color: transparent;
    /* Section itself remains transparent */
    box-shadow: none;
    /* Section itself has no shadow */
    transition: var(--transition);
    /* Smooth transition for properties */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .filter-tabs-section.is-sticky {
        /* This class is added by JS, but 'position: fixed' is applied via body.filter-active */
        /* This class primarily helps in applying styles to child elements if needed */
    }

/* When body has 'filter-active' class, filter-tabs-section becomes fixed */
body.filter-active .filter-tabs-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    /* Higher than navbar, so it covers it */
    background-color: transparent;
    /* Section itself remains transparent */
    box-shadow: none;
    /* Section itself has no shadow */
    padding: 1rem 0;
    /* Vertical padding for the floating ul */
}

.filter-tabs-section .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    /*transition: var(--transition);*/
    /* For background/shadow changes */
    /* Default styles for nav-pills (when filter-tabs-section is NOT sticky) */
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-light);
    padding: 1rem;
}

/* Styles for nav-pills when its parent section is sticky */
body.filter-active .filter-tabs-section .nav-pills {
    background-color: var(--white);
    /* Apply white background to ul */
    box-shadow: var(--shadow-medium);
    /* Apply shadow to ul */
    border: 1px solid var(--border-light);
    /* Apply border to ul */
    border-radius: var(--border-radius);
    /* Apply border-radius to ul */
    padding: 1rem;
    /* Internal padding for the pills within the ul */
    margin-left: auto;
    /* Center the ul horizontally */
    margin-right: auto;
    /* Max width for centering, mimicking Bootstrap's container */
    max-width: var(--container-max-width-xl);
    /* Adjust as needed for your layout */
}

@media (max-width: 1200px) {
    body.filter-active .filter-tabs-section .nav-pills {
        max-width: var(--container-max-width-lg);
    }
}

@media (max-width: 992px) {
    body.filter-active .filter-tabs-section .nav-pills {
        max-width: var(--container-max-width-md);
    }
}

@media (max-width: 768px) {
    body.filter-active .filter-tabs-section .nav-pills {
        max-width: var(--container-max-width-sm);
    }
}

@media (max-width: 576px) {
    body.filter-active .filter-tabs-section .nav-pills {
        max-width: calc(100% - 2rem);
        /* Full width with 1rem side padding */
        margin: 0 1rem;
        /* Adjust margin for smaller screens */
    }
}


.filter-tabs-section .nav-pills .nav-link {
    background: var(--white);
    color: var(--dark-color);
    margin: 0 5px;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: var(--transition);
    border: 1px solid var(--border-light);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

    .filter-tabs-section .nav-pills .nav-link:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-medium);
        color: var(--primary-color);
    }

    .filter-tabs-section .nav-pills .nav-link.active {
        background: var(--gradient-warm);
        color: var(--white) !important;
        box-shadow: var(--shadow-creative);
    }



/* ===== EVENTS LIST SECTION ===== */
.events-list-section {
    position: relative;
    /* pt-5 (padding-top: 3rem) already provides good spacing */
}

.event-group-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-light);
    position: relative;
    color: var(--dark-color);
}

    .event-group-title::after {
        content: '';
        position: absolute;
        bottom: -2px;
        right: 0;
        width: 80px;
        height: 2px;
        background: var(--gradient-warm);
    }

.events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 576px) {
    .events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .events-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.event-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .event-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-creative);
    }

    .event-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-warm);
        transform: scaleX(0);
        transition: var(--transition);
        z-index: 1;
    }

    .event-card:hover::before {
        transform: scaleX(1);
    }

.event-card-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

    .event-card-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

.event-card:hover .event-card-image img {
    transform: scale(1.1) rotate(2deg);
}

.event-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--dark-color-rgb), 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
    flex-direction: column;
    /* Allow content to stack */
    padding: 1rem;
    text-align: center;
}

.event-card:hover .event-card-overlay {
    opacity: 1;
}

.event-card-button {
    background: var(--gradient-warm);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-medium);
    transform: translateY(20px);
    opacity: 0;
    display: block;
    /* Ensure button takes full width if needed */
    width: fit-content;
    margin: auto;
    /* Center button */
}

.event-card:hover .event-card-button {
    transform: translateY(0);
    opacity: 1;
}

.event-card-button:hover {
    transform: scale(1.1) !important;
    box-shadow: var(--shadow-heavy);
}

.event-card-info {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.event-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
    transition: var(--transition);
}

.event-card:hover .event-card-title {
    color: var(--primary-color);
}

.event-card-venue,
.event-card-date {
    color: var(--dark-color);
    opacity: 0.8;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

    .event-card-venue i,
    .event-card-date i {
        color: var(--primary-color);
        margin-left: 0.5rem;
        transition: var(--transition);
    }

/* Countdown specific styles for overlay */
.countdown-message {
    color: var(--white);
    text-align: center;
    transform: translateY(20px);
    opacity: 0;
    transition: var(--transition);
}

.event-card:hover .countdown-message {
    transform: translateY(0);
    opacity: 1;
}

.countdown-text {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.countdown-timer {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    line-height: 1.3;
}

    .countdown-timer span {
        font-size: 1.5rem;
        /* Larger numbers */
        font-weight: 900;
        color: var(--warm-yellow);
        /* Highlight numbers */
        margin: 0 0.2rem;
        display: inline-block;
        /* Keep spans inline */
    }

/* Styles for sold-out message in overlay */
.sold-out-message {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    opacity: 0;
    transition: var(--transition);
}

.event-card:hover .sold-out-message {
    transform: translateY(0);
    opacity: 1;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--dark-color);
    color: var(--light-color);
    position: relative;
}

    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-warm);
    }

.footer-section {
    margin-bottom: 1.5rem;
}

.footer-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: 1.1rem;
    position: relative;
    display: inline-block;
}

    .footer-title::after {
        content: '';
        position: absolute;
        bottom: -5px;
        right: 0;
        width: 30px;
        height: 2px;
        background: var(--gradient-warm);
    }

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

    .footer-links li {
        margin-bottom: 0.8rem;
    }

    .footer-links a {
        color: var(--light-color);
        text-decoration: none;
        transition: var(--transition);
        font-size: 0.9rem;
        position: relative;
        display: inline-block;
    }


        .footer-links a:hover {
            color: var(--light-color);
            padding-right: 20px;
        }

            .footer-links a:hover::before {
                opacity: 1;
            }

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
}

    .social-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-warm);
        opacity: 0;
        transition: var(--transition);
        z-index: -1;
    }

    .social-link:hover {
        transform: translateY(-5px) rotate(10deg);
        color: var(--white);
        box-shadow: var(--shadow-medium);
    }

        .social-link:hover::before {
            opacity: 1;
        }

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--light-color);
    padding: 0.75rem;
    background: rgba(0, 63, 92, 0.2);
    border-radius: var(--border-radius-small);
    border: 1px solid var(--border-medium);
    transition: var(--transition);
}

    .trust-badge:hover {
        transform: translateY(-3px);
        background: rgba(0, 63, 92, 0.3);
    }

.footer-divider {
    border-color: var(--border-white-transparent);
    margin: 1rem 0;
}

.footer-copyright {
    color: var(--light-color);
    opacity: 0.8;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Simplified Logo Color Styling */
.logo-mask,
.logotype-mask {
    background-color: var(--primary-color);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.4s ease;
}

.logo-mask {
    width: 90px;
    height: 60px;
    -webkit-mask-image: url('/assets/sitetheme/images/Untitled-2.png');
    mask-image: url('/assets/sitetheme/images/Untitled-2.png');
}

/* .logotype-mask was removed from HTML as part of page-header-section */

/* Modal Styling */
.modal-content {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-heavy);
    border: none;
    background-color: var(--white);
}

.modal-header {
    border-bottom: 1px solid var(--border-light);
    padding: 1.5rem;
    background: var(--gradient-warm);
    color: var(--white);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

    .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
        /* White close button */
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }

        .modal-header .btn-close:hover {
            opacity: 1;
        }

.modal-title {
    font-weight: 700;
    color: var(--white);
}

.modal-body {
    padding: 2rem;
}

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

    .modal-footer .btn-secondary {
        background-color: var(--gray-light);
        color: var(--dark-color);
        border: 1px solid var(--border-medium);
        border-radius: var(--border-radius-small);
        transition: var(--transition);
    }

        .modal-footer .btn-secondary:hover {
            background-color: rgba(var(--dark-color-rgb), 0.1);
            transform: translateY(-2px);
            box-shadow: var(--shadow-light);
        }

/* Adjust search-filter-box within modal */
.modal-body .search-filter-box {
    box-shadow: none;
    /* Remove inner shadow if it conflicts */
    border: none;
    padding: 0;
    /* Remove padding if modal-body already provides it */
    background-color: transparent;
}