/**

 * Units & Hotels Listing Page Styles

 * ROMAR TRAVEL - CSS for units-hotels.php

 * 

 * Features:

 * - Responsive grid/list view

 * - Sidebar filters styling

 * - Card layouts for units/hotels

 * - Ezoic ad containers

 * - Multi-language support

 */



/* ===== Page Header ===== */

.page-header {

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);

    color: var(--light-text);

    padding: 4rem 0 2rem;

    position: relative;

    overflow: hidden;

}



.page-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');

    opacity: 0.3;

}



.page-header .container {

    position: relative;

    z-index: 2;

}



.page-title {

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.page-subtitle {

    font-size: 1.1rem;

    opacity: 0.9;

    margin-bottom: 0;

}



/* ===== View Toggle ===== */

.view-toggle {

    display: flex;

    gap: 0.5rem;

}



.view-btn {

    width: 45px;

    height: 45px;

    border: 2px solid rgba(255,255,255,0.3);

    background: transparent;

    color: var(--light-text);

    border-radius: 8px;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.view-btn:hover {

    border-color: var(--accent-sky);

    background: rgba(98, 182, 203, 0.2);

    color: var(--light-text);

    transform: translateY(-2px);

}



.view-btn.active {

    border-color: var(--accent-sky);

    background: var(--accent-sky);

    color: var(--primary-dark);

}



/* ===== Ezoic Ad Containers ===== */

.ezoic-ad-container {

    margin: 2rem 0;

    padding: 1rem;

    background: rgba(248, 249, 250, 0.5);

    border-radius: 8px;

    border: 1px dashed rgba(98, 182, 203, 0.3);

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.ezoic-ad-container.infeed-ad {

    margin: 1.5rem 0;

    background: transparent;

    border: none;

    padding: 0;

}



/* ===== Horizontal Filters ===== */

.filters-horizontal {

    background: var(--light-bg);

    border-radius: 12px;

    padding: 1.5rem;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);

    border: 1px solid rgba(98, 182, 203, 0.1);

    margin-bottom: 2rem;

}



.filters-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;

    align-items: end;

}



.filter-group {

    display: flex;

    flex-direction: column;

}



.filter-label {

    display: block;

    font-weight: 600;

    color: var(--primary-dark);

    margin-bottom: 0.5rem;

    font-size: 0.85rem;

    white-space: nowrap;

}



.filter-group .form-control,

.filter-group .form-select {

    border: 2px solid rgba(98, 182, 203, 0.2);

    border-radius: 8px;

    padding: 0.6rem 0.75rem;

    font-size: 0.85rem;

    transition: all 0.3s ease;

    background-color: white;

}



.filter-group .form-select {

    padding-right: 2.5rem;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2362b6cb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: left 0.75rem center;

    background-size: 16px 12px;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

}



[dir="ltr"] .filter-group .form-select {

    padding-right: 2.5rem;

    padding-left: 0.75rem;

    background-position: right 0.75rem center;

}



.filter-group .form-control:focus,

.filter-group .form-select:focus {

    border-color: var(--accent-sky);

    box-shadow: 0 0 0 0.2rem rgba(98, 182, 203, 0.25);

    background-color: white;

}



.filter-group .form-select:hover {

    border-color: var(--accent-sky);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231b4965' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");

}



.search-input {

    background: rgba(248, 249, 250, 0.8);

}



/* Filter Actions (Apply & Clear buttons) */

.filter-actions {

    display: flex;

    gap: 1rem;

    justify-content: center;

    align-items: center;

}



.filter-actions .btn {

    padding: 0.75rem 2rem;

    font-size: 0.9rem;

    border-radius: 10px;

    font-weight: 600;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    min-width: 150px;

}



.apply-filters {

    background: linear-gradient(135deg, var(--accent-sky) 0%, var(--primary-light) 100%);

    border: none;

    color: white;

    box-shadow: 0 4px 15px rgba(98, 182, 203, 0.25);

}



.apply-filters:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(98, 182, 203, 0.4);

    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-sky) 100%);

}



