/* Phone country list on phones: bottom sheet with a drag handle (phone-country-sheet.js).
   Shared by /book-a-demo/ and the Book a Demo modal (20.10), so the sheet looks and
   behaves the same in both: geometry, handle and the inner search/list styles all live
   here. The rules target the library's popup itself (not a class added by the script),
   so the sheet is in place from the first frame: no centred card flashing in or out
   (the "horns" seen on open/close, 20.10). The script caps the sheet to the visible
   height (--sd-sheet-max), so the search stays above the keyboard. */
@media (max-width: 767px) {
    .iti--container.iti--fullscreen-popup {
        box-sizing: border-box;
        display: flex;
        align-items: stretch !important;
        justify-content: flex-end !important;
        padding: 40px 0 0 !important;
        /* The overlay also carries the .iti class, and book-a-demo-new-v2.css rounds
           every .iti by 10px: the dimmed layer lost its top screen corners and the white
           page showed through as two triangles (20.10 feedback). */
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.5);
        transition: background-color 220ms ease;
        /* The dimmed area is the drag-to-close surface: it must never scroll the page. */
        touch-action: none;
        overscroll-behavior: contain;
    }

    /* No border/shadow and no will-change: on iOS they drew light "horns" at the rounded
       top corners (20.10 feedback). */
    .iti--container.iti--fullscreen-popup .iti__dropdown-content {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        height: auto;
        min-height: min(480px, var(--sd-sheet-max, 100%));
        max-height: min(480px, var(--sd-sheet-max, 100%));
        margin: 0;
        padding: 0 20px !important;
        border: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        background: #fff;
        box-shadow: none !important;
        overflow: visible;
        transition: transform 220ms ease;
    }

    .iti--container.iti--fullscreen-popup .iti__dropdown-content::before {
        display: none;
    }

    /* The library's closed state must still win over the display: flex above. */
    .iti--container.iti--fullscreen-popup .iti__dropdown-content.iti__hide {
        display: none !important;
    }

    /* Search: the /book-a-demo/ look (magnifier drawn as the field background, no library
       icon or clear button, one underline). */
    .iti--container.iti--fullscreen-popup .iti__search-input-wrapper {
        border: 0 !important;
        box-shadow: none !important;
    }

    .iti--container.iti--fullscreen-popup .iti__search-icon,
    .iti--container.iti--fullscreen-popup .iti__search-clear {
        display: none !important;
    }

    .iti--container.iti--fullscreen-popup input.iti__search-input {
        height: 48px !important;
        margin: 0 !important;
        padding: 4px 28px 0 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #4d4d4d !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: url("../../../images/search1.svg") no-repeat right 0 center / 16px 16px !important;
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: 0.12px !important;
    }

    .iti--container.iti--fullscreen-popup .iti__country-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .iti--container.iti--fullscreen-popup .iti__country {
        padding: 10px !important;
    }

    /* Dial code on the right of the row (it sits inside the name span). */
    .iti--container.iti--fullscreen-popup .iti__country-name {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
    }

    .iti--container.iti--fullscreen-popup .iti__sd-sheet-handle {
        position: absolute !important;
        z-index: 2;
        top: -34px !important;
        left: 50% !important;
        display: block !important;
        width: 100px !important;
        height: 40px !important;
        margin: 0 !important;
        transform: translateX(-50%);
        cursor: grab;
        touch-action: none;
    }

    .iti--container.iti--fullscreen-popup .iti__sd-sheet-handle::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 0;
        width: 100%;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
    }
}