/* ============================================
   HEADER / LOGO OVERRIDES
   Hide site title text when logo is present
   ============================================ */

/* Hide the site title and tagline when we have a custom logo */
.site-branding .site-title-tagline {
    display: none !important;
}

/* Ensure the logo is properly sized */
.site-branding .custom-logo-link {
    display: inline-block;
}

.site-branding .custom-logo {
    max-width: 180px;
    height: auto;
}

/* Mobile: Make header background match theme and logo blend seamlessly */
@media (max-width: 991.98px) {
    /* Header takes hero background color for seamless blend */
    .site-header,
    #masthead,
    .header-wrapper,
    .site-branding {
        background-color: transparent !important;
    }

    /* Logo styling - add subtle backdrop for readability on any background */
    .site-branding .custom-logo {
        max-width: 160px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================
   HERO SECTION
   ============================================ */

/* Base hero section styling – same background color as Vue */
.hero-section {
    background-color: rgb(233, 217, 248);
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 0rem 1.5rem;
    /* Background image for desktop - hidden on mobile via media query */
    background-image: url('../img/hero-paybychance.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
}

/* Adjust padding and layout for smaller screens */
@media (max-width: 991.98px) {
    .hero-section {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 3rem;
        background-image: none !important; /* Remove desktop background image */
    }

    .hero-section .container {
        padding: 0 1rem;
    }

    .hero-section h1 {
        font-size: 1.75rem !important;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .hero-section p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-section .text-start {
        text-align: center !important;
    }

    .hero-bullets {
        display: inline-block;
        text-align: left;
    }

    .hero-actions {
        text-align: center;
    }

    .hero-actions .btn-outline-purple {
        display: inline-block;
    }
}

/* Mobile specific - even smaller screens */
@media (max-width: 576px) {
    .hero-section {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .hero-section h1 {
        font-size: 1.5rem !important;
    }

    .hero-section p {
        font-size: 0.95rem;
    }

    .hero-bullets li {
        font-size: 0.9rem;
    }
}

.text-purple, h1 {
    color: #6609b8!important;
}

/* Bullet spacing */
.hero-bullets li {
    margin-bottom: 0.35rem;
}

/* ============================================
   GLASSMORPHISM CARDS (Hero Section)
   ============================================ */
.hero-section .card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.hero-section .card:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Ensure text is readable on glass */
.hero-section .card h1,
.hero-section .card h5 {
    color: #1a1a1a !important;
}

.hero-section .card .text-purple {
    color: #6609b8 !important;
}

.hero-section .card p,
.hero-section .card .text-muted {
    color: #333 !important;
}

/* Purple filled buttons */
.btn-purple {
    background-color: #6609b8;
    color: #fff;
    padding: 0.8rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    flex-direction: column;
    border-radius: 0.75rem;
    border: none;
    font-size: 12px!important;
}
.btn-purple:hover,
.btn-purple:focus {
    background-color: #4d088f;
    color: #fff;
}

/* Hero product buttons - raised card with gradient icon strip */
.hero-product-buttons .btn-purple {
    background-color: #FCFCFD;
    color: #36395A;
    border: none;
    border-radius: 8px;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,
                rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
                #D6D6E7 0 -3px 0 inset;
    transition: box-shadow 0.15s, transform 0.15s;
    padding: 0;
    min-height: 70px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row !important;
    align-items: center;
}

.hero-product-buttons .btn-purple:hover,
.hero-product-buttons .btn-purple:focus {
    background-color: #FCFCFD;
    color: #36395A;
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
                rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
                #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

.hero-product-buttons .btn-purple:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

/* Inner flex container */
.hero-product-buttons .btn-purple > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
    padding: 0;
}

/* Icon container strip */
.hero-product-buttons .btn-purple i {
    display: grid;
    place-items: center;
    width: 3.5rem;
    min-width: 3.5rem;
    height: 100%;
    min-height: 70px;
    font-size: 1.5rem !important;
    margin: 0 !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

/* Different gradient colors for each button icon strip */
.hero-product-buttons .col-12:nth-child(1) .btn-purple i {
    background: linear-gradient(to top right, #6609b8, #9333ea); /* Purple */
}

.hero-product-buttons .col-12:nth-child(2) .btn-purple i {
    background: linear-gradient(to top right, #059669, #10b981); /* Green */
}

.hero-product-buttons .col-12:nth-child(3) .btn-purple i {
    background: linear-gradient(to top right, #d97706, #f59e0b); /* Orange/Gold */
}

.hero-product-buttons .btn-purple:hover i {
    filter: brightness(1.1);
}

/* Text label */
.hero-product-buttons .btn-purple span {
    font-weight: 600;
    font-size: 0.9rem;
    color: #36395A;
    padding: 0 1rem;
    text-align: left;
    flex: 1;
}

/* Outline purple button */
.btn-outline-purple {
    border: 2px solid #6609b8;
    color: #6609b8;
    background: transparent;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    font-weight: 500;
}

.btn-outline-purple:hover,
.btn-outline-purple:focus {
    background-color: #6609b8;
    color: #fff;
}

/* Product buttons row: stack nicely on mobile because of col-12 col-md-4 */
.hero-product-buttons .btn-purple {
    width: 100%;
}

/* Override the white text class for hero buttons - icons are white on gradient bg */
.hero-product-buttons .btn-purple i.text-white {
    color: #fff !important;
}


/* Slightly smaller on mobile */
@media (max-width: 768px) {
    .btn-purple {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
        gap: 0.25rem;
    }
}

/* LOGIN PAGE */

.login-page-wrapper {
    background-color: #f8f9fa;
}

.login-page-container {
    width: 90%;
    max-width: 1100px;
}

/* Left image column background */
.login-image {
    background: url('../img/login-image.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

/* Toggle button inside password field */
.toggle-btn {
    border: none;
    background: none;
}

/* Green brand button and text */
.btn-green {
    background-color: #09b850;
    border-color: #09b850;
    color: #fff;
    font-weight: 500;
}

.btn-green:hover,
.btn-green:focus {
    background-color: #07963f;
    border-color: #07963f;
    color: #fff;
}

.text-green {
    color: #09b850;
}

/* Loading state spans */
.login-loading .spinner-border-sm {
    vertical-align: text-bottom;
}
.text-purple { color: #6609b8; }

.card {
    border-radius: 16px;
}

.card:hover {
    transform: translateY(-3px);
    transition: 0.2s ease;
}

a.card:hover {
    text-decoration: none;
}

/* ============================================
   NAVIGATION OVERRIDES
   Override parent theme blue (#10659C) with site purple
   ============================================ */
.main-navigation .menu li > a:hover,
.main-navigation .menu li > a:focus,
.main-navigation .menu li.current-menu-item > a,
.main-navigation .menu li.current_page_item > a {
    color: #6609b8;
    background-color: transparent;
}

.main-navigation .menu li > a {
    transition: color 0.2s ease;
}

/* Remove header/nav bottom border and add shadow */
.site-header,
#masthead,
.main-navigation,
.header-widgets,
#header,
#main-header,
.responsive-site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap,
.header-wrapper {
    border-bottom: none !important;
    border-top: none !important;
    border: none !important;
}

/* Target all elements inside header to remove any borders */
.site-header *,
#masthead *,
.header-wrapper *,
#main-header *,
.responsive-site-header-wrap *,
.site-header-inner-wrap *,
.site-header-upper-wrap * {
    border-bottom: none !important;
    border-top: none !important;
}

.site-header,
#masthead,
.header-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    z-index: 100;
}

/* Mobile menu hover states */
@media (max-width: 991.98px) {
    .main-navigation .menu li > a:hover,
    .main-navigation .menu li > a:focus {
        color: #6609b8;
        background-color: rgba(102, 9, 184, 0.05);
    }
}

/* ============================================
   FOOTER OVERRIDES
   Black background, clean styling
   ============================================ */

/* Main footer element and all wrappers */
#footer,
.site-footer,
footer.site-footer,
footer#footer,
body footer,
body .site-footer,
#container footer,
.wrapper footer,
.site-footer-wrap,
.footer-bar,
.site-footer .site-footer-wrap,
.site-footer .footer-bar,
#footer .site-footer-wrap,
#footer .footer-bar {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-top: none !important;
    border: none !important;
}

/* All inner elements get black background too */
#footer *,
.site-footer *,
footer.site-footer *,
.site-footer-wrap *,
.footer-bar * {
    background-color: transparent !important;
}

/* Reset border colors */
#footer *,
.site-footer *,
footer.site-footer * {
    border-color: #333 !important;
}

/* Footer links */
#footer a,
.site-footer a,
footer.site-footer a,
footer#footer a {
    color: #a78bfa !important;
}

#footer a:hover,
.site-footer a:hover,
footer.site-footer a:hover,
footer#footer a:hover {
    color: #c4b5fd !important;
}

/* Footer widget areas and copyright */
.footer-widget-area,
.rspv-footer-copyright,
.footer-layouts,
.footer-layouts.copyright,
#footer .footer-widget-area,
#footer .copyright,
.site-footer .footer-widget-area,
.site-footer .rspv-footer-copyright {
    background-color: transparent !important;
    color: #9ca3af !important;
    padding: 1.5rem 0;
}

/* Copyright text styling */
.footer-layouts.copyright span,
.footer-layouts.copyright a,
.copyright_icon_and_year,
#footer span,
.site-footer span {
    color: #9ca3af !important;
}

.footer-layouts.copyright a:hover,
#footer a:hover {
    color: #ffffff !important;
}

/* Hide powered by text and cyberchimps link */
.footer-layouts.copyright > span:last-of-type,
.footer-layouts.copyright > a[href*="cyberchimps"],
a[href*="cyberchimps.com"],
.site-footer a[href*="cyberchimps"],
span:has(+ a[href*="cyberchimps"]) {
    display: none !important;
}