/* =============================================================================
 * theme1-color.css  (Custom Color bridge)
 * -----------------------------------------------------------------------------
 * โหลดเฉพาะเมื่อเลือกเฉดสีจาก .env (config.themeColor) ต่อท้าย custom-color-{สี}.css
 * ไฟล์นี้ map สีน้ำเงิน/cyan ของ component ใหม่ใน theme_1 (--t1-*) ให้อิง --st-color-*
 * ของเฉดสีที่เลือก ทำให้ทั้งหน้าเปลี่ยนสีไปในทิศทางเดียวกัน
 *
 * โทเคน --t1-* ถูกอ้างอิงจาก theme_1.css ในรูป var(--t1-cN, <สีเดิม>)
 * ถ้าไม่โหลดไฟล์นี้ จะ fallback เป็นสีน้ำเงินเดิม (ดีฟอลต์)
 *
 * NOTE: ตารางโทเคนด้านล่าง generate ครั้งเดียวด้วย HSL classifier
 *       (เฉพาะสีโทนน้ำเงิน/cyan hue 165-260, จัดกลุ่มตามความสว่าง slot 1=สว่างสุด ... 7=เข้มสุด,
 *        alpha เดิมแปลงเป็น % ของ color-mix) — ถ้าเพิ่มสีน้ำเงินใหม่ใน theme_1.css ให้ wrap เป็น
 *        var(--t1-cN, <สีเดิม>) เองและเพิ่มโทเคนที่นี่
 * ========================================================================== */

