/*
  Final mobile usability pass.
  Small, shared helpers for readability, safe touch targets, quick actions, and scroll feedback.
*/

:root {
    --mobile-gold: #d7b46a;
    --mobile-ivory: #f7f1df;
    --mobile-line: rgba(215, 180, 106, 0.22);
    --mobile-panel: rgba(7, 7, 6, 0.82);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 84px;
}

body {
    overflow-wrap: anywhere;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

a,
button,
[role="button"],
input,
select,
textarea {
    -webkit-tap-highlight-color: rgba(215, 180, 106, 0.18);
}

.nc-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147482500;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, #8f6528, #ffe19a, #c99632);
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow: 0 0 18px rgba(215, 180, 106, 0.45);
}

.nc-back-top {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 2147482400;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mobile-line);
    border-radius: 999px;
    color: var(--mobile-gold);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(0, 0, 0, 0.74);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.nc-back-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nc-back-top:hover,
.nc-back-top:focus-visible {
    border-color: rgba(242, 216, 137, 0.56);
    outline: none;
}

.nc-mobile-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147482300;
    display: none;
    gap: 8px;
    padding: 9px max(12px, env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    border-top: 1px solid var(--mobile-line);
    background: rgba(4, 4, 4, 0.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 -18px 58px rgba(0, 0, 0, 0.46);
}

.nc-mobile-actions a,
.nc-mobile-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 10px 12px;
    border: 1px solid rgba(215, 180, 106, 0.28);
    border-radius: 8px;
    color: var(--mobile-ivory);
    background: rgba(255, 255, 255, 0.045);
    font: 700 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.nc-mobile-actions .nc-mobile-primary {
    color: #070707;
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, #d6a840, #f2dc99 48%, #a8792d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 32px rgba(215, 180, 106, 0.18);
}

.nc-mobile-actions .nc-mobile-mini {
    flex: 0 0 48px;
    padding-inline: 0;
    color: var(--mobile-gold);
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    body:has(#stickyCtaBar) {
        padding-bottom: 0;
    }

    .nc-mobile-actions {
        display: flex;
    }

    body:has(#stickyCtaBar) .nc-mobile-actions {
        display: none;
    }

    .nc-back-top {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }

    body:has(#stickyCtaBar) .nc-back-top {
        bottom: calc(82px + env(safe-area-inset-bottom));
    }

    :where(.container, .ad-container, .section-inner, main, section) {
        max-width: 100%;
    }

    :where(table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(input, select, textarea, button, .cta-btn, .btn, .back-btn, .submit-btn) {
        min-height: 44px;
    }

    :where(input, select, textarea) {
        font-size: 16px !important;
    }

    :where(h1, h2, h3) {
        overflow-wrap: anywhere;
    }

    :where(.price-card, .feature-card, .card, .step-section, .info-box, .pay-option) {
        max-width: 100%;
    }
}

@media (min-width: 761px) {
    .nc-back-top {
        bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nc-scroll-progress,
    .nc-back-top {
        transition: none !important;
    }
}