/* Попап «Отримати консультацію» (діалог + форма JetFormBuilder) */
html.is-popup-open {
    overflow:      hidden;
    padding-right: var(--scrollbar-w, 0);
}

.popup {
    width:         min(1136px, calc(100vw - 48px));
    max-width:     none;
    max-height:    calc(100vh - 48px);
    margin:        auto;
    padding:       0;
    overflow:      hidden;
    border:        0;
    border-radius: var(--radius-2xl);
    color:         var(--text-primary);
    background:    var(--neutral-0);
    box-shadow:    0 24px 60px -12px rgba(0, 0, 0, .25);
}

.popup[open] {
    display: flex;
}

.popup::backdrop {
    background: rgba(8, 20, 40, .6);
}

@media (prefers-reduced-motion: no-preference) {
    .popup[open]            { animation: popup-in .2s ease-out; }
    .popup[open]::backdrop  { animation: popup-fade .2s ease-out; }
}

@keyframes popup-in   { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes popup-fade { from { opacity: 0; } }

/* Ліва частина з фото */
.popup__visual {
    position:       relative;
    display:        flex;
    flex:           0 0 40%;
    flex-direction: column;
    justify-content: flex-end;
    padding:        36px;
    color:          var(--text-inverse);
    background:     #081f59;
}

.popup__image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.popup__visual::after {
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(8, 31, 89, .05) 0%, rgba(8, 31, 89, .35) 45%, rgba(8, 31, 89, .95) 100%);
    content:    '';
}

.popup__visual-body {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.popup__visual-title {
    font-size:   26px;
    line-height: 32px;
    font-weight: 700;
}

.popup__benefits {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0;
    padding:        0;
    list-style:     none;
    font-size:      15px;
    line-height:    22px;
    color:          #e0ebf5;
}

.popup__benefits li {
    display:     flex;
    gap:         10px;
    align-items: center;
}

.popup__benefits li::before {
    flex:          0 0 8px;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--orange-500);
    content:       '';
}

/* Права частина з формою */
.popup__body {
    display:        flex;
    flex:           1 1 auto;
    flex-direction: column;
    gap:            24px;
    min-width:      0;
    padding:        36px 40px 40px;
    overflow-y:     auto;
}

.popup__title {
    margin:      0 0 8px;
    padding-right: 48px;
    font-size:   30px;
    line-height: 38px;
    font-weight: 700;
}

.popup__text {
    margin:      0;
    font-size:   15px;
    line-height: 22px;
    color:       var(--neutral-500);
}

.popup__close {
    position:        absolute;
    top:             20px;
    right:           20px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   var(--radius-pill);
    color:           var(--text-primary);
    background:      var(--neutral-50);
    cursor:          pointer;
    transition:      background var(--transition);
}

.popup__close:hover { background: var(--neutral-100); }

.popup__close:focus-visible,
.popup__phone:focus-visible {
    outline:        2px solid var(--border-focus);
    outline-offset: 2px;
}

.popup__alt {
    display:         flex;
    flex-wrap:       wrap;
    gap:             4px 8px;
    justify-content: center;
    margin:          0;
    font-size:       14px;
    line-height:     20px;
    color:           var(--neutral-500);
}

.popup__phone {
    font-weight:     600;
    color:           var(--blue-500);
    text-decoration: none;
}

.popup__phone:hover { text-decoration: underline; }

/* JetFormBuilder: сітка 2 колонки, «половинні» поля мають клас jfb-half */
:is(.popup, .quick-form) .jet-form-builder {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px 16px;
    margin:                0;
}

:is(.popup, .quick-form) .jet-form-builder-row {
    grid-column: 1 / -1;
    display:     flex;
    flex-flow:   column nowrap;
    gap:         8px;
    margin:      0;
    padding:     0;
}

:is(.popup, .quick-form) .jet-form-builder__label {
    flex:  none;
    width: auto;
}

:is(.popup, .quick-form) .jet-form-builder-row:has( .jfb-half ) { grid-column: auto; }

