/**
 * Cookie Consent — หน้าบ้าน
 *
 * โทนสีถอดมาจาก --color-main (#45637d) ของ library/css/stylesheet.css
 * และรับโหมดมืดผ่าน [data-theme="dark"] บน <html> เหมือนส่วนอื่นของเว็บ
 * (ดู library/css/dark-mode.css) ตัวแปรทั้งหมดอยู่บน .mk-cc-root
 * ถ้าจะปรับสีให้แก้ที่นั่นที่เดียว ยกเว้น --mk-cc-accent ที่หลังบ้านส่งมา
 * เป็น inline style ทับให้ (หน้าจัดการ > สีปุ่มหลัก)
 *
 * คำนำหน้าคลาสเป็น mk-cc- ทั้งหมด เพื่อไม่ชนกับ Bootstrap และไม่ชน
 * .fab ของ Font Awesome (ดูคำเตือนใน library/css/fab.css)
 *
 * ชั้นความสูง (z-index):
 *   99980 ปุ่มลอย  <  99985 ฉากมืด  <  99990 แบนเนอร์  <  99995 กล่องตั้งค่า
 *   ปุ่มลอยของเว็บ (.mk-fab-stack) อยู่ที่ 999 จึงอยู่ใต้ทั้งหมด
 */

.mk-cc-root {
    --mk-cc-accent: #45637d;
    --mk-cc-accent-hi: #55738f;
    /* สีเน้นเวอร์ชัน "ตัวหนังสือ" — โหมดมืดต้องสว่างกว่าสีปุ่ม
       ไม่งั้นลิงก์สีกรมท่าบนพื้นกรมท่าจะอ่านไม่ออก */
    --mk-cc-ink-accent: var(--mk-cc-accent);
    --mk-cc-surface: #ffffff;
    --mk-cc-surface-2: #f5f7fa;
    --mk-cc-ink: #1e2733;
    --mk-cc-ink-2: #5c6a7a;
    --mk-cc-ink-3: #8b97a6;
    --mk-cc-line: #e3e8ee;
    --mk-cc-line-2: #eef1f5;
    --mk-cc-shadow: 0 18px 50px rgba(30, 44, 62, .18), 0 2px 8px rgba(30, 44, 62, .08);
    --mk-cc-radius: 18px;
    --mk-cc-gap: 20px;

    font-family: 'MiSans Thai', 'MiSans', 'Sarabun', system-ui, -apple-system, sans-serif;
}

/* โหมดมืด — ตามธีมเว็บ หรือบังคับจากหลังบ้าน */
[data-theme="dark"] .mk-cc-root,
.mk-cc-root[data-theme-mode="dark"] {
    --mk-cc-surface: #1f2634;
    --mk-cc-surface-2: #29313f;
    --mk-cc-ink: #e8eaed;
    --mk-cc-ink-2: #a9b3c0;
    --mk-cc-ink-3: #7c8694;
    --mk-cc-line: #3a4252;
    --mk-cc-line-2: #333b49;
    --mk-cc-shadow: 0 20px 55px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
    --mk-cc-accent-hi: #6d8aa6;
    --mk-cc-ink-accent: #9db6cc;
}

/* บังคับโหมดสว่างแม้เว็บอยู่โหมดมืด */
.mk-cc-root[data-theme-mode="light"] {
    --mk-cc-surface: #ffffff;
    --mk-cc-surface-2: #f5f7fa;
    --mk-cc-ink: #1e2733;
    --mk-cc-ink-2: #5c6a7a;
    --mk-cc-ink-3: #8b97a6;
    --mk-cc-line: #e3e8ee;
    --mk-cc-line-2: #eef1f5;
    --mk-cc-ink-accent: var(--mk-cc-accent);
}

.mk-cc-root *,
.mk-cc-root *::before,
.mk-cc-root *::after {
    box-sizing: border-box;
}

