/*
 * pm-address-modal.css
 * ---------------------------------------------------------------------------
 * Shared styling for the reusable address-picker modal injected by
 * assets/pm/js/pm-address-modal.js (window.pmAddressModal).
 *
 * REWRITE NOTE: previously this was a port of main/account.php's own
 * `.addrx-*` #addrxModal rules. That direction was wrong and has been
 * reverted. This file is now a faithful, renamed port of the
 * `.guest-confirm-*` / `.guest-gps-map-*` / `.addrx-suggest-*` rules that
 * live in core_user/ecommerce/checkout.php's own <style> block (the
 * #guestAddressConfirmModal implementation) — renamed to `.pmam-*` /
 * `#pmAddrModal` so this shared, document.body-injected modal cannot collide
 * with checkout.php's own page-local styles (checkout.php is untouched and
 * keeps its own copies of these rules under their original names).
 *
 * Values (colors, spacing, radii, timings) are copied 1:1 from checkout.php —
 * no visual redesign.
 */

#pmAddrModal .modal-header,
#pmAddrModal .modal-footer {
    padding: 12px 14px;
}

.pmam-suggest-list {
    margin-top: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .08);
    max-height: 220px;
    overflow-y: auto;
    font-size: .85rem;
}
/*
 * --compact: neo tuyệt đối theo wrapper position:relative sát input thay vì để trôi
 * theo dòng chảy tài liệu, để tránh gợi ý địa chỉ đè/che lên input hoặc nội dung
 * phía dưới khi nằm trong modal Bootstrap (modal-dialog-centered áp transform khi mở).
 */
.pmam-suggest-list--compact {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    max-height: 180px;
    z-index: 2100;
}

.pmam-suggest-item {
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: #374151;
    line-height: 1.4;
}
.pmam-suggest-item-main {
    font-weight: 500;
    font-size: .875rem;
    color: #111827;
}
.pmam-suggest-item-sub {
    font-size: .78rem;
    color: #6b7280;
}
.pmam-suggest-item:hover {
    background: #f0fdf4;
}
.pmam-suggest-item:hover .pmam-suggest-item-main {
    color: #0c4c29;
}

.pmam-label-sm {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

/* ===== Bản đồ GPS — Bước 1, luôn hiển thị (placeholder khi chưa có vị trí) ===== */

.pmam-gps-map-wrap {
    position: relative;
}
.pmam-gps-map {
    width: 100%;
    height: 340px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pmam-gps-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: .82rem;
    text-align: center;
    padding: 0 24px;
}
.pmam-gps-map-placeholder i {
    font-size: 1.6rem;
}
.pmam-gps-map-address {
    font-size: .85rem;
    color: #374151;
    min-height: 1.2em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pmam-gps-map-address-spinner {
    display: none;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
    border-top-color: var(--theme-primary, #0c4c29);
    border-radius: 50%;
    animation: pmamAddrSpin .7s linear infinite;
}
.pmam-gps-map-address.is-loading .pmam-gps-map-address-spinner {
    display: inline-block;
}
@keyframes pmamAddrSpin {
    to { transform: rotate(360deg); }
}

/* ===== Alert HTML trong modal — thay toastr, dùng lại .alert Bootstrap theo style.css ===== */

.pmam-step-alert {
    display: none;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    font-size: .82rem;
    line-height: 1.4;
    margin-bottom: 12px;
}
.pmam-step-alert.show {
    display: flex;
}
.pmam-step-alert i {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ===== Layout 3 bước tuần tự (bản đồ / địa chỉ hành chính / người nhận), luôn 1 cột ===== */

.pmam-confirm-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pmam-confirm-form-col {
    min-width: 0;
    position: relative;
}
.pmam-confirm-form-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .82);
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--theme-primary, #0c4c29);
    font-weight: 600;
    text-align: center;
    padding: 12px;
}
.pmam-confirm-form-col.is-loading .pmam-confirm-form-loading-overlay {
    display: flex;
}
.pmam-confirm-step-indicator {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--theme-primary, #0c4c29);
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .pmam-gps-map {
        height: 300px;
    }
}

/* ===== Modal Địa chỉ — tinh gọn cho mobile =====
   Trên màn nhỏ: biến modal thành full-height sheet, body cuộn được,
   header luôn dính, không bị che bởi bàn phím ảo/thanh địa chỉ. */
@media (max-width: 767.98px) {
    #pmAddrModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
        /* dùng 100dvh để né thanh địa chỉ trình duyệt mobile */
        height: 100dvh;
        display: flex;
        align-items: stretch;
    }
    #pmAddrModal .modal-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: 0;
    }
    #pmAddrModal .modal-header {
        flex: 0 0 auto;
        padding: 12px 14px;
    }
    #pmAddrModal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px;
    }
    #pmAddrModal .pmam-gps-map {
        height: 260px;
    }
    /* toastr mặc định neo top-right toàn trang (position:fixed) — khi modal
       này full-screen trên mobile, toast đè lên tiêu đề/step indicator.
       Đẩy toast xuống dưới header của modal trong lúc modal đang mở. */
    body.modal-open:has(#pmAddrModal.show) #toast-container.toast-top-right {
        top: 64px;
    }
}