/* ============================================================================
   ป๊อปอัป "ติดต่อเรา" - components/contact-us/modal.blade.php + contact-us.js
   จอใหญ่: การ์ดกลางจอ (ขยายนุ่มๆ จากปุ่มที่กด), มือถือ: แผ่นจากล่างจอ ปัดลงเพื่อปิด
   เปิด = .is-open บน .cu-root, ปิด = .is-closing (สั้นกว่า ไม่มีดีเลย์) แล้วซ่อน
   เครื่องที่ปิดแอนิเมชัน: property.css ทำให้ transition จบทันทีเอง - JS ไม่รอ transitionend
   ไม่มีแถบสีขอบซ้าย ไม่ยกการ์ดตอน hover (CLAUDE.md)
   ========================================================================== */

.cu-root {
    --cu-green: #035432;
    --cu-green-2: #0B7A46;
    --cu-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* การ์ดจอใหญ่: ชะลอตอนท้ายสั้นกว่า --cu-ease ข้อความไม่ค่อยๆ คลานทีละเศษพิกเซลนานหลังการ์ดดูเหมือนหยุดแล้ว */
    --cu-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --cu-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--theme-font-family, 'Sarabun', 'Segoe UI', sans-serif);
}
.cu-root[hidden] { display: none; }

.cu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 30, 18, 0.46);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    opacity: 0;
    transition: opacity 0.38s ease;
}
.cu-root.is-open .cu-backdrop { opacity: 1; }

/* ── การ์ด ─────────────────────────────────────────────────────────────── */
.cu-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 30px 80px -20px rgba(2, 40, 24, 0.45), 0 10px 24px -12px rgba(2, 40, 24, 0.25);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transform-origin: var(--cu-origin, 50% 0%);
    transition: transform 0.42s var(--cu-ease-soft), opacity 0.24s ease;
    /* เลเยอร์เดียวตลอดที่เปิดอยู่: การ์ดอยู่กลางจอที่เศษพิกเซล (สูงไม่ลงตัว) ระหว่างแอนิเมชันเบราว์เซอร์วาดข้อความในเลเยอร์
       พอจบแล้วถอดเลเยอร์ วาดใหม่ลงหน้า ตัวอักษรเลื่อน 1 พิกเซลทีเดียวหลังการ์ดหยุดแล้ว (กล่อง "ชำระเงินผ่าน..." เห็นชัดสุด
       ที่ 1280x851, 1280x900, 1920x1080) - คงเลเยอร์ไว้ = ภาพตอนเล่นกับตอนจบเป็นชุดเดียวกัน ไม่มีจังหวะกระโดด (2026-11-05) */
    will-change: transform, opacity;
    outline: none;
}
.cu-root.is-open .cu-dialog {
    opacity: 1;
    transform: none;
}
/* การ์ดรับโฟกัสตอนเปิดเพื่อพาโฟกัสเข้าป๊อปอัปเท่านั้น - กฎ :focus-visible ของ layouts/property (ทีหลัง สเปกเท่ากัน)
   เคยวาดกรอบสี่เหลี่ยมเขียวเข้มรอบการ์ดเมื่อเปิดด้วยคีย์บอร์ด/หลังกดปุ่ม Esc แยกสองกฎ (:focus-visible ห้ามอยู่ในรายการเดียวกับตัวเลือกอื่น) */
.cu-dialog:focus { outline: none; }
.cu-dialog:focus-visible { outline: none; }
.cu-root.is-closing .cu-dialog {
    transition: transform 0.22s ease-in, opacity 0.2s ease-in;
    transform: translateY(10px) scale(0.97);
    opacity: 0;
}
.cu-root.is-closing .cu-backdrop {
    transition-duration: 0.24s;
    opacity: 0;
}

.cu-grip { display: none; }

/* ── ปก ─────────────────────────────────────────────────────────────── */
.cu-cover {
    position: relative;
    height: 124px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cu-green-2), var(--cu-green));
}
.cu-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    display: block;
    opacity: 0; /* contact-us.js ใส่ .is-loaded เมื่อรูปโหลดเสร็จ = ค่อยๆ ปรากฏ ไม่โผล่วาบ */
    transform: scale(1.12);
    transition: opacity 0.35s ease, transform 1.4s var(--cu-ease);
}
.cu-cover img.is-loaded { opacity: 0.55; }
.cu-root.is-open .cu-cover img { transform: scale(1); }
.cu-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(255, 214, 102, 0.28), rgba(255, 214, 102, 0) 60%),
        linear-gradient(180deg, rgba(3, 84, 50, 0.35) 0%, rgba(3, 84, 50, 0.82) 100%);
}