/**
 * แอตทริบิวต์ hidden ต้องชนะเสมอ
 *
 * เบราว์เซอร์ตั้ง [hidden] { display: none } ไว้ใน user-agent stylesheet
 * ซึ่งมีน้ำหนักต่ำกว่ากฎของเราเอง กล่องตั้งค่าและปุ่มลอยประกาศ display: grid
 * ไว้ จึงลบล้าง hidden ทิ้งโดยไม่ตั้งใจ ผลคือกล่องที่ opacity เป็น 0
 * ยังคลุมทั้งจอและกินคลิกทุกครั้งที่ผู้ใช้กดอะไรก็ตามบนหน้าเว็บ
 */
.mk-cc-root [hidden] {
    display: none !important;
}

.mk-cc-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =====================================================================
   ฉากมืดด้านหลัง
   ===================================================================== */
.mk-cc-overlay {
    position: fixed;
    inset: 0;
    z-index: 99985;
    background: rgba(16, 24, 36, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .28s ease;
}

.mk-cc-overlay.is-on {
    opacity: 1;
}

/* =====================================================================
   แบนเนอร์ชั้นแรก
   ===================================================================== */
.mk-cc-banner {
    position: fixed;
    z-index: 99990;
    width: min(430px, calc(100vw - 2 * var(--mk-cc-gap)));
    background: var(--mk-cc-surface);
    color: var(--mk-cc-ink);
    border: 1px solid var(--mk-cc-line);
    border-radius: var(--mk-cc-radius);
    box-shadow: var(--mk-cc-shadow);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
    overflow: hidden;
}

/* เส้นไฮไลต์บาง ๆ ด้านบน ทำให้การ์ดดูยกตัวจากพื้นหลัง */
.mk-cc-banner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mk-cc-accent), var(--mk-cc-accent-hi) 55%, transparent);
}

.mk-cc-banner.is-on {
    opacity: 1;
    transform: none;
}

.mk-cc-banner-in {
    padding: 20px 22px 18px;
}

/* ---------- ตำแหน่ง: การ์ด 4 มุม ---------- */
.mk-cc-root[data-pos="bottom-left"] .mk-cc-banner {
    left: var(--mk-cc-gap);
    bottom: calc(var(--mk-cc-gap) + env(safe-area-inset-bottom, 0px));
}

.mk-cc-root[data-pos="bottom-right"] .mk-cc-banner {
    right: var(--mk-cc-gap);
    bottom: calc(var(--mk-cc-gap) + env(safe-area-inset-bottom, 0px));
}

.mk-cc-root[data-pos="top-left"] .mk-cc-banner {
    left: var(--mk-cc-gap);
    top: calc(var(--mk-cc-gap) + env(safe-area-inset-top, 0px));
    transform: translateY(-14px) scale(.98);
}

.mk-cc-root[data-pos="top-right"] .mk-cc-banner {
    right: var(--mk-cc-gap);
    top: calc(var(--mk-cc-gap) + env(safe-area-inset-top, 0px));
    transform: translateY(-14px) scale(.98);
}

.mk-cc-root[data-pos="top-left"] .mk-cc-banner.is-on,
.mk-cc-root[data-pos="top-right"] .mk-cc-banner.is-on {
    transform: none;
}

/* ---------- ตำแหน่ง: กลางจอ ---------- */
.mk-cc-banner.is-center {
    left: 50%;
    top: 50%;
    width: min(520px, calc(100vw - 2 * var(--mk-cc-gap)));
    transform: translate(-50%, calc(-50% + 14px)) scale(.97);
}

.mk-cc-banner.is-center.is-on {
    transform: translate(-50%, -50%);
}

.mk-cc-banner.is-center .mk-cc-banner-in {
    padding: 26px 26px 22px;
    text-align: center;
}

.mk-cc-banner.is-center .mk-cc-head {
    flex-direction: column;
    gap: 10px;
}

/* หัวเรื่องเรียงลงมาเป็นแนวตั้ง ปุ่มปิดจึงต้องหลุดออกจากลำดับนั้น
   ไม่งั้นมันจะไปนั่งกลางจอใต้หัวเรื่อง ดูเหมือนปุ่มคำสั่งอีกตัว */
