/*
 * F-Tech Epaka: okno wyboru punktu odbioru (front i panel).
 * Tokeny warstwy ft-core z fallbackiem, wszystkie reguły w zakresie .ftech-epaka-picker.
 */

.ftech-epaka-picker {
    --ftepp-primary: var(--ft-color-primary, #1A6DCC);
    --ftepp-primary-hover: var(--ft-color-primary-hover, #0F5BAF);
    --ftepp-primary-soft: var(--ft-color-primary-soft, #E8F1FB);
    --ftepp-text: var(--ft-color-text, #1B1F23);
    --ftepp-muted: var(--ft-color-muted, #5C636B);
    --ftepp-bg: var(--ft-color-bg, #FFFFFF);
    --ftepp-surface: var(--ft-color-surface, #F5F5F4);
    --ftepp-border: var(--ft-color-border, #E2E4E7);
    --ftepp-danger: var(--ft-color-danger, #C62828);
    --ftepp-radius: var(--ft-radius-md, 8px);
    --ftepp-radius-sm: var(--ft-radius-sm, 4px);
    --ftepp-shadow: var(--ft-shadow-lg, 0 12px 32px rgba(17, 20, 24, 0.12));
    --ftepp-focus: var(--ft-focus, 0 0 0 3px rgba(26, 109, 204, 0.35));
    --ftepp-ease: var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
    --ftepp-dur: var(--ft-dur, 200ms);
    --ftepp-s1: var(--ft-space-1, 0.25rem);
    --ftepp-s2: var(--ft-space-2, 0.5rem);
    --ftepp-s3: var(--ft-space-3, 0.75rem);
    --ftepp-s4: var(--ft-space-4, 1rem);
    --ftepp-s5: var(--ft-space-5, 1.5rem);
    --ftepp-font: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
    --ftepp-heading: var(--ft-font-heading, 'Syne', system-ui, sans-serif);

    box-sizing: border-box;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--ftepp-radius);
    background: var(--ftepp-bg);
    color: var(--ftepp-text);
    box-shadow: var(--ftepp-shadow);
    font-family: var(--ftepp-font);
    font-size: var(--ft-text-sm, 0.875rem);
    z-index: var(--ft-z-overlay, 1100);
}

.ftech-epaka-picker[open] {
    display: flex;
    flex-direction: column;
}

.ftech-epaka-picker [hidden] {
    display: none !important;
}

.ftech-epaka-picker *,
.ftech-epaka-picker *::before,
.ftech-epaka-picker *::after {
    box-sizing: border-box;
}

.ftech-epaka-picker::backdrop {
    background: rgba(17, 20, 24, 0.55);
}

.ftech-epaka-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ftepp-s3);
    padding: var(--ftepp-s4) var(--ftepp-s5);
    border-bottom: 1px solid var(--ftepp-border);
}

.ftech-epaka-picker .ftech-epaka-picker__title {
    margin: 0;
    color: var(--ftepp-text);
    font-family: var(--ftepp-heading);
    font-size: var(--ft-text-lg, 1.25rem);
    line-height: 1.3;
}

.ftech-epaka-picker .ftech-epaka-picker__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ftepp-border);
    border-radius: var(--ftepp-radius-sm);
    background: var(--ftepp-bg);
    color: var(--ftepp-text);
    cursor: pointer;
    transition: background-color var(--ftepp-dur) var(--ftepp-ease);
}

.ftech-epaka-picker .ftech-epaka-picker__close:hover {
    background: var(--ftepp-surface);
}

.ftech-epaka-picker__search {
    padding: var(--ftepp-s4) var(--ftepp-s5) 0;
}

.ftech-epaka-picker .ftech-epaka-picker__label {
    display: block;
    margin: 0 0 var(--ftepp-s1);
    font-weight: 600;
}

.ftech-epaka-picker__row {
    display: flex;
    gap: var(--ftepp-s2);
}

.ftech-epaka-picker .ftech-epaka-picker__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: var(--ftepp-s2) var(--ftepp-s3);
    border: 1px solid var(--ftepp-border);
    border-radius: var(--ftepp-radius-sm);
    background: var(--ftepp-bg);
    color: var(--ftepp-text);
    font: inherit;
}

.ftech-epaka-picker .ftech-epaka-picker__submit,
.ftech-epaka-picker .ftech-epaka-picker__select {
    min-height: 44px;
    padding: var(--ftepp-s2) var(--ftepp-s4);
    border: 0;
    border-radius: var(--ftepp-radius-sm);
    background: var(--ftepp-primary);
    color: var(--ftepp-bg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ftepp-dur) var(--ftepp-ease), transform var(--ftepp-dur) var(--ftepp-ease);
}

.ftech-epaka-picker .ftech-epaka-picker__submit:hover,
.ftech-epaka-picker .ftech-epaka-picker__select:hover {
    background: var(--ftepp-primary-hover);
    transform: translateY(-1px);
}

.ftech-epaka-picker .ftech-epaka-picker__select {
    min-height: 36px;
    margin-top: var(--ftepp-s2);
    font-size: var(--ft-text-xs, 0.75rem);
}

.ftech-epaka-picker .ftech-epaka-picker__select:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.ftech-epaka-picker input:focus-visible,
.ftech-epaka-picker button:focus-visible {
    outline: none;
    box-shadow: var(--ftepp-focus);
}

.ftech-epaka-picker .ftech-epaka-picker__status {
    min-height: 1.5em;
    margin: var(--ftepp-s2) var(--ftepp-s5);
    color: var(--ftepp-muted);
}

.ftech-epaka-picker .ftech-epaka-picker__status.is-error {
    color: var(--ftepp-danger);
    font-weight: 600;
}

.ftech-epaka-picker__body {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid var(--ftepp-border);
}

.ftech-epaka-picker .ftech-epaka-picker__list {
    max-height: min(60dvh, 520px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border-right: 1px solid var(--ftepp-border);
}

.ftech-epaka-picker .ftech-epaka-picker__item {
    margin: 0;
    padding: var(--ftepp-s3) var(--ftepp-s4);
    border-bottom: 1px solid var(--ftepp-border);
    transition: background-color var(--ftepp-dur) var(--ftepp-ease);
}

.ftech-epaka-picker .ftech-epaka-picker__item:hover,
.ftech-epaka-picker .ftech-epaka-picker__item.is-active {
    background: var(--ftepp-primary-soft);
}

.ftech-epaka-picker .ftech-epaka-picker__name,
.ftech-epaka-picker .ftech-epaka-picker__addr,
.ftech-epaka-picker .ftech-epaka-picker__hours {
    margin: 0;
    line-height: 1.45;
}

.ftech-epaka-picker .ftech-epaka-picker__name {
    font-weight: 700;
}

.ftech-epaka-picker .ftech-epaka-picker__addr,
.ftech-epaka-picker .ftech-epaka-picker__hours {
    color: var(--ftepp-muted);
}

.ftech-epaka-picker__map {
    min-height: 420px;
    background: var(--ftepp-surface);
}

.ftech-epaka-picker__popup p {
    margin: 0;
}

@media (max-width: 720px) {
    .ftech-epaka-picker {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .ftech-epaka-picker__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 220px minmax(0, 1fr);
    }

    .ftech-epaka-picker__map {
        order: -1;
        min-height: 220px;
    }

    .ftech-epaka-picker .ftech-epaka-picker__list {
        max-height: none;
        border-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ftech-epaka-picker *,
    .ftech-epaka-picker *::before,
    .ftech-epaka-picker *::after {
        transition-duration: 0.01ms !important;
    }

    .ftech-epaka-picker .ftech-epaka-picker__submit:hover,
    .ftech-epaka-picker .ftech-epaka-picker__select:hover {
        transform: none;
    }
}