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

   GARDA LAKE APARTMENT - Custom Stylesheet

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



/* --- Variables --- */

:root {

    --garda-blue: #1B4F72;

    --garda-blue-light: #2E86AB;

    --garda-teal: #1ABC9C;

    --garda-gold: #E8A87C;

    --garda-dark: #17202A;

    --garda-gray: #6C757D;

    --garda-light: #F8F9FA;

    --font-heading: 'Playfair Display', Georgia, serif;

    --font-body: 'Lato', Arial, sans-serif;

    --transition: 0.3s ease;

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

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

    --radius: 12px;

}



/* --- Base --- */

html { scroll-behavior: smooth; font-size: 14px; }



@media (min-width: 768px) {

    html { font-size: 16px; }

}



body {

    font-family: var(--font-body);

    color: #333;

    overflow-x: hidden;

    margin-bottom: 0;

}



h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

}



.btn:focus, .btn:active:focus {

    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(26,188,156,0.4);

}



/* --- Navbar --- */

#mainNav {

    background: rgba(27, 79, 114, 0.95);

    backdrop-filter: blur(10px);

    padding: 1rem 0;

    transition: all var(--transition);

}



#mainNav.scrolled {

    background: rgba(27, 79, 114, 0.99);

    padding: 0.5rem 0;

    box-shadow: 0 2px 20px rgba(0,0,0,0.2);

}



.navbar-brand {

    font-family: var(--font-heading);

    font-size: 1.3rem;

    font-weight: 700;

    color: #fff !important;

    letter-spacing: 0.5px;

}



.navbar-nav .nav-link {

    color: rgba(255,255,255,0.85) !important;

    font-weight: 400;

    padding: 0.5rem 1rem !important;

    transition: color var(--transition);

    font-size: 0.95rem;

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link.active {

    color: #fff !important;

}



.navbar-nav .btn-cta {

    background: var(--garda-teal);

    color: #fff !important;

    border-radius: 25px;

    padding: 0.4rem 1.2rem !important;

    font-weight: 700;

    transition: all var(--transition);

}



.navbar-nav .btn-cta:hover {

    background: #17A589;

    transform: translateY(-1px);

}



/* --- Hero Section --- */

.hero-section {

    position: relative;

    min-height: 100vh;

    background: linear-gradient(135deg, var(--garda-blue) 0%, var(--garda-blue-light) 50%, #1ABC9C 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(23, 32, 42, 0.3);

}



.hero-content {

    position: relative;

    z-index: 2;

    padding: 2rem;

    width: 100%;

}



.hero-tagline {

    font-size: 1.1rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0.9;

    margin-bottom: 0.5rem;

    color: #fff;

}



.hero-logo-icon {

    display: block;

    font-size: clamp(2rem, 5vw, 3rem);

    color: var(--garda-teal);

    margin-bottom: 0.5rem;

    opacity: 0.9;

}



.hero-title {

    font-size: clamp(2.5rem, 6vw, 4.5rem);

    font-weight: 700;

    line-height: 1.1;

    margin-bottom: 1rem;

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

    color: #fff;

}



.hero-subtitle {

    font-size: clamp(1rem, 2.5vw, 1.3rem);

    opacity: 0.9;

    margin-bottom: 2rem;

    font-weight: 300;

    color: #fff;

}



.hero-badges {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

    margin-bottom: 2.5rem;

}



.hero-badges span {

    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(5px);

    border: 1px solid rgba(255,255,255,0.25);

    padding: 0.5rem 1.2rem;

    border-radius: 25px;

    font-size: 0.9rem;

    font-weight: 400;

    color: #fff;

}



.hero-badges span i { margin-right: 6px; }



.hero-cta .btn {

    border-radius: 30px;

    padding: 0.75rem 2rem;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: all var(--transition);

}



.hero-cta .btn-primary {

    background: var(--garda-teal);

    border-color: var(--garda-teal);

}



.hero-cta .btn-primary:hover {

    background: #17A589;

    border-color: #17A589;

    transform: translateY(-2px);

    box-shadow: 0 5px 20px rgba(26,188,156,0.4);

}



.hero-cta .btn-outline-light:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 20px rgba(255,255,255,0.2);

}



.hero-scroll-indicator {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

}



.hero-scroll-indicator a {

    color: rgba(255,255,255,0.7);

    font-size: 1.5rem;

    animation: bounce 2s infinite;

    display: block;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

    40% { transform: translateY(-10px); }

    60% { transform: translateY(-5px); }

}



/* --- Highlights Section --- */

.highlights-section {

    padding: 4rem 0;

    background: #fff;

}



.highlight-card {

    padding: 2rem 1.5rem;

    border-radius: var(--radius);

    transition: all var(--transition);

    border: 1px solid #eee;

}



.highlight-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-hover);

    border-color: var(--garda-teal);

}



