/**
 * consent.css — สไตล์แบนเนอร์ความยินยอมคุกกี้ PDPA/GDPR
 *
 * ทุก selector อยู่ใต้ .cmp-consent เพื่อกันชนกับสไตล์อื่น
 * ไม่ต้องใช้ Tailwind / build step — Plain CSS ล้วน
 *
 * @package CMP\Core
 */

/* ── Alpine x-cloak ── */
[x-cloak] { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   ROOT WRAPPER
   ════════════════════════════════════════════════════════════════ */
.cmp-consent {
    --cmp-orange-start:  #ff8e4d;
    --cmp-orange-end:    #f45434;
    --cmp-primary:       #f45434;
    --cmp-primary-grad:  linear-gradient(135deg, var(--cmp-orange-start), var(--cmp-orange-end));
    --cmp-radius:        10px;
    --cmp-shadow:        0 -2px 16px rgba(0,0,0,0.10);
    --cmp-backdrop:      rgba(0, 0, 0, 0.45);
    --cmp-text:          #1a1a1a;
    --cmp-muted:         #6b7280;
    --cmp-border:        #d1d5db;
    --cmp-white:         #ffffff;
    --cmp-btn-h:         42px;
    --cmp-transition:    0.2s ease;

    font-family: inherit;
    font-size:   15px;
    line-height: 1.5;
    color:       var(--cmp-text);
    box-sizing:  border-box;
}

.cmp-consent *,
.cmp-consent *::before,
.cmp-consent *::after {
    box-sizing: inherit;
}

/* ════════════════════════════════════════════════════════════════
   BOTTOM BANNER BAR
   ════════════════════════════════════════════════════════════════ */
.cmp-consent__bar {
    position:   fixed;
    left:       0;
    right:      0;
    bottom:     0;
    z-index:    9999;
    background: var(--cmp-white);
    box-shadow: var(--cmp-shadow);
    /* รองรับ safe-area บน iPhone ที่มี Home Indicator */
    padding:    16px 24px calc(16px + env(safe-area-inset-bottom, 0px)) 24px;
    transition: transform var(--cmp-transition), opacity var(--cmp-transition);
}

.cmp-consent__bar-inner {
    max-width:      900px;
    margin:         0 auto;
    display:        flex;
    align-items:    center;
    gap:            20px;
    flex-wrap:      wrap;
}

.cmp-consent__text {
    flex:       1 1 260px;
    font-size:  14px;
    color:      var(--cmp-text);
    margin:     0;
}

.cmp-consent__text a {
    color:           var(--cmp-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cmp-consent__text a:hover {
    opacity: 0.8;
}

/* กลุ่มปุ่มใน banner */
.cmp-consent__bar-actions {
    display:    flex;
    gap:        10px;
    flex-wrap:  wrap;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS (shared base)
   ════════════════════════════════════════════════════════════════ */
.cmp-consent__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          var(--cmp-btn-h);
    padding:         0 20px;
    border-radius:   var(--cmp-radius);
    font-size:       14px;
    font-weight:     600;
    cursor:          pointer;
    border:          none;
    transition:      opacity var(--cmp-transition), box-shadow var(--cmp-transition), transform var(--cmp-transition);
    white-space:     nowrap;
    line-height:     1;
}

.cmp-consent__btn:focus-visible {
    outline:        2px solid var(--cmp-primary);
    outline-offset: 2px;
}

/* ปุ่มหลัก "ยอมรับทั้งหมด" — gradient ส้ม */
.cmp-consent__btn--accept {
    background:  var(--cmp-primary-grad);
    color:       var(--cmp-white);
    box-shadow:  0 2px 8px rgba(244,84,52,0.30);
}
.cmp-consent__btn--accept:hover {
    opacity:     0.90;
    box-shadow:  0 4px 14px rgba(244,84,52,0.40);
    transform:   translateY(-1px);
}

/* ปุ่ม "ปฏิเสธทั้งหมด" — น้ำหนักเท่ากัน เพื่อ GDPR Art.7 */
.cmp-consent__btn--reject {
    background:  var(--cmp-white);
    color:       var(--cmp-text);
    border:      1.5px solid var(--cmp-border);
}
.cmp-consent__btn--reject:hover {
    background:  #f3f4f6;
    transform:   translateY(-1px);
}

/* ปุ่ม "ตั้งค่า" — tertiary แต่ยังเป็น button จริง */
.cmp-consent__btn--prefs {
    background:  transparent;
    color:       var(--cmp-muted);
    border:      1.5px solid transparent;
}
.cmp-consent__btn--prefs:hover {
    color:       var(--cmp-text);
    border-color: var(--cmp-border);
    background:  #f9fafb;
}

/* ════════════════════════════════════════════════════════════════
   PREFERENCES DIALOG
   ════════════════════════════════════════════════════════════════ */

/* Backdrop */
.cmp-consent__backdrop {
    position:   fixed;
    inset:      0;
    z-index:    10000;
    background: var(--cmp-backdrop);
    transition: opacity var(--cmp-transition);
}

/* Dialog card */
.cmp-consent__dialog {
    position:         fixed;
    inset:            0;
    z-index:          10001;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          16px;
    pointer-events:   none; /* backdrop รับ click, dialog children รับเอง */
}

.cmp-consent__dialog-card {
    pointer-events:   auto;
    background:       var(--cmp-white);
    border-radius:    16px;
    width:            100%;
    max-width:        520px;
    max-height:       calc(100dvh - 32px);
    overflow-y:       auto;
    box-shadow:       0 8px 40px rgba(0,0,0,0.18);
    display:          flex;
    flex-direction:   column;
}

.cmp-consent__dialog-header {
    padding:        24px 24px 0 24px;
    display:        flex;
    align-items:    flex-start;
    justify-content: space-between;
    gap:            12px;
}

.cmp-consent__dialog-title {
    font-size:   18px;
    font-weight: 700;
    margin:      0;
    color:       var(--cmp-text);
}

/* ปุ่มปิด dialog */
.cmp-consent__dialog-close {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--cmp-muted);
    padding:     4px;
    border-radius: 6px;
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    margin-top:  2px;
    transition:  color var(--cmp-transition), background var(--cmp-transition);
}
.cmp-consent__dialog-close:hover {
    color:       var(--cmp-text);
    background:  #f3f4f6;
}
.cmp-consent__dialog-close:focus-visible {
    outline:       2px solid var(--cmp-primary);
    outline-offset: 2px;
}

.cmp-consent__dialog-body {
    padding: 20px 24px;
    flex:    1;
}

/* แต่ละแถวหมวด */
.cmp-consent__cat-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         14px 0;
    border-bottom:   1px solid #f0f0f0;
}
.cmp-consent__cat-row:last-child {
    border-bottom: none;
}

.cmp-consent__cat-info {
    flex: 1 1 0;
}
.cmp-consent__cat-label {
    font-weight: 600;
    font-size:   14px;
    display:     block;
    margin-bottom: 3px;
}
.cmp-consent__cat-desc {
    font-size:  13px;
    color:      var(--cmp-muted);
    margin:     0;
}

/* ── CSS Toggle Switch ── */
.cmp-consent__toggle-wrap {
    flex-shrink: 0;
    position:    relative;
    width:       44px;
    height:      24px;
}

.cmp-consent__toggle-wrap input[type="checkbox"] {
    opacity:  0;
    width:    0;
    height:   0;
    position: absolute;
}

.cmp-consent__toggle-track {
    position:      absolute;
    inset:         0;
    border-radius: 999px;
    background:    var(--cmp-border);
    cursor:        pointer;
    transition:    background var(--cmp-transition);
}

.cmp-consent__toggle-track::after {
    content:         '';
    position:        absolute;
    top:             3px;
    left:            3px;
    width:           18px;
    height:          18px;
    border-radius:   50%;
    background:      var(--cmp-white);
    box-shadow:      0 1px 3px rgba(0,0,0,0.20);
    transition:      transform var(--cmp-transition);
}

.cmp-consent__toggle-wrap input:checked + .cmp-consent__toggle-track {
    background: var(--cmp-primary);
}
.cmp-consent__toggle-wrap input:checked + .cmp-consent__toggle-track::after {
    transform: translateX(20px);
}
.cmp-consent__toggle-wrap input:focus-visible + .cmp-consent__toggle-track {
    outline:        2px solid var(--cmp-primary);
    outline-offset: 2px;
}

/* toggle ล็อค (necessary) */
.cmp-consent__toggle-wrap input:disabled + .cmp-consent__toggle-track {
    background: #86efac; /* เขียวอ่อน — ชัดเจนว่าเปิดอยู่ถาวร */
    cursor:     not-allowed;
    opacity:    0.8;
}
.cmp-consent__toggle-wrap input:disabled + .cmp-consent__toggle-track::after {
    transform: translateX(20px);
}

/* footer ปุ่มของ dialog */
.cmp-consent__dialog-footer {
    padding:          16px 24px calc(16px + env(safe-area-inset-bottom, 0px)) 24px;
    border-top:       1px solid #f0f0f0;
    display:          flex;
    gap:              10px;
    flex-wrap:        wrap;
    justify-content:  flex-end;
}

/* ════════════════════════════════════════════════════════════════
   REOPEN BUTTON (fixed bottom-left)
   ════════════════════════════════════════════════════════════════ */
.cmp-consent__reopen {
    position:         fixed;
    left:             16px;
    bottom:           calc(16px + env(safe-area-inset-bottom, 0px));
    z-index:          9998;
    width:            44px;
    height:           44px;
    border-radius:    50%;
    background:       var(--cmp-white);
    border:           none;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       0 2px 12px rgba(0,0,0,0.16);
    color:            var(--cmp-muted);
    transition:       box-shadow var(--cmp-transition), transform var(--cmp-transition), color var(--cmp-transition);
    padding:          0;
}
.cmp-consent__reopen:hover {
    box-shadow:  0 4px 20px rgba(0,0,0,0.22);
    transform:   translateY(-2px);
    color:       var(--cmp-primary);
}
.cmp-consent__reopen:focus-visible {
    outline:       2px solid var(--cmp-primary);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .cmp-consent__bar-inner {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }

    .cmp-consent__bar-actions {
        flex-direction: column;
        gap:            8px;
    }

    .cmp-consent__btn {
        width:          100%;
        justify-content: center;
    }

    .cmp-consent__dialog-footer {
        flex-direction: column;
    }

    .cmp-consent__dialog-footer .cmp-consent__btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cmp-consent__btn,
    .cmp-consent__bar,
    .cmp-consent__backdrop,
    .cmp-consent__reopen,
    .cmp-consent__toggle-track,
    .cmp-consent__toggle-track::after,
    .cmp-consent__dialog-close {
        transition: none;
    }
}