.apply-filters:active {

    transform: translateY(-1px);

    box-shadow: 0 3px 10px rgba(98, 182, 203, 0.3);

}



.clear-filters {

    background: white;

    border: 2px solid rgba(98, 182, 203, 0.4);

    color: var(--primary-dark);

}



.clear-filters:hover {

    background: #f8f9fa;

    border-color: var(--accent-sky);

    color: var(--accent-sky);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(98, 182, 203, 0.2);

}



.clear-filters:active {

    transform: translateY(0);

}



/* Filter visibility based on type */

.unit-filter,

.hotel-filter {

    transition: all 0.3s ease;

}



.unit-filter.hidden,

.hotel-filter.hidden {

    display: none;

}



/* Responsive Design for Horizontal Filters */

@media (max-width: 1200px) {

    .filters-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 992px) {

    .filters-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .filters-grid {

        grid-template-columns: 1fr;

    }

    

    .filter-actions {

        flex-direction: column;

        width: 100%;

    }

    

    .filter-actions .btn {

        width: 100%;

    }

}



/* Mobile Horizontal Scroll for Filters */

@media (max-width: 767.98px) {

    .filters-horizontal {

        padding-bottom: 1rem;

    }

    

    .filters-grid {

        display: flex;

        flex-wrap: nowrap;

        gap: 1rem;

        grid-template-columns: unset;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;

        scrollbar-color: var(--accent-sky) rgba(98, 182, 203, 0.1);

        padding-bottom: 0.75rem;

        margin-bottom: 1rem;

    }

    

    .filters-grid::-webkit-scrollbar {

        height: 6px;

    }

    

    .filters-grid::-webkit-scrollbar-track {

        background: rgba(98, 182, 203, 0.1);

        border-radius: 10px;

    }

    

    .filters-grid::-webkit-scrollbar-thumb {

        background: var(--accent-sky);

        border-radius: 10px;

    }

    

    .filters-grid::-webkit-scrollbar-thumb:hover {

        background: var(--primary-light);

    }

    

    .filter-group {

        flex: 0 0 250px;

        min-width: 250px;

    }

    

    .filter-actions {

        flex-direction: row;

        width: 100%;

        justify-content: center;

        gap: 0.75rem;

    }

    

    .filter-actions .btn {

        flex: 1;

        max-width: 200px;

        white-space: nowrap;

    }

}



/* ===== Results Header ===== */

.results-header {

    background: rgba(248, 249, 250, 0.8);

    border-radius: 8px;

    padding: 1rem 1.5rem;

    border: 1px solid rgba(98, 182, 203, 0.1);

}



.results-info {

    font-size: 1rem;

    color: var(--primary-dark);

}



.results-count {

    font-weight: 700;

    color: var(--accent-sky);

    font-size: 1.2rem;

}



.sort-controls {

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



.sort-label {

    font-weight: 600;

    color: var(--primary-dark);

    font-size: 0.9rem;

    white-space: nowrap;

}



.sort-select {

    max-width: 200px;

    border: 2px solid rgba(98, 182, 203, 0.2);

    border-radius: 6px;

    font-size: 0.9rem;

    padding-right: 2.5rem;

    background-color: white;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2362b6cb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: left 0.75rem center;

    background-size: 16px 12px;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

}



[dir="ltr"] .sort-select {

    padding-right: 2.5rem;

    padding-left: 0.75rem;

    background-position: right 0.75rem center;

}



.sort-select:focus {

    border-color: var(--accent-sky);

    box-shadow: 0 0 0 0.2rem rgba(98, 182, 203, 0.25);

    background-color: white;

}



.sort-select:hover {

    border-color: var(--accent-sky);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231b4965' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");

}



/* ===== Loading Spinner ===== */

.loading-spinner {

    color: var(--primary-dark);

}



.spinner-border {

    width: 3rem;

    height: 3rem;

}



/* ===== Results Grid/List ===== */

.results-container {

    min-height: 400px;

}



/* Grid View */

.results-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-bottom: 2rem;

}



/* List View */

.results-list {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    margin-bottom: 2rem;

}



