/* =====================================================================
   Unified modal / drawer layer (loaded last in base.html).
   One place for: visible sticky close (44px), viewport fit (320–414px),
   internal scroll, safe-area insets, consistent dark lead fields.
   ===================================================================== */

/* Close button: always visible, 44px tap target, sticks to top-right while content scrolls */
.modal .modal-content > .modal-close {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-end;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    margin: 0 0 -44px auto !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 50% !important;
    background: rgba(18, 18, 18, 0.88) !important;
    color: #ff6600 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transform: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.modal .modal-content > .modal-close:hover,
.modal .modal-content > .modal-close:focus-visible {
    color: #fff !important;
    border-color: #ff6600 !important;
    outline: none;
}

/* Keep headings clear of the close button */
.modal .modal-content > .modal-header h3,
.modal .modal-content > h2,
.modal .modal-content > h3 {
    padding-right: 52px;
}

/* Content always scrolls internally, never wider than the viewport */
.modal .modal-content {
    box-sizing: border-box;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal .modal-content img,
.modal .modal-content video,
.modal .modal-content table {
    max-width: 100%;
}

/* Lead modal: children must not shrink (they used to be squeezed + clipped by overflow:hidden) */
#call-request-modal .modal-content > *,
#call-request-modal .modal-form > * {
    flex-shrink: 0 !important;
    min-height: auto;
}

/* Consistent dark fields inside the dark lead modal (Telegram wrap used to stay white) */
#call-request-modal .lead-form-telegram__wrap {
    background: rgba(10, 10, 10, 0.55) !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 11px !important;
    color: #fff !important;
    min-height: 48px;
}
#call-request-modal .lead-form-telegram__wrap:focus-within {
    background: rgba(10, 10, 10, 0.72) !important;
    border-color: var(--color-brand-orange, #e65100) !important;
}
#call-request-modal .lead-form-telegram__prefix {
    color: rgba(255, 255, 255, 0.55) !important;
}
#call-request-modal .lead-form-telegram__input,
#call-request-modal .lead-form-telegram__input:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    min-height: 46px;
}

@media (max-width: 767px) {
    .modal,
    #call-request-modal {
        box-sizing: border-box;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .modal .modal-content,
    #call-request-modal .modal-content {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
        padding-top: 8px !important;
    }
    #call-request-modal .modal-content {
        padding: 8px 18px 22px !important;
        gap: 16px;
    }
    #call-request-modal .modal-header {
        padding-top: 4px;
    }
    #call-request-modal .modal-direct-contact {
        margin: 0 !important;
    }
}

/* Mobile menu drawer: full viewport, internal scroll, 44px close */
.mobile-menu.plm {
    max-width: 100vw;
    height: 100dvh;
    overflow-x: hidden;
}
.mobile-menu.plm .plm__header {
    padding-top: env(safe-area-inset-top, 0px);
}
.mobile-menu.plm .plm__close {
    width: 44px !important;
    height: 44px !important;
    margin-right: -7px;
    touch-action: manipulation;
}
.mobile-menu.plm .plm__close span {
    left: 7px !important;
}
.mobile-menu.plm .plm__close span:nth-child(1) { top: 18.5px !important; }
.mobile-menu.plm .plm__close span:nth-child(2) { top: 25px !important; }

/* Package compare tabs must fit 320px */
@media (max-width: 400px) {
    #pl-shop-pkg-compare-modal .pl-shop__pkg-matrix-tabs {
        flex-wrap: wrap;
        gap: 6px;
        padding-right: 0;
    }
    #pl-shop-pkg-compare-modal .pl-shop__pkg-matrix-tab {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
        font-size: 14px;
    }
}