:is(.popup, .quick-form) .jet-form-builder__label-text {
    font-size:   14px;
    line-height: 20px;
    font-weight: 500;
    color:       var(--text-primary);
}

:is(.popup, .quick-form) .jet-form-builder__required { color: var(--orange-500); }

:is(.popup, .quick-form) .jet-form-builder__field.text-field,
:is(.popup, .quick-form) .jet-form-builder__field.textarea-field {
    width:         100%;
    height:        52px;
    padding:       0 18px;
    border:        1px solid #d9dfe8;
    border-radius: 14px;
    font:          400 16px/22px var(--font-body);
    color:         var(--text-primary);
    background:    var(--neutral-0);
    transition:    border-color var(--transition), box-shadow var(--transition);
}

:is(.popup, .quick-form) .jet-form-builder__field.textarea-field {
    height:     52px;
    min-height: 52px;
    padding:    14px 18px;
    resize:     vertical;
}

:is(.popup, .quick-form) .jet-form-builder__field::placeholder { color: var(--neutral-400); }

:is(.popup, .quick-form) .jet-form-builder__field.text-field:focus,
:is(.popup, .quick-form) .jet-form-builder__field.textarea-field:focus {
    border-color: var(--blue-500);
    box-shadow:   0 0 0 3px rgba(0, 76, 151, .12);
    outline:      0;
}

/* Чіпи вибору теми */
:is(.popup, .quick-form) .jet-form-builder__fields-group.checkradio-wrap {
    display:   flex;
    flex-flow: row wrap;
    gap:       8px;
}

:is(.popup, .quick-form) .jet-form-builder__field-wrap.radio-wrap { margin: 0; }

:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio {
    position: relative;
    display:  block;
    margin:   0;
    cursor:   pointer;
}

:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio input.radio-field {
    position:           absolute;
    width:              1px;
    height:             1px;
    margin:             0;
    opacity:            0;
    pointer-events:     none;
    -webkit-appearance: none;
            appearance: none;
}

:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio span {
    display:       block;
    padding:       7px 12px;
    border:        1px solid var(--neutral-200);
    border-radius: var(--radius-pill);
    font-size:     13px;
    line-height:   16px;
    font-weight:   500;
    color:         var(--neutral-700);
    background:    var(--neutral-0);
    transition:    background var(--transition), color var(--transition), border-color var(--transition);
}

:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio::before,
:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio::after,
:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio span::before,
:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio span::after { display: none; content: none; }

:is(.popup, .quick-form) .jet-form-builder__field-label.for-radio:hover span { border-color: var(--blue-500); }

.popup .radio-field:checked + span {
    border-color: var(--blue-500);
    color:        var(--text-inverse);
    background:   var(--blue-500);
}