/* ===== Unit/Hotel Cards ===== */

.unit-card,

.hotel-card {

    background: var(--light-bg);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);

    border: 1px solid rgba(98, 182, 203, 0.1);

    transition: all 0.3s ease;

    position: relative;

}



.unit-card:hover,

.hotel-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 30px rgba(0,0,0,0.15);

}



/* Card Image */

.card-image {

    position: relative;

    height: 200px;

    overflow: hidden;

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.unit-card:hover .card-image img,

.hotel-card:hover .card-image img {

    transform: scale(1.05);

}



.card-badge {

    position: absolute;

    top: 1rem;

    left: 1rem;

    background: var(--accent-sky);

    color: white;

    padding: 0.25rem 0.75rem;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.card-badge.hotel {

    background: var(--accent-orange);

}



.card-price {

    position: absolute;

    top: 1rem;

    right: 1rem;

    background: rgba(0,0,0,0.8);

    color: white;

    padding: 0.5rem 1rem;

    border-radius: 20px;

    font-weight: 700;

    font-size: 0.9rem;

}



/* Card Content */

.card-content {

    padding: 1.5rem;

}



.card-title {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--primary-dark);

    margin-bottom: 0.5rem;

    line-height: 1.3;

}



.card-location {

    color: #666;

    font-size: 0.9rem;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.card-features {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 1rem;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 0.25rem;

    font-size: 0.85rem;

    color: #666;

    background: rgba(98, 182, 203, 0.1);

    padding: 0.25rem 0.5rem;

    border-radius: 15px;

}



.feature-item i {

    color: var(--accent-sky);

    font-size: 0.8rem;

}



/* Star Rating */

.star-rating {

    display: flex;

    align-items: center;

    gap: 0.25rem;

    margin-bottom: 1rem;

}



.star-rating .stars {

    display: flex;

    gap: 2px;

}



.star-rating .star {

    color: #ffc107;

    font-size: 0.9rem;

}



.star-rating .star.empty {

    color: #e9ecef;

}



.star-rating .rating-text {

    font-size: 0.85rem;

    color: #666;

    margin-left: 0.5rem;

}



/* Card Actions */

.card-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 1rem;

    border-top: 1px solid rgba(98, 182, 203, 0.1);

}



.price-info {

    display: flex;

    flex-direction: column;

}



.price-amount {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--accent-sky);

}



.price-period {

    font-size: 0.8rem;

    color: #666;

}



.view-details-btn {

    background: linear-gradient(135deg, var(--accent-sky) 0%, var(--primary-light) 100%);

    border: none;

    color: white;

    padding: 0.75rem 1.5rem;

    border-radius: 25px;

    font-weight: 600;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.view-details-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(98, 182, 203, 0.4);

    color: white;

    text-decoration: none;

}



/* ===== List View Specific Styles ===== */

.results-list .unit-card,

.results-list .hotel-card {

    display: flex;

    flex-direction: row;

    height: auto;

}



.results-list .card-image {

    width: 300px;

    height: 200px;

    flex-shrink: 0;

}



.results-list .card-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



/* ===== Pagination ===== */

.pagination-nav .pagination {

    gap: 0.5rem;

}



.pagination .page-link {

    border: 2px solid rgba(98, 182, 203, 0.2);

    color: var(--primary-dark);

    border-radius: 8px;

    padding: 0.75rem 1rem;

    font-weight: 600;

    transition: all 0.3s ease;

}



.pagination .page-link:hover {

    border-color: var(--accent-sky);

    background: var(--accent-sky);

    color: white;

}



.pagination .page-item.active .page-link {

    background: var(--accent-sky);

    border-color: var(--accent-sky);

    color: white;

}



/* ===== No Results ===== */

.no-results {

    color: var(--primary-dark);

}



.no-results i {

    opacity: 0.5;

}



.no-results h4 {

    margin-bottom: 1rem;

}



/* ===== Responsive Design ===== */

@media (max-width: 1199.98px) {

    .filters-horizontal {

        padding: 1.25rem;

    }

    

    .filter-group {

        margin-bottom: 0;

    }

}



