/* Glassmorphism skin + parallax background + redesigned sign-in / sign-up / guest account.
   Loaded after home-polish.css. Brand: emerald #0b3d2a, gold #c9a24e, blush #f2cfd6. */
:root {
    --g-emerald: #0b3d2a;
    --g-emerald-2: #12573c;
    --g-gold: #c9a24e;
    --g-gold-2: #e9c46a;
    --g-blush: #f2cfd6;
    --g-glass: rgba(255, 255, 255, .58);
    --g-glass-strong: rgba(255, 255, 255, .78);
    --g-glass-border: rgba(255, 255, 255, .7);
    --g-shadow: 0 18px 42px -24px rgba(11, 61, 42, .5);
    --g-blur: blur(16px) saturate(1.5);
}

/* ---------- Parallax background shapes ---------- */
.ne-parallax {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.ne-parallax .np {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    transform: rotate(var(--r, 0deg));
    will-change: transform;
}
.ne-parallax.is-live .np { top: 0; } /* JS positions via transform once running */
.np-blob { border-radius: 50%; filter: blur(42px); opacity: .55; }
.np-emerald { background: radial-gradient(circle, rgba(61, 155, 110, .55), transparent 70%); }
.np-blush { background: radial-gradient(circle, rgba(242, 160, 180, .55), transparent 70%); }
.np-gold { background: radial-gradient(circle, rgba(233, 196, 106, .55), transparent 70%); }
.np-ring {
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 78, .45);
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .12), 0 0 30px rgba(201, 162, 78, .18);
}
.np-ring--thin { border-width: 1px; border-color: rgba(11, 61, 42, .25); }
.np-nail {
    height: calc(var(--s) * 1.45);
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
    background: linear-gradient(160deg, #fbd3dd 0%, #e88ea6 55%, #c76080 100%);
    box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .12), inset 4px 4px 8px rgba(255, 255, 255, .6), 0 10px 20px -10px rgba(199, 96, 128, .6);
    opacity: .75;
}
.np-nail--gold { background: linear-gradient(160deg, #fff1c1 0%, #e9c46a 50%, #b88a2c 100%); }
.np-spark {
    background: linear-gradient(135deg, #fff6d6, #c9a24e);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: .8;
}
.np-dot { border-radius: 50%; background: var(--g-gold); opacity: .55; box-shadow: 0 0 12px rgba(201, 162, 78, .6); }

/* ---------- Glass surfaces ---------- */
.h-card-service,
.h-card-review,
.h-card-why,
.h-card-blog,
.profile-card,
.media-feed-col,
#faq details {
    background: linear-gradient(150deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .44)) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-glass-border) !important;
    box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}
.h-card-service .service-body,
.h-card-review .review-body,
.h-card-blog .h-card-blog-body { background: transparent !important; }
#faq details { border-radius: 18px !important; overflow: hidden; }
.h-card-offer { border-radius: 22px; }
.h-card-offer > * { margin: 0 !important; width: 100% !important; max-width: none !important; }

.app-header.site-chrome-mobile,
.site-navbar {
    background: rgba(255, 255, 255, .5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: 0 10px 30px -22px rgba(11, 61, 42, .45) !important;
}
.nails-dock-shell,
.nails-dock-track {
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow: 0 16px 36px -18px rgba(11, 61, 42, .45), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
.service-filter-btn:not(.active) {
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, .75) !important;
}

/* =========================================================================
   Sign in / Sign up / Guest account — emerald stage, gold accents, frosted sheet
   ========================================================================= */
#authModal .auth-welcome-fs-gradient,
#authModal .auth-forms-gradient,
#accountProfileScreen .auth-forms-gradient {
    background:
        radial-gradient(60% 40% at 18% 12%, rgba(233, 196, 106, .32), transparent 70%),
        radial-gradient(55% 40% at 88% 28%, rgba(242, 160, 180, .26), transparent 70%),
        radial-gradient(70% 50% at 50% 100%, rgba(61, 155, 110, .35), transparent 70%),
        linear-gradient(165deg, #0b3d2a 0%, #0f5138 48%, #052116 100%) !important;
    opacity: 1 !important;
}
#authModal .auth-glow-root { opacity: .35; mix-blend-mode: screen; }
#authModal .auth-wave-pattern,
#accountProfileScreen .auth-wave-pattern { opacity: .12 !important; }
#accountProfileScreen .account-profile-bg-orb { background: radial-gradient(circle, rgba(233, 196, 106, .35), transparent 70%) !important; }
#accountProfileScreen .account-profile-bg-ring { border-color: rgba(233, 196, 106, .25) !important; }

/* Brand block */
#authModal .auth-wave-logo:not(.account-profile-avatar-btn) {
    width: 132px !important;
    height: 132px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#authModal .auth-wave-logo:not(.account-profile-avatar-btn) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 0 !important;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(233, 196, 106, .25));
}
#authModal .auth-wave-brand-name,
#accountProfileScreen .account-menu-name {
    color: #fff8e8 !important;
    -webkit-text-fill-color: #fff8e8 !important;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