:root {
    /* slot 1 (accent / สว่างสุด) */
    --t1-c11: var(--st-color-1);
    --t1-c47: color-mix(in srgb, var(--st-color-1) 78%, transparent);
    --t1-c23: color-mix(in srgb, var(--st-color-1) 86%, transparent);
    --t1-c46: color-mix(in srgb, var(--st-color-1) 28%, transparent);
    --t1-c18: color-mix(in srgb, var(--st-color-1) 72%, transparent);
    --t1-c43: color-mix(in srgb, var(--st-color-1) 68%, transparent);
    --t1-c19: color-mix(in srgb, var(--st-color-1) 62%, transparent);
    --t1-c26: color-mix(in srgb, var(--st-color-1) 50%, transparent);
    --t1-c16: color-mix(in srgb, var(--st-color-1) 40%, transparent);
    --t1-c38: color-mix(in srgb, var(--st-color-1) 38%, transparent);
    --t1-c44: color-mix(in srgb, var(--st-color-1) 30%, transparent);
    --t1-c37: color-mix(in srgb, var(--st-color-1) 25%, transparent);
    --t1-c31: color-mix(in srgb, var(--st-color-1) 24%, transparent);
    --t1-c35: color-mix(in srgb, var(--st-color-1) 20%, transparent);
    --t1-c24: color-mix(in srgb, var(--st-color-1) 18%, transparent);
    --t1-c8:  color-mix(in srgb, var(--st-color-1) 16%, transparent);
    --t1-c27: color-mix(in srgb, var(--st-color-1) 14%, transparent);

    /* slot 2 (bright) */
    --t1-c3:  var(--st-color-2);
    --t1-c13: color-mix(in srgb, var(--st-color-2) 35%, transparent);
    --t1-c2:  color-mix(in srgb, var(--st-color-2) 34%, transparent);
    --t1-c12: color-mix(in srgb, var(--st-color-2) 15%, transparent);
    --t1-c45: color-mix(in srgb, var(--st-color-2) 12%, transparent);

    /* slot 3 (link / main) */
    --t1-c36: var(--st-color-3);

    /* slot 4 (mid) */
    --t1-c4:  var(--st-color-4);

    /* slot 5 (panel soft) */
    --t1-c6:  var(--st-color-5);
    --t1-c22: color-mix(in srgb, var(--st-color-5) 98%, transparent);
    --t1-c21: color-mix(in srgb, var(--st-color-5) 96%, transparent);
    --t1-c14: color-mix(in srgb, var(--st-color-5) 92%, transparent);
    --t1-c39: color-mix(in srgb, var(--st-color-5) 90%, transparent);
    --t1-c32: color-mix(in srgb, var(--st-color-5) 80%, transparent);
    --t1-c34: color-mix(in srgb, var(--st-color-5) 68%, transparent);

    /* slot 6 (panel) */
    --t1-c28: var(--st-color-6);
    --t1-c42: color-mix(in srgb, var(--st-color-6) 98%, transparent);
    --t1-c15: color-mix(in srgb, var(--st-color-6) 96%, transparent);
    --t1-c29: color-mix(in srgb, var(--st-color-6) 72%, transparent);

    /* slot 7 (bg / เข้มสุด) */
    --t1-c1:  var(--st-color-7);
    --t1-c40: color-mix(in srgb, var(--st-color-7) 98%, transparent);
    --t1-c10: color-mix(in srgb, var(--st-color-7) 96%, transparent);
    --t1-c41: color-mix(in srgb, var(--st-color-7) 94%, transparent);
    --t1-c9:  color-mix(in srgb, var(--st-color-7) 92%, transparent);
    --t1-c33: color-mix(in srgb, var(--st-color-7) 68%, transparent);
    --t1-c30: color-mix(in srgb, var(--st-color-7) 58%, transparent);
    --t1-c5:  color-mix(in srgb, var(--st-color-7) 42%, transparent);
    --t1-c7:  color-mix(in srgb, var(--st-color-7) 38%, transparent);
    --t1-c20: color-mix(in srgb, var(--st-color-7) 28%, transparent);
    --t1-c17: color-mix(in srgb, var(--st-color-7) 26%, transparent);
    --t1-c25: color-mix(in srgb, var(--st-color-7) 22%, transparent);

    /* second pass: accent อ่อนมาก (slot 1) + พื้นน้ำเงินเข้มจัด (slot 7) ที่ pass แรกข้าม */
    --t1-c60: color-mix(in srgb, var(--st-color-1) 92%, transparent);
    --t1-c50: color-mix(in srgb, var(--st-color-1) 74%, transparent);
    --t1-c52: color-mix(in srgb, var(--st-color-1) 66%, transparent);
    --t1-c58: color-mix(in srgb, var(--st-color-1) 48%, transparent);
    --t1-c49: color-mix(in srgb, var(--st-color-1) 34%, transparent);
    --t1-c55: color-mix(in srgb, var(--st-color-1) 6%, transparent);
    --t1-c64: color-mix(in srgb, var(--st-color-7) 99%, transparent);
    --t1-c56: color-mix(in srgb, var(--st-color-7) 82%, transparent);
    --t1-c48: color-mix(in srgb, var(--st-color-7) 72%, transparent);
    --t1-c54: color-mix(in srgb, var(--st-color-7) 52%, transparent);
    --t1-c51: color-mix(in srgb, var(--st-color-7) 46%, transparent);
    --t1-c53: color-mix(in srgb, var(--st-color-7) 40%, transparent);
    --t1-c59: color-mix(in srgb, var(--st-color-7) 34%, transparent);
    --t1-c57: color-mix(in srgb, var(--st-color-7) 30%, transparent);
    --t1-c63: color-mix(in srgb, var(--st-color-7) 24%, transparent);
    --t1-c62: color-mix(in srgb, var(--st-color-7) 18%, transparent);
    --t1-c61: color-mix(in srgb, var(--st-color-7) 16%, transparent);

    /* third pass: panel/พื้นหลังเฉพาะหน้า (deposit, withdraw, member, friend, cashback,
       promotion, register, home ฯลฯ) จาก inline <style> ของแต่ละ view */
    --t1-c65: color-mix(in srgb, var(--st-color-6) 95%, transparent);
    --t1-c66: color-mix(in srgb, var(--st-color-7) 45%, transparent);
    --t1-c67: color-mix(in srgb, var(--st-color-2) 22%, transparent);
    --t1-c68: color-mix(in srgb, var(--st-color-1) 45%, transparent);
    --t1-c69: color-mix(in srgb, var(--st-color-2) 90%, transparent);
    --t1-c70: color-mix(in srgb, var(--st-color-3) 92%, transparent);
    --t1-c71: color-mix(in srgb, var(--st-color-5) 30%, transparent);
    --t1-c72: color-mix(in srgb, var(--st-color-1) 36%, transparent);
    --t1-c73: color-mix(in srgb, var(--st-color-1) 32%, transparent);
    --t1-c74: color-mix(in srgb, var(--st-color-7) 75%, transparent);
    --t1-c75: color-mix(in srgb, var(--st-color-3) 34%, transparent);
    --t1-c76: color-mix(in srgb, var(--st-color-1) 26%, transparent);
    --t1-c77: color-mix(in srgb, var(--st-color-1) 60%, transparent);
    --t1-c78: color-mix(in srgb, var(--st-color-1) 70%, transparent);
    --t1-c79: color-mix(in srgb, var(--st-color-6) 18%, transparent);
    --t1-c80: color-mix(in srgb, var(--st-color-7) 12%, transparent);
    --t1-c81: color-mix(in srgb, var(--st-color-1) 46%, transparent);
    --t1-c82: color-mix(in srgb, var(--st-color-7) 20%, transparent);
    --t1-c83: color-mix(in srgb, var(--st-color-5) 8%, transparent);
    --t1-c84: color-mix(in srgb, var(--st-color-1) 95%, transparent);
    --t1-c85: color-mix(in srgb, var(--st-color-4) 28%, transparent);
    --t1-c86: color-mix(in srgb, var(--st-color-3) 25%, transparent);
    --t1-c87: color-mix(in srgb, var(--st-color-3) 22%, transparent);
    --t1-c88: color-mix(in srgb, var(--st-color-4) 35%, transparent);
    --t1-c89: color-mix(in srgb, var(--st-color-6) 74%, transparent);
    --t1-c90: color-mix(in srgb, var(--st-color-6) 78%, transparent);
    --t1-c91: color-mix(in srgb, var(--st-color-7) 84%, transparent);
    --t1-c92: color-mix(in srgb, var(--st-color-4) 82%, transparent);
    --t1-c93: color-mix(in srgb, var(--st-color-4) 88%, transparent);
    --t1-c94: color-mix(in srgb, var(--st-color-1) 90%, transparent);
    --t1-c95: color-mix(in srgb, var(--st-color-1) 35%, transparent);
    --t1-c96: color-mix(in srgb, var(--st-color-4) 72%, transparent);
    --t1-c97: color-mix(in srgb, var(--st-color-5) 82%, transparent);
    --t1-c98: color-mix(in srgb, var(--st-color-6) 42%, transparent);
    --t1-c99: color-mix(in srgb, var(--st-color-7) 70%, transparent);
    --t1-c100: color-mix(in srgb, var(--st-color-7) 90%, transparent);
    --t1-c101: color-mix(in srgb, var(--st-color-1) 42%, transparent);
    --t1-c102: color-mix(in srgb, var(--st-color-3) 20%, transparent);
    --t1-c103: color-mix(in srgb, var(--st-color-1) 12%, transparent);
    --t1-c104: color-mix(in srgb, var(--st-color-7) 55%, transparent);
    --t1-c105: color-mix(in srgb, var(--st-color-1) 15%, transparent);
    --t1-c106: color-mix(in srgb, var(--st-color-7) 35%, transparent);
    --t1-c107: color-mix(in srgb, var(--st-color-1) 8%, transparent);
    --t1-c108: color-mix(in srgb, var(--st-color-3) 26%, transparent);
    --t1-c109: color-mix(in srgb, var(--st-color-1) 33%, transparent);
    --t1-c110: color-mix(in srgb, var(--st-color-6) 44%, transparent);
    --t1-c111: color-mix(in srgb, var(--st-color-5) 54%, transparent);
    --t1-c112: color-mix(in srgb, var(--st-color-6) 60%, transparent);
    --t1-c113: color-mix(in srgb, var(--st-color-1) 5%, transparent);
    --t1-c114: color-mix(in srgb, var(--st-color-6) 28%, transparent);
    --t1-c115: color-mix(in srgb, var(--st-color-6) 34%, transparent);
    --t1-c116: color-mix(in srgb, var(--st-color-6) 25%, transparent);
    --t1-c117: color-mix(in srgb, var(--st-color-1) 22%, transparent);
    --t1-c118: color-mix(in srgb, var(--st-color-2) 42%, transparent);
    --t1-c119: color-mix(in srgb, var(--st-color-4) 94%, transparent);
    --t1-c120: color-mix(in srgb, var(--st-color-5) 94%, transparent);
    --t1-c121: color-mix(in srgb, var(--st-color-3) 96%, transparent);
    --t1-c122: color-mix(in srgb, var(--st-color-4) 96%, transparent);
    --t1-c123: color-mix(in srgb, var(--st-color-7) 44%, transparent);
    --t1-c124: color-mix(in srgb, var(--st-color-2) 95%, transparent);
    --t1-c125: color-mix(in srgb, var(--st-color-4) 95%, transparent);
    --t1-c126: color-mix(in srgb, var(--st-color-1) 85%, transparent);
    --t1-c127: color-mix(in srgb, var(--st-color-7) 85%, transparent);
    --t1-c128: color-mix(in srgb, var(--st-color-7) 86%, transparent);
    --t1-c129: color-mix(in srgb, var(--st-color-6) 84%, transparent);
    --t1-c130: color-mix(in srgb, var(--st-color-1) 0%, transparent);
    --t1-c131: color-mix(in srgb, var(--st-color-7) 14%, transparent);
    --t1-c132: color-mix(in srgb, var(--st-color-7) 0%, transparent);
    --t1-c133: color-mix(in srgb, var(--st-color-7) 32%, transparent);
    --t1-c134: color-mix(in srgb, var(--st-color-1) 88%, transparent);
    --t1-c135: color-mix(in srgb, var(--st-color-2) 18%, transparent);
    --t1-c136: color-mix(in srgb, var(--st-color-6) 82%, transparent);
    --t1-c137: color-mix(in srgb, var(--st-color-7) 78%, transparent);
    --t1-c138: color-mix(in srgb, var(--st-color-1) 82%, transparent);
    --t1-c139: color-mix(in srgb, var(--st-color-7) 56%, transparent);
    --t1-c140: color-mix(in srgb, var(--st-color-1) 10%, transparent);
    --t1-c141: color-mix(in srgb, var(--st-color-7) 88%, transparent);
    --t1-c142: color-mix(in srgb, var(--st-color-7) 80%, transparent);
    --t1-c143: color-mix(in srgb, var(--st-color-7) 64%, transparent);
    --t1-c144: color-mix(in srgb, var(--st-color-5) 24%, transparent);
    --t1-c145: color-mix(in srgb, var(--st-color-7) 50%, transparent);
    --t1-c146: color-mix(in srgb, var(--st-color-6) 92%, transparent);
    --t1-c147: color-mix(in srgb, var(--st-color-4) 22%, transparent);
    --t1-c148: color-mix(in srgb, var(--st-color-2) 30%, transparent);
    --t1-c149: color-mix(in srgb, var(--st-color-2) 0%, transparent);
    --t1-c150: color-mix(in srgb, var(--st-color-5) 99%, transparent);
    --t1-c151: color-mix(in srgb, var(--st-color-6) 76%, transparent);
    --t1-c152: color-mix(in srgb, var(--st-color-5) 86%, transparent);
    --t1-c153: color-mix(in srgb, var(--st-color-3) 90%, transparent);
    --t1-c154: color-mix(in srgb, var(--st-color-7) 60%, transparent);
    --t1-c155: color-mix(in srgb, var(--st-color-7) 8%, transparent);
    --t1-c156: color-mix(in srgb, var(--st-color-3) 35%, transparent);
    --t1-c157: color-mix(in srgb, var(--st-color-2) 14%, transparent);
    --t1-c158: color-mix(in srgb, var(--st-color-1) 2%, transparent);
    --t1-c159: color-mix(in srgb, var(--st-color-7) 36%, transparent);

    /* inline style="" attributes (reviews remove-image badge ฯลฯ) */
    --t1-c160: color-mix(in srgb, var(--st-color-3) 50%, transparent);
}

