/* Guest auth bottom sheet — warm cream + soft green (Pay Now sheet pattern) */
.kga {
    --kga-ink: #14532d;
    --kga-muted: #5b6b5a;
    --kga-cream: #fff9f0;
    --kga-cream-deep: #fef3c7;
    --kga-mint: #ecfdf5;
    --kga-mint-mid: #d1fae5;
    --kga-leaf: #166534;
    --kga-leaf-soft: #86efac;
    --kga-amber-line: rgba(217, 119, 6, 0.22);
    --kga-green-line: rgba(22, 101, 52, 0.16);

    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.kga[hidden] {
    display: none !important;
    pointer-events: none;
}

.kga__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 48, 30, 0.42);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.kga__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--bh-layout-max, 420px);
    max-height: min(92dvh, 640px, var(--kf-vv-height, 92dvh));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    padding: 10px 16px calc(16px + var(--safe-b, env(safe-area-inset-bottom, 0px)) + var(--ca-lnav-dock, 0px));
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(254, 243, 199, 0.85) 0%, transparent 55%),
        radial-gradient(90% 60% at 0% 100%, rgba(209, 250, 229, 0.75) 0%, transparent 50%),
        linear-gradient(165deg, var(--kga-cream) 0%, #fffef9 42%, var(--kga-mint) 100%);
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--kga-amber-line);
    box-shadow:
        0 -12px 40px rgba(22, 101, 52, 0.14),
        0 -1px 0 rgba(255, 255, 255, 0.7) inset;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
    box-sizing: border-box;
}

.kga--open {
    pointer-events: auto;
}

.kga--open .kga__backdrop {
    opacity: 1;
}

.kga--open .kga__panel {
    transform: translateY(0);
}

body.kga-open {
    overflow: hidden;
}

.kga__handle {
    width: 40px;
    height: 4px;
    margin: 4px auto 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fcd34d, #86efac);
    opacity: 0.9;
}

.kga__brand {
    display: flex;
    justify-content: center;
    margin: 0 0 10px;
}

.kga__logo {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.kga--box-entry .kga__title {
    text-align: center;
}

.kga--box-entry .kga__sub {
    text-align: center;
}

.kga__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--kga-ink);
    letter-spacing: -0.02em;
}

.kga__sub {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--kga-muted);
}

.kga__err {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
    font-size: 0.88rem;
    font-weight: 600;
}

.kga__err[hidden] {
    display: none !important;
}

.kga__form[hidden] {
    display: none !important;
}

.kga__label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #3f6212;
}

.kga__input {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--kga-green-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    font: inherit;
    font-size: 1rem;
    color: #14532d;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.kga__input:focus {
    outline: none;
    border-color: #4ade80;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.35);
}

.kga__mobile-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 14px;
    border: 1px solid var(--kga-amber-line);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.kga__prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    font-weight: 800;
    font-size: 0.95rem;
    border-right: 1px solid var(--kga-amber-line);
}

.kga__mobile-row .kga__input {
    margin: 0;
    border: 0;
    border-radius: 0;
    flex: 1;
    background: transparent;
    box-shadow: none;
}

.kga__mobile-row .kga__input:focus {
    box-shadow: none;
    background: transparent;
}

.kga__btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid #86efac;
    border-radius: 12px;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--kga-leaf);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.kga__btn:hover,
.kga__btn:focus-visible {
    background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
    outline: none;
}

.kga__btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.kga__link {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #15803d;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.kga__cancel {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: var(--kga-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.kga__masked {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(254, 243, 199, 0.65);
    border: 1px solid var(--kga-amber-line);
    font-size: 0.9rem;
    color: #92400e;
    font-weight: 700;
}

.kga__pin-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0 0 16px;
}

.kga__pin {
    width: 48px;
    height: 52px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    border: 1px solid var(--kga-green-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--kga-ink);
}

.kga__pin:focus {
    outline: none;
    border-color: #4ade80;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.35);
}

.kga__confirm {
    margin-top: 4px;
}

.kga__confirm[hidden] {
    display: none !important;
}

body.veggies-basket-contact-page.veggies-basket-lively .kga__panel {
    border-radius: 0 !important;
}

