/* Base Font Settings */
html, body {
    /* Sarabun covers Latin and Thai, so it leads alone. Putting a Latin-only face
       first makes the browser fall back per-character for Thai and lay the marks
       out against the wrong metrics, which sinks them into the base glyph. */
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Thai needs headroom for สระบน + วรรณยุกต์ stacked above the consonant. */
    line-height: 1.6;
}

/* Truncating containers clip the box, so the tone mark above the x-height is the
   first thing lost. Keep their line box tall enough to survive the clip. */
.truncate,
[class*="line-clamp-"] {
    line-height: 1.5;
}

/* ---------------------------------------------------------------- per-script faces
   Sarabun is a Thai typeface. Leading with it globally was correct while the product
   was Thai and Latin only, and it is wrong now: five CJK locales ship, and every
   Japanese, Korean and Chinese glyph was falling through Sarabun to whatever the
   system happened to pick. That is not a missing-font failure — the text renders —
   it is a wrong-font one, which is harder to see and reads as amateur to a native
   reader.

   Each rule names that language's own system UI face first and keeps Sarabun in the
   stack behind it, so a Thai string inside a Japanese interface still sets correctly.

   The scripts are separated because their conventions differ, not merely their
   glyphs: Japanese and Chinese take no extra leading, Korean syllable blocks need
   more than Latin at the same size, and Vietnamese needs room for two stacked marks
   on one letter. Traditional and Simplified are named apart because a reader of one
   notices the other's forms immediately. */

:lang(ja) {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo',
                 'Noto Sans JP', 'Sarabun', system-ui, sans-serif;
    line-height: 1.7;
}

:lang(ko) {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
                 'Sarabun', system-ui, sans-serif;
    /* Hangul syllable blocks are visually denser than Latin at the same size. */
    line-height: 1.75;
    /* Korean breaks at spaces and never mid-word. */
    word-break: keep-all;
}

:lang(zh-Hant) {
    font-family: 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei',
                 'Noto Sans TC', 'Sarabun', system-ui, sans-serif;
    line-height: 1.7;
}

:lang(zh-Hans) {
    font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei',
                 'Noto Sans SC', 'Sarabun', system-ui, sans-serif;
    line-height: 1.7;
}

:lang(vi) {
    /* Vietnamese stacks a vowel-quality mark and a tone mark on one letter. Sarabun
       carries the Vietnamese range and is already tuned for stacked marks, so it
       leads here — but the line needs the same headroom Thai gets. */
    font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
}


/* Iconify Icon Styles */
.iconify {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.iconify-inline {
    vertical-align: -0.125em;
}

/* Animated Icon Styles */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

.icon-pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

.icon-bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Prototype Custom Styles */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.neon-glow {
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
}

.neon-border-blue {
    border: 1px solid rgba(0, 102, 255, 0.4);
    box-shadow: inset 0 0 10px rgba(0, 102, 255, 0.1), 0 0 10px rgba(0, 102, 255, 0.1);
}

.hero-gradient {
    background: radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.15) 0%, transparent 60%);
}

.glass-light {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.hero-gradient-light {
    background: radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.03) 0%, transparent 70%);
}

.ui-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

/* Pricing Page Specifics */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: rgba(0, 102, 255, 0.2);
    box-shadow: 0 10px 30px -10px rgba(0, 102, 255, 0.1);
}

/* ========================================
   Navigation Link Styles
   ======================================== */
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}

.nav-link:hover {
    color: #5a60ff;
    background-color: rgba(90, 96, 255, 0.05);
}

/* Active Navigation Link */
.nav-link.nav-link-active {
    color: #5a60ff !important;
    font-weight: 600;
    background-color: rgba(90, 96, 255, 0.08);
}

.nav-link.nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25rem;
    height: 2.5px;
    background: linear-gradient(90deg, #6e76ff, #4b00ff);
    border-radius: 2px;
}

/* ========================================
   Top Navigation Progress Bar
   ======================================== */
.nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #6e76ff, #4b00ff, #6e76ff);
    background-size: 200% 100%;
    z-index: 9999;
    transition: width 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.nav-progress-bar.nav-progress-active {
    opacity: 1;
    width: 90%;
    animation: progressShimmer 1.5s linear infinite, progressGrow 2s ease-out forwards;
}

@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes progressGrow {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 90%; }
}

/* ========================================
   Skeleton Loading Styles
   ======================================== */
.skeleton-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
}

.skeleton-page {
    animation: skeletonFadeIn 0.2s ease-out;
}

@keyframes skeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes skeletonFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Skeleton Overlay (for enhanced navigation) */
.skeleton-overlay {
    position: relative;
    z-index: 1;
    background: #ffffff;
    animation: skeletonFadeIn 0.15s ease-out;
    min-height: calc(100vh - 64px);
}

/* Responsive skeleton grid */
@media (max-width: 768px) {
    .skeleton-overlay .skeleton-page > div:last-child > div {
        grid-template-columns: 1fr !important;
    }
}

/* Page content transition */
.page-content {
    transition: opacity 0.15s ease;
}

/* ========================================
   Legal Page Design System
   ======================================== */