.highlight-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--garda-blue), var(--garda-teal));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    color: #fff;

    font-size: 1.6rem;

}



.highlight-card h4 {

    font-size: 1.15rem;

    color: var(--garda-blue);

    margin-bottom: 0.75rem;

}



.highlight-card p {

    color: var(--garda-gray);

    font-size: 0.9rem;

    margin: 0;

}



/* --- Section Utilities --- */

.section-padded { padding: 5rem 0; }



.bg-light-custom { background: #F4F6F9 !important; }



.section-label {

    display: inline-block;

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--garda-teal);

    margin-bottom: 0.75rem;

}



.section-title {

    font-size: clamp(1.8rem, 3.5vw, 2.5rem);

    color: var(--garda-blue);

    margin-bottom: 1rem;

    line-height: 1.2;

}



.section-subtitle {

    color: var(--garda-gray);

    font-size: 1.05rem;

    max-width: 600px;

    margin: 0 auto;

}



/* --- About Section --- */

.about-section { padding: 5rem 0; }



.about-image-grid {

    position: relative;

    padding-bottom: 80px;

    padding-right: 20px;

}



.img-main img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}



.img-secondary {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 60%;

    border: 4px solid #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow-hover);

    overflow: hidden;

}



.img-secondary img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    display: block;

}



.lead-text {

    font-size: 1.1rem;

    color: #555;

    font-weight: 300;

    line-height: 1.7;

}



.features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }



.feature-item {

    color: #555;

    font-size: 0.95rem;

}



.feature-item i {

    color: var(--garda-teal);

    margin-right: 8px;

}



/* --- Activity Cards --- */

.area-section { padding: 5rem 0; background: var(--garda-light); }



.activity-card {

    background: #fff;

    border-radius: var(--radius);

    padding: 1.75rem;

    display: flex;

    gap: 1.2rem;

    align-items: flex-start;

    transition: all var(--transition);

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    height: 100%;

}



.activity-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-hover);

}



.activity-icon {

    min-width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--garda-blue), var(--garda-blue-light));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1.2rem;

}



.activity-card h5 {

    color: var(--garda-blue);

    font-size: 1rem;

    margin-bottom: 0.5rem;

}



.activity-card p {

    color: var(--garda-gray);

    font-size: 0.88rem;

    margin: 0;

}



/* --- CTA Section --- */

.cta-section {

    padding: 5rem 2rem;

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

}



.cta-section h2 {

    font-size: clamp(1.8rem, 3vw, 2.5rem);

}



.cta-section p { font-size: 1.1rem; opacity: 0.9; }



/* --- Page Header --- */

.page-header {

    position: relative;

    padding: 8rem 1rem 4rem;

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

    background-image: url('/images/residence-vista-aerea.jpg');

    background-size: cover;

    background-position: center;

    text-align: center;

}



.page-header-overlay {

    position: absolute;

    inset: 0;

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

}



.page-header > .container { position: relative; z-index: 1; }



.page-header-title {

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 700;

    margin-bottom: 0.75rem;

    color: var(--garda-teal);

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

}



.page-header-subtitle {

    font-size: 1.1rem;

    margin-bottom: 1.5rem;

    color: var(--garda-teal);

    opacity: 0.95;

    text-shadow: 0 1px 4px rgba(0,0,0,0.25);

}