body.veggies-basket-contact-page.veggies-basket-lively .kga__btn {
    border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .kga__backdrop,
    .kga__panel {
        transition: none;
    }

    .kga--box-entry.kga--open .kga__brand--hero .kga__logo,
    .kga--box-entry.kga--open .kga__brand-glow,
    .kga--box-entry.kga--open .kga__title,
    .kga--box-entry.kga--open .kga__form--city {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ——— /box city entry: stronger brand sheet ——— */
.kga--box-entry {
    --kga-ink: #ecfdf5;
    --kga-muted: rgba(220, 252, 231, 0.78);
    --kga-leaf: #166534;
}

.kga--box-entry .kga__backdrop {
    background:
        radial-gradient(80% 50% at 50% 100%, rgba(22, 101, 52, 0.35) 0%, transparent 55%),
        rgba(6, 28, 16, 0.58);
}

.kga--box-entry .kga__panel {
    padding: 12px 18px calc(20px + var(--safe-b, env(safe-area-inset-bottom, 0px)) + var(--ca-lnav-dock, 0px));
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(74, 222, 128, 0.28) 0%, transparent 52%),
        radial-gradient(90% 60% at 100% 100%, rgba(21, 128, 61, 0.55) 0%, transparent 48%),
        radial-gradient(70% 50% at 0% 80%, rgba(34, 197, 94, 0.22) 0%, transparent 45%),
        linear-gradient(165deg, #0b3d24 0%, #14532d 42%, #166534 78%, #15803d 100%);
    border-top: 1px solid rgba(190, 242, 100, 0.35);
    box-shadow:
        0 -18px 48px rgba(4, 47, 24, 0.45),
        0 -1px 0 rgba(255, 255, 255, 0.12) inset;
}

.kga--box-entry .kga__handle {
    width: 44px;
    height: 5px;
    margin: 2px auto 14px;
    background: linear-gradient(90deg, #bef264, #4ade80, #86efac);
    box-shadow: 0 0 12px rgba(134, 239, 172, 0.45);
}

.kga--box-entry .kga__brand--hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 14px;
    min-height: 112px;
}

.kga--box-entry .kga__brand-glow {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 242, 100, 0.35) 0%, rgba(74, 222, 128, 0.12) 45%, transparent 70%);
    pointer-events: none;
}

.kga--box-entry .kga__brand-leaf {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 0 70% 0 70%;
    background: linear-gradient(135deg, #86efac, #22c55e);
    opacity: 0.55;
    pointer-events: none;
}

.kga--box-entry .kga__brand-leaf--a {
    top: 8px;
    left: calc(50% - 78px);
    transform: rotate(-28deg);
}

.kga--box-entry .kga__brand-leaf--b {
    bottom: 10px;
    right: calc(50% - 82px);
    transform: rotate(140deg);
    opacity: 0.4;
}

.kga--box-entry .kga__logo {
    position: relative;
    z-index: 1;
    width: min(118px, 34vw);
    height: auto;
    max-height: 118px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}

.kga--box-entry .kga__title {
    margin: 0 0 18px;
    text-align: center;
    font-size: clamp(1.35rem, 5.2vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f7fef9;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.kga--box-entry .kga__form--city {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kga--box-entry .kga__label {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(220, 252, 231, 0.82);
}

.kga--box-entry .kga__select-wrap {
    position: relative;
    margin: 0 0 16px;
}

.kga--box-entry .kga__select-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #166534;
    pointer-events: none;
    z-index: 1;
}

.kga--box-entry .kga__select-chev {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #166534;
    border-bottom: 2px solid #166534;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
    z-index: 1;
}

.kga--box-entry .kga__input--city {
    margin: 0;
    padding: 16px 40px 16px 44px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    color: #14532d;
    font-size: 1.05rem;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 28px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.kga--box-entry .kga__input--city:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(190, 242, 100, 0.55),
        0 10px 28px rgba(0, 0, 0, 0.18);
}

.kga--box-entry .kga__btn--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    padding: 16px 18px;
    border: 0;
    border-radius: 16px;
    background:
        linear-gradient(180deg, #bbf7d0 0%, #4ade80 42%, #16a34a 100%);
    color: #052e16;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 12px 28px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.kga--box-entry .kga__btn--primary:hover,
.kga--box-entry .kga__btn--primary:focus-visible {
    filter: brightness(1.05);
    outline: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 14px 32px rgba(0, 0, 0, 0.32);
}

.kga--box-entry .kga__btn--primary:active {
    transform: translateY(1px);
}

.kga--box-entry .kga__btn-ico {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    .kga--box-entry.kga--open .kga__brand--hero .kga__logo {
        animation: kga-brand-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .kga--box-entry.kga--open .kga__brand-glow {
        animation: kga-glow-pulse 2.8s ease-in-out infinite;
    }

    .kga--box-entry.kga--open .kga__title {
        animation: kga-title-in 0.5s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .kga--box-entry.kga--open .kga__form--city {
        animation: kga-form-in 0.5s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes kga-brand-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kga-title-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kga-form-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kga-glow-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

body.veggies-basket-contact-page.veggies-basket-lively .kga--box-entry .kga__input--city,
body.veggies-basket-contact-page.veggies-basket-lively .kga--box-entry .kga__btn--primary {
    border-radius: 0 !important;
}