.mk-cc-banner.is-center .mk-cc-x {
    position: absolute;
    top: 12px;
    right: 12px;
}

.mk-cc-banner.is-center .mk-cc-ico {
    width: 52px;
    height: 52px;
    font-size: 22px;
}

.mk-cc-banner.is-center .mk-cc-actions {
    justify-content: center;
}

/* ---------- ตำแหน่ง: แถบเต็มความกว้าง ---------- */
.mk-cc-banner.is-bar {
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.mk-cc-root[data-pos="bar-bottom"] .mk-cc-banner {
    bottom: 0;
    border-bottom: 0;
}

.mk-cc-root[data-pos="bar-top"] .mk-cc-banner {
    top: 0;
    border-top: 0;
    transform: translateY(-14px);
}

.mk-cc-root[data-pos="bar-top"] .mk-cc-banner.is-on {
    transform: none;
}

.mk-cc-banner.is-bar .mk-cc-banner-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 28px;
}

.mk-cc-banner.is-bar .mk-cc-head {
    grid-column: 1;
}

.mk-cc-banner.is-bar .mk-cc-body {
    grid-column: 1;
    margin: 0;
}

.mk-cc-banner.is-bar .mk-cc-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    flex-wrap: nowrap;
}

/* ในแถบเต็มความกว้าง คอลัมน์ของปุ่มกว้างตามเนื้อหา
   ถ้าไม่กำหนดความกว้างขั้นต่ำ ปุ่มยอมรับจะหดตามความยาวข้อความ
   แล้วดูไม่ต่างจากลิงก์ข้างล่างเท่าไร */
.mk-cc-banner.is-bar .mk-cc-actions.is-emph .mk-cc-btn-primary {
    min-width: 220px;
}

/* =====================================================================
   หัวเรื่อง / เนื้อความ
   ===================================================================== */
.mk-cc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mk-cc-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--mk-cc-accent-hi), var(--mk-cc-accent));
    box-shadow: 0 4px 12px rgba(69, 99, 125, .28);
}

.mk-cc-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mk-cc-ink);
}

.mk-cc-body {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mk-cc-ink-2);
}

.mk-cc-links {
    display: inline;
}