@media (max-width: 991.98px) {

    .page-title {

        font-size: 2rem;

    }

    

    .results-header {

        text-align: center;

    }

    

    .results-header .row > div {

        margin-bottom: 1rem;

    }

    

    .sort-controls {

        justify-content: center;

    }

    

    .results-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

    }

}



@media (max-width: 767.98px) {

    .page-header {

        padding: 3rem 0 1.5rem;

        text-align: center;

    }

    

    .page-title {

        font-size: 1.8rem;

    }

    

    .view-toggle {

        justify-content: center;

        margin-top: 1rem;

    }

    

    .filters-horizontal {

        padding: 1rem;

    }

    

    .filter-label {

        font-size: 0.8rem;

        margin-bottom: 0.35rem;

    }

    

    .filter-group .form-control,

    .filter-group .form-select {

        padding: 0.5rem 0.65rem;

        font-size: 0.8rem;

    }

    

    .filter-group .form-select {

        padding-right: 2.25rem;

        background-size: 14px 10px;

    }

    

    [dir="ltr"] .filter-group .form-select {

        padding-right: 2.25rem;

        padding-left: 0.65rem;

    }

    

    .filter-actions .btn {

        padding: 0.6rem 1rem;

        font-size: 0.85rem;

    }

    

    .results-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .results-list .unit-card,

    .results-list .hotel-card {

        flex-direction: column;

    }

    

    .results-list .card-image {

        width: 100%;

        height: 200px;

    }

    

    .card-features {

        gap: 0.5rem;

    }

    

    .feature-item {

        font-size: 0.8rem;

        padding: 0.2rem 0.4rem;

    }

    

    .card-actions {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

}



@media (max-width: 575.98px) {

    .page-title {

        font-size: 1.5rem;

    }

    

    .card-content {

        padding: 1rem;

    }

    

    .card-title {

        font-size: 1.1rem;

    }

    

    .view-details-btn {

        padding: 0.6rem 1.2rem;

        font-size: 0.85rem;

    }

}



/* ===== RTL Support ===== */

[dir="rtl"] .card-badge {

    left: auto;

    right: 1rem;

}



[dir="rtl"] .card-price {

    right: auto;

    left: 1rem;

}



[dir="rtl"] .sort-controls {

    justify-content: flex-start;

}



[dir="rtl"] .results-list .card-image {

    order: 2;

}



[dir="rtl"] .results-list .card-content {

    order: 1;

}



/* ===== Lazy Loading Images ===== */

.card-image img[data-src] {

    opacity: 0;

    transition: opacity 0.3s ease;

}



.card-image img.loaded {

    opacity: 1;

}



.card-image .image-placeholder {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 

                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 

                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 

                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);

    background-size: 20px 20px;

    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #999;

    font-size: 2rem;

}



/* ===== Animation Classes ===== */