.cu-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.cu-close:hover { background: rgba(255, 255, 255, 0.3); }
.cu-close:active { transform: scale(0.92); }
.cu-close:focus-visible { outline: 3px solid #FFD666; outline-offset: 2px; }
.cu-close .bi { font-family: bootstrap-icons; line-height: 1; }
.cu-close .bi::before { vertical-align: 0; }

/* ── หัว ─────────────────────────────────────────────────────────────── */
.cu-body {
    position: relative;
    padding: 0 20px 22px;
}
.cu-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -54px;
}
.cu-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #E8F5EC;
    box-shadow: 0 0 0 5px #fff, 0 14px 30px -8px rgba(3, 84, 50, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.6s var(--cu-spring) 0.1s, opacity 0.25s ease 0.1s;
}
.cu-root.is-open .cu-avatar { transform: none; opacity: 1; }
.cu-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cu-avatar img.is-loaded { opacity: 1; }
/* น้องแฮปปี้: ภาพเต็มตัว 600x800 - ซูมเข้าครึ่งตัวบน ให้หน้าอยู่กลางวง */
.cu-avatar--mascot {
    background: linear-gradient(160deg, #F2FBF5 0%, #D6EFDF 100%);
}
.cu-avatar--mascot img {
    object-fit: cover;
    object-position: 50% 0%;
    width: 100%;
    height: 100%;
    transform: scale(1.75) translateY(-8%);
    transform-origin: 50% 0%;
}
.cu-avatar-clip {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cu-avatar--initial { background: linear-gradient(145deg, var(--cu-green-2) 0%, var(--cu-green) 100%); }
.cu-initial {
    color: #fff;
    font-family: var(--theme-font-family-heading, 'Prompt', 'Segoe UI', sans-serif);
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1;
    padding-bottom: .1em; /* พยัญชนะไทยนั่งต่ำกว่ากลางกล่องบรรทัด ยกให้อยู่กลางวง (วัดจากพิกเซลจริง) */
}
.cu-initial--latin { padding-bottom: 0; padding-top: .08em; }
/* จุดเขียว "พร้อมคุย" - วงกระเพื่อมเบาๆ */
.cu-avatar-dot {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px #fff;
}
.cu-avatar-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22C55E;
    animation: cu-ping 2.2s ease-out 1s infinite;
}
@keyframes cu-ping {
    0% { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(2.4); opacity: 0; }
}

.cu-title {
    margin: 14px 0 2px;
    font-family: var(--theme-font-family-heading, 'Prompt', 'Segoe UI', sans-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0F172A;
    letter-spacing: -0.01em;
}
.cu-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cu-green);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.cu-meta {
    margin: 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: #475569;
    background: #F1F5F3;
    border-radius: 999px;
    padding: 4px 12px;
    line-height: 1.4;
}
.cu-meta .bi { color: var(--cu-green-2); line-height: 1; }
.cu-meta .bi::before { vertical-align: -0.08em; }

/* ── ช่องทางติดต่อ ───────────────────────────────────────────────────────── */
.cu-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cu-row {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 18px;
    border: 1px solid #E5EDE8;
    background: #F8FBF9;
    color: #0F172A;
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.cu-row:hover {
    background: #EFF7F2;
    border-color: #CFE3D7;
    color: #0F172A;
}
.cu-row:active { transform: scale(0.985); }
.cu-row:focus-visible { outline: 3px solid rgba(11, 122, 70, 0.45); outline-offset: 2px; }

.cu-row-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(15, 23, 42, 0.35);
    transition: transform 0.25s var(--cu-spring);
}
.cu-row:hover .cu-row-icon { transform: scale(1.07) rotate(-4deg); }
/* ไอคอนในวงอยู่กลางที่พิกเซลจริง: ฟอนต์ค้ำบรรทัดเป็น bootstrap-icons + font-size px จำนวนเต็มคู่ (เหตุผลเต็มใน agent-referral.css) */
.cu-row-icon .bi { font-family: bootstrap-icons; line-height: 1; }
.cu-row-icon .bi::before { vertical-align: 0; }
.cu-row--phone .cu-row-icon { background: linear-gradient(145deg, #0F8A50, var(--cu-green)); }
.cu-row--line .cu-row-icon { background: linear-gradient(145deg, #2EDB72, #06C755); font-size: 22px; }
.cu-row--fb .cu-row-icon { background: linear-gradient(145deg, #3B8DFF, #1877F2); font-size: 20px; }
.cu-row--web .cu-row-icon { background: linear-gradient(145deg, #64748B, #475569); }

.cu-row-text {
    flex: 1 1 9rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cu-row-label {
    font-size: 0.78rem;
    color: #64748B;
    line-height: 1.3;
}
.cu-row-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0F172A;
    overflow-wrap: anywhere;
}
.cu-row-value--tel {
    font-size: 1.08rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.cu-row-go {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 10px 7px 13px;
    white-space: nowrap;
    line-height: 1.2;
}
.cu-row-go .bi { font-size: 0.75rem; transition: transform 0.2s ease; }
.cu-row:hover .cu-row-go .bi { transform: translateX(2px); }
.cu-row--phone .cu-row-go { background: #DDF1E4; color: var(--cu-green); }
.cu-row--line .cu-row-go { background: #DDF7E7; color: #047A36; }
.cu-row--fb .cu-row-go { background: #E3EEFE; color: #1461C9; }
.cu-row--web .cu-row-go { background: #EEF2F6; color: #334155; }

/* โทรศัพท์สั่นเบาๆ หนึ่งครั้งหลังเปิด - ชวนกดโทร */
.cu-root.is-open .cu-row--phone .cu-row-icon .bi {
    display: inline-block;
    animation: cu-ring 0.9s ease-in-out 0.85s 1 both;
}
@keyframes cu-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-16deg); }
    30% { transform: rotate(14deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(8deg); }
    75% { transform: rotate(-3deg); }
}

/* ── ชำระเงินผ่านบริษัทเท่านั้น ───────────────────────────────────────────── */
.cu-notice {
    position: relative;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFF8E7 0%, #FFF1D2 100%);
    border: 1px solid #F8D58A;
    color: #6B4400;
}
.cu-notice-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #FBBF24, #F59E0B);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 14px -6px rgba(217, 119, 6, 0.7);
}
.cu-notice-icon .bi { font-family: bootstrap-icons; line-height: 1; }
.cu-notice-icon .bi::before { vertical-align: 0; }
.cu-notice-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.45;
}
.cu-notice-text strong {
    font-size: 0.84rem;
    font-weight: 700;
    color: #4A2F00;
    white-space: nowrap;
}
/* ── เข้าทีละชิ้น: จางเข้าอย่างเดียว ไม่เลื่อน ───────────────────────────────
   ข้อความเคลื่อนไปพร้อมการ์ดชุดเดียว - เคยให้แต่ละแถวเลื่อนขึ้นเองซ้อนกับการ์ดที่กำลังขยาย
   ตัวอักษรจึงไหลคนละทิศและหยุดไม่พร้อมกันจนเกือบ 1 วินาที ดูขยับไม่สมูต (2026-11-05) */
.cu-stagger {
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: calc(0.1s + var(--i, 0) * 0.05s);
}
.cu-root.is-open .cu-stagger { opacity: 1; }
.cu-root.is-closing .cu-stagger { transition-delay: 0s; }

/* ── มือถือ: แผ่นจากล่างจอ ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .cu-root {
        align-items: flex-end;
        padding: 0;
    }
    .cu-dialog {
        max-width: none;
        border-radius: 26px 26px 0 0;
        max-height: 94vh;
        max-height: 94dvh;
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.5s var(--cu-ease);
    }
    .cu-root.is-open .cu-dialog { transform: translateY(var(--cu-drag, 0px)); }
    .cu-root.is-dragging .cu-dialog { transition: none; }
    .cu-root.is-closing .cu-dialog {
        transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1);
        transform: translateY(100%);
        opacity: 1;
    }
    .cu-grip {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 9px 0 14px;
        touch-action: none;
    }
    .cu-grip span {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.75);
    }
    .cu-cover { height: 112px; touch-action: none; }
    .cu-body { padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
    .cu-avatar { width: 92px; height: 92px; }
    .cu-head { margin-top: -50px; }
    .cu-title { font-size: 1.3rem; margin-top: 12px; }
    .cu-notice {
        margin-top: 28px;
        padding: 23px 12px 12px;
        border-radius: 17px;
        background: linear-gradient(145deg, #FFF9EA 0%, #FFF1D4 100%);
    }
    .cu-notice-icon {
        position: absolute;
        top: -18px;
        left: 50%;
        display: flex;
        width: 36px;
        height: 36px;
        transform: translateX(-50%);
        font-size: 16px;
        box-shadow: 0 7px 16px -7px rgba(217, 119, 6, 0.8), 0 0 0 4px #fff;
    }
    .cu-notice-text {
        width: 100%;
        align-items: center;
        gap: 3px;
        line-height: 1.5;
        text-align: center;
    }
    .cu-notice-text strong {
        font-size: clamp(0.7rem, 3.2vw, 0.84rem);
    }
}

@media (max-width: 359.98px) {
    .cu-row { padding: 10px; gap: 10px; }
    .cu-row-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .cu-notice { margin-right: -6px; margin-left: -6px; padding-right: 10px; padding-left: 10px; }
}

/* ปุ่มเปิดบน navbar + แอนิเมชันแนะนำ: contact-us-cta.css */

/* ตัวแทนที่ล็อกอินเห็นข้อมูลของตัวเอง - บอกว่าลูกค้าเห็นแบบนี้ + ลิงก์ไปแก้ */
.cu-self-note {
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 9px 12px;
    border-radius: 14px;
    background: #F1F5F9;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.45;
}
.cu-self-note .bi { color: #64748B; line-height: 1; }
.cu-self-note span { flex: 1 1 10rem; min-width: 0; }
.cu-self-note a {
    font-weight: 700;
    color: #035432;
    text-decoration: none;
    white-space: nowrap;
}
.cu-self-note a:hover { text-decoration: underline; }