#authModal .auth-welcome-fs-tag,
#authModal .auth-forms-tag,
#accountProfileScreen .account-menu-role {
    color: var(--g-gold-2) !important;
    -webkit-text-fill-color: var(--g-gold-2) !important;
    letter-spacing: .22em;
    font-weight: 600;
}
#accountProfileScreen .account-menu-role {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(233, 196, 106, .45);
    background: rgba(233, 196, 106, .12);
    font-size: .7rem;
}

/* Guest avatar: gold-ringed glass medallion */
#accountProfileScreen .account-profile-avatar-btn {
    background: rgba(255, 255, 255, .12) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(233, 196, 106, .75) !important;
    box-shadow: 0 0 0 6px rgba(233, 196, 106, .12), 0 16px 34px -14px rgba(0, 0, 0, .6) !important;
}
#accountProfileScreen .account-profile-avatar-initial {
    color: var(--g-gold-2) !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
}

/* Frosted sheet / card */
#authModal .auth-welcome-fs-sheet,
#authModal .auth-forms-card,
#accountProfileScreen .account-profile-sheet {
    background: linear-gradient(170deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .72)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-bottom: 0 !important;
    border-radius: 30px 30px 0 0 !important;
    box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}
#authModal .auth-welcome-fs-sheet::before,
#authModal .auth-forms-card::before,
#accountProfileScreen .account-profile-sheet::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: rgba(11, 61, 42, .18);
}
@media (min-width: 768px) {
    #authModal .auth-welcome-fs-sheet,
    #authModal .auth-forms-card { border-radius: 30px !important; border-bottom: 1px solid rgba(255, 255, 255, .7) !important; }
    #authModal .auth-welcome-fs-sheet::before,
    #authModal .auth-forms-card::before { display: none; }
}
#authModal .auth-wave-title {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    color: var(--g-emerald) !important;
    letter-spacing: .01em;
}
#authModal .auth-wave-sub { color: #4a5a52 !important; }

/* Fields */
#authModal .auth-wave-field,
#accountProfileScreen .auth-wave-field {
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(11, 61, 42, .16) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 2px rgba(11, 61, 42, .06) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#authModal .auth-wave-field:focus-within,
#accountProfileScreen .auth-wave-field:focus-within {
    border-color: var(--g-gold) !important;
    box-shadow: 0 0 0 4px rgba(201, 162, 78, .18) !important;
}
#authModal .auth-wave-field > i { color: var(--g-emerald) !important; }
#authModal .auth-otp-digit {
    background: rgba(255, 255, 255, .75) !important;
    border: 1px solid rgba(11, 61, 42, .18) !important;
    border-radius: 14px !important;
}
#authModal .auth-otp-digit:focus { border-color: var(--g-gold) !important; box-shadow: 0 0 0 4px rgba(201, 162, 78, .2) !important; }

/* Method toggle (#  ✉  G) as a glass segmented control */
#authModal .auth-method-toggle-group {
    background: rgba(11, 61, 42, .06) !important;
    border: 1px solid rgba(11, 61, 42, .1) !important;
    border-radius: 18px !important;
    padding: 4px !important;
}
#authModal .auth-method-toggle-group [aria-selected="true"],
#authModal .auth-method-toggle-group .is-active,
#authModal .auth-method-toggle-group .active {
    background: #fff !important;
    color: var(--g-emerald) !important;
    box-shadow: 0 6px 14px -8px rgba(11, 61, 42, .5) !important;
}

