/* ============================================================
   UNLOCKPOOL-MOBILE-OVERFLOW-FINAL
   Global mobile horizontal overflow protection
============================================================ */

/* ------------------------------------------------------------
   Document
------------------------------------------------------------ */

html {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
}

body {
    position: relative;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

/*
 * clip ช่วยตัด visual effects, transform และ pseudo-elements
 * ที่ออกนอก viewport โดยไม่สร้าง horizontal scroll area
 */
@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip !important;
    }
}

/* ------------------------------------------------------------
   Basic sizing
------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body > header,
body > main,
body > section,
body > footer {
    min-width: 0;
    max-width: 100%;
}

main,
section,
article,
header,
footer,
nav,
div,
form,
fieldset {
    min-width: 0;
}

/* ------------------------------------------------------------
   Responsive media
------------------------------------------------------------ */

img,
picture,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

svg {
    max-width: 100%;
}

/* ------------------------------------------------------------
   Text and form controls
------------------------------------------------------------ */

input,
select,
textarea,
button {
    min-width: 0;
    max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
small,
a {
    min-width: 0;
}

/* ============================================================
   Shared navigation
============================================================ */

/*
 * ตัว Drawer เดิมใช้ translateX(105%)
 * Chrome มือถือบางรุ่นอาจนำพื้นที่ด้านนอกมาคำนวณ scroll width
 */

.upn-backdrop {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

.upn-drawer {
    left: auto !important;
    right: 0 !important;
    width: min(88vw, 410px) !important;
    max-width: calc(100vw - 12px) !important;
    contain: layout paint style;
}

/*
 * ตอนปิดให้นำ Drawer ออกจาก layout/paint โดยตรง
 * จึงไม่มีส่วนที่หลุดออกไปทางขวา
 */
.upn-drawer:not(.is-open) {
    display: none !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.upn-drawer.is-open {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/*
 * ล็อกหน้าเมื่อเปิดเมนู
 */
html.upn-lock,
body.upn-lock {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* ============================================================
   Main navigation legacy elements
============================================================ */

.site-header,
.site-nav,
.header-actions,
.brand {
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   Language controls
============================================================ */

.language-selector,
.language-switcher,
.language-picker,
.lang-switcher,
.lang-picker,
.locale-switcher,
.locale-picker,
.up-language-switcher,
.up-language-control,
.up-language-panel,
.up-language-floating {
    max-width: calc(100vw - 24px) !important;
}

.language-selector select,
#language-select {
    min-width: 0 !important;
    max-width: 100% !important;
}

/*
 * ปุ่มภาษาลอยมุมล่าง
 */
.up-language-floating,
.up-language-control,
[class*="language-floating"],
[class*="floating-language"],
[class*="lang-floating"] {
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    transform: none !important;
}

/* ============================================================
   Sections used on the main website
============================================================ */

.hero,
.hero-copy,
.hero-buttons,
.network-galaxy,
.metrics-ribbon,
.section,
.ai-brief-section,
.ai-brief-grid,
.flow-diagram,
.service-grid,
.features-section,
.feature-grid,
.roadmap-section,
.roadmap-items,

.up-market-lens,
.up-market-wrap,
.up-market-header,
.up-market-panel,
.up-market-toolbar,
.up-market-source,
.up-market-input-row,
.up-market-results,

.up-utility,
.up-utility-wrap,
.up-utility-head,
.up-utility-grid,
.up-utility-summary,

.up-dashboard-v2,
.up-dashboard-wrap,
.up-dashboard-header,
.up-dashboard-grid,
.up-dashboard-lower,

.site-footer {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* SVG charts should scale inside cards */
.up-sparkline,
.up-wide-chart,
.up-main-chart,
.galaxy-lines {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   Mobile
============================================================ */

@media (max-width: 920px) {

    /*
     * Viewport wrappers
     */
    .site-header,
    .hero,
    .metrics-ribbon,
    .section,
    .up-market-wrap,
    .up-utility-wrap,
    .up-dashboard-wrap,
    .site-footer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Header เดิมจะถูก JavaScript ซ่อน แต่ป้องกันไว้ด้วย
     */
    .site-header {
        overflow: hidden;
    }

    .site-nav,
    .header-actions {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Hero
     */
    .hero {
        overflow: hidden;
    }

    .hero-copy,
    .network-galaxy {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero h1,
    .hero h2 {
        max-width: 100% !important;
    }

    /*
     * Forms and toolbars
     */
    .up-market-input-row,
    .up-market-toolbar,
    .up-market-modes,
    .up-market-quick-values,
    .up-sats-input,
    .up-chart-tabs {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .up-market-input-box,
    .up-market-input-row select,
    .up-sats-input input,
    .up-sats-input select {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * Grid children are allowed to shrink
     */
    .metrics-ribbon > *,
    .ai-brief-grid > *,
    .flow-diagram > *,
    .service-grid > *,
    .feature-grid > *,
    .roadmap-items > *,
    .up-market-results > *,
    .up-utility-grid > *,
    .up-dashboard-grid > *,
    .up-dashboard-lower > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /*
     * ป้องกันความกว้างจากข้อความที่ยาว
     */
    .up-market-proof,
    .up-dashboard-actions,
    .up-proof-list,
    .site-footer nav {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    /*
     * ตัวตกแต่งและพื้นหลังเคลื่อนไหว
     */
    .ambient,
    .boot-screen {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /*
     * ป้องกัน inline width:100vw รวม scrollbar
     */
    [style*="width: 100vw"],
    [style*="width:100vw"],
    [style*="min-width: 100vw"],
    [style*="min-width:100vw"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   Very small phones
============================================================ */

@media (max-width: 480px) {

    .upn-drawer {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }

    .upn-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .upn-brand {
        min-width: 0 !important;
        max-width: calc(100% - 76px) !important;
    }

    .upn-brand > span:last-child {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .upn-brand-title,
    .upn-brand-sub {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* =========================================================
   UNLOCKPOOL PHASE 17 — ROOT OVERFLOW 6 ELEMENTS FIX
   Added: 2026-08-06
========================================================= */

@media screen and (max-width: 900px) {

    /*
     * Full-width content sections were using desktop/full-bleed
     * positioning, causing left/right viewport overflow.
     */
    html body .ai-brief-section,
    html body .features-section {
        width: auto !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        box-sizing: border-box !important;
    }

    /*
     * Decorative background effects.
     * These elements do not contain readable content.
     */
    html body .galaxy-ring.ring-c,
    html body .p14-ambient-glow,
    html body .p14-particle {
        display: none !important;
    }
}

/* UNLOCKPOOL-PHASE17-ROOT6-END */


/* =========================================================
   UNLOCKPOOL PHASE 17 — SECTION TRANSFORM OVERFLOW FIX
   AI Brief and Features were shifted ±34px by reveal effects
========================================================= */

@media screen and (max-width: 900px) {

    html body section.ai-brief-section,
    html body section.features-section {
        transform: none !important;
        translate: none !important;

        left: auto !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        animation: none !important;
        box-sizing: border-box !important;
    }
}

/* UNLOCKPOOL-PHASE17-SECTION-TRANSFORM-END */