/* ==========================================================================================
   MoveFaster.ca - My Account Page (ID: 10592)
   Hex Wallpaper Glassmorphism Theme
   Matches exactly the contact-style.css pattern
   ========================================================================================== */

/* ── 1. Body base ── */
body.page-id-10592 {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ── 2. Hex wallpaper overlay ── */
body.page-id-10592::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('https://movefaster.ca/wp-content/uploads/2026/03/HEXWALLPAPER.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.32;
    z-index: 0;
    pointer-events: none;
}

/* ── 3. All Kadence wrappers — transparent ── */
body.page-id-10592 #wrapper,
body.page-id-10592 .site,
body.page-id-10592 .wp-site-blocks,
body.page-id-10592 #inner-wrap,
body.page-id-10592 .site-main,
body.page-id-10592 main#main,
body.page-id-10592 .content-area,
body.page-id-10592 #primary,
body.page-id-10592 .entry,
body.page-id-10592 .entry-content,
body.page-id-10592 .content-bg,
body.page-id-10592 article.entry,
body.page-id-10592 article.content-bg,
body.page-id-10592 .wp-block-group,
body.page-id-10592 .wp-block-group__inner-container,
body.page-id-10592 [class*="wp-container-core-group"],
body.page-id-10592 [class*="wp-container-core-columns"],
body.page-id-10592 [class*="wp-container-core-column"],
body.page-id-10592 .kadence-column,
body.page-id-10592 .kb-row-layout-wrap,
body.page-id-10592 .kb-section-dir-horizontal,
body.page-id-10592 .page-content,
body.page-id-10592 .hentry {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* ── 4. Footer — always white ── */
body.page-id-10592 .site-footer,
body.page-id-10592 footer,
body.page-id-10592 #colophon {
    background-color: #ffffff !important;
    position: relative;
    z-index: 2;
}

/* ── 5. My Account header / avatar section ── */
body.page-id-10592 #gln-ma-header {
    background: linear-gradient(135deg, rgba(0, 80, 200, 0.72) 0%, rgba(0, 40, 120, 0.80) 100%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    position: relative;
    z-index: 2;
}

body.page-id-10592 #gln-ma-avatar {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* ── 6. Stats bar ── */
body.page-id-10592 #gln-ma-stats {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(6px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* ── 7. Tabs nav ── */
body.page-id-10592 #gln-ma-tabs {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(6px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

body.page-id-10592 #gln-ma-tabs button {
    background: transparent !important;
    border-radius: 50px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

body.page-id-10592 #gln-ma-tabs button.active,
body.page-id-10592 #gln-ma-tabs button[aria-selected="true"] {
    background: linear-gradient(135deg, #0080ff 0%, #0055d4 100%) !important;
    color: #ffffff !important;
}

/* ── 8. Content sections / cards ── */
body.page-id-10592 .gln-ma-section {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(6px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* ── 9. Quick link buttons ── */
body.page-id-10592 .gln-ma-ql-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 16px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

body.page-id-10592 .gln-ma-ql-btn:hover {
    background: rgba(0, 128, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 128, 255, 0.20) !important;
}

/* ── 10. Save modal inner ── */
body.page-id-10592 #gln-ma-save-modal-inner {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.50) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20) !important;
}

body.page-id-10592 #gln-ma-save-name {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
}

body.page-id-10592 #gln-ma-save-cancel {
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 50px !important;
}

body.page-id-10592 #gln-ma-save-confirm {
    background: linear-gradient(135deg, #0080ff 0%, #0055d4 100%) !important;
    border-radius: 50px !important;
}

/* ── 11. Responsive ── */
@media (max-width: 767px) {
    body.page-id-10592 .gln-ma-section {
        border-radius: 16px !important;
        padding: 18px !important;
    }
    body.page-id-10592 #gln-ma-header {
        border-radius: 16px !important;
    }
}