/* ===== Lead modal: compact, fits the viewport without internal scroll (mobile) ===== */
@media (max-width: 767px) {
    #call-request-modal .modal-content {
        padding: 6px 16px 14px !important;
        gap: 10px !important;
        overflow-y: hidden !important;
    }
    #call-request-modal .modal-header { padding-top: 6px; margin: 0 !important; }
    #call-request-modal .modal-header h3 { font-size: 17px !important; line-height: 1.2; margin: 0 0 2px !important; }
    #call-request-modal .modal-header p { font-size: 12px !important; line-height: 1.3; margin: 0 !important; padding-right: 44px; }
    #call-request-modal .modal-direct-contact {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: 4px 12px; padding: 8px 10px !important; margin: 0 !important; border-radius: 12px;
    }
    #call-request-modal .modal-separator-text { width: 100%; font-size: 11px !important; margin: 0 !important; line-height: 1.2; }
    #call-request-modal .modal-phone-link { display: inline-block !important; font-size: 14px !important; margin: 0 !important; padding: 0 !important; }
    #call-request-modal .modal-social-links { gap: 8px !important; }
    #call-request-modal .modal-social-link { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
    #call-request-modal .modal-social-link svg,
    #call-request-modal .modal-social-link img { width: 18px !important; height: 18px !important; }
    #call-request-modal .modal-form { gap: 0 !important; }
    #call-request-modal .lead-form-fields { gap: 0 !important; }
    #call-request-modal .modal-form .form-group { margin: 0 0 8px !important; }
    #call-request-modal .modal-form .form-label { font-size: 12px !important; line-height: 1.2; margin: 0 0 3px !important; }
    #call-request-modal .modal-form .form-input,
    #call-request-modal .lead-form-telegram__wrap {
        height: 44px !important; min-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 16px !important;
    }
    #call-request-modal .lead-form-telegram__input { height: 42px !important; min-height: 0 !important; }
    #call-request-modal .modal-form textarea.form-input,
    #call-request-modal .modal-form textarea {
        height: 62px !important; min-height: 62px !important; padding-top: 8px !important; padding-bottom: 8px !important; resize: none;
    }
    #call-request-modal .lead-form-checkbox,
    #call-request-modal .form-checkbox { font-size: 12px !important; line-height: 1.3 !important; }
    #call-request-modal .lead-form-expect { font-size: 11px !important; margin: 0 !important; }
    #call-request-modal .modal-form .form-submit { min-height: 44px !important; padding: 10px 16px !important; margin-top: 6px !important; font-size: 15px !important; }
}
@media (max-width: 767px) and (max-height: 600px) {
    #call-request-modal .modal-content { gap: 6px !important; padding-bottom: 10px !important; }
    #call-request-modal .modal-form .form-group { margin-bottom: 5px !important; }
    #call-request-modal .modal-form .form-input,
    #call-request-modal .lead-form-telegram__wrap { height: 40px !important; min-height: 40px !important; }
    #call-request-modal .lead-form-telegram__input { height: 38px !important; }
    #call-request-modal .modal-form textarea.form-input,
    #call-request-modal .modal-form textarea { height: 52px !important; min-height: 52px !important; }
}
/* Lead modal compact layout: contact fields in two columns, one-row contact card */
@media (max-width: 767px) {
    #call-request-modal .lead-form-fields {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 8px;
    }
    #call-request-modal .lead-form-fields > * { grid-column: 1 / -1; min-width: 0; }
    #call-request-modal .lead-form-fields > .form-group:nth-child(-n+4):not(:has(textarea)):not(:has(input[type="checkbox"])) { grid-column: auto; }
    #call-request-modal .modal-direct-contact { gap: 2px 10px !important; padding: 6px 10px !important; }
    #call-request-modal .modal-separator-text { width: auto !important; }
    #call-request-modal .modal-social-link { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
}

/* Fallback only for very short screens */
@media (max-width: 767px) and (max-height: 559px) {
    #call-request-modal .modal-content { overflow-y: auto !important; }
}

/* Desktop keeps each modal's own width (call modal 500px, centered); only phones force viewport width */
@media (max-width: 767px) {
    .modal .modal-content { max-width: calc(100vw - 32px) !important; }
}