/* =============================================================================
   AMTM — Frontend Banner CSS
   Pixel-perfect match với admin live preview
   ============================================================================= */

/* ─── CSS Custom Properties — Light Theme (default) ─────────────────────── */
.amtm-banner-wrapper {
    /* Colors */
    --amtm-bg:                  #FFFFFF;
    --amtm-color:               #0F172A;
    --amtm-text-muted:          #64748B;
    --amtm-border:              rgba(0,0,0,0.06);
    --amtm-shadow:              0 -2px 12px rgba(0,0,0,0.10);

    /* Buttons — match preview exactly */
    --amtm-btn-accept-bg:       #2563EB;
    --amtm-btn-accept-color:    #ffffff;
    --amtm-btn-decline-bg:      #F1F5F9;
    --amtm-btn-decline-color:   #64748B;
    --amtm-btn-link-color:      #2563EB;

    /* Panel */
    --amtm-panel-bg:            #ffffff;
    --amtm-panel-color:         #0F172A;
    --amtm-panel-border:        #E2E8F0;
    --amtm-panel-shadow:        0 20px 60px rgba(0,0,0,0.18);
    --amtm-toggle-on:           #10B981;
    --amtm-toggle-off:          #CBD5E1;

    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ─── Dark Theme Override ────────────────────────────────────────────────── */
.amtm-banner-wrapper.amtm-theme-dark {
    --amtm-bg:                  #1E293B;
    --amtm-color:               #F1F5F9;
    --amtm-text-muted:          #94A3B8;
    --amtm-border:              rgba(255,255,255,0.06);
    --amtm-shadow:              0 -2px 12px rgba(0,0,0,0.30);

    --amtm-btn-accept-bg:       #3B82F6;
    --amtm-btn-accept-color:    #ffffff;
    --amtm-btn-decline-bg:      #334155;
    --amtm-btn-decline-color:   #94A3B8;
    --amtm-btn-link-color:      #60A5FA;

    --amtm-panel-bg:            #1E293B;
    --amtm-panel-color:         #F1F5F9;
    --amtm-panel-border:        #334155;
    --amtm-panel-shadow:        0 20px 60px rgba(0,0,0,0.45);
    --amtm-toggle-on:           #3B82F6;
    --amtm-toggle-off:          #334155;
}

/* =============================================================================
   BANNER WRAPPER — Vị trí & Hiệu ứng xuất hiện
   ============================================================================= */

/* ── Mặc định: Bottom Edge (full width) ──────────────────────────────────── */
.amtm-banner-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: var(--amtm-bg);
    color: var(--amtm-color);
    box-shadow: var(--amtm-shadow);
    border-top: 1px solid var(--amtm-border);

    /* Slide-up animation */
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.30s ease;
    opacity: 0;
    will-change: transform, opacity;
}

.amtm-banner-wrapper.amtm-show {
    transform: translateY(0);
    opacity: 1;
}

/* ══ Modal Variants: Bottom Left & Bottom Right ════════════════════════ */
/* Style chung cho cả 2 (đồng bộ tuyệt đối) */
.amtm-banner-wrapper.amtm-align-bottom-left,
.amtm-banner-wrapper.amtm-align-bottom-right {
    bottom: 20px;
    width: min(720px, calc(100vw - 40px));
    border-radius: 12px;
    border-top: none;
    border: 1px solid var(--amtm-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);

    /* Fade-up animation */
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.40s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.28s ease;
}

.amtm-banner-wrapper.amtm-align-bottom-left.amtm-show,
.amtm-banner-wrapper.amtm-align-bottom-right.amtm-show {
    transform: translateY(0);
    opacity: 1;
}

/* Dark theme: shadow mạnh hơn */
.amtm-banner-wrapper.amtm-align-bottom-left.amtm-theme-dark,
.amtm-banner-wrapper.amtm-align-bottom-right.amtm-theme-dark {
    box-shadow: 0 8px 32px rgba(0,0,0,0.40);
}

/* Chỉ khác nhau: LEFT và RIGHT */
.amtm-banner-wrapper.amtm-align-bottom-left  { left: 20px; right: auto; }
.amtm-banner-wrapper.amtm-align-bottom-right { right: 20px; left: auto; }

/* =============================================================================
   BANNER INNER LAYOUT
   ============================================================================= */

.amtm-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Modal variants (left/right): layout dọc từ trên xuống:
   Tiêu đề → Chú thích → 3 button (dóng phải) */