.popup .radio-field:focus-visible + span {
    outline:        2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Помилки та повідомлення */
:is(.popup, .quick-form) .jet-form-builder__field.is-invalid,
:is(.popup, .quick-form) .jet-form-builder__field[aria-invalid="true"] { border-color: #d92d20; }

:is(.popup, .quick-form) .jet-form-builder__field-error,
.popup .error-message {
    font-size:   13px;
    line-height: 18px;
    color:       #d92d20;
}

:is(.popup, .quick-form) .jet-form-builder-messages-wrap { grid-column: 1 / -1; }

:is(.popup, .quick-form) .jet-form-builder-message {
    margin:        0;
    padding:       12px 16px;
    border-radius: var(--radius-md);
    font-size:     14px;
    line-height:   20px;
}

:is(.popup, .quick-form) .jet-form-builder-message--success { color: #05603a; background: #ecfdf3; }
:is(.popup, .quick-form) .jet-form-builder-message--error,
:is(.popup, .quick-form) .jet-form-builder-message--validation-error { color: #b42318; background: #fef3f2; }

/* Кнопка відправки */
:is(.popup, .quick-form) .jet-form-builder__action-button-wrap,
:is(.popup, .quick-form) .jet-form-builder__submit-wrap {
    grid-column: 1 / -1;
    margin:      0;
}

:is(.popup, .quick-form) .jet-form-builder__action-button {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    height:          56px;
    padding:         0 28px;
    border:          0;
    border-radius:   var(--radius-pill);
    font:            600 18px/24px var(--font-body);
    color:           var(--text-inverse);
    background:      var(--gradient-brand-warm);
    cursor:          pointer;
    transition:      filter var(--transition), box-shadow var(--transition);
}

:is(.popup, .quick-form) .jet-form-builder__action-button:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(242, 85, 0, .28); }
:is(.popup, .quick-form) .jet-form-builder__action-button:disabled { opacity: .6; cursor: progress; box-shadow: none; filter: none; }

:is(.popup, .quick-form) .jet-form-builder__action-button::after {
    width:      24px;
    height:     24px;
    background: currentColor;
    content:    '';
    -webkit-mask: url( "../img/arrow-right.svg" ) center / contain no-repeat;
            mask: url( "../img/arrow-right.svg" ) center / contain no-repeat;
}

/* Планшет */
@media (max-width: 1023px) {
    .popup { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }

    .popup[open] { flex-direction: column; }

    .popup__visual { display: none; }

    .popup__body { padding: 28px 24px 24px; gap: 20px; }

    .popup__title { font-size: 26px; line-height: 32px; }
}

/* Мобільний */
@media (max-width: 575px) {
    .popup {
        width:         calc(100vw - 16px);
        max-height:    calc(100vh - 16px);
        border-radius: 24px;
    }

    .popup__body { padding: 24px 16px 20px; }

    .popup__title { font-size: 22px; line-height: 28px; padding-right: 40px; }

    .popup__close { top: 12px; right: 12px; width: 40px; height: 40px; }

    .popup .jet-form-builder { grid-template-columns: 1fr; gap: 20px; }

    .popup .jet-form-builder-row:has( .jfb-half ) { grid-column: 1 / -1; }

    .popup .jet-form-builder__action-button { height: 52px; font-size: 16px; }

    .popup .jet-form-builder__field.textarea-field { height: 76px; }
}

/* Вікно «Товар додано в кошик» */
.cart-popup {
    width:         min(560px, calc(100vw - 32px));
    margin:        auto;
    padding:       40px 32px 32px;
    border:        0;
    border-radius: var(--radius-2xl);
    text-align:    center;
    color:         var(--text-primary);
    background:    var(--neutral-0);
    box-shadow:    0 24px 60px -12px rgba(0, 0, 0, .25);
}

.cart-popup::backdrop { background: rgba(8, 20, 40, .6); }

@media (prefers-reduced-motion: no-preference) {
    .cart-popup[open]           { animation: popup-in .2s ease-out; }
    .cart-popup[open]::backdrop { animation: popup-fade .2s ease-out; }
}

.cart-popup__title {
    margin:      0 40px 12px;
    font-size:   28px;
    line-height: 1.2;
    font-weight: 700;
}

.cart-popup__text {
    margin:      0 0 28px;
    font-size:   17px;
    line-height: 24px;
    color:       var(--neutral-600);
}

.cart-popup__text strong { color: var(--neutral-900); }

.cart-popup__actions {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.cart-popup__actions .btn { width: 100%; justify-content: center; }

.cart-popup__close {
    position:        absolute;
    top:             16px;
    right:           16px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    padding:         0;
    border:          1px solid var(--neutral-200);
    border-radius:   50%;
    color:           var(--neutral-600);
    background:      none;
    cursor:          pointer;
    transition:      color var(--transition), border-color var(--transition);
}

.cart-popup__close:hover { color: var(--neutral-900); border-color: var(--neutral-400); }

.cart-popup__close:focus-visible,
.cart-popup .btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

@media (max-width: 639px) {
    .cart-popup { padding: 32px 20px 24px; }
    .cart-popup__title { margin: 0 32px 10px; font-size: 24px; }
}