/* -----------------------------------------------------------------------------
 * Inline <style> components ใน template_page.php (script ไม่ได้แตะไฟล์ PHP)
 * ใช้ !important เพราะ inline <style> โหลดหลัง <link> นี้ใน <head>
 * -------------------------------------------------------------------------- */

/* Loading overlay เต็มจอ */
#overlay {
    background: radial-gradient(circle at top,
        color-mix(in srgb, var(--st-color-3) 96%, transparent),
        color-mix(in srgb, var(--st-color-7) 96%, transparent) 58%,
        color-mix(in srgb, var(--st-color-7) 98%, transparent)) !important;
}

/* Inline loading (โหลดข้อมูลในกล่องเกม ฯลฯ) */
.theme1-inline-loading {
    border-color: color-mix(in srgb, var(--st-color-1) 16%, transparent) !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--st-color-6) 92%, transparent) 0%,
        color-mix(in srgb, var(--st-color-7) 90%, transparent) 100%) !important;
}

.theme1-inline-loading__spinner {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--st-color-3) 35%, transparent) 0%,
        color-mix(in srgb, var(--st-color-5) 30%, transparent) 100%) !important;
}

/* Login modal loading spinner */
.theme1-login-loading-state__spinner {
    border-color: color-mix(in srgb, var(--st-color-1) 24%, transparent) !important;
    border-top-color: var(--st-color-1) !important;
    border-right-color: var(--st-color-1) !important;
    box-shadow: 0 0 24px color-mix(in srgb, var(--st-color-2) 18%, transparent) !important;
}