.mk-cc-link {
    color: var(--mk-cc-ink-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mk-cc-link:hover {
    color: var(--mk-cc-accent-hi);
}

.mk-cc-dot {
    color: var(--mk-cc-ink-3);
    margin: 0 6px;
}

/* =====================================================================
   ปุ่ม
   ===================================================================== */
.mk-cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.mk-cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.mk-cc-btn:active {
    transform: translateY(1px);
}

.mk-cc-btn i {
    font-size: 13px;
}

.mk-cc-btn-primary {
    color: #fff;
    background: linear-gradient(145deg, var(--mk-cc-accent-hi), var(--mk-cc-accent));
    box-shadow: 0 4px 14px rgba(69, 99, 125, .3);
}

.mk-cc-btn-primary:hover {
    filter: brightness(1.07);
}

/* ปุ่มปฏิเสธต้องอ่านได้ว่าเป็นตัวเลือกจริง น้ำหนักสายตาใกล้เคียงปุ่มยอมรับ
   ถ้าทำจางเกินไปจะกลายเป็น dark pattern และความยินยอมใช้ไม่ได้ตาม PDPA */
.mk-cc-btn-ghost {
    color: var(--mk-cc-ink);
    background: var(--mk-cc-surface-2);
    border-color: var(--mk-cc-line);
}

.mk-cc-btn-ghost:hover {
    border-color: var(--mk-cc-accent);
    color: var(--mk-cc-ink-accent);
}

.mk-cc-btn-text {
    color: var(--mk-cc-ink-2);
    background: transparent;
    padding: 0 10px;
}

.mk-cc-btn-text:hover {
    color: var(--mk-cc-ink-accent);
    background: var(--mk-cc-surface-2);
}

/* =====================================================================
   โหมดเน้นปุ่มยอมรับ (.is-emph)
   เปิด/ปิดจากหลังบ้าน > Cookie Consent > ข้อกำหนดตาม PDPA
   ===================================================================== */
.mk-cc-actions.is-emph {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.mk-cc-actions.is-emph .mk-cc-btn-primary {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
}

.mk-cc-minor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* ลิงก์ข้อความ — ยังเป็น <button> จริงเพื่อให้คีย์บอร์ดและ screen reader
   เข้าถึงได้เท่าปุ่มอื่น เปลี่ยนแค่หน้าตา ไม่ได้ลดความสามารถในการกด
   พื้นที่กดสูง 32px ยังอยู่ในเกณฑ์เป้าสัมผัสบนมือถือ */
.mk-cc-linkbtn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 8px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mk-cc-ink-3);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.mk-cc-linkbtn:hover {
    color: var(--mk-cc-ink-accent);
}

.mk-cc-linkbtn:focus-visible {
    outline: 2px solid var(--mk-cc-ink-accent);
    outline-offset: 2px;
    border-radius: 5px;
}

.mk-cc-x {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mk-cc-ink-3);
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.mk-cc-x:hover {
    background: var(--mk-cc-surface-2);
    color: var(--mk-cc-ink);
}

/* =====================================================================
   กล่องตั้งค่ารายประเภท
   ===================================================================== */
.mk-cc-modal {
    position: fixed;
    inset: 0;
    z-index: 99995;
    display: grid;
    place-items: center;
    padding: var(--mk-cc-gap);
    background: rgba(16, 24, 36, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
    overflow-y: auto;
}

.mk-cc-modal.is-on {
    opacity: 1;
}

.mk-cc-modal-card {
    width: min(680px, 100%);
    max-height: calc(100vh - 2 * var(--mk-cc-gap));
    display: flex;
    flex-direction: column;
    background: var(--mk-cc-surface);
    color: var(--mk-cc-ink);
    border: 1px solid var(--mk-cc-line);
    border-radius: var(--mk-cc-radius);
    box-shadow: var(--mk-cc-shadow);
    transform: translateY(16px) scale(.98);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.mk-cc-modal.is-on .mk-cc-modal-card {
    transform: none;
}

.mk-cc-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mk-cc-line);
}

.mk-cc-modal-head h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.mk-cc-modal-head h2 i {
    color: var(--mk-cc-ink-accent);
    margin-right: 7px;
}

.mk-cc-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
    -webkit-overflow-scrolling: touch;
}

.mk-cc-intro {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--mk-cc-ink-2);
}

/* ---------- แต่ละประเภท ---------- */
.mk-cc-cat {
    border: 1px solid var(--mk-cc-line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--mk-cc-surface-2);
}

.mk-cc-cat.is-locked {
    background: transparent;
}

.mk-cc-cat-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mk-cc-cat-toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mk-cc-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.mk-cc-cat-toggle i {
    font-size: 11px;
    color: var(--mk-cc-ink-3);
    transition: transform .22s ease;
}

.mk-cc-cat-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
    color: var(--mk-cc-ink-accent);
}

.mk-cc-always {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--mk-cc-ink-accent);
    background: rgba(69, 99, 125, .1);
    border-radius: 20px;
    padding: 5px 11px;
}

.mk-cc-cat-desc {
    margin: 9px 0 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mk-cc-ink-2);
}