.amtm-align-bottom-left .amtm-banner-inner,
.amtm-align-bottom-right .amtm-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px 16px;
    gap: 14px;
}

/* ─── Text ──────────────────────────────────────────────────────────────── */
.amtm-banner-text {
    flex: 1;
    min-width: 0;
}

.amtm-banner-text h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--amtm-color);
    line-height: 1.3;
}

.amtm-banner-text p {
    margin: 0;
    font-size: 13px;
    color: var(--amtm-text-muted);
    line-height: 1.6;
}

/* ─── Action Buttons Row ───────────────────────────────────── */
.amtm-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Modal: buttons dóng phải + full-width row */
.amtm-align-bottom-left .amtm-banner-actions,
.amtm-align-bottom-right .amtm-banner-actions {
    width: 100%;
    justify-content: flex-end;
}

/* ─── Button — base ─────────────────────────────────────────────────────── */
.amtm-banner-wrapper .amtm-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.1s ease;
    -webkit-user-select: none;
    user-select: none;
}

.amtm-banner-wrapper .amtm-btn:hover  { filter: brightness(0.93); }
.amtm-banner-wrapper .amtm-btn:active { transform: scale(0.96); }

/* Accept — blue solid (match preview .apb-accept) */
.amtm-banner-wrapper .amtm-btn-primary,
.amtm-banner-wrapper .amtm-accept-all {
    background: var(--amtm-btn-accept-bg);
    color:      var(--amtm-btn-accept-color);
    border-radius: 7px;
}

/* Decline — gray pill (match preview .apb-decline) */
.amtm-banner-wrapper .amtm-btn-secondary,
.amtm-banner-wrapper .amtm-reject-all {
    background: var(--amtm-btn-decline-bg);
    color:      var(--amtm-btn-decline-color);
    border-radius: 7px;
}

/* Customize — link style (match preview .apb-settings) */
.amtm-banner-wrapper .amtm-btn-link,
.amtm-banner-wrapper .amtm-customize {
    background:      transparent;
    color:           var(--amtm-btn-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-left:    4px;
    padding-right:   4px;
    border-radius:   0;
}

/* =============================================================================
   PANEL OVERLAY
   ============================================================================= */
.amtm-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    z-index: 999998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.amtm-panel-overlay.amtm-show {
    display: block;
    opacity: 1;
}

/* =============================================================================
   PANEL MODAL (Cookie preferences)
   ============================================================================= */
.amtm-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999999;
    width: 90%;
    max-width: 540px;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 28px;

    /* Hard-coded: panel là element riêng, không kế thừa var() từ .amtm-banner-wrapper */
    background: #ffffff;
    color:      #0F172A;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);

    display: none;
    opacity: 0;
    transform: translate(-50%, -47%);
    transition: opacity 0.28s ease,
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark theme cho panel */
.amtm-panel.amtm-theme-dark {
    background: #1E293B;
    color:      #F1F5F9;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.30);
}

.amtm-panel.amtm-show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.amtm-panel h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
}

.amtm-panel.amtm-theme-dark h3 { color: #F1F5F9; }

/* Mô tả ngắn trong panel */
.amtm-panel-intro {
    font-size: 13px;
    color: #64748B;
    line-height: 1.5;
    padding-bottom: 14px;
    border-bottom: 1px solid #E2E8F0;
    margin: 0 0 4px;
}

.amtm-panel.amtm-theme-dark .amtm-panel-intro {
    color: #94A3B8;
    border-bottom-color: #334155;
}

/* ─── Toggle Item ────────────────────────────────────────────────────────── */
.amtm-toggle-list {
    margin-top: 4px;
}

.amtm-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #E2E8F0;
}

.amtm-panel.amtm-theme-dark .amtm-toggle-item {
    border-bottom-color: #334155;
}

.amtm-toggle-item:last-child {
    border-bottom: none;
}

.amtm-toggle-info {
    flex: 1;
}

.amtm-toggle-info strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #0F172A;
}

.amtm-panel.amtm-theme-dark .amtm-toggle-info strong { color: #F1F5F9; }

.amtm-toggle-info span {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
    display: block;
}

.amtm-panel.amtm-theme-dark .amtm-toggle-info span { color: #94A3B8; }

/* ─── Panel Buttons ────────────────────────────────────────── */
.amtm-panel .amtm-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: filter 0.15s;
}

.amtm-panel .amtm-btn-primary {
    background: #2563EB;
    color: #ffffff;
}

.amtm-panel .amtm-btn-secondary {
    background: #F1F5F9;
    color: #475569;
}

.amtm-panel.amtm-theme-dark .amtm-btn-secondary {
    background: #334155;
    color: #CBD5E1;
}

.amtm-panel .amtm-btn:hover {
    filter: brightness(0.9);
}

/* ─── iOS Toggle Switch ─────────────────────────────────────────────────── */
.amtm-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 2px;
}

