@import '_content/Ecommerce.Basic/Ecommerce.Basic.oidnp4kpau.bundle.scp.css';

/* /Components/Layout/CookieConsent.razor.rz.scp.css */
.cookie-consent-banner[b-76tzbd1dhm] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0f172a; /* Slate 900 */
    color: #fff;
    padding: 1rem 2rem;
    z-index: 2000;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    border-top: 1px solid #1e293b;
    animation: slideUp-b-76tzbd1dhm 0.5s ease-out;
}

.cookie-content[b-76tzbd1dhm] {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookie-content p[b-76tzbd1dhm] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #cbd5e1; /* Slate 300 */
    font-family: 'Segoe UI', sans-serif;
}

.btn-accept[b-76tzbd1dhm] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
    border: none;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-accept:hover[b-76tzbd1dhm] {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

@keyframes slideUp-b-76tzbd1dhm {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 768px) {
    .cookie-content[b-76tzbd1dhm] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .btn-accept[b-76tzbd1dhm] {
        width: 100%;
        max-width: 200px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-huz2ka0xry] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-huz2ka0xry] {
    flex: 1;
}

.sidebar[b-huz2ka0xry] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-huz2ka0xry] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-huz2ka0xry]  a, .top-row[b-huz2ka0xry]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-huz2ka0xry]  a:hover, .top-row[b-huz2ka0xry]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-huz2ka0xry]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-huz2ka0xry] {
        justify-content: space-between;
    }

    .top-row[b-huz2ka0xry]  a, .top-row[b-huz2ka0xry]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-huz2ka0xry] {
        flex-direction: row;
    }

    .sidebar[b-huz2ka0xry] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-huz2ka0xry] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-huz2ka0xry]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-huz2ka0xry], article[b-huz2ka0xry] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-huz2ka0xry] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-huz2ka0xry] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Floating Cart Button */
.cart-float[b-huz2ka0xry] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0f172a; /* Store ink color */
    color: white;
    display: grid;
    place-items: center;
    font-size: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 1100; /* High z-index to sit on top */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-float:hover[b-huz2ka0xry] {
    transform: scale(1.1);
}

.cart-count[b-huz2ka0xry] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #43a047;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid white;
}

@media (max-width: 1024px) {
    .cart-float[b-huz2ka0xry] {
        bottom: 20px;
        right: 20px;
    }
}
/* /Components/Layout/SazaFooter.razor.rz.scp.css */
/* Footer Styles (Grand & Sexy) */
.saza-footer[b-uqggy3sho8] {
    background: radial-gradient(circle at center top, #1e293b 0%, #1A2B45 100%);
    color: #e2e8f0;
    padding: 8rem 0 4rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Texture Overlay (Noise) - Matching About Page */
.saza-footer[b-uqggy3sho8]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

/* Top Glow Accent */
.saza-footer[b-uqggy3sho8]::after {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
}

.saza-container[b-uqggy3sho8] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.footer-inner[b-uqggy3sho8] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 5rem;
}

/* COL 1: BRAND */
.brand-col[b-uqggy3sho8] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.footer-logo img[b-uqggy3sho8] {
    height: 120px;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.1));
    transition: filter 0.3s;
}

.footer-logo:hover img[b-uqggy3sho8] {
    filter: drop-shadow(0 0 30px rgba(255,255,255,0.3));
}

.contact-details[b-uqggy3sho8] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item[b-uqggy3sho8] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.05rem;
    color: #94a3b8;
    padding: 10px;
    border-radius: 12px;
    transition: background 0.3s;
}

.contact-item:hover[b-uqggy3sho8] {
    background: rgba(255,255,255,0.03);
}

.contact-item .icon[b-uqggy3sho8] {
    font-size: 1.4rem;
    filter: grayscale(1);
    transition: filter 0.3s;
}

.contact-item:hover .icon[b-uqggy3sho8] {
    filter: grayscale(0);
}