/* ---------- สวิตช์ ---------- */
.mk-cc-switch {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.mk-cc-switch input {
    position: absolute;
    opacity: 0;
    width: 46px;
    height: 26px;
    margin: 0;
    cursor: pointer;
}

.mk-cc-track {
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 20px;
    background: var(--mk-cc-line);
    transition: background .22s ease;
}

.mk-cc-knob {
    display: block;
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.mk-cc-switch input:checked + .mk-cc-track {
    background: var(--mk-cc-accent);
}

.mk-cc-switch input:checked + .mk-cc-track .mk-cc-knob {
    transform: translateX(20px);
}

.mk-cc-switch input:focus-visible + .mk-cc-track {
    outline: 2px solid var(--mk-cc-accent);
    outline-offset: 2px;
}

/* ---------- ตารางรายการคุกกี้ ---------- */
.mk-cc-detail {
    margin-top: 12px;
    padding-left: 20px;
}

.mk-cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.mk-cc-table th {
    text-align: left;
    padding: 7px 9px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mk-cc-ink-3);
    border-bottom: 1px solid var(--mk-cc-line);
}

.mk-cc-table td {
    padding: 9px;
    vertical-align: top;
    line-height: 1.65;
    color: var(--mk-cc-ink-2);
    border-bottom: 1px solid var(--mk-cc-line-2);
}

.mk-cc-table tr:last-child td {
    border-bottom: 0;
}

.mk-cc-table strong {
    display: block;
    color: var(--mk-cc-ink);
    font-size: 13px;
}

.mk-cc-table code {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--mk-cc-line-2);
    color: var(--mk-cc-ink-2);
    font-size: 11.5px;
    word-break: break-all;
}

.mk-cc-prov {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--mk-cc-ink-3);
}

.mk-cc-prov a {
    color: var(--mk-cc-ink-accent);
    margin-left: 3px;
}

.mk-cc-transfer {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--mk-cc-ink-3);
}

.mk-cc-transfer i {
    margin-right: 4px;
}

.mk-cc-ret {
    white-space: nowrap;
}

.mk-cc-empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--mk-cc-ink-3);
}

.mk-cc-policy-row {
    margin: 16px 0 0;
    font-size: 13px;
}

/* ---------- ท้ายกล่อง ---------- */
.mk-cc-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--mk-cc-line);
    background: var(--mk-cc-surface-2);
    border-radius: 0 0 var(--mk-cc-radius) var(--mk-cc-radius);
}

.mk-cc-foot-left {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.mk-cc-withdraw {
    margin: 0;
    padding: 0 20px 16px;
    text-align: center;
}

.mk-cc-withdraw button {
    border: 0;
    background: none;
    padding: 4px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mk-cc-ink-3);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.mk-cc-withdraw button:hover {
    color: #c0392b;
}

/* =====================================================================
   ปุ่มลอยเรียกกล่องตั้งค่ากลับมา
   ===================================================================== */
.mk-cc-badge {
    position: fixed;
    z-index: 99980;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mk-cc-line);
    border-radius: 50%;
    background: var(--mk-cc-surface);
    color: var(--mk-cc-ink-accent);
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(30, 44, 62, .18);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s ease, transform .25s ease, color .2s ease;
}

.mk-cc-badge.is-on {
    opacity: .85;
    transform: none;
}

.mk-cc-badge:hover {
    opacity: 1;
    color: #fff;
    background: var(--mk-cc-accent);
}