.amtm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.amtm-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #CBD5E1; /* off state — hard-coded */
    border-radius: 26px;
    transition: background 0.28s ease;
}

.amtm-panel.amtm-theme-dark .amtm-slider {
    background: #475569; /* off state — dark */
}

.amtm-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

input:checked + .amtm-slider {
    background: #10B981; /* on state — hard-coded */
}

input:checked + .amtm-slider::before {
    transform: translateX(20px);
}

input:disabled + .amtm-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 640px) {
    /* Bottom-center: cưỡng bức layout dọc */
    .amtm-banner-wrapper.amtm-align-bottom-center .amtm-banner-inner,
    .amtm-banner-wrapper .amtm-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }

    .amtm-banner-wrapper .amtm-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Modal variants: dính vào đáy + full-width */
    .amtm-banner-wrapper.amtm-align-bottom-left,
    .amtm-banner-wrapper.amtm-align-bottom-right {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: 12px 12px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .amtm-panel {
        width: 94%;
        padding: 20px;
        max-height: 82vh;
    }
}

/* =============================================================================
   v2.0 — Ẩn hẳn banner khi chưa hiển thị, nút mở lại cài đặt, nút Chấp nhận/Từ chối ngang nhau
   ============================================================================= */
.amtm-banner-wrapper:not(.amtm-show) {
    visibility: hidden;
    pointer-events: none;
}

.amtm-banner-wrapper .amtm-accept-all,
.amtm-banner-wrapper .amtm-reject-all {
    min-width: 150px;
    padding: 10px 18px;
    font-weight: 600;
    border: 1px solid var(--amtm-btn-accept-bg);
}

.amtm-banner-wrapper .amtm-reject-all {
    background: transparent;
    color: var(--amtm-btn-accept-bg);
}

.amtm-reopen {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 999990;
    padding: 8px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    background: #ffffff;
    color: #0F172A;
    font: 600 12px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.amtm-reopen[hidden] {
    display: none;
}

.amtm-reopen:hover,
.amtm-reopen:focus-visible {
    border-color: #2563EB;
    color: #2563EB;
}

.amtm-dsr-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.amtm-dsr-form input[type="text"],
.amtm-dsr-form input[type="email"],
.amtm-dsr-form select,
.amtm-dsr-form textarea { width: 100%; box-sizing: border-box; }
.amtm-dsr-msg { display: none; padding: 10px; margin-top: 20px; border-radius: 5px; }
.amtm-dsr-msg.is-ok  { background: #eef9f0; color: #1e7e34; }
.amtm-dsr-msg.is-err { background: #fdecea; color: #b02a37; }

/* =============================================================================
   2.1.1 — Sửa bố cục khi mở "Tùy chỉnh"
   Vùng công tắc là phần tử thứ 3 trong hàng ngang nên ép cột chữ hẹp lại.
   Cho banner xuống dòng: chữ + nút ở hàng trên, vùng công tắc chiếm trọn hàng dưới.
   ============================================================================= */
.amtm-banner-wrapper {
    max-height: 90vh;
    overflow-y: auto;
}

.amtm-banner-inner {
    flex-wrap: wrap;
}

.amtm-banner-text {
    min-width: min(280px, 100%);
}

.amtm-banner-actions {
    order: 2;
}

.amtm-banner-preferences {
    order: 3;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Hộp nhỏ ở góc: xếp dọc, vùng công tắc nằm giữa chữ và hàng nút */
.amtm-align-bottom-left .amtm-banner-preferences,
.amtm-align-bottom-right .amtm-banner-preferences {
    order: 1;
}

.amtm-align-bottom-left .amtm-banner-actions,
.amtm-align-bottom-right .amtm-banner-actions {
    order: 2;
}

.amtm-banner-preferences .amtm-toggle-item {
    box-sizing: border-box;
    width: 100%;
}

.amtm-banner-preferences .amtm-toggle-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* Màn hình hẹp: nút xuống dòng, chiếm trọn hàng */
@media (max-width: 640px) {
    .amtm-banner-inner {
        padding: 14px 16px;
    }
    .amtm-banner-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}