/* Legal page hero - ChatMai teal branding */
.legal-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0c4a6e 100%);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.legal-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
}

/* Legal page layout with sidebar */
.legal-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 1024px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Sidebar Table of Contents */
.legal-toc {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.legal-toc::-webkit-scrollbar {
    width: 4px;
}

.legal-toc::-webkit-scrollbar-track {
    background: transparent;
}

.legal-toc::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

@media (max-width: 1024px) {
    .legal-toc {
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
    }
    .legal-toc h3 {
        width: 100%;
    }
}

.legal-toc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.3;
}

.legal-toc-link:hover {
    color: #0891b2;
    background: rgba(6, 182, 212, 0.08);
}

.legal-toc-link .toc-number {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.2s ease;
}

.legal-toc-link:hover .toc-number {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

@media (max-width: 1024px) {
    .legal-toc-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* Legal content sections */
.legal-section {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    scroll-margin-top: 5rem;
}

.legal-section:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.legal-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.legal-section-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
}

.legal-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.legal-section p,
.legal-section li {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #475569;
}

.legal-section strong {
    color: #1e293b;
    font-weight: 600;
}

/* Highlighted legal sections (important notices) */
.legal-section-highlight {
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border-color: #99f6e4;
}

.legal-section-warning {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border-color: #fde68a;
}

.legal-section-danger {
    background: linear-gradient(135deg, #fef2f2, #fff1f2);
    border-color: #fecaca;
}

/* Legal page info badges */
.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Shopee accent variant */
.legal-section-number.shopee-accent {
    background: linear-gradient(135deg, #ee4d2d, #f05d40);
}

.legal-badge.shopee-badge {
    background: rgba(238, 77, 45, 0.1);
    color: #ee4d2d;
    border-color: rgba(238, 77, 45, 0.2);
}

/* Legal list styling */
.legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
}

.legal-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #06b6d4;
    margin-top: 0.5rem;
}

.legal-list.shopee-list li::before {
    background: #ee4d2d;
}

/* Legal data table */
.legal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin: 1rem 0;
}

.legal-table th {
    background: #f8fafc;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-table td {
    font-size: 0.875rem;
    color: #475569;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.legal-table tr:last-child td {
    border-bottom: none;
}

/* Legal cross-link footer */
.legal-cross-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.legal-cross-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.legal-cross-link:hover {
    border-color: #06b6d4;
    color: #0891b2;
    background: #ecfeff;
}

.legal-cross-link .material-symbols-rounded {
    font-size: 1rem;
    color: #94a3b8;
}

.legal-cross-link:hover .material-symbols-rounded {
    color: #06b6d4;
}

/* Last updated badge */
.legal-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Legal page smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
   The font utilities, per script.

   WHY THIS BLOCK EXISTS. The :lang() rules above were written, reviewed and
   correct, and they applied to nothing. Tailwind's fontFamily config named
   Sarabun -- a Thai face with no kanji, no hangul and neither Chinese script --
   for sans, display, body and thai alike, so every .font-sans and .font-display
   carried it. Those two utilities sit on the root wrapper of 23 elements across
   the two apps, both MainLayouts among them, so they wrap every screen.

   A :lang(ja) selector and a .font-display selector have the same specificity
   (0,1,0), and the Tailwind Play CDN injects its sheet AFTER app.css -- so the
   later rule won, on every page, for every Japanese, Korean and Chinese
   customer. The ninth audit measured it: five markets rendering in a Thai face
   throughout.

   These rules are (0,2,0) and win outright. They are generated per locale from
   the same stacks as the :lang() rules above rather than repeated by hand,
   because two copies of a font stack is how one of them comes to be corrected.

   The Tailwind config itself now names a neutral system stack, so a locale with
   no rule here degrades to the platform's own UI font rather than to Thai.
   --------------------------------------------------------------------------- */

:lang(th) {
    font-family: 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', system-ui, sans-serif;
}

:lang(ja) .font-sans,
:lang(ja) .font-display,
:lang(ja) .font-body,
:lang(ja) .font-thai {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Sarabun', system-ui, sans-serif
}

:lang(ko) .font-sans,
:lang(ko) .font-display,
:lang(ko) .font-body,
:lang(ko) .font-thai {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Sarabun', system-ui, sans-serif
}

:lang(zh-Hant) .font-sans,
:lang(zh-Hant) .font-display,
:lang(zh-Hant) .font-body,
:lang(zh-Hant) .font-thai {
    font-family: 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans TC', 'Sarabun', system-ui, sans-serif
}

:lang(zh-Hans) .font-sans,
:lang(zh-Hans) .font-display,
:lang(zh-Hans) .font-body,
:lang(zh-Hans) .font-thai {
    font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Sarabun', system-ui, sans-serif
}

:lang(vi) .font-sans,
:lang(vi) .font-display,
:lang(vi) .font-body,
:lang(vi) .font-thai {
    font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
}

:lang(th) .font-sans,
:lang(th) .font-display,
:lang(th) .font-body,
:lang(th) .font-thai {
    font-family: 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', system-ui, sans-serif
}