.mk-cc-badge[data-badge-pos="bottom-left"] {
    left: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.mk-cc-badge[data-badge-pos="bottom-right"] {
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.mk-cc-badge[data-badge-pos="top-left"] {
    left: 18px;
    top: calc(78px + env(safe-area-inset-top, 0px));
}

.mk-cc-badge[data-badge-pos="top-right"] {
    right: 18px;
    top: calc(78px + env(safe-area-inset-top, 0px));
}

/* =====================================================================
   ไม่ให้ชนปุ่มลอยของเว็บ (.mk-fab-stack มุมขวาล่าง)
   JS ใส่คลาสนี้ให้ <body> เฉพาะตอนที่แบนเนอร์อยู่ล่างขวา/แถบล่าง
   ===================================================================== */
body.mk-cc-push-fab .mk-fab-stack {
    bottom: calc(22px + env(safe-area-inset-bottom, 0px) + var(--mk-cc-push, 0px));
    transition: bottom .3s ease;
}

/* =====================================================================
   จอเล็ก — การ์ดทุกตำแหน่งกลายเป็นแผ่นเต็มความกว้าง
   ชิดขอบเดิมของตัวเอง (บนก็ยังอยู่บน ล่างก็ยังอยู่ล่าง)
   ===================================================================== */
@media (max-width: 575.98px) {
    .mk-cc-root {
        --mk-cc-gap: 10px;
        --mk-cc-radius: 16px;
    }

    .mk-cc-banner,
    .mk-cc-banner.is-center {
        width: calc(100vw - 2 * var(--mk-cc-gap));
        left: var(--mk-cc-gap);
        right: var(--mk-cc-gap);
        max-height: calc(100vh - 2 * var(--mk-cc-gap));
        overflow-y: auto;
    }

    .mk-cc-banner.is-center {
        top: auto;
        bottom: calc(var(--mk-cc-gap) + env(safe-area-inset-bottom, 0px));
        transform: translateY(14px) scale(.98);
    }

    .mk-cc-banner.is-center.is-on {
        transform: none;
    }

    .mk-cc-banner.is-center .mk-cc-banner-in {
        text-align: left;
        padding: 20px 18px 18px;
    }

    .mk-cc-banner.is-center .mk-cc-head {
        flex-direction: row;
        gap: 12px;
    }

    .mk-cc-banner.is-center .mk-cc-ico {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .mk-cc-banner.is-center .mk-cc-actions {
        justify-content: stretch;
    }

    .mk-cc-banner.is-bar {
        width: 100%;
        left: 0;
        right: 0;
    }

    .mk-cc-banner.is-bar .mk-cc-banner-in {
        display: block;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .mk-cc-banner-in {
        padding: 18px 18px 16px;
    }

    /* ปุ่มเต็มความกว้างเรียงลงมา นิ้วโป้งกดได้ทั้งหมดโดยไม่พลาด */
    .mk-cc-actions {
        flex-direction: column;
        gap: 8px;
    }

    .mk-cc-btn {
        width: 100%;
        min-height: 46px;
    }

    .mk-cc-modal-card {
        max-height: calc(100vh - 2 * var(--mk-cc-gap));
    }

    .mk-cc-modal-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .mk-cc-foot-left {
        flex-direction: column;
    }

    .mk-cc-modal-foot .mk-cc-btn {
        width: 100%;
    }

    /* ตารางบนจอแคบ: เปลี่ยนจากตารางเป็นบล็อกซ้อน อ่านได้จริง */
    .mk-cc-detail {
        padding-left: 0;
    }

    .mk-cc-table thead {
        display: none;
    }

    .mk-cc-table,
    .mk-cc-table tbody,
    .mk-cc-table tr,
    .mk-cc-table td {
        display: block;
        width: 100%;
    }

    .mk-cc-table tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--mk-cc-line-2);
    }

    .mk-cc-table td {
        padding: 2px 0;
        border: 0;
    }

    .mk-cc-ret {
        font-size: 11.5px;
        color: var(--mk-cc-ink-3);
    }
}

/* =====================================================================
   เคารพการตั้งค่าลดการเคลื่อนไหวของระบบ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mk-cc-banner,
    .mk-cc-modal,
    .mk-cc-modal-card,
    .mk-cc-overlay,
    .mk-cc-badge,
    .mk-cc-knob,
    .mk-cc-cat-toggle i {
        transition: none !important;
    }

    .mk-cc-banner,
    .mk-cc-banner.is-center,
    .mk-cc-modal-card {
        transform: none !important;
    }

    /* กลางจอยังต้องใช้ transform เพื่อจัดกึ่งกลาง — แต่เฉพาะจอที่ยัง
       วางกลางจริง จอเล็กถูกเปลี่ยนเป็นแผ่นชิดล่างไปแล้ว */
    @media (min-width: 576px) {
        .mk-cc-banner.is-center {
            transform: translate(-50%, -50%) !important;
        }
    }
}

/* =====================================================================
   พิมพ์ — ไม่ต้องมีแบนเนอร์บนกระดาษ
   ===================================================================== */
@media print {
    .mk-cc-root {
        display: none !important;
    }
}