.breadcrumb { background: none; }

.breadcrumb-item a { color: rgba(255,255,255,0.75); text-decoration: none; }

.breadcrumb-item a:hover { color: #fff; }

.breadcrumb-item.active { color: rgba(255,255,255,0.9); }

.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }



/* --- Stat Boxes --- */

.stat-box {

    background: linear-gradient(135deg, var(--garda-blue), var(--garda-blue-light));

    border-radius: var(--radius);

    padding: 1.5rem 1rem;

    text-align: center;

    color: #fff;

}



.stat-number {

    display: block;

    font-family: var(--font-heading);

    font-size: 2.5rem;

    font-weight: 700;

    line-height: 1;

    background: none;

    border: none;

    box-shadow: none;

}



.stat-icon {

    display: block;

    font-size: 2.5rem;

    line-height: 1;

    margin-bottom: 0.2rem;

}



.stat-label {

    display: block;

    font-size: 0.8rem;

    opacity: 0.85;

    margin-top: 0.3rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* --- Room Cards --- */

.room-card {

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

    background: #fff;

    transition: all var(--transition);

    height: 100%;

}



.room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }



.room-image { height: 230px; overflow: hidden; }

.room-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.room-card:hover .room-image img { transform: scale(1.05); }



.room-content { padding: 1.5rem; }

.room-content h4 { color: var(--garda-blue); font-size: 1.15rem; margin-bottom: 0.75rem; }

.room-content p { color: var(--garda-gray); font-size: 0.9rem; margin-bottom: 1rem; }



.room-features {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.4rem;

}



.room-features li { font-size: 0.85rem; color: #555; }

.room-features li i { color: var(--garda-teal); margin-right: 6px; }



/* --- Amenities --- */

.amenity-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    background: #fff;

    padding: 0.9rem 1rem;

    border-radius: 8px;

    border: 1px solid #eee;

    transition: all var(--transition);

    font-size: 0.88rem;

}



.amenity-item:hover {

    border-color: var(--garda-teal);

    background: #f0fdf9;

    transform: translateY(-2px);

}



.amenity-item i {

    color: var(--garda-teal);

    font-size: 1.1rem;

    min-width: 20px;

    text-align: center;

}



/* --- Gallery --- */

.gallery-filter {

    display: flex;

    gap: 0.75rem;

    justify-content: center;

    flex-wrap: wrap;

    margin-bottom: 1rem;

}



.filter-btn {

    padding: 0.5rem 1.5rem;

    border: 2px solid var(--garda-blue);

    background: transparent;

    color: var(--garda-blue);

    border-radius: 25px;

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    transition: all var(--transition);

}



.filter-btn:hover,

.filter-btn.active {

    background: var(--garda-blue);

    color: #fff;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 1rem;

}



.gallery-item {

    border-radius: var(--radius);

    overflow: hidden;

    cursor: pointer;

    opacity: 0;

    transition: all 0.4s ease;

}



.gallery-item.visible { opacity: 1; }



.gallery-item-inner {

    position: relative;

    aspect-ratio: 4/3;

    overflow: hidden;

}



.gallery-item-inner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.gallery-item:hover .gallery-item-inner img { transform: scale(1.08); }



.gallery-overlay {

    position: absolute;

    inset: 0;

    background: rgba(27,79,114,0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity var(--transition);

}



.gallery-item:hover .gallery-overlay { opacity: 1; }



.gallery-overlay-content {

    text-align: center;

    color: #fff;

}



.gallery-overlay-content i { font-size: 2rem; margin-bottom: 0.5rem; display: block; }

.gallery-overlay-content p { font-size: 0.9rem; margin: 0; }



/* --- Location --- */

.map-container { box-shadow: var(--shadow); }



.location-info { padding: 0; }

.location-info h3 { color: var(--garda-blue); }



.location-detail {

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    padding: 0.8rem 0;

    border-bottom: 1px solid #eee;

}



.location-detail:last-child { border-bottom: none; }



.location-icon {

    min-width: 40px;

    height: 40px;

    background: linear-gradient(135deg, var(--garda-blue), var(--garda-teal));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 0.9rem;

}



.location-detail h6 { margin-bottom: 0.2rem; color: var(--garda-blue); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }

.location-detail p { margin: 0; color: #555; font-size: 0.9rem; }



.attraction-card {

    background: #fff;

    border-radius: var(--radius);

    padding: 1.5rem;

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    transition: all var(--transition);

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    height: 100%;

}



.attraction-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-hover);

}