.contact-item a[b-uqggy3sho8] {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.contact-item:hover a[b-uqggy3sho8] {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.social-links[b-uqggy3sho8] {
    display: flex;
    gap: 16px;
    margin-top: 1rem;
}

.social-btn[b-uqggy3sho8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-btn:hover[b-uqggy3sho8] {
    background: #0284c7;
    color: white;
    border-color: #0284c7;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.5);
}

/* HEADINGS */
.footer-heading[b-uqggy3sho8] {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.footer-heading[b-uqggy3sho8]::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #0284c7, transparent);
    margin-top: 10px;
}

/* COL 2: POSTS (Glass Cards) */
.posts-list[b-uqggy3sho8] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-post[b-uqggy3sho8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.footer-post:hover[b-uqggy3sho8] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(10px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

.post-date[b-uqggy3sho8] {
    font-size: 0.75rem;
    color: #0ea5e9;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-title[b-uqggy3sho8] {
    font-size: 1.05rem;
    color: #e2e8f0;
    line-height: 1.4;
    font-weight: 600;
}

.footer-post:hover .post-title[b-uqggy3sho8] {
    color: #ffffff;
}

/* COL 3: SPONSORS (Glass Pills) */
.footer-sponsors-grid[b-uqggy3sho8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.footer-sponsor-link[b-uqggy3sho8] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

.footer-sponsor-link img[b-uqggy3sho8] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1) brightness(2); /* White logos initially */
    opacity: 0.5;
    transition: all 0.4s ease;
}

.footer-sponsor-link:hover[b-uqggy3sho8] {
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255,255,255,0.1);
    border-color: white;
}

.footer-sponsor-link:hover img[b-uqggy3sho8] {
    filter: grayscale(0) brightness(1); /* Full color on hover */
    opacity: 1;
}

/* COPYRIGHT */
.copyright[b-uqggy3sho8] {
    margin-top: 6rem;
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    width: 100%;
    grid-column: 1 / -1; /* Span full width */
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .saza-footer[b-uqggy3sho8] {
        padding: 5rem 0 3rem;
    }

    .footer-inner[b-uqggy3sho8] {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: center;
    }

    .brand-col[b-uqggy3sho8], .contact-details[b-uqggy3sho8], .contact-item[b-uqggy3sho8] {
        align-items: center;
        justify-content: center;
    }
    
    .social-links[b-uqggy3sho8] {
        justify-content: center;
    }

    .footer-heading[b-uqggy3sho8]::after {
        margin: 10px auto 0;
        background: linear-gradient(90deg, transparent, #0284c7, transparent);
    }
    
    .posts-list[b-uqggy3sho8] {
        text-align: left;
    }

    .footer-sponsors-grid[b-uqggy3sho8] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Layout/SazaNavbar.razor.rz.scp.css */
.saza-topbar[b-vpslhgms3o], .saza-mainnav[b-vpslhgms3o] {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.saza-container[b-vpslhgms3o] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* TOP BAR */
.saza-topbar[b-vpslhgms3o] {
    background-color: #1A2B45; /* Dark blue */
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Lighter border for dark theme */
    font-size: 0.8125rem;
    color: #e2e8f0; /* Light text color */
}

.saza-topbar-inner[b-vpslhgms3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

.saza-tagline[b-vpslhgms3o] {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    color: #e2e8f0; /* Visible on dark background */
}

.saza-topbar-right[b-vpslhgms3o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.saza-topbar-link[b-vpslhgms3o] {
    text-decoration: none;
    color: #cbd5e1; /* Lighter color for links */
    transition: color 0.2s ease;
}

    .saza-topbar-link:hover[b-vpslhgms3o] {
        color: #ffffff; /* White on hover */
    }

.saza-divider[b-vpslhgms3o] {
    color: #475569; /* Lighter gray for visibility on dark background */
}

.saza-topbar-social-label[b-vpslhgms3o] {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: #e2e8f0; /* Visible on dark background */
    margin-right: 2px;
}

/* MAIN NAVBAR (Default: Solid White for internal pages) */
.saza-mainnav[b-vpslhgms3o] {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: #ffffff;
    margin-bottom: 0;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.saza-mainnav-inner[b-vpslhgms3o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 80px;
    gap: 24px;
    transition: min-height 0.4s ease;
}

/* HOME PAGE VARIANT (Transparent Overlay) */




/* SCROLLED STATE (Applied to both, but mostly affects Home to turn it white) */
.saza-mainnav--scrolled[b-vpslhgms3o] {
    background-color: #ffffff !important;
    border-bottom-color: #e5e7eb !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.saza-mainnav--scrolled .saza-mainnav-inner[b-vpslhgms3o] {
    min-height: 80px; /* Shrink to standard */
}

.saza-mainnav-left[b-vpslhgms3o] {
    grid-column: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 0px;
}
.saza-mainnav-right[b-vpslhgms3o] {
    grid-column: 3;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.saza-right-actions[b-vpslhgms3o] {
    margin-left: auto; /* pushes actions away from Store/Blog/Contact */
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Pushed closer to center/logo but with a gap */


.saza-logo[b-vpslhgms3o] {
    grid-column: 2;
    justify-self: center;
    display: flex;
    justify-content: center;
}

    .saza-logo img[b-vpslhgms3o] {
        height: 60px; /* Default/Scrolled Size */
        width: auto;
        display: block;
        transition: height 0.4s ease;
    }



.saza-mainnav--scrolled .saza-logo img[b-vpslhgms3o] {
    height: 60px; /* Shrink on scroll */
}

/* Link Container to prevent wrapping */
.saza-navlinks[b-vpslhgms3o] {
    display: flex;
    align-items: center;
    gap: 0px;
}

/* NEW LINK STYLES (No underline, modern pill) */
/* Increased specificity and ::deep to ensure styles apply to NavLink content */
.saza-mainnav[b-vpslhgms3o]  .saza-navlink {
    position: relative;
    text-decoration: none !important; /* Force remove underline */
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4b5563; /* Medium Grey */
    padding: 8px 12px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

    .saza-mainnav[b-vpslhgms3o]  .saza-navlink:hover {
        color: #111827; /* Darker */
        background-color: #f3f4f6; /* Light Grey Pill */
    }

    .saza-mainnav[b-vpslhgms3o]  .saza-navlink::after {
        display: none; /* Removed underline */
    }

/* Admin Toggle specific (smaller) */
.saza-admin-toggle[b-vpslhgms3o] {
    font-size: 0.8rem; /* Smaller text */
    padding: 6px 12px;
    color: #6b7280;
}

    .saza-admin-toggle:hover[b-vpslhgms3o] {
        background-color: #f3f4f6;
        color: #374151;
    }




.saza-cta[b-vpslhgms3o] {
    text-decoration: none;
    padding: 8px 14px; /* Slightly smaller padding */
    border-radius: 999px;
    border: 1px solid #111827;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background: #111827;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    justify-self: end;
}

    .saza-cta:hover[b-vpslhgms3o] {
        background-color: #0f172a;
        border-color: #0f172a;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    }

/* CART BUTTON */
.saza-cart-btn[b-vpslhgms3o] {
    background: none;
    border: none;
    color: #374151;
    cursor: pointer;
    position: relative;
    padding: 8px;
    margin-left: 8px; /* Small separation from profile */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.saza-cart-btn:hover[b-vpslhgms3o] {
    color: #111827;
    transform: scale(1.05);
}



.saza-cart-badge[b-vpslhgms3o] {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #43a047; /* Green 600 */
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(67, 160, 71, 0.4);
}


/* BURGER + MOBILE MENU */
.saza-burger[b-vpslhgms3o] {
    grid-column: 3; /* add this */
    justify-self: end;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.saza-burger-line[b-vpslhgms3o] {
    width: 22px;
    height: 2px;
    background-color: #111827;
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .saza-burger-line.open:nth-child(1)[b-vpslhgms3o] {
        transform: translateY(7px) rotate(45deg);
    }

    .saza-burger-line.open:nth-child(2)[b-vpslhgms3o] {
        opacity: 0;
    }

    .saza-burger-line.open:nth-child(3)[b-vpslhgms3o] {
        transform: translateY(-7px) rotate(-45deg);
    }

.saza-mobile-menu[b-vpslhgms3o] {
    display: flex; /* Always flex layout, visibility controlled by max-height */
    flex-direction: column;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    
    /* Animation Props */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 24px; /* Collapsed padding */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease;
}

    .saza-mobile-menu.open[b-vpslhgms3o] {
        max-height: 800px; /* Large enough to fit content */
        opacity: 1;
        padding: 12px 24px 20px; /* Restore padding */
    }

/* MOBILE LINK STYLES */
.saza-mobile-menu[b-vpslhgms3o]  .saza-mobile-link {
    text-decoration: none !important;
    padding: 12px 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    display: block; /* Ensure full width click area */
}

    .saza-mobile-menu[b-vpslhgms3o]  .saza-mobile-link:last-child {
        border-bottom: none;
    }

.saza-mobile-menu[b-vpslhgms3o]  .saza-mobile-link--active {
    color: #111827;
}

.saza-mobile-menu[b-vpslhgms3o]  .saza-mobile-link-cta {
    margin-top: 16px;
    border-radius: 999px;
    text-align: center;
    border: 1px solid #111827;
    background-color: #111827;
    color: #ffffff !important;
    padding: 12px 0;
}

.saza-desktop-only[b-vpslhgms3o] {
    display: flex;
}

.saza-mobile-only[b-vpslhgms3o] {
    display: none;
}

@media (max-width: 992px) {
    
    .saza-topbar-inner[b-vpslhgms3o] {
        justify-content: center;
    }

    .saza-mainnav-inner[b-vpslhgms3o] {
        display: flex; /* Flex instead of Grid for simple mobile layout */
        justify-content: space-between;
        align-items: center;
        min-height: 70px;
        grid-template-columns: none; /* Reset grid */
        gap: 0;
    }

    .saza-mainnav-left[b-vpslhgms3o],
    .saza-mainnav-right[b-vpslhgms3o],
    .saza-desktop-only[b-vpslhgms3o] {
        display: none !important;
    }

    .saza-mobile-only[b-vpslhgms3o] {
        display: flex; /* Burger needs flex */
    }

    .saza-logo[b-vpslhgms3o] {
        justify-content: flex-start;
        margin-right: auto;
    }

        .saza-logo img[b-vpslhgms3o] {
            height: 40px;
        }
}

/* PROFILE AVATAR */
.saza-profile-avatar[b-vpslhgms3o] {
    width: 36px;
    height: 36px;
    background-color: #111827;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.saza-profile-avatar:hover[b-vpslhgms3o] {
    background-color: #0f172a;
    transform: scale(1.05);
}

.saza-profile-avatar-guest[b-vpslhgms3o] {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: #4b5563;
}

.saza-profile-avatar-guest:hover[b-vpslhgms3o] {
    background-color: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
}



/* PROFILE DROPDOWN CONTAINER - PUSH FAR RIGHT */
.saza-profile-dropdown[b-vpslhgms3o] {
    margin-left: 16px; /* Large separation */
    position: relative;
}
/* Ensure separator line if desired, or just space */
.saza-profile-dropdown[b-vpslhgms3o]::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 1px;
    background-color: #e5e7eb;
}


/* UTILS */
.hide-caret[b-vpslhgms3o]::after {
    display: none !important;
}


/* ===== Mobile Topbar (Professional / Utility Bar style) ===== */
.saza-topbar--mobile[b-vpslhgms3o] {
    display: none; /* Hidden by default (desktop) */
    font-size: 0.78rem;
    color: #e2e8f0; /* Light text color */
    background-color: #1A2B45; /* Dark blue background */
}

.saza-topbar-mobile-inner[b-vpslhgms3o] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 36px;
    padding: 6px 0;
}

/* Contact area (flat links + divider) */
.saza-topbar-mobile-contact[b-vpslhgms3o] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.saza-topbar-mobile-divider[b-vpslhgms3o] {
    width: 1px;
    height: 16px;
    background: #475569; /* Lighter gray for visibility on dark background */
}

.saza-topbar-mobile-link[b-vpslhgms3o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #cbd5e1; /* Light color for links */
    font-weight: 500; /* Slightly reduced font weight to match desktop */
    letter-spacing: 0.01em;
    white-space: nowrap;
}

    .saza-topbar-mobile-link svg[b-vpslhgms3o] {
        width: 14px;
        height: 14px;
        opacity: 1; /* Full opacity for icons on dark background */
        stroke: currentColor; /* Ensure SVG icons inherit text color */
    }

    .saza-topbar-mobile-link:hover[b-vpslhgms3o] {
        color: #ffffff; /* White on hover */
    }

.saza-topbar-spacer[b-vpslhgms3o] {
    flex: 1;
}

/* Social icons (subtle, squared, not �bubbly�) */
.saza-topbar-socials[b-vpslhgms3o] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.saza-social-icon[b-vpslhgms3o] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05); /* Slightly visible background on dark */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    color: #cbd5e1; /* Light color for icons */
    backdrop-filter: blur(5px);
    transition: all 0.4s ease;
}

    .saza-social-icon:hover[b-vpslhgms3o] {
        background: #0284c7; /* Brand color on hover */
        border-color: #0284c7; /* Brand color border */
        color: white; /* White icon on hover */
    }

/* Mobile behavior */
@media (max-width: 992px) {
    .saza-topbar--desktop[b-vpslhgms3o] {
        display: none;
    }

    .saza-topbar--mobile[b-vpslhgms3o] {
        display: block;
    }

    /* If it overflows, scroll cleanly */
    .saza-topbar-mobile-inner[b-vpslhgms3o] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .saza-topbar-mobile-inner[b-vpslhgms3o]::-webkit-scrollbar {
            display: none;
        }
}

/* Very small phones: hide text, keep icons */
@media (max-width: 420px) {

    /* slightly tighter padding so there�s room for text */
    .saza-topbar--mobile .saza-container[b-vpslhgms3o] {
        padding: 0 14px;
    }

    .saza-topbar-mobile-contact[b-vpslhgms3o] {
        gap: 10px;
    }

    .saza-topbar-mobile-link span[b-vpslhgms3o] {
        display: inline;
        max-width: 150px; /* tune this */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* Ensure the icon row centers perfectly */
.saza-topbar-socials[b-vpslhgms3o] {
    align-items: center;
}

/* Kill inline-SVG baseline quirks */
.saza-social-icon[b-vpslhgms3o] {
    line-height: 0; /* important */
    display: inline-grid; /* keep your grid centering */
    place-items: center;
}

    .saza-social-icon svg[b-vpslhgms3o] {
        display: block; /* important */
    }
.saza-social-icon--fb svg[b-vpslhgms3o] {
    transform: translateY(-2px);
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ABOUT PAGE STYLES */

/* Hero Section */
.about-hero[b-xyc9g24pgw] {
    height: 60vh;
    min-height: 400px;
    background-image: url('images/Gallery/I16.jpeg'); /* Fallback/Base */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-overlay[b-xyc9g24pgw] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.7));
    backdrop-filter: blur(2px);
}

.hero-content[b-xyc9g24pgw] {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-title[b-xyc9g24pgw] {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: -1px;
}

.hero-subtitle[b-xyc9g24pgw] {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* Spacing Util */
.section-spacing[b-xyc9g24pgw] {
    padding: 6rem 0;
}

/* Intro Section */
.about-intro[b-xyc9g24pgw] {
    background: #ffffff;
    overflow: hidden; /* For accents */
}

.intro-grid[b-xyc9g24pgw] {
    display: grid;
    grid-template-columns: 1fr 0.9fr; /* Text wider than image */
    gap: 5rem;
    align-items: center;
}

.section-label[b-xyc9g24pgw] {
    display: block;
    font-size: 0.85rem;
    color: #0284c7; /* Green */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 12px;
    border-left: 3px solid #0284c7; /* Green */
}

.section-heading[b-xyc9g24pgw] {
    font-size: 3rem;
    color: #1a3c5e;
    font-weight: 800;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -1px;
}

.lead-text[b-xyc9g24pgw] {
    font-size: 1.25rem;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.intro-text p[b-xyc9g24pgw] {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.intro-text[b-xyc9g24pgw] {
    padding-left: 2rem;
}

.marketing-focus[b-xyc9g24pgw] {
    background: #f8fafc;
    border-left: 4px solid #1a3c5e;
    padding: 1.5rem 2rem;
    border-radius: 0 12px 12px 0;
    color: #334155;
    font-style: italic;
    margin: 2rem 0;
}

.marketing-focus strong[b-xyc9g24pgw] {
    color: #1a3c5e;
    font-style: normal;
    font-weight: 700;
}

.intro-actions[b-xyc9g24pgw] {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 2.5rem;
}

.signature[b-xyc9g24pgw] {
    opacity: 0.7;
    filter: grayscale(100%);
    transition: all 0.3s;
}

.signature:hover[b-xyc9g24pgw] {
    filter: grayscale(0%);
    opacity: 1;
}

.signature-logo[b-xyc9g24pgw] {
    height: 120px; /* Much Bigger */
    width: auto;
}

/* Image Styling (Clean & Professional) */
.intro-image-wrapper[b-xyc9g24pgw] {
    position: relative;
    padding-top: 2rem; /* Space for accent */
    padding-left: 2rem;
    max-width: 480px; /* Limit image width */
    margin: 0 auto; /* Center it in its column if smaller */
}

.image-frame-clean[b-xyc9g24pgw] {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #fff;
}

.ruben-portrait[b-xyc9g24pgw] {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-frame-clean:hover .ruben-portrait[b-xyc9g24pgw] {
    transform: scale(1.03);
}

.image-accent-bg[b-xyc9g24pgw] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #f1f5f9; /* Subtle grey block behind */
    z-index: 1;
    transform: translate(-20px, -20px); /* Offset to top-left */
    border-radius: 4px;
}

/* Add a second accent line */
.intro-image-wrapper[b-xyc9g24pgw]::after {
    content: "";
    position: absolute;
    bottom: -20px; right: -20px;
    width: 150px;
    height: 150px;
    border-right: 4px solid #0284c7;
    border-bottom: 4px solid #0284c7;
    z-index: 3;
}



/* Mission Section */
.mission-section[b-xyc9g24pgw] {
    position: relative;
    padding: 8rem 0;
    background: #0f172a; /* Fallback */
    overflow: hidden;
}

.mission-bg-image[b-xyc9g24pgw] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/Gallery/I7.jpeg'); /* Use a scenic shot if available, re-using for now */
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: blur(2px);
    transform: scale(1.1); /* Slight zoom for blur edge fix */
}

.mission-content[b-xyc9g24pgw] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end; /* Push card to right */
}

.mission-card[b-xyc9g24pgw] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 4rem;
    max-width: 600px;
    border-radius: 4px; /* Crisp corners for contrast */
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    border-left: 8px solid #0284c7; /* Green */
    margin-right: 2rem;
}

.mission-heading[b-xyc9g24pgw] {
    font-size: 2.2rem;
    color: #1a3c5e;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.mission-divider[b-xyc9g24pgw] {
    height: 4px;
    width: 60px;
    background: #cbd5e1;
    margin-bottom: 2rem;
}

.mission-card p[b-xyc9g24pgw] {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.mission-card strong[b-xyc9g24pgw] {
    color: #0f172a;
    font-weight: 700;
}

/* Values Section (Grand Design) */
.values-section[b-xyc9g24pgw] {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    text-align: center;
    position: relative;
    padding: 8rem 0;
}

.values-header[b-xyc9g24pgw] {
    margin-bottom: 5rem;
}

.values-grid[b-xyc9g24pgw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.value-item[b-xyc9g24pgw] {
    background: #ffffff;
    padding: 4rem 2.5rem;
    border-radius: 30px;
    box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.05),
        0 0 0 1px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 4px solid transparent;
}

.value-item:hover[b-xyc9g24pgw] {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px -15px rgba(26, 60, 94, 0.15);
    border-bottom-color: #0284c7; /* Green */
}

/* Big Background Step Number */
.value-step[b-xyc9g24pgw] {
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 10rem;
    font-weight: 900;
    color: #1a3c5e;
    opacity: 0.04;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1;
    z-index: 0;
    transition: transform 0.4s ease;
}

.value-item:hover .value-step[b-xyc9g24pgw] {
    transform: translateX(-10px) translateY(10px);
    color: #0284c7; /* Green */
    opacity: 0.08;
}

.value-content[b-xyc9g24pgw] {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.value-icon-wrapper[b-xyc9g24pgw] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    color: #1a3c5e;
    transition: all 0.4s ease;
}

.value-item:hover .value-icon-wrapper[b-xyc9g24pgw] {
    background: #1a3c5e;
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 20px rgba(26, 60, 94, 0.2);
}

.value-item h3[b-xyc9g24pgw] {
    font-size: 1.8rem;
    color: #1a3c5e;
    margin-bottom: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.value-line[b-xyc9g24pgw] {
    width: 40px;
    height: 3px;
    background: #0284c7; /* Green */
    margin-bottom: 1.5rem;
    transition: width 0.3s ease;
}

.value-item:hover .value-line[b-xyc9g24pgw] {
    width: 80px;
}

.value-item p[b-xyc9g24pgw] {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
    max-width: 90%;
}

/* CTA Section (Sexy Finale) */
.about-cta[b-xyc9g24pgw] {
    background: radial-gradient(circle at center top, #1e293b 0%, #020617 100%);
    color: white;
    text-align: center;
    padding: 10rem 0 12rem;
    position: relative;
    overflow: hidden;
}

/* Texture Overlay (Noise) */
.about-cta[b-xyc9g24pgw]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

/* Abstract Light Glow */
.about-cta[b-xyc9g24pgw]::after {
    content: "";
    position: absolute;
    top: -50%; left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.cta-inner[b-xyc9g24pgw] {
    position: relative;
    z-index: 5;
}

.cta-inner h2[b-xyc9g24pgw] {
    font-family: 'Great Vibes', cursive;
    font-size: 6rem;
    color: #ffffff;
    margin-bottom: 2rem;
    text-shadow: 
        0 0 10px rgba(56, 189, 248, 0.8),
        0 0 20px rgba(56, 189, 248, 0.5),
        0 0 40px rgba(56, 189, 248, 0.3);
    line-height: 1.2;
    transform: rotate(-2deg);
}

.cta-inner p[b-xyc9g24pgw] {
    font-size: 1.4rem;
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
    color: #e2e8f0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cta-sub[b-xyc9g24pgw] {
    font-size: 1.1rem !important;
    opacity: 0.8;
    margin-bottom: 4rem !important;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #94a3b8 !important;
}

.cta-buttons[b-xyc9g24pgw] {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.btn-primary[b-xyc9g24pgw] {
    padding: 1.2rem 3.5rem;
    font-size: 1rem;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 
        0 0 20px rgba(2, 132, 199, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover[b-xyc9g24pgw] {
    transform: translateY(-5px);
    box-shadow: 0 0 40px rgba(2, 132, 199, 0.6);
}

.btn-secondary[b-xyc9g24pgw] {
    padding: 1.2rem 3.5rem;
    font-size: 1rem;
    letter-spacing: 2px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    backdrop-filter: blur(5px);
}

.btn-secondary:hover[b-xyc9g24pgw] {
    background: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
    .intro-grid[b-xyc9g24pgw], .values-grid[b-xyc9g24pgw] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* "The Man Behind The Brand" (Intro) mobile layout */
    .about-intro.section-spacing[b-xyc9g24pgw] {
        padding: 3.5rem 0;
    }

    .intro-text[b-xyc9g24pgw] {
        text-align: center;
        padding-left: 0;
    }

    .intro-text p[b-xyc9g24pgw] {
        font-size: 1rem;
    }

    .section-label[b-xyc9g24pgw] {
        display: inline-block;
        border-left: none;
        padding-left: 0;
        padding-bottom: 6px;
        margin-bottom: 1rem;
        border-bottom: 3px solid #0284c7; /* Green */
    }

    .section-heading[b-xyc9g24pgw] {
        font-size: 2.25rem;
        margin-bottom: 1.25rem;
    }

    .lead-text[b-xyc9g24pgw] {
        font-size: 1.05rem;
    }

    .marketing-focus[b-xyc9g24pgw] {
        padding: 1.1rem 1.2rem;
        border-left-width: 3px;
        border-radius: 12px;
        text-align: left;
        margin: 1.5rem 0;
    }

    .intro-actions[b-xyc9g24pgw] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .about-intro .btn-primary[b-xyc9g24pgw] {
        width: 100%;
        max-width: 360px;
        align-self: center;
        text-align: center;
    }

    .signature[b-xyc9g24pgw] {
        align-self: center;
    }

    .signature-logo[b-xyc9g24pgw] {
        height: 86px;
    }

    .intro-image-wrapper[b-xyc9g24pgw] {
        padding-top: 0;
        padding-left: 0;
        max-width: 380px;
    }

    .image-accent-bg[b-xyc9g24pgw] {
        transform: translate(-12px, -12px);
    }

    .intro-image-wrapper[b-xyc9g24pgw]::after {
        width: 110px;
        height: 110px;
        bottom: -14px;
        right: -14px;
        border-right-width: 3px;
        border-bottom-width: 3px;
    }
    
    .mission-content[b-xyc9g24pgw] {
        justify-content: center;
    }

    .mission-card[b-xyc9g24pgw] {
        margin-right: 0;
    }

    .hero-title[b-xyc9g24pgw] {
        font-size: 3rem;
    }
    
    .image-frame[b-xyc9g24pgw] {
        transform: rotate(0);
        margin: 0 auto;
        max-width: 500px;
    }
    
    .stat-card[b-xyc9g24pgw] {
        left: 50%;
        transform: translateX(-50%);
        bottom: -30px;
    }
}

@media (max-width: 480px) {
    .section-heading[b-xyc9g24pgw] {
        font-size: 2rem;
    }

    .hero-title[b-xyc9g24pgw] {
        font-size: 2.4rem;
    }

    .intro-image-wrapper[b-xyc9g24pgw] {
        max-width: 320px;
    }
}
/* /Components/Pages/Admin/AdminBlog.razor.rz.scp.css */
.admin-blog-container[b-x8ld5em4dj] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    color: #1a3c5e;
}

/* Header */
.admin-header[b-x8ld5em4dj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.eyebrow[b-x8ld5em4dj] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #d32f2f;
    margin-bottom: 0.5rem;
    display: block;
}

.admin-header h1[b-x8ld5em4dj] {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.header-actions[b-x8ld5em4dj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tab-switcher[b-x8ld5em4dj] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    gap: 4px;
}

.tab-btn[b-x8ld5em4dj] {
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover[b-x8ld5em4dj] {
    color: #1a3c5e;
}

.tab-btn.active[b-x8ld5em4dj] {
    background: white;
    color: #1a3c5e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.action-btn[b-x8ld5em4dj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.action-btn.small[b-x8ld5em4dj] {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

.action-btn.outline[b-x8ld5em4dj] {
    background: transparent;
    border: 2px solid #cbd5e1;
    color: #64748b;
}

.action-btn.outline:hover[b-x8ld5em4dj] {
    border-color: #1a3c5e;
    color: #1a3c5e;
}

.action-btn.primary[b-x8ld5em4dj] {
    background: #1a3c5e;
    color: white;
    border: none;
    min-width: 160px;
}

.action-btn.primary:hover:not(:disabled)[b-x8ld5em4dj] {
    background: #0f2438;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 60, 94, 0.2);
}

.action-btn.primary:disabled[b-x8ld5em4dj] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Notifications */
.notification[b-x8ld5em4dj] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.notification .icon[b-x8ld5em4dj] {
    font-size: 1.2rem;
}

.notification.success[b-x8ld5em4dj] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.notification.error[b-x8ld5em4dj] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Editor Layout */
.editor-layout[b-x8ld5em4dj] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 split for better preview width */
    gap: 3rem;
    margin-bottom: 4rem;
}

.editor-panel[b-x8ld5em4dj], .preview-panel[b-x8ld5em4dj] {
    min-width: 0; /* Prevent overflow */
}

.panel-header[b-x8ld5em4dj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.panel-header h2[b-x8ld5em4dj] {
    font-size: 1.25rem;
    color: #334155;
    margin: 0;
    font-weight: 700;
}

/* Form Styling */
.admin-form[b-x8ld5em4dj] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.form-group[b-x8ld5em4dj] {
    margin-bottom: 1.5rem;
}

.form-row[b-x8ld5em4dj] {
    display: flex;
    gap: 1.5rem;
}

.form-group.half[b-x8ld5em4dj] {
    flex: 1;
}

.form-group label[b-x8ld5em4dj] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

.form-control[b-x8ld5em4dj] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s;
    background: #f8fafc;
}

.form-control:focus[b-x8ld5em4dj] {
    outline: none;
    border-color: #1a3c5e;
    background: white;
    box-shadow: 0 0 0 3px rgba(26, 60, 94, 0.1);
}

.form-control.tall[b-x8ld5em4dj] {
    resize: vertical;
    min-height: 200px;
}

.hint[b-x8ld5em4dj] {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.4rem;
    text-align: right;
}

/* Image Selection Controls */
.image-selection-controls[b-x8ld5em4dj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.upload-control[b-x8ld5em4dj] {
    position: relative;
    overflow: hidden;
}

.hidden-input[b-x8ld5em4dj] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}

.divider[b-x8ld5em4dj] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #cbd5e1;
}

/* Status Badges */
.current-image-status[b-x8ld5em4dj] {
    margin-top: 0.5rem;
}

.status-badge[b-x8ld5em4dj] {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.new[b-x8ld5em4dj] { background: #dcfce7; color: #166534; }
.status-badge.gallery[b-x8ld5em4dj] { background: #e0f2fe; color: #075985; }
.status-badge.current[b-x8ld5em4dj] { background: #f1f5f9; color: #475569; }
.status-badge.none[b-x8ld5em4dj] { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; }

/* Modal Styles */
.modal-overlay[b-x8ld5em4dj] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-content[b-x8ld5em4dj] {
    background: white;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-x8ld5em4dj] {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-x8ld5em4dj] {
    margin: 0;
    font-size: 1.25rem;
    color: #1e293b;
}

.close-btn[b-x8ld5em4dj] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-x8ld5em4dj] {
    padding: 0 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* File Upload Wrapper (Legacy - check if still needed or remove) */
.file-upload-wrapper[b-x8ld5em4dj] {
    position: relative;
    overflow: hidden;
}

/* ... rest of styles ... */
.form-actions[b-x8ld5em4dj] {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
}

/* Preview Panel & Blog Row Styling */
.preview-panel[b-x8ld5em4dj] {
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.preview-canvas[b-x8ld5em4dj] {
    background: #ffffff; /* White background to mimic page */
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e8f0;
    /* Simulate container constraints */
    container-type: inline-size;
}

.preview-note[b-x8ld5em4dj] {
    margin-top: 2rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

/* BLOG ROW STYLES (Duplicated from Blog.razor.css for Preview) */
.blog-row[b-x8ld5em4dj] {
    display: flex;
    flex-direction: column; /* Default stack on small container */
    gap: 2rem;
    align-items: center;
    text-align: center;
    width: 100%;
}

@container (min-width: 500px) {
    .blog-row[b-x8ld5em4dj] {
        flex-direction: row; /* Side by side if space permits */
        text-align: left;
        align-items: center;
        gap: 2rem;
    }
    .blog-row.image-right .blog-content[b-x8ld5em4dj] { order: 1; }
    .blog-row.image-right .blog-image-wrapper[b-x8ld5em4dj] { order: 2; }
    
    .blog-content[b-x8ld5em4dj] { 
        align-items: flex-start; 
        text-align: left; 
    }
}

.blog-content[b-x8ld5em4dj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.meta-top[b-x8ld5em4dj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    color: #d32f2f;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
}

@container (min-width: 500px) {
    .meta-top[b-x8ld5em4dj] {
        justify-content: flex-start;
        padding-left: 10px;
        border-left: 3px solid #d32f2f;
    }
}

.blog-title[b-x8ld5em4dj] {
    margin: 0 0 1rem 0;
    line-height: 1.1;
}

.blog-title a[b-x8ld5em4dj] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a3c5e;
    text-decoration: none;
    pointer-events: none; /* Disable link in preview */
}

.blog-summary[b-x8ld5em4dj] {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.read-more-btn[b-x8ld5em4dj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.5rem;
    background: transparent;
    border: 2px solid #1a3c5e;
    color: #1a3c5e;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-decoration: none;
    pointer-events: none;
}

.blog-image-wrapper[b-x8ld5em4dj] {
    flex: 1;
    position: relative;
    padding: 1rem; /* Space for accent */
    width: 100%;
    max-width: 400px;
}

.image-frame-clean[b-x8ld5em4dj] {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.2);
    background: #fff;
    aspect-ratio: 4/3;
}

.blog-image[b-x8ld5em4dj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.placeholder-box[b-x8ld5em4dj] {
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.placeholder-box[b-x8ld5em4dj]::after {
    content: "Image";
    color: #94a3b8;
    font-weight: 600;
}

.image-accent-bg[b-x8ld5em4dj] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    z-index: 1;
    transform: translate(-10px, -10px);
    border-radius: 4px;
}

.blog-image-wrapper[b-x8ld5em4dj]::after {
    content: "";
    position: absolute;
    bottom: -10px; right: -10px;
    width: 60px;
    height: 60px;
    border-right: 4px solid #d32f2f;
    border-bottom: 4px solid #d32f2f;
    z-index: 3;
}


/* Recent Posts Table */
.recent-posts-section[b-x8ld5em4dj] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.section-header h2[b-x8ld5em4dj] {
    font-size: 1.5rem;
    color: #1a3c5e;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.posts-table-wrapper[b-x8ld5em4dj] {
    overflow-x: auto;
}

.posts-table[b-x8ld5em4dj] {
    width: 100%;
    border-collapse: collapse;
}

.posts-table th[b-x8ld5em4dj] {
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.posts-table td[b-x8ld5em4dj] {
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.posts-table tr:last-child td[b-x8ld5em4dj] {
    border-bottom: none;
}

.col-image[b-x8ld5em4dj] { width: 80px; }

.table-thumb[b-x8ld5em4dj] {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
}

.col-title[b-x8ld5em4dj] { padding-right: 2rem; }

.title-text[b-x8ld5em4dj] {
    display: block;
    font-weight: 600;
    color: #1a3c5e;
    margin-bottom: 0.2rem;
}

.summary-text[b-x8ld5em4dj] {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
}

.actions-cell[b-x8ld5em4dj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.table-action[b-x8ld5em4dj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
}

.table-action.view[b-x8ld5em4dj] {
    color: #1a3c5e;
    background: #f1f5f9;
}
.table-action.view:hover[b-x8ld5em4dj] { background: #e2e8f0; }

.table-action.edit[b-x8ld5em4dj] {
    color: #0f172a;
    background: #fff;
    border-color: #cbd5e1;
}
.table-action.edit:hover[b-x8ld5em4dj] { border-color: #1a3c5e; }

.table-action.delete[b-x8ld5em4dj] {
    color: #b91c1c;
    background: #fff;
    border-color: #fca5a5;
}
.table-action.delete:hover[b-x8ld5em4dj] { 
    background: #fef2f2; 
    border-color: #ef4444; 
}

.empty-table[b-x8ld5em4dj] {
    text-align: center;
    padding: 3rem;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 992px) {
    .editor-layout[b-x8ld5em4dj] {
        grid-template-columns: 1fr;
    }
    
    .form-row[b-x8ld5em4dj] {
        flex-direction: column;
        gap: 0;
    }
}

/* Gallery Upload Section */
.gallery-section[b-x8ld5em4dj] {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    padding: 2rem;
    margin-bottom: 3rem;
}

.gallery-upload-card[b-x8ld5em4dj] {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.upload-status[b-x8ld5em4dj] {
    margin-top: 1rem;
    padding: 0.8rem;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
}

.upload-row[b-x8ld5em4dj] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.upload-row .form-control[b-x8ld5em4dj] {
    flex: 1;
}

.selected-files-list[b-x8ld5em4dj] {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #64748b;
    padding: 0.5rem;
    background: #f1f5f9;
    border-radius: 4px;
}
/* /Components/Pages/Admin/Bookings.razor.rz.scp.css */
/* Admin Dashboard Command Center */
.admin-dashboard[b-tuxn3b57dg] {
    padding: 2rem 0 5rem;
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.saza-container[b-tuxn3b57dg] {
    max-width: 1600px; /* Wide for side-by-side */
    margin: 0 auto;
    padding: 0 24px;
}

.dashboard-layout[b-tuxn3b57dg] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    height: calc(100vh - 120px); /* Fill screen minus header */
}

/* === LEFT: CALENDAR PANEL === */
.calendar-panel[b-tuxn3b57dg] {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.calendar-header[b-tuxn3b57dg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.header-left h1[b-tuxn3b57dg] {
    font-size: 1rem;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 2px;
    margin: 0 0 0.5rem;
}

.month-nav[b-tuxn3b57dg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.month-nav h2[b-tuxn3b57dg] {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a3c5e;
    margin: 0;
    line-height: 1;
}

.nav-btn[b-tuxn3b57dg], .btn-today[b-tuxn3b57dg] {
    background: #f1f5f9;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-btn:hover[b-tuxn3b57dg], .btn-today:hover[b-tuxn3b57dg] {
    background: #e2e8f0;
    color: #1a3c5e;
}

/* Visual Calendar Grid */
.visual-calendar[b-tuxn3b57dg] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.day-names[b-tuxn3b57dg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: right;
    padding-right: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.days-grid[b-tuxn3b57dg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e2e8f0; /* Grid lines */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
}

.day-cell[b-tuxn3b57dg] {
    background: #ffffff;
    min-height: 100px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.day-cell:hover:not(.empty)[b-tuxn3b57dg] {
    background: #f8fafc;
}

.day-cell.selected[b-tuxn3b57dg] {
    background: #eff6ff; /* Light blue highlight */
    box-shadow: inset 0 0 0 2px #3b82f6;
    z-index: 2;
}

.day-cell.today .day-number[b-tuxn3b57dg] {
    background: #1a3c5e;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-number[b-tuxn3b57dg] {
    font-weight: 700;
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 4px;
    align-self: flex-end;
}

/* Pills in Calendar */
.day-pills[b-tuxn3b57dg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.booking-pill[b-tuxn3b57dg] {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.booking-pill.pending[b-tuxn3b57dg] { background: #fff7ed; color: #c2410c; border-left: 3px solid #f97316; }
.booking-pill.approved[b-tuxn3b57dg] { background: #ecfdf5; color: #15803d; border-left: 3px solid #22c55e; }
.booking-pill.unavailable[b-tuxn3b57dg] { background: #f1f5f9; color: #64748b; border-left: 3px solid #94a3b8; text-decoration: line-through; opacity: 0.7; }

/* === RIGHT: INSPECTOR PANEL === */
.inspector-panel[b-tuxn3b57dg] {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #f1f5f9;
}

.inspector-header[b-tuxn3b57dg] {
    padding: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.inspector-header h3[b-tuxn3b57dg] {
    margin: 0;
    font-size: 1.1rem;
    color: #1a3c5e;
    font-weight: 700;
}

.badge-count[b-tuxn3b57dg] {
    background: #d32f2f;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.btn-close-inspector[b-tuxn3b57dg] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
}

.inspector-content[b-tuxn3b57dg] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Empty States */
.empty-inbox[b-tuxn3b57dg], .empty-day-state[b-tuxn3b57dg] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}

.empty-inbox .icon[b-tuxn3b57dg] { font-size: 3rem; margin-bottom: 1rem; }
.empty-inbox p[b-tuxn3b57dg] { font-size: 1.2rem; color: #1a3c5e; margin-bottom: 0.5rem; font-weight: 600; }
.empty-inbox .sub[b-tuxn3b57dg] { font-size: 0.9rem; }

/* Cards in List */
.inbox-list[b-tuxn3b57dg] { display: flex; flex-direction: column; gap: 10px; }

.inbox-card[b-tuxn3b57dg] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
    align-items: center;
}

.inbox-card:hover[b-tuxn3b57dg] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.inbox-date[b-tuxn3b57dg] {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    color: #d32f2f;
    line-height: 1.2;
    text-transform: uppercase;
}

.inbox-info h4[b-tuxn3b57dg] { margin: 0 0 4px; font-size: 0.95rem; color: #0f172a; }
.truncate[b-tuxn3b57dg] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; color: #64748b; margin: 0; }
.inbox-arrow[b-tuxn3b57dg] { color: #cbd5e1; font-weight: 700; }

/* Detail View */
.booking-detail-card[b-tuxn3b57dg] {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.booking-detail-card.pending[b-tuxn3b57dg] { border-left: 4px solid #f97316; }
.booking-detail-card.approved[b-tuxn3b57dg] { border-left: 4px solid #22c55e; }
.booking-detail-card.unavailable[b-tuxn3b57dg] { border-left: 4px solid #94a3b8; background: #f8fafc; }

.detail-header[b-tuxn3b57dg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.status-badge[b-tuxn3b57dg] {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}
.status-badge.pending[b-tuxn3b57dg] { background: #fff7ed; color: #c2410c; }
.status-badge.approved[b-tuxn3b57dg] { background: #ecfdf5; color: #15803d; }
.status-badge.unavailable[b-tuxn3b57dg] { background: #f1f5f9; color: #475569; }

.detail-time[b-tuxn3b57dg] { font-size: 0.85rem; color: #94a3b8; font-weight: 600; }

.booking-detail-card h4[b-tuxn3b57dg] { font-size: 1.2rem; margin-bottom: 0.5rem; color: #0f172a; }
.detail-desc[b-tuxn3b57dg] { font-size: 0.95rem; color: #475569; line-height: 1.5; margin-bottom: 1.5rem; }

.detail-contact[b-tuxn3b57dg] {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #334155;
    margin-bottom: 1.5rem;
}

.detail-actions[b-tuxn3b57dg] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.delete-wrapper[b-tuxn3b57dg] {
    display: flex;
    gap: 10px;
}

.btn-approve[b-tuxn3b57dg], .btn-reject[b-tuxn3b57dg], .btn-unblock[b-tuxn3b57dg], .btn-block-day[b-tuxn3b57dg], .btn-add-block[b-tuxn3b57dg], .btn-reset-pending[b-tuxn3b57dg], .btn-delete[b-tuxn3b57dg], .btn-confirm-delete[b-tuxn3b57dg], .btn-cancel-delete[b-tuxn3b57dg] {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.btn-approve[b-tuxn3b57dg] { background: #10b981; color: white; }
.btn-reject[b-tuxn3b57dg] { background: #ef4444; color: white; }
.btn-reset-pending[b-tuxn3b57dg] { background: #f59e0b; color: white; } /* Orange */

.btn-delete[b-tuxn3b57dg] { 
    background: transparent; 
    border: 1px solid #fee2e2; 
    color: #ef4444; 
}
.btn-delete:hover[b-tuxn3b57dg] { background: #fef2f2; }

.btn-confirm-delete[b-tuxn3b57dg] { background: #dc2626; color: white; animation: pulse-b-tuxn3b57dg 1s infinite; }
.btn-cancel-delete[b-tuxn3b57dg] { background: #e5e7eb; color: #374151; }

.btn-unblock[b-tuxn3b57dg] { background: white; border: 1px solid #cbd5e1; color: #64748b; }
.btn-block-day[b-tuxn3b57dg] { background: #f1f5f9; color: #475569; border: 1px dashed #cbd5e1; width: 100%; padding: 1rem; }
.btn-block-day:hover[b-tuxn3b57dg] { border-color: #94a3b8; background: #e2e8f0; }
.btn-add-block[b-tuxn3b57dg] { background: #1a3c5e; color: white; width: 100%; }

@keyframes pulse-b-tuxn3b57dg {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Responsive */
@media (max-width: 992px) {
    .dashboard-layout[b-tuxn3b57dg] {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .inspector-panel[b-tuxn3b57dg] {
        border-left: none;
        border-top: 1px solid #f1f5f9;
        min-height: 500px;
    }
}
/* /Components/Pages/Blog.razor.rz.scp.css */
.blog-page-container[b-nflpne3cqr] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 2rem 8rem;
}

.gallery-link-btn[b-nflpne3cqr] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    background: #fff;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.gallery-link-btn:hover[b-nflpne3cqr] {
    border-color: #0284c7;
    color: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.gallery-link-btn svg[b-nflpne3cqr] {
    transition: transform 0.3s ease;
}

.gallery-link-btn:hover svg[b-nflpne3cqr] {
    transform: translateX(4px);
}

/* Headers matching Home Page */
.header-section[b-nflpne3cqr] {
    text-align: center;
    margin-bottom: 6rem;
}

.section-cursive-title[b-nflpne3cqr] {
    font-family: 'Great Vibes', cursive;
    font-weight: normal;
    color: #80d8ff;
    font-size: 4rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.section-bold-subtitle[b-nflpne3cqr] {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #1a3c5e;
    margin-bottom: 1rem;
}

/* Decoration matching Home Page */
.section-decoration[b-nflpne3cqr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.section-decoration .line[b-nflpne3cqr] {
    width: 80px;
    height: 2px;
    background-color: #1a3c5e;
    border-radius: 2px;
}

.section-decoration .fish-icon[b-nflpne3cqr] {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* Blog Rows */
.blog-list[b-nflpne3cqr] {
    display: flex;
    flex-direction: column;
    gap: 8rem; /* Large spacing between posts */
}

.blog-row[b-nflpne3cqr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.blog-row.image-right .blog-content[b-nflpne3cqr] {
    order: 1;
}
.blog-row.image-right .blog-image-wrapper[b-nflpne3cqr] {
    order: 2;
}

.blog-row.image-left .blog-content[b-nflpne3cqr] {
    order: 2;
}
.blog-row.image-left .blog-image-wrapper[b-nflpne3cqr] {
    order: 1;
}

/* Blog Content Side */
.blog-content[b-nflpne3cqr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.meta-top[b-nflpne3cqr] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: #0284c7; /* Accent color */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 12px;
    border-left: 3px solid #0284c7;
}

.meta-sep[b-nflpne3cqr] {
    color: #cbd5e1;
    font-weight: 400;
}

.blog-title[b-nflpne3cqr] {
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
}

.blog-title a[b-nflpne3cqr] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a3c5e;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-title a:hover[b-nflpne3cqr] {
    color: #80d8ff;
}

.blog-summary[b-nflpne3cqr] {
    font-size: 1.15rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.read-more-btn[b-nflpne3cqr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 2rem;
    background: transparent;
    border: 2px solid #1a3c5e;
    color: #1a3c5e;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more-btn:hover[b-nflpne3cqr] {
    background: #1a3c5e;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(26, 60, 94, 0.15);
}

/* Fancy Image Wrapper (Ported from About) */
.blog-image-wrapper[b-nflpne3cqr] {
    position: relative;
    padding: 2rem; /* Space for accents */
    /* Center it if simpler */
    margin: 0 auto;
    width: 100%;
    max-width: 550px;
}

.image-frame-clean[b-nflpne3cqr] {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #fff;
    aspect-ratio: 4/3; /* Consistent aspect ratio */
}

.blog-image[b-nflpne3cqr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.image-frame-clean:hover .blog-image[b-nflpne3cqr] {
    transform: scale(1.05);
}

.image-accent-bg[b-nflpne3cqr] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    z-index: 1;
    transform: translate(-15px, -15px);
    border-radius: 4px;
}

/* Corner Accent */
.blog-image-wrapper[b-nflpne3cqr]::after {
    content: "";
    position: absolute;
    bottom: -15px; right: -15px;
    width: 100px;
    height: 100px;
    border-right: 4px solid #0284c7;
    border-bottom: 4px solid #0284c7;
    z-index: 3;
}


/* Skeleton & Empty States */
.blog-grid-skeleton[b-nflpne3cqr] {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.skeleton-row[b-nflpne3cqr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.skeleton-img[b-nflpne3cqr] {
    width: 100%;
    aspect-ratio: 4/3;
    background: #e2e8f0;
    border-radius: 8px;
}

.skeleton-txt[b-nflpne3cqr] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sk-line[b-nflpne3cqr] { height: 16px; background: #e2e8f0; border-radius: 4px; }
.sk-title[b-nflpne3cqr] { height: 40px; width: 70%; background: #e2e8f0; border-radius: 4px; }

/* Responsive */
@media (max-width: 992px) {
    .blog-row[b-nflpne3cqr] {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .blog-row.image-left .blog-content[b-nflpne3cqr],
    .blog-row.image-right .blog-content[b-nflpne3cqr] {
        order: 2;
    }

    .blog-row.image-left .blog-image-wrapper[b-nflpne3cqr],
    .blog-row.image-right .blog-image-wrapper[b-nflpne3cqr] {
        order: 1;
    }

    .blog-content[b-nflpne3cqr] {
        align-items: center;
        text-align: center;
    }

    .meta-top[b-nflpne3cqr] {
        border-left: none;
        padding-left: 0;
        justify-content: center;
    }

    .section-cursive-title[b-nflpne3cqr] {
        font-size: 3rem;
    }
}
/* /Components/Pages/BlogDetails.razor.rz.scp.css */
/* Modern Editorial Blog Details */

.blog-post-container[b-om1pol8mop] {
    padding-bottom: 8rem;
    background: #ffffff;
    color: #334155;
}

/* Header Section */
.post-header[b-om1pol8mop] {
    padding: 6rem 1rem 4rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.post-meta-top[b-om1pol8mop] {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0284c7; /* Green */
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.post-title[b-om1pol8mop] {
    font-family: 'Segoe UI', sans-serif; /* Or a serif if available */
    font-size: 3.5rem;
    font-weight: 800;
    color: #1a3c5e;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.post-author-line[b-om1pol8mop] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1rem;
    color: #64748b;
}

.author-avatar[b-om1pol8mop] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    font-size: 0.8rem;
}

/* Featured Image */
.featured-image-container[b-om1pol8mop] {
    max-width: 1100px;
    margin: 0 auto 5rem;
    padding: 0 1.5rem;
}

.featured-image-wrapper[b-om1pol8mop] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
    aspect-ratio: 16/9;
}

.featured-image[b-om1pol8mop] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content Area */
.post-content-body[b-om1pol8mop] {
    max-width: 740px; /* Optimal reading width */
    margin: 0 auto;
    padding: 0 1.5rem;
    font-family: 'Segoe UI', sans-serif; /* Fallback to system fonts */
    font-size: 1.15rem;
    line-height: 1.8;
    color: #334155;
}

/* Content Typography (targets HTML likely injected via rich text editor) */
[b-om1pol8mop] h2 {
    font-size: 2rem;
    color: #1a3c5e;
    margin: 3rem 0 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

[b-om1pol8mop] h3 {
    font-size: 1.5rem;
    color: #1a3c5e;
    margin: 2.5rem 0 1rem;
    font-weight: 600;
}

[b-om1pol8mop] p {
    margin-bottom: 1.5rem;
}

[b-om1pol8mop] ul, [b-om1pol8mop] ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

[b-om1pol8mop] li {
    margin-bottom: 0.5rem;
}

[b-om1pol8mop] blockquote {
    border-left: 4px solid #0284c7; /* Green */
    padding-left: 1.5rem;
    margin: 2.5rem 0;
    font-style: italic;
    font-size: 1.35rem;
    color: #1e293b;
    background: #f8fafc;
    padding: 2rem;
    border-radius: 0 8px 8px 0;
}

[b-om1pol8mop] img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
    display: block;
}

/* Back/Nav */
.post-footer[b-om1pol8mop] {
    max-width: 740px;
    margin: 6rem auto 0;
    padding: 3rem 1.5rem 0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-btn[b-om1pol8mop] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.back-btn:hover[b-om1pol8mop] {
    color: #1a3c5e;
}

/* Loading States */
.loading-container[b-om1pol8mop] {
    max-width: 800px;
    margin: 6rem auto;
    padding: 0 2rem;
    text-align: center;
}
.skeleton-title[b-om1pol8mop] {
    height: 60px;
    background: #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.skeleton-line[b-om1pol8mop] {
    height: 16px;
    background: #f1f5f9;
    border-radius: 4px;
    margin-bottom: 1rem;
    width: 100%;
}

/* Empty State */
.not-found-container[b-om1pol8mop] {
    text-align: center;
    padding: 8rem 2rem;
    color: #64748b;
}

@media (max-width: 768px) {
    .post-title[b-om1pol8mop] {
        font-size: 2.5rem;
    }
    .post-header[b-om1pol8mop] {
        padding: 4rem 1rem 3rem;
    }
    .featured-image-container[b-om1pol8mop] {
        padding: 0;
    }
    .featured-image-wrapper[b-om1pol8mop] {
        border-radius: 0; /* Full bleed on mobile */
    }
}
/* /Components/Pages/Book.razor.rz.scp.css */
/* BOOKING PAGE STYLES (Grand/Sexy) */

/* Hero Section */
.book-hero[b-86g4xi4c4w] {
    height: 50vh;
    min-height: 350px;
    background-image: url('images/Gallery/I39.jpeg'); /* Use a good action shot */
    background-size: cover;
    background-position: center 20%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-overlay[b-86g4xi4c4w] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9));
    backdrop-filter: blur(3px);
}

.hero-content[b-86g4xi4c4w] {
    position: relative;
    z-index: 2;
}

.hero-title[b-86g4xi4c4w] {
    font-family: 'Segoe UI', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-subtitle[b-86g4xi4c4w] {
    font-size: 1.4rem;
    font-weight: 300;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* Content Container */
.book-content[b-86g4xi4c4w] {
    margin-top: -6rem; /* Overlap Hero */
    margin-bottom: 6rem;
    position: relative;
    z-index: 5;
}

/* Main Card */
.booking-card[b-86g4xi4c4w] {
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 
        0 30px 60px -12px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(0,0,0,0.02);
    overflow: hidden;
    padding: 0;
}

.booking-grid[b-86g4xi4c4w] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    min-height: 600px;
}

/* Date Column (Left) */
.date-column[b-86g4xi4c4w] {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Duration Selector */
.duration-selector[b-86g4xi4c4w] {
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.duration-label[b-86g4xi4c4w] {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.toggle-switch[b-86g4xi4c4w] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    display: flex;
    gap: 4px;
}

.toggle-btn[b-86g4xi4c4w] {
    flex: 1;
    background: transparent;
    border: none;
    color: #cbd5e1;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.toggle-btn:hover[b-86g4xi4c4w] {
    color: white;
}

.toggle-btn.active[b-86g4xi4c4w] {
    background: #0284c7;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Custom Calendar */
.custom-calendar[b-86g4xi4c4w] {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.1);
}

.calendar-header[b-86g4xi4c4w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.calendar-header button[b-86g4xi4c4w] {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.calendar-header button:hover[b-86g4xi4c4w] {
    color: #0ea5e9;
}

.calendar-days-header[b-86g4xi4c4w] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.calendar-grid[b-86g4xi4c4w] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 8px;
}

.day[b-86g4xi4c4w] {
    aspect-ratio: 1;
    background: transparent;
    border: none;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    margin: 2px;
}

.day:hover:not(.disabled)[b-86g4xi4c4w] {
    background: rgba(255,255,255,0.1);
    color: white;
}

.day.selected[b-86g4xi4c4w] {
    background: #0284c7 !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.4);
    transform: scale(1.1);
    font-weight: 700;
}

.day.in-range[b-86g4xi4c4w] {
    background: rgba(2, 132, 199, 0.2);
    color: white;
    border-radius: 0; /* Connects them visually */
    margin: 2px 0; /* Remove horizontal gap */
}

/* Optional: Round the ends of range */
/* This requires complex logic or nth-child selectors that depend on state, 
   simpler to just have them square-ish or slightly rounded */

.day.booked[b-86g4xi4c4w] {
    text-decoration: line-through;
    opacity: 0.3 !important;
    background: rgba(255, 255, 255, 0.05);
    cursor: not-allowed;
    color: #94a3b8;
}

.day.disabled[b-86g4xi4c4w] {
    color: #475569;
    cursor: not-allowed;
    opacity: 0.5;
}

.selected-summary[b-86g4xi4c4w] {
    margin-top: 2rem;
    text-align: center;
    color: #cbd5e1;
    font-size: 0.95rem;
    background: rgba(0,0,0,0.2);
    padding: 1rem;
    border-radius: 12px;
}

.selected-summary strong[b-86g4xi4c4w] {
    color: #fff;
    color: #fbbf24;
}

/* Rest of styles remain ... */
/* Texture for Date Col */
.date-column[b-86g4xi4c4w]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Reuse existing details column styles, just update date-picker-wrapper removal */
/* ... */

/* Details Column (Right) */
.details-column[b-86g4xi4c4w] {
    padding: 4rem 3rem;
    background: #ffffff;
}

.section-title[b-86g4xi4c4w] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: inherit; /* White in left col, Dark in right due to context */
}

.details-column .section-title[b-86g4xi4c4w] {
    color: #1a3c5e;
}

.section-desc[b-86g4xi4c4w] {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.details-column .section-desc[b-86g4xi4c4w] {
    color: #64748b;
}

.form-group[b-86g4xi4c4w] {
    margin-bottom: 1.5rem;
}

.form-group-row[b-86g4xi4c4w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group label[b-86g4xi4c4w] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-control[b-86g4xi4c4w] {
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border: 2px solid #f1f5f9;
    font-size: 1rem;
    background: #f8fafc;
    transition: all 0.2s;
}

.form-control:focus[b-86g4xi4c4w] {
    outline: none;
    border-color: #1a3c5e;
    background: white;
    box-shadow: 0 4px 12px rgba(26, 60, 94, 0.1);
}

.book-btn[b-86g4xi4c4w] {
    width: 100%;
    padding: 1.2rem;
    background: linear-gradient(135deg, #1a3c5e 0%, #0f172a 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
}

.book-btn:hover:not(:disabled)[b-86g4xi4c4w] {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 15px 30px rgba(2, 132, 199, 0.3);
}

.book-btn:disabled[b-86g4xi4c4w] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Success State */
.success-message[b-86g4xi4c4w] {
    padding: 6rem;
    text-align: center;
    color: #1a3c5e;
}

.success-icon[b-86g4xi4c4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 50%;
    margin-bottom: 2rem;
    animation: popIn-b-86g4xi4c4w 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-86g4xi4c4w {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

.success-message h2[b-86g4xi4c4w] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.success-message p[b-86g4xi4c4w] {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 3rem;
}

.btn-reset[b-86g4xi4c4w] {
    background: transparent;
    border: 2px solid #e2e8f0;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset:hover[b-86g4xi4c4w] {
    border-color: #1a3c5e;
    color: #1a3c5e;
}

/* Responsive */
@media (max-width: 992px) {
    .booking-grid[b-86g4xi4c4w] {
        grid-template-columns: 1fr;
    }
    
    .date-column[b-86g4xi4c4w] {
        padding: 3rem 2rem;
    }
    
    .details-column[b-86g4xi4c4w] {
        padding: 3rem 2rem;
    }
    
    .hero-title[b-86g4xi4c4w] {
        font-size: 3rem;
    }
}

/* Benefits Section */
.booking-benefits[b-86g4xi4c4w] {
    padding: 4rem 0 8rem;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

.benefits-header[b-86g4xi4c4w] {
    text-align: center;
    margin-bottom: 4rem;
}

.section-label[b-86g4xi4c4w] {
    display: inline-block;
    font-size: 0.85rem;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 12px;
    border-left: 3px solid #0284c7;
}

.section-heading[b-86g4xi4c4w] {
    font-size: 2.5rem;
    color: #1e293b;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0;
}

.benefits-grid[b-86g4xi4c4w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.benefit-card[b-86g4xi4c4w] {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    text-align: center;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.benefit-card:hover[b-86g4xi4c4w] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.15);
    border-color: rgba(2, 132, 199, 0.3);
}

.benefit-icon[b-86g4xi4c4w] {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0284c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon[b-86g4xi4c4w] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
}

.benefit-card h3[b-86g4xi4c4w] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.8rem;
}

.benefit-card p[b-86g4xi4c4w] {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .benefits-grid[b-86g4xi4c4w] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .section-heading[b-86g4xi4c4w] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* Contact Page Styles (Premium) */
.contact-header[b-ke5jdzaan3] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 6rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Geometric Pattern Overlay */
.contact-header[b-ke5jdzaan3]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%), 
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
    background-size: 40px 40px;
    pointer-events: none;
}

.contact-header h1[b-ke5jdzaan3] {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: -1px;
    position: relative;
    z-index: 2;
}

.contact-header p[b-ke5jdzaan3] {
    font-size: 1.25rem;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.contact-content[b-ke5jdzaan3] {
    margin-top: -4rem; /* Deeper overlap */
    margin-bottom: 6rem;
    position: relative;
    z-index: 5;
}

.contact-grid[b-ke5jdzaan3] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px; /* More breathing room */
}

/* Form Card */
.contact-form-card[b-ke5jdzaan3] {
    background: #ffffff;
    border-radius: 24px;
    padding: 3.5rem;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0,0,0,0.02); /* Subtle border */
}

.contact-form-card h2[b-ke5jdzaan3] {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.form-group[b-ke5jdzaan3] {
    margin-bottom: 1.8rem;
}

.form-group label[b-ke5jdzaan3] {
    display: block;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-control[b-ke5jdzaan3] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 2px solid #f1f5f9; /* Thicker, lighter border */
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: #f8fafc;
    color: #0f172a;
}

.form-control:focus[b-ke5jdzaan3] {
    outline: none;
    border-color: #0284c7; /* Brand Accent Focus */
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
}

.form-control[b-ke5jdzaan3]::placeholder {
    color: #94a3b8;
}

.submit-btn[b-ke5jdzaan3] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
    box-shadow: 0 10px 20px -5px rgba(2, 132, 199, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover:not(:disabled)[b-ke5jdzaan3] {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(2, 132, 199, 0.5);
}

.submit-btn:disabled[b-ke5jdzaan3] {
    background: #cbd5e1;
    color: #f1f5f9;
    box-shadow: none;
    cursor: not-allowed;
}

/* Success Alert */
.alert-success[b-ke5jdzaan3] {
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    color: #0c4a6e;
    animation: fadeIn-b-ke5jdzaan3 0.5s ease-out;
}

@keyframes fadeIn-b-ke5jdzaan3 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert-success svg[b-ke5jdzaan3] {
    flex-shrink: 0;
    color: #0ea5e9;
}

/* Info Card */
.contact-info-card[b-ke5jdzaan3] {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); /* Richer Dark Gradient */
    color: white;
    border-radius: 24px;
    padding: 3.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Subtle inner glow */
.contact-info-card[b-ke5jdzaan3]::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
    pointer-events: none;
}

.contact-info-card h3[b-ke5jdzaan3] {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-weight: 800;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    z-index: 2;
}

.info-intro[b-ke5jdzaan3] {
    color: #cbd5e1;
    margin-bottom: 3rem;
    line-height: 1.7;
    font-size: 1.05rem;
    position: relative;
    z-index: 2;
}

.info-item[b-ke5jdzaan3] {
    display: flex;
    align-items: center; /* Center align icons vertically */
    gap: 18px;
    margin-bottom: 2.2rem;
    position: relative;
    z-index: 2;
}

.icon-box[b-ke5jdzaan3] {
    background: rgba(255,255,255,0.1);
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.info-item:hover .icon-box[b-ke5jdzaan3] {
    background: #0284c7;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border-color: transparent;
}

.info-item label[b-ke5jdzaan3] {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.info-item a[b-ke5jdzaan3], .info-item span[b-ke5jdzaan3] {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.info-item a:hover[b-ke5jdzaan3] {
    color: #93c5fd; /* Light blue hover */
}

.social-section[b-ke5jdzaan3] {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2.5rem;
    position: relative;
    z-index: 2;
}

.social-section h4[b-ke5jdzaan3] {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.social-icons[b-ke5jdzaan3] {
    display: flex;
    gap: 16px;
}

.social-link[b-ke5jdzaan3] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255,255,255,0.05);
}

.social-link:hover[b-ke5jdzaan3] {
    background: #ffffff;
    color: #0f172a;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .contact-grid[b-ke5jdzaan3] {
        grid-template-columns: 1fr;
    }

    .contact-info-card[b-ke5jdzaan3] {
        order: 1; /* Keep Form First */
        margin-top: 2rem;
    }
    
    .contact-header[b-ke5jdzaan3] {
        padding: 5rem 1rem 4rem;
    }
    
    .contact-header h1[b-ke5jdzaan3] {
        font-size: 2.5rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ... existing styles ... */
/* Keep hero-section, cloud-img, discover-section, saza-container, section-cursive-title, section-bold-subtitle, section-decoration */

:global(:root)[b-s4bs6b4zug] {
    --home-sky-start: #a9d6f2;
    --home-sky-end: #e3f4ff;
}

.hero-section[b-s4bs6b4zug] {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
    color: #f8fafc; /* Light text for dark background */
}

.hero-section[b-s4bs6b4zug]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark overlay + Image */
    background: linear-gradient(rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.25)), url('/images/HomeScreen/HeroImage.jpg') no-repeat center center;
    background-size: cover;
    filter: blur(1px);
    transform: scale(1.1);
    z-index: -1;
}

.hero-container[b-s4bs6b4zug] {
    display: flex;
    flex-direction: row; /* Side by side on desktop */
    max-width: 1200px;
    width: 100%;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
    z-index: 10;
}

.hero-visuals[b-s4bs6b4zug] {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Push image towards text */
    padding-right: 2rem;
}

.hero-logo-img[b-s4bs6b4zug] {
    width: 400px; /* Fixed width */
    height: 400px; /* Fixed height */
    object-fit: contain;
    filter: drop_shadow(0 15px 35px rgba(0,0,0,0.4));
}

.content-container[b-s4bs6b4zug] {
    flex: 1;
    padding: 2rem 2rem 2rem 3rem; /* Extra left padding for divider */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Left align items */
    position: relative;
}

.hero-divider[b-s4bs6b4zug] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 85%;
    background: linear-gradient(180deg, #bae6fd 0%, #38bdf8 40%, #1e3a8a 100%);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4), 0 0 10px rgba(30, 58, 138, 0.4);
    overflow: hidden;
}

.hero-divider[b-s4bs6b4zug]::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmerLine-b-s4bs6b4zug 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shimmerLine-b-s4bs6b4zug {
    0% { top: -100%; }
    30% { top: 150%; } /* Fast pass */
    100% { top: 150%; } /* Wait */
}

.hero-tagline[b-s4bs6b4zug] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #a9d6f2;
    margin-bottom: 0.5rem;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
}

.headline-saza[b-s4bs6b4zug] {
    font-size: 9rem;
    font-weight: 900;
    line-height: 0.85;
    margin-bottom: 0.5rem;
    background: linear-gradient(to bottom, #ffffff 40%, #bae6fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: -4px;
    transform: translateX(-5px); /* Optical alignment */
}

.slogan-text[b-s4bs6b4zug] {
    font-size: 3.5rem;
    color: #80d8ff;
    font-family: 'Great Vibes', cursive;
    margin-bottom: 1.5rem;
    font-weight: normal;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    line-height: 1.2;
}

.hero-desc[b-s4bs6b4zug] {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 3rem;
    max-width: 400px;
    line-height: 1.6;
}

.cta-button[b-s4bs6b4zug] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); /* Blue Gradient */
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Full pill */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
}

.cta-button:hover[b-s4bs6b4zug] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(2, 132, 199, 0.5);
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); /* Lighter Blue on hover */
}

.arrow-icon[b-s4bs6b4zug] {
    transition: transform 0.3s ease;
}

.cta-button:hover .arrow-icon[b-s4bs6b4zug] {
    transform: translateX(5px);
}

/* Hero Mobile/Tablet Layout */
@media (max-width: 992px) {
    .hero-section[b-s4bs6b4zug] {
        min-height: auto;
        padding: 8rem 1rem 4rem; /* Top padding for navbar */
        align-items: flex-start;
    }

    .hero-container[b-s4bs6b4zug] {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .hero-visuals[b-s4bs6b4zug] {
        justify-content: center;
        padding-right: 0;
        margin-bottom: 1rem;
    }

    .hero-logo-img[b-s4bs6b4zug] {
        width: 200px; /* Fixed width for mobile */
        height: 200px; /* Fixed height for mobile */
    }
    
    .hero-divider[b-s4bs6b4zug] {
        display: none;
    }

    .content-container[b-s4bs6b4zug] {
        padding: 0;
        align-items: center; /* Center align items */
    }

    .hero-tagline[b-s4bs6b4zug] {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    .headline-saza[b-s4bs6b4zug] {
        font-size: 5rem; /* Smaller font */
        margin-bottom: 0;
        letter-spacing: -2px;
        transform: none;
    }

    .slogan-text[b-s4bs6b4zug] {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .hero-desc[b-s4bs6b4zug] {
        text-align: center;
        margin-bottom: 2rem;
        font-size: 1rem;
    }

    .cta-button[b-s4bs6b4zug] {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .headline-saza[b-s4bs6b4zug] {
        font-size: 3.5rem;
    }
    
    .slogan-text[b-s4bs6b4zug] {
        font-size: 2rem;
    }
}

.cloud-img[b-s4bs6b4zug] {
    position: absolute;
    z-index: 9;
    opacity: 0.7;
    pointer-events: none;
}

.cloud-1[b-s4bs6b4zug] {
    top: 5%;
    right: 5%;
    width: 250px;
    animation: floatCloud-b-s4bs6b4zug 25s infinite alternate ease-in-out;
}

.cloud-2[b-s4bs6b4zug] {
    top: 8%;
    bottom: auto;
    left: 1%;
    width: 180px;
    opacity: 0.6;
    animation: floatCloud-b-s4bs6b4zug 30s infinite alternate-reverse ease-in-out;
}

.cloud-3[b-s4bs6b4zug] {
    top: -5%;
    left: 35%;
    width: 350px;
    opacity: 0.4;
    animation: floatCloud-b-s4bs6b4zug 45s infinite alternate ease-in-out;
}

@keyframes floatCloud-b-s4bs6b4zug {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-80px);
    }
}

.discover-section[b-s4bs6b4zug] {
    padding: 6rem 2rem;
    background-color: #ffffff;
    text-align: center;
}

/* === SPONSORS SECTION ("Sexy" Modern) === */
.sponsors-section[b-s4bs6b4zug] {
    padding: 7rem 2rem 9rem;
    background: radial-gradient(circle at center top, #ffffff 0%, #f1f5f9 100%);
    text-align: center;
    overflow: hidden; /* For glow effects */
}

.section-label[b-s4bs6b4zug] {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.section-label[b-s4bs6b4zug]::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #0284c7;
    margin: 8px auto 0;
}

/* === MAIN FEATURE SPONSOR === */
.featured-sponsor-wrapper[b-s4bs6b4zug] {
    max-width: 1000px;
    margin: 0 auto 5rem;
    position: relative;
    perspective: 1000px;
}

/* Glow behind the card */
.featured-sponsor-wrapper[b-s4bs6b4zug]::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110%; height: 110%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.05) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.featured-sponsor-card[b-s4bs6b4zug] {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95); /* Slightly more opaque for better pop */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 0; /* Layout handled by children */
    text-decoration: none;
    color: inherit;
    box-shadow: 
        0 25px 50px -12px rgba(0,0,0,0.15), /* Stronger shadow by default */
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    overflow: hidden;
    z-index: 1;
    border-bottom: 4px solid transparent; /* Prepare for border transition */
}

.featured-sponsor-card:hover[b-s4bs6b4zug] {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 
        0 35px 70px -15px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    border-bottom-color: #0284c7; /* Solid green line on hover, simpler than gradient sometimes */
}

/* Animated gradient border bottom (Optional, keeping existing or simplifying) */
.featured-sponsor-card[b-s4bs6b4zug]::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #0284c7, #1a3c5e);
    opacity: 0.8; /* Visible by default now */
    transition: opacity 0.3s ease;
}

.featured-sponsor-card:hover[b-s4bs6b4zug]::after {
    opacity: 1;
}

.featured-logo-col[b-s4bs6b4zug] {
    flex: 0 0 45%;
    padding: 2rem; /* Reduced padding to give logo more room */
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 300px; /* Ensure height for big logo */
}

/* Diagonal slice separator */
.featured-logo-col[b-s4bs6b4zug]::after {
    content: "";
    position: absolute;
    top: 0; right: -30px; bottom: 0;
    width: 60px;
    background: #ffffff;
    transform: skewX(-10deg);
    z-index: 1;
}

.featured-logo[b-s4bs6b4zug] {
    max-width: 100%;
    max-height: 220px; /* MUCH Bigger */
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); /* Add depth to the logo itself */
}

.featured-sponsor-card:hover .featured-logo[b-s4bs6b4zug] {
    transform: scale(1.08) rotate(-2deg);
}

.featured-content-col[b-s4bs6b4zug] {
    flex: 1;
    text-align: left;
    padding: 3rem 4rem 3rem 2rem;
    position: relative;
    z-index: 2;
}

.featured-name[b-s4bs6b4zug] {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a3c5e;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
    font-family: 'Segoe UI', sans-serif;
}

.featured-desc[b-s4bs6b4zug] {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

/* Premium Button Redesign */
.featured-link[b-s4bs6b4zug] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #1a3c5e 0%, #0f172a 100%);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.featured-link:hover[b-s4bs6b4zug] {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.4);
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); /* Green on hover */
    color: white;
    width: auto; /* Reset width override if any */
}

.featured-link span[b-s4bs6b4zug] {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.featured-link:hover span[b-s4bs6b4zug] {
    transform: translateX(5px);
}

/* === PARTNERS ROW (Single Line) === */
.partners-wrapper[b-s4bs6b4zug] {
    max-width: 1400px;
    margin: 0 auto;
}

.partners-flex-row[b-s4bs6b4zug] {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on very small screens, but stays row on desktop */
    justify-content: center; /* Center them */
    align-items: stretch;
    gap: 20px;
}

.sponsor-card.mini-card[b-s4bs6b4zug] {
    flex: 1 1 180px; /* Base width, grow/shrink allowed */
    max-width: 220px; /* Don't get too wide */
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 
        0 15px 30px -5px rgba(0,0,0,0.08), /* Deeper shadow by default */
        0 0 0 1px rgba(0,0,0,0.02);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 4px solid transparent; /* Consistent with About page style */
}

.sponsor-card.mini-card:hover[b-s4bs6b4zug] {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -10px rgba(0,0,0,0.12);
    border-bottom-color: #0284c7; /* Green bottom on hover */
    z-index: 2;
}

.mini-card .sponsor-logo-area[b-s4bs6b4zug] {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.mini-card .sponsor-logo[b-s4bs6b4zug] {
    max-width: 120px;
    max-height: 60px;
    width: auto;
    object-fit: contain;
    filter: none; /* No grayscale by default */
    opacity: 1; /* Full visibility by default */
    transition: all 0.4s ease;
}

.mini-card:hover .sponsor-logo[b-s4bs6b4zug] {
    transform: scale(1.1);
}

.mini-card .sponsor-details[b-s4bs6b4zug] {
    text-align: center;
}

.mini-card .sponsor-name[b-s4bs6b4zug] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.saza-container[b-s4bs6b4zug] {
    max-width: 1200px;
    margin: 0 auto;
}

.section-cursive-title[b-s4bs6b4zug] {
    font-family: 'Great Vibes', cursive;
    font-weight: normal;
    color: #80d8ff;
    font-size: 4rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.section-bold-subtitle[b-s4bs6b4zug] {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #1a3c5e;
    margin-bottom: 1rem;
}

.section-decoration[b-s4bs6b4zug] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 3rem;
}

.section-decoration .line[b-s4bs6b4zug] {
    width: 80px;
    height: 2px;
    background-color: #1a3c5e;
    border-radius: 2px;
}

.section-decoration .fish-icon[b-s4bs6b4zug] {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* CAROUSEL */
.carousel-wrapper[b-s4bs6b4zug] {
    position: relative;
    width: 100%;
    margin-top: 2rem;
}

.carousel-window[b-s4bs6b4zug] {
    overflow: hidden;
    padding: 20px 0; /* Space for shadows */
}

.carousel-track[b-s4bs6b4zug] {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-card[b-s4bs6b4zug] {
    flex: 0 0 300px; /* Fixed width cards */
    background: #fff;
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.product-card:hover[b-s4bs6b4zug] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
}

.media-wrapper[b-s4bs6b4zug] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f1f5f9;
    margin-bottom: 16px;
}

.media-wrapper img[b-s4bs6b4zug] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .media-wrapper img[b-s4bs6b4zug] {
    transform: scale(1.08);
}

.overlay-actions[b-s4bs6b4zug] {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.product-card:hover .overlay-actions[b-s4bs6b4zug] {
    opacity: 1;
    transform: translateY(0);
}

.icon-btn[b-s4bs6b4zug] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s;
    color: var(--store-ink);
}

.icon-btn:hover[b-s4bs6b4zug] {
    background: #1a3c5e;
    color: white;
    transform: scale(1.1);
}

.badge-sale[b-s4bs6b4zug] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #43a047;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    z-index: 2;
}

.card-details[b-s4bs6b4zug] {
    text-align: center;
    padding: 0 16px 20px;
}

.card-title[b-s4bs6b4zug] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a3c5e;
    margin: 0 0 4px;
}

.card-price[b-s4bs6b4zug] {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.card-price .sale[b-s4bs6b4zug] {
    color: #43a047;
    font-weight: 700;
    margin-right: 6px;
}

.card-price .strike[b-s4bs6b4zug] {
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 0.9em;
}

/* Nav Buttons */
.nav-btn[b-s4bs6b4zug] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    color: #1a3c5e;
    transition: all 0.2s;
}

.nav-btn:hover:not(:disabled)[b-s4bs6b4zug] {
    background: #1a3c5e;
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.nav-btn:disabled[b-s4bs6b4zug] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-prev[b-s4bs6b4zug] { left: -60px; }
.nav-next[b-s4bs6b4zug] { right: -60px; }

/* Marketing Message */
.marketing-message[b-s4bs6b4zug] {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
    padding: 0 20px;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 500;
}

/* Carousel: touch-friendly on mobile (swipe) */
@media (max-width: 992px) {
    /* Enable buttons on mobile by keeping desktop behavior (transform) */
    .carousel-window[b-s4bs6b4zug] {
        padding: 8px 0 18px;
        overflow: hidden; /* Hide overflow so buttons are needed */
    }

    .carousel-track[b-s4bs6b4zug] {
        /* Keep transition and transform active */
        padding: 0 16px;
    }

    .product-card[b-s4bs6b4zug] {
        flex: 0 0 300px; /* Match desktop width so C# math (324px stride) works */
        max-width: 300px;
    }

    .nav-btn[b-s4bs6b4zug] {
        display: grid;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9);
    }
    
    .nav-prev[b-s4bs6b4zug] { left: 10px; }
    .nav-next[b-s4bs6b4zug] { right: 10px; }
}

/* Book Me & Blog Styles (Restored/Unchanged) */
.book-me-section[b-s4bs6b4zug] {
    position: relative;
    background: linear-gradient(to bottom, var(--home-sky-start, #a9d6f2), var(--home-sky-end, #e3f4ff)); /* Match hero sky */
    padding: 8rem 2rem 10rem 2rem; /* Increased bottom padding for wave overlap space */
    text-align: center;
    clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); /* Slant: Bottom Left to Top Right */
    margin-top: -5vw; /* Pull up to overlap slightly if needed, or just let it sit */
}

.book-me-section .content-wrapper[b-s4bs6b4zug] {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.book-me-text[b-s4bs6b4zug] {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #1a3c5e;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.wave-bottom[b-s4bs6b4zug] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}

.wave-bottom svg[b-s4bs6b4zug] {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.blog-section[b-s4bs6b4zug] {
    padding: 6rem 2rem 8rem 2rem;
    background-color: #ffffff;
    text-align: center;
}

/* === NEW BLOG STYLES (Alternating Rows) === */

.blog-list[b-s4bs6b4zug] {
    display: flex;
    flex-direction: column;
    gap: 8rem; /* Large spacing between posts */
    margin-top: 4rem;
}

.blog-row[b-s4bs6b4zug] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    text-align: left; /* Reset text align from section center */
}

.blog-row.image-right .blog-content[b-s4bs6b4zug] {
    order: 1;
}
.blog-row.image-right .blog-image-wrapper[b-s4bs6b4zug] {
    order: 2;
}

.blog-row.image-left .blog-content[b-s4bs6b4zug] {
    order: 2;
}
.blog-row.image-left .blog-image-wrapper[b-s4bs6b4zug] {
    order: 1;
}

/* Blog Content Side */
.blog-content[b-s4bs6b4zug] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.meta-top[b-s4bs6b4zug] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: #0284c7; /* Accent color - Green */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 12px;
    border-left: 3px solid #0284c7; /* Green */
}

.meta-sep[b-s4bs6b4zug] {
    color: #cbd5e1;
    font-weight: 400;
}

.blog-title[b-s4bs6b4zug] {
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
}

.blog-title a[b-s4bs6b4zug] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a3c5e;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-title a:hover[b-s4bs6b4zug] {
    color: #80d8ff;
}

.blog-summary[b-s4bs6b4zug] {
    font-size: 1.15rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.read-more-btn[b-s4bs6b4zug] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 2rem;
    background: transparent;
    border: 2px solid #1a3c5e;
    color: #1a3c5e;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more-btn:hover[b-s4bs6b4zug] {
    background: #1a3c5e;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(26, 60, 94, 0.15);
}

/* Fancy Image Wrapper (Ported from About) */
.blog-image-wrapper[b-s4bs6b4zug] {
    position: relative;
    padding: 2rem; /* Space for accents */
    /* Center it if simpler */
    margin: 0 auto;
    width: 100%;
    max-width: 550px;
}

.image-frame-clean[b-s4bs6b4zug] {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #fff;
    aspect-ratio: 4/3; /* Consistent aspect ratio */
}

.blog-image[b-s4bs6b4zug] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.image-frame-clean:hover .blog-image[b-s4bs6b4zug] {
    transform: scale(1.05);
}

.image-accent-bg[b-s4bs6b4zug] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    z-index: 1;
    transform: translate(-15px, -15px);
    border-radius: 4px;
}

/* Corner Accent */
.blog-image-wrapper[b-s4bs6b4zug]::after {
    content: "";
    position: absolute;
    bottom: -15px; right: -15px;
    width: 100px;
    height: 100px;
    border-right: 4px solid #0284c7;
    border-bottom: 4px solid #0284c7;
    z-index: 3;
}

.blog-cta-row[b-s4bs6b4zug] {
    margin-top: 5rem;
}

/* Mobile responsive */
@media (max-width: 992px) {
    /* ... existing mobile styles ... */
    
    .blog-row[b-s4bs6b4zug] {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .blog-row.image-left .blog-content[b-s4bs6b4zug],
    .blog-row.image-right .blog-content[b-s4bs6b4zug] {
        order: 2;
    }

    .blog-row.image-left .blog-image-wrapper[b-s4bs6b4zug],
    .blog-row.image-right .blog-image-wrapper[b-s4bs6b4zug] {
        order: 1;
    }

    .blog-content[b-s4bs6b4zug] {
        align-items: center;
        text-align: center;
    }

    .meta-top[b-s4bs6b4zug] {
        border-left: none;
        padding-left: 0;
        justify-content: center;
    }

    .blog-title a[b-s4bs6b4zug] {
        font-size: 2rem;
    }
}

/* === ADOPTED ABOUT PAGE STYLES === */

.about-values-section[b-s4bs6b4zug] {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    text-align: center;
    position: relative;
    padding: 8rem 0;
}

.about-values-header[b-s4bs6b4zug] {
    margin-bottom: 5rem;
}

.about-section-label[b-s4bs6b4zug] {
    display: inline-block;
    font-size: 0.85rem;
    color: #0284c7; /* Green */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 12px;
    border-left: 3px solid #0284c7; /* Green */
    text-align: left;
}

/* Center aligned variant for the header */
.about-values-header .about-section-label[b-s4bs6b4zug] {
    display: inline-block;
    border-left: none;
    border-bottom: 3px solid #0284c7; /* Green */
    padding-left: 0;
    padding-bottom: 5px;
}

.about-section-heading[b-s4bs6b4zug] {
    font-size: 3rem;
    color: #1a3c5e;
    font-weight: 800;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -1px;
    font-family: 'Segoe UI', sans-serif;
}

@media (max-width: 992px) {
    .about-section-heading[b-s4bs6b4zug] {
        font-size: 2.5rem;
    }
}

/* === INTRO SECTION (Added) === */
.section-spacing[b-s4bs6b4zug] {
    padding: 6rem 0;
}

.about-intro[b-s4bs6b4zug] {
    background: #ffffff;
    overflow: hidden; /* For accents */
}

.intro-grid[b-s4bs6b4zug] {
    display: grid;
    grid-template-columns: 1fr 0.9fr; /* Text wider than image */
    gap: 5rem;
    align-items: center;
}

.lead-text[b-s4bs6b4zug] {
    font-size: 1.25rem;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.intro-text p[b-s4bs6b4zug] {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.marketing-focus[b-s4bs6b4zug] {
    background: #f8fafc;
    border-left: 4px solid #1a3c5e;
    padding: 1.5rem 2rem;
    border-radius: 0 12px 12px 0;
    color: #334155;
    font-style: italic;
    margin: 2rem 0;
}

.marketing-focus strong[b-s4bs6b4zug] {
    color: #1a3c5e;
    font-style: normal;
    font-weight: 700;
}

.intro-actions[b-s4bs6b4zug] {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 2.5rem;
}

.signature[b-s4bs6b4zug] {
    opacity: 0.7;
    filter: grayscale(100%);
    transition: all 0.3s;
}

.signature:hover[b-s4bs6b4zug] {
    filter: grayscale(0%);
    opacity: 1;
}

.signature-logo[b-s4bs6b4zug] {
    height: 120px; /* Much Bigger */
    width: auto;
}

/* Image Styling (Clean & Professional) */
.intro-image-wrapper[b-s4bs6b4zug] {
    position: relative;
    padding-top: 2rem; /* Space for accent */
    padding-left: 2rem;
    max-width: 480px; /* Limit image width */
    margin: 0 auto; /* Center it in its column if smaller */
}

.ruben-portrait[b-s4bs6b4zug] {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-frame-clean:hover .ruben-portrait[b-s4bs6b4zug] {
    transform: scale(1.03);
}

/* Add a second accent line */
.intro-image-wrapper[b-s4bs6b4zug]::after {
    content: "";
    position: absolute;
    bottom: -20px; right: -20px;
    width: 150px;
    height: 150px;
    border-right: 4px solid #0284c7;
    border-bottom: 4px solid #0284c7;
    z-index: 3;
}

@media (max-width: 992px) {
    .intro-grid[b-s4bs6b4zug] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-intro.section-spacing[b-s4bs6b4zug] {
        padding: 3.5rem 0;
    }

    .intro-text[b-s4bs6b4zug] {
        text-align: center;
    }

    .intro-text p[b-s4bs6b4zug] {
        font-size: 1rem;
    }

    .marketing-focus[b-s4bs6b4zug] {
        padding: 1.1rem 1.2rem;
        border-left-width: 3px;
        border-radius: 12px;
        text-align: left;
        margin: 1.5rem 0;
    }

    .intro-actions[b-s4bs6b4zug] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .signature[b-s4bs6b4zug] {
        align-self: center;
    }

    .signature-logo[b-s4bs6b4zug] {
        height: 86px;
    }

    .intro-image-wrapper[b-s4bs6b4zug] {
        padding-top: 0;
        padding-left: 0;
        max-width: 380px;
    }

    .intro-image-wrapper[b-s4bs6b4zug]::after {
        width: 110px;
        height: 110px;
        bottom: -14px;
        right: -14px;
        border-right-width: 3px;
        border-bottom-width: 3px;
    }
}


/* ===== ABOUT INTRO  Sexy Mobile Card (replace existing mobile intro rules) ===== */
@media (max-width: 992px) {

    .about-intro.section-spacing[b-s4bs6b4zug] {
        padding: 2.75rem 0 3.75rem;
        background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
    }

    .about-intro .saza-container[b-s4bs6b4zug] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* One premium card */
    .about-intro .intro-grid[b-s4bs6b4zug] {
        position: relative;
        display: flex; /* important: allows ordering */
        flex-direction: column;
        max-width: 560px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 28px;
        overflow: hidden;
        border: 1px solid rgba(148,163,184,0.28);
        box-shadow: 0 26px 60px -45px rgba(15,23,42,0.45);
    }

        /* Thin accent bar = more premium */
        .about-intro .intro-grid[b-s4bs6b4zug]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, #0284c7 0%, #80d8ff 55%, #1a3c5e 100%);
            opacity: 0.9;
            z-index: 6;
        }

    /* Put image first on mobile without changing markup */
    .about-intro .intro-image-wrapper[b-s4bs6b4zug] {
        order: -1;
        padding: 0;
        margin: 0;
        max-width: none;
        position: relative;
    }

        /* Kill decorative accents on mobile (cleaner) */
        .about-intro .image-accent-bg[b-s4bs6b4zug],
        .about-intro .intro-image-wrapper[b-s4bs6b4zug]::after {
            display: none;
        }

    /* Control height so the photo feels designed, not massive */
    .about-intro .image-frame-clean[b-s4bs6b4zug] {
        border-radius: 0;
        box-shadow: none;
        background: #0b1220;
        aspect-ratio: 16 / 9; /* key: stops it dominating the screen */
        position: relative;
    }

    .about-intro .ruben-portrait[b-s4bs6b4zug] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 22%; /* keeps face/fish in frame */
        display: block;
    }

    /* Subtle image overlay gradient = sexy */
    .about-intro .image-frame-clean[b-s4bs6b4zug]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.12) 40%, rgba(15,23,42,0.00) 70% );
        pointer-events: none;
    }

    /* TEXT AREA */
    .about-intro .intro-text[b-s4bs6b4zug] {
        padding: 1.25rem 1.15rem 1.4rem;
        text-align: left;
    }

    /* Pill label */
    .about-intro .about-section-label[b-s4bs6b4zug] {
        border: none;
        padding: 0.45rem 0.8rem;
        border-radius: 999px;
        background: rgba(2,132,199,0.14);
        color: #0369a1;
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        font-weight: 900;
        margin: 0 0 0.9rem 0;
        display: inline-flex;
        align-items: center;
    }

    .about-intro .about-section-heading[b-s4bs6b4zug] {
        font-size: clamp(1.85rem, 5.8vw, 2.35rem);
        line-height: 1.08;
        margin: 0 0 0.95rem 0;
        letter-spacing: -0.02em;
    }

    .about-intro .lead-text[b-s4bs6b4zug] {
        font-size: 1.05rem;
        line-height: 1.65;
        margin-bottom: 1rem;
        color: #1e293b;
    }

    .about-intro .intro-text p[b-s4bs6b4zug] {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 1rem;
        color: #475569;
    }

    /* Marketing callout as mini-card */
    .about-intro .marketing-focus[b-s4bs6b4zug] {
        margin: 1.15rem 0 0 0;
        padding: 1.05rem;
        border: 1px solid rgba(148,163,184,0.32);
        background: #f8fafc;
        border-radius: 16px;
        box-shadow: 0 14px 35px -28px rgba(15,23,42,0.35);
    }

    /* CTA block feels anchored/intentional */
    .about-intro .intro-actions[b-s4bs6b4zug] {
        margin-top: 1.15rem;
        padding-top: 1.05rem;
        border-top: 1px solid rgba(148,163,184,0.25);
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        align-items: center;
    }

        .about-intro .intro-actions .cta-button[b-s4bs6b4zug] {
            width: 100%;
            max-width: 420px;
            justify-content: center;
            padding: 0.95rem 1.25rem;
        }

    .about-intro .signature[b-s4bs6b4zug] {
        opacity: 0.85;
        filter: grayscale(100%);
    }

    .about-intro .signature-logo[b-s4bs6b4zug] {
        height: 60px;
    }
}

@media (max-width: 480px) {
    .about-intro .image-frame-clean[b-s4bs6b4zug] {
        aspect-ratio: 16 / 10;
    }

    .about-intro .signature-logo[b-s4bs6b4zug] {
        height: 54px;
    }
}
@media (max-width: 992px) {
    .about-intro .portrait-caption[b-s4bs6b4zug] {
        position: absolute;
        left: 14px;
        bottom: 14px;
        z-index: 7;
        color: #fff;
        padding: 0.65rem 0.85rem;
        border-radius: 14px;
        background: rgba(15,23,42,0.45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.18);
    }

    .about-intro .cap-title[b-s4bs6b4zug] {
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }

    .about-intro .cap-sub[b-s4bs6b4zug] {
        margin-top: 2px;
        font-size: 0.8rem;
        opacity: 0.9;
    }
}

/* CTA Section (From About Page) */
.about-cta[b-s4bs6b4zug] {
    background: radial-gradient(circle at center top, #1e293b 0%, #020617 100%);
    color: white;
    text-align: center;
    padding: 10rem 0 12rem;
    position: relative;
    overflow: hidden;
}

/* Texture Overlay (Noise) */
.about-cta[b-s4bs6b4zug]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

/* Abstract Light Glow */
.about-cta[b-s4bs6b4zug]::after {
    content: "";
    position: absolute;
    top: -50%; left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.cta-inner[b-s4bs6b4zug] {
    position: relative;
    z-index: 5;
}

.cta-inner h2[b-s4bs6b4zug] {
    font-family: 'Great Vibes', cursive;
    font-size: 6rem;
    color: #ffffff;
    margin-bottom: 2rem;
    text-shadow: 
        0 0 10px rgba(56, 189, 248, 0.8),
        0 0 20px rgba(56, 189, 248, 0.5),
        0 0 40px rgba(56, 189, 248, 0.3);
    line-height: 1.2;
    transform: rotate(-2deg);
}

.cta-inner p[b-s4bs6b4zug] {
    font-size: 1.4rem;
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
    color: #e2e8f0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cta-sub[b-s4bs6b4zug] {
    font-size: 1.1rem !important;
    opacity: 0.8;
    margin-bottom: 4rem !important;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #94a3b8 !important;
}

.cta-buttons[b-s4bs6b4zug] {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.btn-primary[b-s4bs6b4zug] {
    padding: 1.2rem 3.5rem;
    font-size: 1rem;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 
        0 0 20px rgba(2, 132, 199, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    color: white;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-primary:hover[b-s4bs6b4zug] {
    transform: translateY(-5px);
    box-shadow: 0 0 40px rgba(2, 132, 199, 0.6);
    color: white;
}

.btn-secondary[b-s4bs6b4zug] {
    padding: 1.2rem 3.5rem;
    font-size: 1rem;
    letter-spacing: 2px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    backdrop-filter: blur(5px);
    color: white;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-secondary:hover[b-s4bs6b4zug] {
    background: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Mobile responsive for CTA */
@media (max-width: 768px) {
    .cta-inner h2[b-s4bs6b4zug] {
        font-size: 3.5rem;
    }
    
    .cta-buttons[b-s4bs6b4zug] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .btn-primary[b-s4bs6b4zug], .btn-secondary[b-s4bs6b4zug] {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}