/* Storefront interface details shared by every page on the website layout:
   scroll progress, page-loading bar, back-to-top, mobile menu, hover states
   and copy buttons. Behaviour lives in public/web/js/main.js. */

:root {
    --ui-blue: #21409a;
    --ui-yellow: #ffd333;
    --ui-ink: #212529;
}

/* Scroll progress: a thin bar across the top that fills as the page scrolls. */
.scroll-progress {
    position: fixed; top: 0; left: 0; z-index: 1080;
    width: 100%; height: 3px; background: var(--ui-yellow);
    transform: scaleX(0); transform-origin: 0 50%;
    pointer-events: none;
}

/* Page-loading bar: shown after a link or form starts loading the next page,
   so a slow connection still gets feedback. It never delays the first paint. */
.page-loader {
    position: fixed; top: 0; left: 0; z-index: 1090;
    width: 100%; height: 3px; overflow: hidden;
    opacity: 0; transition: opacity .2s; pointer-events: none;
}
.page-loader.is-active { opacity: 1; }
.page-loader::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: var(--ui-blue);
    animation: page-loader-slide 1.1s ease-in-out infinite;
}
@keyframes page-loader-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* Back to top: a round, quiet button (it used to bounce endlessly). */
.back-to-top {
    right: 20px; bottom: 20px; z-index: 1050;
    width: 44px; height: 44px; padding: 0;
    display: none; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--ui-blue) !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(33, 64, 154, .35);
    animation: none !important;
    transition: transform .2s, box-shadow .2s;
}
.back-to-top.is-visible { display: flex; }
.back-to-top i { font-size: 18px; line-height: 1; }
.back-to-top:focus-visible { outline: 3px solid var(--ui-yellow); outline-offset: 3px; }

/* Mobile menu (<= 890px, where style.min.css turns the nav into a drawer). */
.nav-backdrop { display: none; }
@media (max-width: 890px) {
    .checkbtn:focus-visible { outline: 3px solid var(--ui-blue); outline-offset: 4px; border-radius: 6px; }
    #check:checked ~ .checkbtn .fa-bars::before { content: "\f00d"; } /* bars -> close */
    nav .ul {
        z-index: 1040;
        width: min(82vw, 320px);
        height: calc(100vh - 80px); height: calc(100dvh - 80px);
        overflow-y: auto; overscroll-behavior: contain;
        padding: 8px 0 24px 46px;
        box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
    }
    nav .ul li a { display: block; padding: 6px 0; }
    .nav-backdrop {
        position: fixed; left: 0; right: 0; top: 80px; bottom: 0; z-index: 1030;
        background: rgba(20, 21, 26, .45);
        opacity: 0; transition: opacity .3s;
    }
    #check:checked ~ .nav-backdrop { display: block; opacity: 1; }
    body.nav-open { overflow: hidden; }
}

/* Copy buttons (any [data-copy] element). */
.copy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border: 1px solid #dee2e6; border-radius: 999px;
    background: #fff; color: var(--ui-ink); font-size: 13px; font-weight: 600; line-height: 1.4;
    cursor: pointer; vertical-align: middle;
    transition: background .2s, border-color .2s, color .2s;
}
.copy-btn.is-copied { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.copy-btn:focus-visible { outline: 3px solid var(--ui-blue); outline-offset: 2px; }

/* Hover states. Only on devices that really hover, so taps on phones don't
   leave buttons stuck in their hover look. */
.order-btn { transition: transform .2s, box-shadow .2s, filter .2s; }
@media (hover: hover) {
    .order-btn:hover, .order-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(33, 37, 41, .18);
        filter: brightness(.96);
        text-decoration: none;
    }
    .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(33, 64, 154, .45); }
    .copy-btn:hover { border-color: var(--ui-blue); color: var(--ui-blue); }
    .user-dropdown .dropdown-item:hover { background: #f4f6fb; color: var(--ui-blue); }
}
.order-btn:active { transform: translateY(0); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .page-loader::before { animation-duration: 3s; }
    .order-btn, .back-to-top, .nav-backdrop, nav .ul { transition: none; }
}

/* Skip to content: the first thing a keyboard user tabs to; hidden until focused. */
.skip-link {
    position: fixed; left: 16px; top: -64px; z-index: 1100;
    padding: 10px 18px; border-radius: 0 0 8px 8px;
    background: var(--ui-blue); color: #fff; font-weight: 600; text-decoration: none;
    transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; outline: 3px solid var(--ui-yellow); outline-offset: 2px; }
#main-content:focus { outline: none; }