/* Soft neumorphism (with a touch of glass on floating chrome). Loaded last, after glass-ui.css.
   Every control is the same colour as the page and is shaped only by light (top-left, white)
   and shade (bottom-right, cool grey): raised = outer pair, pressed = inner pair.
   Accent fills (primary buttons, active chips, switches) use the brand emerald gradient.
   Cards stay blur-free so scrolling stays smooth.
   Selectors are prefixed `html:root body:not(#nm-skin)` (an id-weight no-op) so this skin
   outranks the earlier layers (scene-3d.css, glass-ui.css) without piling on more !important. */
:root {
    --nm-bg: #e9ecf1;
    --nm-bg-2: #e3e7ed;
    --nm-light: #ffffff;
    --nm-shade: rgba(163, 174, 196, .62);
    --nm-shade-soft: rgba(163, 174, 196, .45);
    --nm-ink: #4c5566;
    --nm-ink-soft: #7a8396;
    --nm-accent: linear-gradient(135deg, #1f8a5f 0%, #0f5a3d 55%, #0b3d2a 100%);
    --nm-accent-glow: rgba(15, 90, 61, .35);
    --nm-gold: #c9a24e;

    --nm-raise-xl: -14px -14px 30px var(--nm-light), 14px 14px 30px var(--nm-shade);
    --nm-raise: -9px -9px 18px var(--nm-light), 9px 9px 18px var(--nm-shade);
    --nm-raise-sm: -5px -5px 10px var(--nm-light), 5px 5px 10px var(--nm-shade-soft);
    --nm-press: inset 6px 6px 12px var(--nm-shade), inset -6px -6px 12px var(--nm-light);
    --nm-press-sm: inset 3px 3px 7px var(--nm-shade), inset -3px -3px 7px var(--nm-light);
    --nm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Page base: flat, so raised/pressed shapes read cleanly ---------- */
html:root body:not(#nm-skin):not(.admin-body) {
    background: var(--nm-bg) !important;
}
html:root body:not(#nm-skin) .ne-parallax { opacity: .4; }

/* ---------- Raised cards ---------- */
html:root body:not(#nm-skin) .h-card-service,
html:root body:not(#nm-skin) .h-card-review,
html:root body:not(#nm-skin) .h-card-why,
html:root body:not(#nm-skin) .h-card-blog,
html:root body:not(#nm-skin) .profile-card,
html:root body:not(#nm-skin) .media-feed-col,
html:root body:not(#nm-skin) .offer-summary-card,
html:root body:not(#nm-skin) #faq details {
    background: var(--nm-bg) !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: var(--nm-raise-xl) !important;
    transition: box-shadow .35s var(--nm-ease), transform .35s var(--nm-ease);
}
html:root body:not(#nm-skin) #faq details { border-radius: 22px !important; }
html:root body:not(#nm-skin) #faq details[open] { box-shadow: var(--nm-press) !important; }
html:root body:not(#nm-skin) .h-card-service .service-body,
html:root body:not(#nm-skin) .h-card-review .review-body,
html:root body:not(#nm-skin) .h-card-blog .h-card-blog-body { background: transparent !important; }
/* Photos sit in a soft rounded inset at the top of each card */
html:root body:not(#nm-skin) .h-card-service .service-img,
html:root body:not(#nm-skin) .h-card-blog .h-card-blog-media,
html:root body:not(#nm-skin) .profile-card-media {
    border-radius: 22px !important;
    overflow: hidden;
    margin: 10px 10px 0 !important;
    box-shadow: var(--nm-raise-sm) !important;
}

/* ---------- Primary actions: emerald pill (like the "on" switch in the reference) ---------- */
html:root body:not(#nm-skin) .service-book-btn,
html:root body:not(#nm-skin) .btn.btn-dark,
html:root body:not(#nm-skin) .auth-wave-primary-btn {
    background: var(--nm-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: -6px -6px 14px var(--nm-light), 8px 8px 18px var(--nm-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: box-shadow .25s var(--nm-ease), transform .25s var(--nm-ease);
}
html:root body:not(#nm-skin) .service-book-btn:active,
html:root body:not(#nm-skin) .btn.btn-dark:active,
html:root body:not(#nm-skin) .auth-wave-primary-btn:active {
    transform: scale(.98);
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .35), inset -3px -3px 8px rgba(255, 255, 255, .12) !important;
}

/* ---------- Secondary buttons & chips: same-colour raised pills ---------- */
html:root body:not(#nm-skin) .service-filter-btn,
html:root body:not(#nm-skin) .blog-sort-btn,
html:root body:not(#nm-skin) .h-card-blog-view,
html:root body:not(#nm-skin) .btn.btn-outline-dark,
html:root body:not(#nm-skin) .footer-menu-btn,
html:root body:not(#nm-skin) .profile-social,
html:root body:not(#nm-skin) .auth-wave-secondary-btn {
    background: var(--nm-bg) !important;
    color: var(--nm-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: var(--nm-raise-sm) !important;
    transition: box-shadow .25s var(--nm-ease), color .2s ease, transform .2s var(--nm-ease);
}
html:root body:not(#nm-skin) .service-filter-btn:active,
html:root body:not(#nm-skin) .blog-sort-btn:active,
html:root body:not(#nm-skin) .h-card-blog-view:active,
html:root body:not(#nm-skin) .btn.btn-outline-dark:active,
html:root body:not(#nm-skin) .footer-menu-btn:active,
html:root body:not(#nm-skin) .profile-social:active,
html:root body:not(#nm-skin) .auth-wave-secondary-btn:active {
    box-shadow: var(--nm-press-sm) !important;
}
/* Selected chip: pressed in, emerald text — the reference's "selected radio" look */
html:root body:not(#nm-skin) .service-filter-btn.active,
html:root body:not(#nm-skin) .blog-sort-btn.is-active {
    background: var(--nm-bg-2) !important;
    color: #0f5a3d !important;
    font-weight: 700;
    box-shadow: var(--nm-press-sm) !important;
}
html:root body:not(#nm-skin) .service-unit-badge,
html:root body:not(#nm-skin) .osc-svc-badge {
    background: var(--nm-bg) !important;
    color: var(--nm-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: var(--nm-raise-sm) !important;
}

/* ---------- Icon buttons: raised rounded squares / circles ---------- */
html:root body:not(#nm-skin) .app-profile-btn,
html:root body:not(#nm-skin) .service-search-toggle,
html:root body:not(#nm-skin) .chat-fab,
html:root body:not(#nm-skin) .offers-fab,
html:root body:not(#nm-skin) .site-fab-action,
html:root body:not(#nm-skin) .bottom-more-fab {
    background: var(--nm-bg) !important;
    color: #0f5a3d !important;
    border: 0 !important;
    box-shadow: var(--nm-raise) !important;
    transition: box-shadow .25s var(--nm-ease), transform .2s var(--nm-ease);
}
html:root body:not(#nm-skin) .app-profile-btn,
html:root body:not(#nm-skin) .chat-fab,
html:root body:not(#nm-skin) .offers-fab,
html:root body:not(#nm-skin) .site-fab-action { border-radius: 50% !important; }
html:root body:not(#nm-skin) .service-search-toggle,
html:root body:not(#nm-skin) .bottom-more-fab { border-radius: 16px !important; }
html:root body:not(#nm-skin) .app-profile-btn:active,
html:root body:not(#nm-skin) .service-search-toggle:active,
html:root body:not(#nm-skin) .chat-fab:active,
html:root body:not(#nm-skin) .offers-fab:active,
html:root body:not(#nm-skin) .site-fab-action:active,
html:root body:not(#nm-skin) .bottom-more-fab:active { box-shadow: var(--nm-press-sm) !important; }
html:root body:not(#nm-skin) .chat-fab i,
html:root body:not(#nm-skin) .offers-fab i,
html:root body:not(#nm-skin) .site-fab-action i { color: #0f5a3d !important; }

/* Hero CTAs keep their colours; add the soft extruded edge */
html:root body:not(#nm-skin) .btn.hero-cta {
    border-radius: 999px !important;
    box-shadow: -6px -6px 14px rgba(255, 255, 255, .6), 8px 8px 20px rgba(11, 61, 42, .25) !important;
}

/* ---------- Floating chrome: glass on the neumorphic base ---------- */
html:root body:not(#nm-skin) .app-header.site-chrome-mobile,
html:root body:not(#nm-skin) .site-navbar {
    background: rgba(233, 236, 241, .78) !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 18px -10px var(--nm-shade) !important;
}
html:root body:not(#nm-skin) .nails-dock-shell {
    background: rgba(233, 236, 241, .86) !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: -10px -10px 22px rgba(255, 255, 255, .9), 12px 12px 26px var(--nm-shade) !important;
}
html:root body:not(#nm-skin) .nails-dock-track {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html:root body:not(#nm-skin) .nails-dock-item { color: var(--nm-ink) !important; border-radius: 18px; transition: box-shadow .25s var(--nm-ease); }
html:root body:not(#nm-skin) .nails-dock-item[aria-current="page"],
html:root body:not(#nm-skin) .nails-dock-item.is-active,
html:root body:not(#nm-skin) .nails-dock-item.active {
    color: #0f5a3d !important;
    box-shadow: var(--nm-press-sm);
}

/* ---------- Form controls ---------- */
/* Inputs & search: pressed pills */
html:root body:not(#nm-skin) #authModal .auth-wave-field,
html:root body:not(#nm-skin) #authModal .auth-otp-digit,
html:root body:not(#nm-skin) .site-search-input,
html:root body:not(#nm-skin) .service-search-input,
html:root body:not(#nm-skin) .form-control,
html:root body:not(#nm-skin) .form-select {
    background: var(--nm-bg) !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: var(--nm-press-sm) !important;
    color: var(--nm-ink);
    transition: box-shadow .25s var(--nm-ease);
}
html:root body:not(#nm-skin) textarea.form-control { border-radius: 20px; }
html:root body:not(#nm-skin) #authModal .auth-otp-digit { border-radius: 16px; }
html:root body:not(#nm-skin) #authModal .auth-wave-field input { background: transparent !important; }
html:root body:not(#nm-skin) #authModal .auth-wave-field:focus-within,
html:root body:not(#nm-skin) #authModal .auth-otp-digit:focus,
html:root body:not(#nm-skin) .form-control:focus,
html:root body:not(#nm-skin) .form-select:focus {
    box-shadow: var(--nm-press-sm), 0 0 0 3px rgba(31, 138, 95, .25) !important;
    outline: none;
}

/* Checkboxes: raised soft squares, emerald when checked */
html:root body:not(#nm-skin) input[type="checkbox"]:not(.form-switch input):not([role="switch"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--nm-bg);
    box-shadow: var(--nm-raise-sm);
    border: 0;
    cursor: pointer;
    position: relative;
    vertical-align: -.2em;
    transition: box-shadow .2s ease, background .2s ease;
}
html:root body:not(#nm-skin) input[type="checkbox"]:not(.form-switch input):not([role="switch"]):checked {
    background: var(--nm-accent);
    box-shadow: var(--nm-press-sm);
}
html:root body:not(#nm-skin) input[type="checkbox"]:not(.form-switch input):not([role="switch"]):checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: .32em;
    height: .6em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
html:root body:not(#nm-skin) input[type="checkbox"]:focus-visible { outline: 2px solid rgba(31, 138, 95, .5); outline-offset: 2px; }

/* Switches: pressed track, white raised knob, emerald fill when on (as in the reference) */
html:root body:not(#nm-skin) .form-switch .form-check-input,
html:root body:not(#nm-skin) input[role="switch"] {
    -webkit-appearance: none;
    appearance: none;
    width: 2.8em !important;
    height: 1.5em !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--nm-bg-2) !important;
    background-image: none !important;
    box-shadow: var(--nm-press-sm) !important;
    position: relative;
    cursor: pointer;
    transition: background .25s ease;
}
html:root body:not(#nm-skin) .form-switch .form-check-input::before,
html:root body:not(#nm-skin) input[role="switch"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: .12em;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: #fff;
    box-shadow: 3px 3px 8px var(--nm-shade), -2px -2px 6px var(--nm-light);
    transform: translateY(-50%);
    transition: left .3s var(--nm-ease);
}
html:root body:not(#nm-skin) .form-switch .form-check-input:checked,
html:root body:not(#nm-skin) input[role="switch"]:checked { background: var(--nm-accent) !important; }
html:root body:not(#nm-skin) .form-switch .form-check-input:checked::before,
html:root body:not(#nm-skin) input[role="switch"]:checked::before { left: calc(100% - 1.42em); }

/* Range sliders & progress: pressed groove, emerald fill */
html:root body:not(#nm-skin) input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    background: var(--nm-bg);
    box-shadow: var(--nm-press-sm);
}
html:root body:not(#nm-skin) input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nm-bg);
    box-shadow: var(--nm-raise-sm);
    cursor: pointer;
}
html:root body:not(#nm-skin) input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--nm-bg);
    box-shadow: var(--nm-raise-sm);
}
html:root body:not(#nm-skin) .progress {
    background: var(--nm-bg) !important;
    border-radius: 999px !important;
    box-shadow: var(--nm-press-sm) !important;
}
html:root body:not(#nm-skin) .progress-bar { background: var(--nm-accent) !important; border-radius: 999px; }

/* ---------- Auth sheet ---------- */
html:root body:not(#nm-skin) #authModal .auth-forms-card,
html:root body:not(#nm-skin) #accountProfileScreen .account-profile-sheet {
    background: var(--nm-bg) !important;
    box-shadow: 0 -16px 40px -18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
html:root body:not(#nm-skin) #authModal .auth-method-picks {
    background: var(--nm-bg) !important;
    border: 0 !important;
    box-shadow: var(--nm-press) !important;
}
html:root body:not(#nm-skin) #authModal .auth-method-btn {
    background: transparent !important;
    color: var(--nm-ink-soft) !important;
    box-shadow: none !important;
    transition: box-shadow .25s var(--nm-ease), color .2s ease;
}
html:root body:not(#nm-skin) #authModal .auth-method-btn.is-active {
    background: var(--nm-bg) !important;
    color: #0f5a3d !important;
    box-shadow: var(--nm-raise-sm) !important;
}

/* ---------- Phones: slightly smaller shadows (tighter layout, less paint) ---------- */
@media (max-width: 575.98px) {
    :root {
        --nm-raise-xl: -10px -10px 22px var(--nm-light), 10px 10px 22px var(--nm-shade);
        --nm-raise: -7px -7px 14px var(--nm-light), 7px 7px 14px var(--nm-shade);
    }
}
@media (prefers-reduced-motion: reduce) {
    html:root body:not(#nm-skin) .h-card-service,
html:root body:not(#nm-skin) .h-card-review,
html:root body:not(#nm-skin) .h-card-why,
html:root body:not(#nm-skin) .h-card-blog,
html:root body:not(#nm-skin) .profile-card,
html:root body:not(#nm-skin) .service-book-btn,
html:root body:not(#nm-skin) .btn.btn-dark,
html:root body:not(#nm-skin) .auth-wave-primary-btn,
html:root body:not(#nm-skin) .form-switch .form-check-input::before,
html:root body:not(#nm-skin) input[role="switch"]::before { transition: none !important; }
}
@media (prefers-contrast: more) {
    html:root body:not(#nm-skin) .h-card-service,
html:root body:not(#nm-skin) .h-card-review,
html:root body:not(#nm-skin) .h-card-why,
html:root body:not(#nm-skin) .h-card-blog,
html:root body:not(#nm-skin) .profile-card,
html:root body:not(#nm-skin) .media-feed-col,
html:root body:not(#nm-skin) #faq details,
html:root body:not(#nm-skin) .service-filter-btn,
html:root body:not(#nm-skin) .blog-sort-btn,
html:root body:not(#nm-skin) .form-control,
html:root body:not(#nm-skin) .form-select,
html:root body:not(#nm-skin) #authModal .auth-wave-field {
        outline: 1px solid rgba(76, 85, 102, .45);
    }
}

/* Filter-row scroll arrows: small raised discs like the reference's ‹ › buttons */
html:root body:not(#nm-skin) .services-filters-more {
    background: var(--nm-bg) !important;
    color: #0f5a3d !important;
    box-shadow: var(--nm-raise-sm) !important;
}
html:root body:not(#nm-skin) .services-filters-more:active {
    box-shadow: var(--nm-press-sm) !important;
}

/* ---------- Google: the highlighted, recommended sign-in path ---------- */
/* Centre tab: gold ring so it stands out even when another method is selected */
html:root body:not(#nm-skin) #authModal .auth-method-btn--google {
    color: #0f5a3d !important;
    box-shadow: 0 0 0 2px rgba(201, 162, 78, .65) !important;
}
html:root body:not(#nm-skin) #authModal .auth-method-btn--google.is-active {
    box-shadow: var(--nm-raise-sm), 0 0 0 2px var(--nm-gold) !important;
}
html:root body:not(#nm-skin) #authModal .auth-google-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    text-align: center;
}
html:root body:not(#nm-skin) #authModal .auth-google-panel[hidden] { display: none !important; }
html:root body:not(#nm-skin) #authModal .auth-google-reco {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #7a5a14;
    background: linear-gradient(135deg, rgba(233, 196, 106, .35), rgba(201, 162, 78, .22));
    box-shadow: var(--nm-raise-sm);
}
html:root body:not(#nm-skin) #authModal .auth-google-btn--main {
    position: relative;
    min-height: 3.5rem;
    margin: .1rem 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: -7px -7px 16px var(--nm-light), 9px 10px 22px var(--nm-shade), 0 0 0 2px rgba(201, 162, 78, .55) !important;
    animation: authGoogleGlow 2.4s ease-in-out 3;
    transition: transform .2s var(--nm-ease), box-shadow .25s var(--nm-ease);
}
html:root body:not(#nm-skin) #authModal .auth-google-btn--main:active {
    transform: scale(.98);
    box-shadow: var(--nm-press-sm), 0 0 0 2px rgba(201, 162, 78, .55) !important;
}
html:root body:not(#nm-skin) #authModal .auth-google-logo { width: 1.45rem; height: 1.45rem; flex: 0 0 auto; }
html:root body:not(#nm-skin) #authModal .auth-google-btn--main.is-loading { pointer-events: none; }
html:root body:not(#nm-skin) #authModal .auth-google-btn--main.is-loading > span { opacity: .55; }
html:root body:not(#nm-skin) #authModal .auth-google-btn--main.is-loading .auth-google-logo {
    animation: authGoogleSpin .9s linear infinite;
}
html:root body:not(#nm-skin) #authModal .auth-google-note {
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--nm-ink-soft);
}
@keyframes authGoogleGlow {
    0%, 100% { box-shadow: -7px -7px 16px #fff, 9px 10px 22px rgba(163, 174, 196, .62), 0 0 0 2px rgba(201, 162, 78, .55); }
    50% { box-shadow: -7px -7px 16px #fff, 9px 10px 22px rgba(163, 174, 196, .62), 0 0 0 6px rgba(201, 162, 78, .22); }
}
@keyframes authGoogleSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    html:root body:not(#nm-skin) #authModal .auth-google-btn--main,
    html:root body:not(#nm-skin) #authModal .auth-google-btn--main.is-loading .auth-google-logo { animation: none !important; }
}