/* Buttons */
#authModal .auth-wave-primary-btn,
#authModal #authWelcomeSignUp,
#accountProfileScreen .account-profile-guest-cta--signup,
#accountProfileScreen .auth-wave-primary-btn {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0f5138 0%, #0b3d2a 60%, #082c1e 100%) !important;
    color: #fff8e8 !important;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 14px 28px -14px rgba(11, 61, 42, .8), inset 0 1px 0 rgba(233, 196, 106, .55) !important;
}
#authModal .auth-wave-primary-btn::after,
#authModal #authWelcomeSignUp::after,
#accountProfileScreen .account-profile-guest-cta--signup::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 241, 193, .28) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: gShine 3.6s ease-in-out 1s infinite;
    pointer-events: none;
}
@keyframes gShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
#authModal #authWelcomeSignIn,
#accountProfileScreen .account-profile-guest-cta--signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border-radius: 16px !important;
    border: 1.5px solid rgba(11, 61, 42, .35) !important;
    background: rgba(255, 255, 255, .6) !important;
    color: var(--g-emerald) !important;
    font-weight: 700;
    text-decoration: none !important;
}
#authModal .auth-google-btn {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .8) !important;
    border: 1px solid rgba(11, 61, 42, .14) !important;
}
#authModal .auth-wave-text-link { color: var(--g-emerald) !important; font-weight: 600; }
#authModal .auth-wave-close,
#accountProfileScreen .auth-forms-back {
    background: rgba(255, 255, 255, .16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff8e8 !important;
}

/* Guest account sheet content */
#accountProfileScreen .account-profile-prefs-toggle {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .6) !important;
    border: 1px solid rgba(11, 61, 42, .12) !important;
}
.account-guest-perks {
    padding: 16px 16px 6px;
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(11, 61, 42, .06), rgba(201, 162, 78, .1));
    border: 1px solid rgba(201, 162, 78, .25);
}
.account-guest-perks-title {
    margin: 0 0 10px;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--g-emerald);
    line-height: 1.1;
}
.account-guest-perks-title span {
    display: block;
    margin-top: 4px;
    font-family: inherit;
    font-size: .95rem;
    font-style: italic;
    font-weight: 600;
    color: #a8822f;
}
.account-guest-perks-list { list-style: none; margin: 0; padding: 0; }
.account-guest-perks-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: .92rem;
    color: #2c3a32;
}
.account-guest-perks-list li + li { border-top: 1px dashed rgba(11, 61, 42, .12); }
.account-guest-perks-list i {
    flex: 0 0 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--g-emerald);
    color: var(--g-gold-2);
    font-size: .85rem;
}
#accountProfileScreen .account-profile-footer-guest,
#accountMenuDesktop .account-profile-footer-guest { gap: 14px; }
#accountProfileScreen .account-profile-footer-guest-actions,
#accountMenuDesktop .account-profile-footer-guest-actions {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr;
    gap: 10px;
}
#accountProfileScreen .account-profile-guest-cta,
#accountMenuDesktop .account-profile-guest-cta { min-height: 50px; font-size: .98rem; }
.account-profile-guest-guide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 6px 12px;
    border: 0;
    background: none;
    color: var(--g-emerald);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(201, 162, 78, .7);
    cursor: pointer;
}
.account-profile-guest-guide i { color: var(--g-gold); }

@media (prefers-reduced-motion: reduce) {
    #authModal .auth-wave-primary-btn::after,
    #authModal #authWelcomeSignUp::after,
    #accountProfileScreen .account-profile-guest-cta--signup::after { animation: none; }
}
/* Older browsers without backdrop-filter: keep surfaces readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .h-card-service, .h-card-review, .h-card-why, .h-card-blog, .profile-card, .media-feed-col, #faq details,
    .app-header.site-chrome-mobile, .site-navbar, .nails-dock-shell, .nails-dock-track { background: rgba(255, 255, 255, .92) !important; }
}

/* Guest footer is taller now: stack it from the top and let the sheet scroll instead of overflowing */
#accountProfileScreen .account-profile-footer {
    flex: 0 0 auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}
#accountProfileScreen .account-profile-footer-guest { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-height: 620px) {
    .account-guest-perks-list { display: none; }
    .account-guest-perks { padding-bottom: 10px; }
    .account-guest-perks-title { margin-bottom: 0; }
}
#accountProfileScreen .account-profile-sheet > .account-profile-panel { flex-shrink: 0 !important; }
#accountProfileScreen .account-profile-footer-guest-actions,
#accountMenuDesktop .account-profile-footer-guest-actions { grid-template-columns: 1fr 1fr; }
#accountProfileScreen .account-profile-guest-cta,
#accountMenuDesktop .account-profile-guest-cta { white-space: nowrap; }