/* ======================= PRZYCISK / BANNER ======================= */
.ocp-trigger {
    --ocp-bg: #ff7a00;
    --ocp-fg: #171a21;
    --ocp-border: #ff7a00;
    --ocp-glow: 255, 122, 0;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 14px 24px;
    overflow: hidden;
    border: 1px solid var(--ocp-border);
    border-radius: 3px;
    background: var(--ocp-bg);
    color: var(--ocp-fg);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .025em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 8px 24px rgba(var(--ocp-glow), .12);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ocp-trigger:hover { color: var(--ocp-fg); text-decoration: none; }
.ocp-trigger--full { width: 100%; }
.ocp-trigger--auto { width: auto; }
.ocp-trigger--banner { min-height: 64px; padding: 19px 28px; font-size: 20px; border-radius: 5px; }
.ocp-trigger--orange { --ocp-bg: #ff7a00; --ocp-border: #ff7a00; --ocp-fg: #171a21; }
.ocp-trigger--orange.ocp-trigger--orange-white { --ocp-fg: #fff; }
.ocp-trigger--red { --ocp-bg: #d70300; --ocp-border: #d70300; --ocp-fg: #fff; --ocp-glow: 215, 3, 0; }
.ocp-trigger--cream { --ocp-bg: #e1cc91; --ocp-border: #c9b780; --ocp-fg: #29312d; --ocp-glow: 225, 204, 145; border-radius: 2px; }
.ocp-trigger--solid { --ocp-bg: #6d1020; --ocp-border: #6d1020; --ocp-fg: #fff; --ocp-glow: 109, 16, 32; }
.ocp-trigger--outline { --ocp-bg: #fff; --ocp-border: #6d1020; --ocp-fg: #6d1020; --ocp-glow: 109, 16, 32; box-shadow: none; }
.ocp-trigger__label { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; }
.ocp-trigger__arrow { position: relative; z-index: 1; flex: 0 0 auto; width: 24px; height: 24px; transition: transform .2s ease; }
.ocp-trigger:is(:hover, :focus-visible) .ocp-trigger__arrow { transform: translateX(5px); }
.ocp-trigger:active { transform: translateY(1px); }
.ocp-trigger:disabled { cursor: not-allowed; opacity: .65; }

/* 1. SHINE — refleks; animacja tylko przy interakcji. */
.ocp-fx--shine::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -25% auto -25% -55%;
    width: 42%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.ocp-fx--shine:is(:hover, :focus-visible)::after { animation: ocp-shine .75s ease-out both; }
@keyframes ocp-shine {
    0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateX(410%) skewX(-18deg); opacity: 0; }
}
/* 2. LIFT — podniesienie i cień. */
.ocp-fx--lift:is(:hover, :focus-visible) { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(var(--ocp-glow), .3); }
.ocp-fx--lift:active { transform: translateY(0); }
/* 3. SWEEP — dyskretne przyciemnienie przesuwające się od lewej. */
.ocp-fx--sweep::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: rgba(0, 0, 0, .1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
    pointer-events: none;
}
.ocp-fx--sweep:is(:hover, :focus-visible)::before { transform: scaleX(1); }
/* 4. PULSE — tylko 3 powtórzenia, nie nieskończone miganie. */
.ocp-fx--pulse { animation: ocp-pulse 1.5s ease-out 3; }
@keyframes ocp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--ocp-glow), .4); }
    85%, 100% { box-shadow: 0 0 0 13px rgba(var(--ocp-glow), 0); }
}
/* 5. NONE — także bez ruchu strzałki. */
.ocp-fx--none, .ocp-fx--none .ocp-trigger__arrow { transition: none; animation: none; }
.ocp-fx--none:is(:hover, :focus-visible, :active),
.ocp-fx--none:is(:hover, :focus-visible) .ocp-trigger__arrow { transform: none; }

/* Fokus ma pierwszeństwo przed cieniem i animacją wybranego efektu. */
.ocp-trigger:focus-visible { outline: 3px solid #151922; outline-offset: 4px; box-shadow: 0 0 0 4px #fff; animation: none; }

/* ====================== POPUP: NATIVE DIALOG ===================== */
dialog.ocp-popup {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--ocp-popup-bg, #fff);
    color: var(--ocp-popup-color, #171a21);
    font-family: inherit;
}
dialog.ocp-popup:not([open]) { display: none !important; }
dialog.ocp-popup[open] { display: flex; flex-direction: column; animation: ocp-popup-in .22s ease-out; }
dialog.ocp-popup::backdrop { background: rgba(5, 7, 13, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.ocp-popup--boxed {
    width: min(1100px, calc(100% - 40px));
    height: fit-content;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 24px 90px rgba(0,0,0,.4);
}
/* Nagłówek jest POZA przewijanym obszarem — X nie ucieka. */
.ocp-popup__header {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    min-height: 68px;
    box-sizing: border-box;
    padding: 10px 20px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    background: #10131d;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.ocp-popup__title {
    margin: 0;
    color: #ff7a00;
    font-family: inherit;
    font-size: clamp(16px, 2.5vw, 23px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .065em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.ocp-popup__close {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0 0 0 auto;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: #232733;
    color: #fff;
    cursor: pointer;
    appearance: none;
    transition: background .2s ease, transform .2s ease;
}
.ocp-popup__close svg { width: 24px; height: 24px; pointer-events: none; }
.ocp-popup__close:hover { background: #3a4050; transform: rotate(90deg); }
.ocp-popup__close:focus-visible { outline: 3px solid #ff7a00; outline-offset: 3px; }
.ocp-popup__content {
    flex: 1 1 auto;
    min-height: 0; /* Kluczowe: zawartość może być wyższa niż dostępny ekran. */
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto; /* Scroll tylko wtedy, gdy jest potrzebny. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}
.ocp-popup__component { min-height: 100%; min-width: 0; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }


.ocp-popup__notice { padding: 24px; margin: 0; background: #fff4e4; color: #652b00; font: 16px/1.5 system-ui, sans-serif; }
@keyframes ocp-popup-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
    .ocp-trigger--banner { min-height: 60px; padding: 17px 20px; font-size: 18px; }
    dialog.ocp-popup--boxed { width: calc(100% - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 8px; }
}
/* Wyłączamy nasze animacje, nie ingerujemy w CSS treści komponentu. */
@media (prefers-reduced-motion: reduce) {
    .ocp-trigger, .ocp-trigger::before, .ocp-trigger::after,
    .ocp-trigger .ocp-trigger__arrow,
    dialog.ocp-popup[open], .ocp-popup__close {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .ocp-trigger::before, .ocp-trigger::after { display: none !important; }
}

/* No parent-page styles or component styles are reset. */
.ocp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.ocp-popup__title:focus-visible { outline: 2px solid #ff7a00; outline-offset: 4px; }
.ocp-popup__content:focus-visible { outline: 2px solid #ff7a00; outline-offset: -3px; }
[data-ocp-enhanced] { cursor: pointer; }
[data-ocp-enhanced]:focus-visible { outline: 3px solid #ff7a00; outline-offset: 4px; }
@media (forced-colors: active) {
    .ocp-trigger, .ocp-popup__close { border: 2px solid ButtonText; }
    dialog.ocp-popup { border: 2px solid CanvasText; }
    .ocp-trigger:focus-visible, [data-ocp-enhanced]:focus-visible { outline: 3px solid Highlight; }
    .ocp-trigger::after, .ocp-trigger::before { display: none; }
}