/* ============================================
   MYMALLBEAUTY – Cookie Consent Banner
   White/teal theme, scoped: .mmb-cc-*
   ============================================ */

.mmb-cc-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}
.mmb-cc-overlay.mmb-cc-visible {
    pointer-events: auto; opacity: 1;
}

.mmb-cc-banner {
    width: 100%; max-width: 1100px;
    margin: 0 auto 1.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #23bac5;
    border-radius: 16px;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.08), 0 0 60px rgba(35,186,197,0.06);
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mmb-cc-visible .mmb-cc-banner { transform: translateY(0); }

.mmb-cc-inner { padding: 1.5rem 2rem; }

/* Header */
.mmb-cc-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.mmb-cc-icon {
    flex-shrink: 0; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: #eefbfc; border: 1px solid #d5f4f7; border-radius: 12px;
}
.mmb-cc-icon svg { color: #23bac5; }
.mmb-cc-text { flex: 1; }
.mmb-cc-text p { color: #555; font-size: 0.875rem; line-height: 1.6; margin: 0; }
.mmb-cc-text a { color: #23bac5; text-decoration: underline; text-underline-offset: 2px; }
.mmb-cc-text a:hover { color: #1a9ba5; }

/* Buttons */
.mmb-cc-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.mmb-cc-btn {
    padding: 0.625rem 1.25rem; border-radius: 10px; font-size: 0.8125rem;
    font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; white-space: nowrap;
}
.mmb-cc-btn-primary {
    background: #23bac5; color: #fff; box-shadow: 0 2px 8px rgba(35,186,197,0.2);
}
.mmb-cc-btn-primary:hover { background: #1a9ba5; box-shadow: 0 4px 12px rgba(35,186,197,0.3); }
.mmb-cc-btn-secondary {
    background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb;
}
.mmb-cc-btn-secondary:hover { background: #e5e7eb; }

/* Details panel */
.mmb-cc-details {
    display: none; border-top: 1px solid #e5e7eb;
    margin-top: 1.25rem; padding-top: 1.25rem;
}
.mmb-cc-details.mmb-cc-open {
    display: block; animation: mmbCcSlide 0.3s ease;
}
@keyframes mmbCcSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Categories grid */
.mmb-cc-categories {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem; margin-bottom: 1.25rem;
}
.mmb-cc-category {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem;
    transition: border-color 0.2s;
}
.mmb-cc-category:hover { border-color: #d5f4f7; }
.mmb-cc-cat-locked { opacity: 0.6; }
.mmb-cc-cat-info { flex: 1; min-width: 0; }
.mmb-cc-cat-label { color: #1f2937; font-size: 0.8125rem; font-weight: 600; margin: 0 0 0.25rem; }
.mmb-cc-cat-desc { color: #9ca3af; font-size: 0.75rem; line-height: 1.4; margin: 0; }
.mmb-cc-cat-badge {
    display: inline-block; font-size: 0.625rem; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 999px;
    margin-top: 0.35rem; font-weight: 600;
    background: #eefbfc; color: #23bac5; border: 1px solid #d5f4f7;
}

/* Toggle */
.mmb-cc-toggle { position: relative; flex-shrink: 0; width: 38px; height: 22px; margin-top: 2px; }
.mmb-cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mmb-cc-toggle-track {
    position: absolute; inset: 0; background: #e5e7eb; border: 1px solid #d1d5db;
    border-radius: 999px; cursor: pointer; transition: all 0.25s;
}
.mmb-cc-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.mmb-cc-toggle input:checked + .mmb-cc-toggle-track { background: #23bac5; border-color: #23bac5; }
.mmb-cc-toggle input:checked + .mmb-cc-toggle-track::after { transform: translateX(16px); }
.mmb-cc-toggle input:disabled + .mmb-cc-toggle-track { cursor: not-allowed; opacity: 0.5; }

.mmb-cc-save-row { display: flex; justify-content: flex-end; }

/* Responsive */
@media (max-width: 768px) {
    .mmb-cc-banner { margin: 0 0.5rem 0.75rem; max-width: calc(100% - 1rem); }
    .mmb-cc-inner { padding: 1.25rem 1rem; }
    .mmb-cc-header { flex-direction: column; gap: 0.75rem; }
    .mmb-cc-actions { flex-direction: column; width: 100%; }
    .mmb-cc-btn { width: 100%; text-align: center; }
    .mmb-cc-categories { grid-template-columns: 1fr; }
}