.fade-in {

    animation: fadeIn 0.5s ease-in-out;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.slide-in {

    animation: slideIn 0.3s ease-out;

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateX(-20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* ==========================================================================

   ROMAR TRAVEL - SLEEK & RESPONSIVE NAVBAR OVERRIDES (GLOBAL SITE FIX)

   ========================================================================== */



/* 1. Desktop Layout (Sleeker sizing, reduced paddings & font sizes) */

.navbar-brand {

    padding: 5px 0 !important;

}

.navbar-logo {

    height: 75px !important;

}

.navbar.scrolled .navbar-logo {

    height: 50px !important;

}

.navbar-nav .nav-link {

    font-size: 0.82rem !important;

    padding: 18px 12px !important;

}

.navbar.scrolled .navbar-nav .nav-link {

    padding: 10px 12px !important;

}

.navbar-nav .nav-link .nav-icon {

    font-size: 0.85rem !important;

}

.navbar-nav .nav-link span {

    font-size: 0.78rem !important;

}



/* 2. Large Screens Specific (1400px+) */

@media (min-width: 1400px) {

    .navbar-nav .nav-link {

        padding: 18px 15px !important;

        font-size: 0.85rem !important;

    }

    .navbar.scrolled .navbar-nav .nav-link {

        padding: 10px 15px !important;

    }

    .navbar-nav .nav-link span {

        font-size: 0.8rem !important;

    }

    .nav-action-btn {

        padding: 8px 14px !important;

        font-size: 0.85rem !important;

    }

    .nav-action-btn span {

        font-size: 0.8rem !important;

    }

}



/* 3. Large Screens Specific (1200px - 1399px) */

@media (min-width: 1200px) and (max-width: 1399px) {

    .navbar-nav .nav-link {

        padding: 18px 12px !important;

    }

    .navbar.scrolled .navbar-nav .nav-link {

        padding: 10px 12px !important;

    }

}



/* 4. Medium Screens / Tablet-Desktop Transition (992px - 1280px) */

@media (min-width: 992px) and (max-width: 1280px) {

    .navbar .container-fluid {

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    .navbar-logo {

        height: 52px !important;

    }

    .navbar.scrolled .navbar-logo {

        height: 42px !important;

    }

    .navbar-nav {

        gap: 2px !important;

    }

    .navbar-nav .nav-link {

        padding: 12px 6px !important;

        font-size: 0.78rem !important;

        gap: 4px !important;

    }

    .navbar-nav .nav-link span {

        font-size: 0.72rem !important;

    }

    .navbar-nav .nav-link .nav-icon {

        font-size: 0.78rem !important;

    }

    .navbar-actions {

        gap: 6px !important;

    }

    .nav-action-btn {

        padding: 6px 10px !important;

        font-size: 0.78rem !important;

        gap: 4px !important;

    }

    .nav-action-btn span {

        font-size: 0.72rem !important;

    }

    .language-dropdown .lang-name {

        display: inline-block !important;

        font-size: 0.72rem !important;

        margin: 0 4px !important;

    }

    .language-dropdown .dropdown-toggle {

        padding: 6px 8px !important;

    }

    .admin-btn span {

        display: none !important;

    }

    .admin-btn {

        padding: 6px 10px !important;

    }

}



/* 5. Mobile & Tablet Collapsed Screens (max-width: 991px) */

@media (max-width: 991px) {

    .navbar .container-fluid {

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    .navbar-logo {

        height: 55px !important;

    }

    .navbar.scrolled .navbar-logo {

        height: 45px !important;

    }

    .navbar-collapse {

        background: rgba(255, 255, 255, 0.98) !important;

        border-radius: 16px !important;

        padding: 20px !important;

        margin-top: 10px !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;

        border: 1px solid rgba(98, 182, 203, 0.15) !important;

    }

    .navbar-nav {

        align-items: stretch !important;

        gap: 6px !important;

        margin-bottom: 15px !important;

    }

    .navbar-nav .nav-link {

        padding: 10px 15px !important;

        font-size: 0.85rem !important;

        border-radius: 8px !important;

        background: transparent !important;

        width: 100% !important;

    }

    .navbar-nav .nav-link::before {

        display: none !important;

    }

    .navbar-nav .nav-link:hover,

    .navbar-nav .nav-link.active {

        background: linear-gradient(90deg, rgba(98, 182, 203, 0.15) 0%, transparent 100%) !important;

    }

    .navbar-actions {

        width: 100% !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

    }

    .navbar-actions .dropdown,

    .navbar-actions .nav-action-btn {

        width: 100% !important;

        text-align: center !important;

        justify-content: center !important;

    }

    .language-dropdown .dropdown-menu {

        width: 100% !important;

        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;

    }

    .user-dropdown .dropdown-menu {

        width: 100% !important;

    }

}



/* 6. Mobile Small Screens (max-width: 576px) */

@media (max-width: 576px) {

    .navbar-logo {

        height: 48px !important;

    }

    .navbar.scrolled .navbar-logo {

        height: 42px !important;

    }

    .navbar-toggler {

        padding: 6px 10px !important;

    }

    .navbar-toggler-icon i {

        font-size: 1.1rem !important;

    }

}