.attraction-icon {

    min-width: 48px;

    height: 48px;

    background: linear-gradient(135deg, var(--garda-teal), var(--garda-blue-light));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1.2rem;

}



.attraction-content h5 { color: var(--garda-blue); font-size: 1rem; margin-bottom: 0.3rem; }



.transport-card {

    background: #fff;

    border-radius: var(--radius);

    padding: 2rem 1.5rem;

    box-shadow: var(--shadow);

    transition: all var(--transition);

    height: 100%;

}



.transport-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-hover);

}



.transport-icon {

    font-size: 2.5rem;

    color: var(--garda-blue);

    margin-bottom: 1rem;

}



.transport-card h5 { color: var(--garda-blue); margin-bottom: 0.75rem; }

.transport-card p { color: var(--garda-gray); font-size: 0.9rem; margin: 0; }



/* --- Contact --- */

.contact-info-item {

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    padding: 1rem 0;

    border-bottom: 1px solid #eee;

}



.contact-info-item:last-child { border-bottom: none; }



.contact-info-icon {

    min-width: 44px;

    height: 44px;

    background: linear-gradient(135deg, var(--garda-blue), var(--garda-teal));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1rem;

}



.contact-info-item h6 { margin-bottom: 0.2rem; color: var(--garda-blue); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

.contact-info-item a { color: #333; text-decoration: none; font-size: 0.95rem; }

.contact-info-item a:hover { color: var(--garda-teal); }

.contact-info-item p { margin: 0; color: #555; font-size: 0.9rem; }



.social-links-contact {

    display: flex;

    gap: 0.75rem;

    flex-wrap: wrap;

    margin-top: 0.75rem;

}



.social-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.2rem;

    border-radius: 25px;

    font-size: 0.88rem;

    font-weight: 600;

    text-decoration: none;

    transition: all var(--transition);

}



.social-btn.instagram {

    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

    color: #fff;

}



.social-btn.facebook { background: #1877F2; color: #fff; }

.social-btn.airbnb { background: #FF5A5F; color: #fff; }

.social-btn.booking { background: #003580; color: #fff; }

.social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }



.contact-form-card {

    background: #fff;

    border-radius: var(--radius);

    padding: 2.5rem;

    box-shadow: var(--shadow);

}



.form-control, .form-select {

    border: 1.5px solid #dee2e6;

    border-radius: 8px;

    padding: 0.7rem 1rem;

    font-size: 0.95rem;

    transition: border-color var(--transition), box-shadow var(--transition);

}



.form-control:focus, .form-select:focus {

    border-color: var(--garda-teal);

    box-shadow: 0 0 0 0.2rem rgba(26,188,156,0.15);

}



/* --- FAQ --- */

.faq-item {

    border: 1px solid #eee !important;

    border-radius: 8px !important;

    margin-bottom: 0.75rem;

    overflow: hidden;

}



.faq-item .accordion-button {

    font-family: var(--font-heading);

    color: var(--garda-blue);

    font-weight: 600;

    background: #fff;

}



.faq-item .accordion-button:not(.collapsed) {

    background: var(--garda-blue);

    color: #fff;

    box-shadow: none;

}



.faq-item .accordion-button:not(.collapsed)::after {

    filter: brightness(0) invert(1);

}



/* --- Footer --- */

.site-footer {

    background: var(--garda-dark);

    color: rgba(255,255,255,0.8);

    padding: 4rem 0 0;

}



.site-footer h5 {

    color: #fff;

    font-size: 1.2rem;

    margin-bottom: 1rem;

}



.site-footer h6.footer-heading {

    color: var(--garda-teal);

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 1rem;

}



.footer-desc { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.65); }



.social-links {

    display: flex;

    gap: 0.75rem;

    margin-top: 1rem;

}



.social-links a {

    width: 38px;

    height: 38px;

    background: rgba(255,255,255,0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    text-decoration: none;

    transition: all var(--transition);

}



.social-links a:hover { background: var(--garda-teal); transform: translateY(-2px); }



.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



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



.footer-links a {

    color: rgba(255,255,255,0.65);

    text-decoration: none;

    font-size: 0.9rem;

    transition: color var(--transition);

}



.footer-links a:hover { color: var(--garda-teal); }



.footer-contact {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-contact li {

    color: rgba(255,255,255,0.65);

    font-size: 0.9rem;

    margin-bottom: 0.6rem;

    display: flex;

    align-items: flex-start;

    gap: 0.6rem;

}



.footer-contact li i {

    color: var(--garda-teal);

    margin-top: 3px;

    min-width: 14px;

}



.footer-divider { border-color: rgba(255,255,255,0.1); margin: 2rem 0 1rem; }



.footer-bottom p {

    font-size: 0.85rem;

    color: rgba(255,255,255,0.5);

    margin: 0;

    padding: 1rem 0;

}



/* --- Primary Button --- */

.btn-primary {

    background: var(--garda-teal);

    border-color: var(--garda-teal);

    font-weight: 700;

    border-radius: 25px;

    padding: 0.6rem 1.8rem;

    transition: all var(--transition);

}



.btn-primary:hover {

    background: #17A589;

    border-color: #17A589;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(26,188,156,0.35);

}



/* --- Responsive --- */

@media (max-width: 768px) {

    .about-image-grid { margin-bottom: 2rem; padding-bottom: 0; padding-right: 0; }

    .img-secondary { display: none; }

    .features-list { grid-template-columns: 1fr; }

    .hero-cta .btn { display: block; width: 100%; margin-bottom: 1rem; }

    .hero-cta .btn.me-3 { margin-right: 0 !important; }

    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    .contact-form-card { padding: 1.5rem; }

    .stat-number { font-size: 2rem; }

}



@media (max-width: 576px) {

    .section-padded { padding: 3rem 0; }

    .highlights-section { padding: 2rem 0; }

    .highlight-card { padding: 1.5rem 1rem; }

    .room-features { grid-template-columns: 1fr; }

}



/* ===== COOKIE BANNER ===== */

.cookie-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(20, 40, 60, 0.97);

    color: #fff;

    z-index: 9999;

    padding: 1.2rem 1.5rem;

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

    backdrop-filter: blur(6px);

}



.cookie-banner-inner {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.cookie-banner-text {

    flex: 1;

    min-width: 260px;

    font-size: 0.88rem;

    line-height: 1.5;

}



.cookie-banner-text p {

    opacity: 0.85;

}



.cookie-banner-actions {

    display: flex;

    gap: 0.75rem;

    flex-shrink: 0;

    flex-wrap: wrap;

}



.footer-cookie-link {

    color: rgba(255,255,255,0.6);

    font-size: 0.85rem;

    text-decoration: none;

}



.footer-cookie-link:hover {

    color: #fff;

}



@media (max-width: 576px) {

    .cookie-banner-inner { flex-direction: column; align-items: flex-start; }

    .cookie-banner-actions { width: 100%; }

    .cookie-banner-actions .btn { flex: 1; }

}



/* --- Loading Spinner Overlay --- */

#loadingOverlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(27, 79, 114, 0.55);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 9999;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 20px;

}



#loadingOverlay.active {

    display: flex;

}



.spinner-ring {

    width: 64px;

    height: 64px;

    border: 5px solid rgba(255,255,255,0.25);

    border-top-color: #fff;

    border-radius: 50%;

    animation: spin 0.9s linear infinite;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



.spinner-label {

    color: #fff;

    font-family: var(--font-body);

    font-size: 1rem;

    font-weight: 500;

    letter-spacing: 0.03em;

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

}