/* ================================================================
   MARKETING PREFERENCES COMPONENT - LottoMuse
   In-card, in-flow marketing consent controls for Account forms
   Themed presentation: fits cleanly inside Account card containers
   WCAG 2.2 AA design: high contrast (>4.5:1 / >7:1), >=44px target sizes,
   visible focus, reduced motion, responsive reflow at 320px+
   ================================================================ */

/* Explicitly ensure [hidden] remains hidden regardless of component display styles */
[data-marketing-consent-placement][hidden],
.marketing-consent-region[hidden],
.marketing-consent-panel[hidden],
.marketing-consent-trigger[hidden] {
    display: none !important;
}

/* Hide empty consent mounts or when all children are hidden */
[data-marketing-consent-placement]:empty,
[data-marketing-consent-placement]:not(:has(> :not([hidden]))),
.marketing-consent-region:empty,
.marketing-consent-region:not(:has(> :not([hidden]))) {
    display: none !important;
}

/* Hide persistent trigger while the preferences panel is open */
.marketing-consent-trigger[aria-expanded="true"] {
    display: none !important;
}

/* Ensure any legacy layout reservation spacer takes zero space */
[data-marketing-consent-reservation] {
    display: none !important;
    height: 0 !important;
}

/* ===== CONSENT PLACEMENT CONTAINER ===== */
[data-marketing-consent-placement],
.marketing-consent-region {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: static;
    margin: 0;
    padding: 0;
}

/* ===== PERSISTENT TRIGGER BUTTON (COLLAPSED STATE) ===== */
.marketing-consent-trigger {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 0.375rem);
    width: 100%;
    min-height: var(--min-touch-target-wcag, 44px);
    min-width: var(--min-touch-target-wcag, 44px);
    padding: var(--spacing-xs, 0.5rem) var(--spacing-md, 1rem);
    margin-top: var(--spacing-md, 1rem);
    box-sizing: border-box;
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--border-subtle, #dee2e6);
    background: #ffffff;
    color: var(--primary-purple, #5B3E90);
    font-family: var(--button-font-family, var(--font-family-sans, sans-serif));
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-tight, 1.25);
    letter-spacing: var(--tracking-normal, 0);
    text-align: center;
    cursor: pointer;
    overflow-wrap: break-word;
    word-break: break-word;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease);
}

.marketing-consent-trigger:hover {
    background: var(--background-light, #f8f9fa);
    border-color: var(--primary-purple, #5B3E90);
    color: var(--primary-blue, #1A2B63);
    box-shadow: 0 2px 4px rgba(91, 62, 144, 0.12);
}

.marketing-consent-trigger:focus-visible {
    outline: 2px solid var(--primary-purple, #5B3E90);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(91, 62, 144, 0.25);
}

.marketing-consent-trigger:focus:not(:focus-visible) {
    outline: none;
}

.marketing-consent-trigger:active {
    background: #e9ecef;
}

#emailSignupForm .marketing-consent-trigger {
    margin-bottom: var(--spacing-md, 1rem);
}

/* ===== IN-FLOW PREFERENCES PANEL (EXPANDED / NOTICE STATE) ===== */
.marketing-consent-panel {
    position: static;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.625rem);
    padding: var(--spacing-md, 1rem);
    margin-top: var(--spacing-md, 1rem);
    border-radius: var(--radius-sm, 0.5rem);
    border: 1px solid var(--border-subtle, #dee2e6);
    background: var(--background-light, #f8f9fa);
    color: var(--text-primary, #212529);
    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ===== HEADING ===== */
.marketing-consent-heading {
    margin: 0;
    font-family: var(--heading-font-family, var(--font-family-display, var(--font-family-sans, sans-serif)));
    font-size: 0.95rem;
    font-weight: var(--heading-font-weight, 600);
    line-height: var(--line-height-tight, 1.3);
    letter-spacing: var(--heading-letter-spacing, -0.01em);
    color: var(--text-primary, #212529);
    overflow-wrap: break-word;
    word-break: break-word;
}

.marketing-consent-heading:focus-visible {
    outline: 2px solid var(--primary-purple, #5B3E90);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 0.25rem);
}

.marketing-consent-heading:focus:not(:focus-visible) {
    outline: none;
}

/* ===== DESCRIPTION ===== */
.marketing-consent-description {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-family-sans, sans-serif);
    font-size: var(--font-size-xs, 0.8125rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--line-height-base, 1.45);
    color: #495057;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ===== STATUS MESSAGE ===== */
.marketing-consent-status {
    margin: var(--spacing-xs, 0.25rem) 0 0 0;
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.625rem);
    border-radius: var(--radius-sm, 0.25rem);
    border-left: 3px solid var(--primary-purple, #5B3E90);
    background: #eef2ff;
    color: #1e1b4b;
    font-size: var(--font-size-xs, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-snug, 1.4);
    overflow-wrap: break-word;
    word-break: break-word;
}

.marketing-consent-status:empty {
    display: none !important;
}

/* ===== ACTION BUTTON GROUP ===== */
.marketing-consent-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm, 0.5rem);
    margin-top: var(--spacing-xs, 0.25rem);
}

/* ===== BUTTON BASE (WCAG >=44px TOUCH TARGET) ===== */
.marketing-consent-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--min-touch-target-wcag, 44px);
    min-width: var(--min-touch-target-wcag, 44px);
    padding: var(--spacing-xs, 0.5rem) var(--spacing-md, 0.875rem);
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--border-subtle, #dee2e6);
    background: #ffffff;
    color: #495057;
    font-family: var(--button-font-family, var(--font-family-sans, sans-serif));
    font-size: var(--font-size-xs, 0.8125rem);
    font-weight: var(--button-font-weight, 600);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--button-letter-spacing, 0.01em);
    cursor: pointer;
    user-select: none;
    overflow-wrap: break-word;
    word-break: break-word;
    text-decoration: none;
    white-space: normal;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease),
                transform var(--transition-fast, 0.15s ease);
}

.marketing-consent-btn:hover {
    background: #f1f3f5;
    border-color: #ced4da;
    color: #212529;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.marketing-consent-btn:focus-visible {
    outline: 2px solid var(--primary-purple, #5B3E90);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(91, 62, 144, 0.25);
}

.marketing-consent-btn:focus:not(:focus-visible) {
    outline: none;
}

.marketing-consent-btn:active {
    transform: translateY(0);
}

.marketing-consent-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Accept button - primary brand styling with gradient */
.marketing-consent-btn-accept {
    background: var(--gradient-primary, linear-gradient(90deg, #5B3E90 0%, #1A2B63 100%));
    border: 1px solid transparent;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(26, 43, 99, 0.2);
}

.marketing-consent-btn-accept:hover {
    background: linear-gradient(90deg, #4d337d 0%, #13204d 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(26, 43, 99, 0.3);
    transform: translateY(-1px);
}

.marketing-consent-btn-accept:focus-visible {
    outline: 2px solid var(--primary-purple, #5B3E90);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(91, 62, 144, 0.35);
}

/* Reject button - visually distinct privacy choice with brand purple outline & high contrast */
.marketing-consent-btn-reject {
    background: #ffffff;
    border: 1.5px solid var(--primary-purple, #5B3E90);
    color: var(--primary-purple, #5B3E90);
    box-shadow: 0 1px 2px rgba(91, 62, 144, 0.08);
}

.marketing-consent-btn-reject:hover {
    background: #f5f2fa;
    border-color: #4d337d;
    color: #4d337d;
    box-shadow: 0 2px 5px rgba(91, 62, 144, 0.15);
    transform: translateY(-1px);
}

.marketing-consent-btn-reject:focus-visible {
    outline: 2px solid var(--primary-purple, #5B3E90);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(91, 62, 144, 0.3);
}

/* ===== MOBILE & NARROW SCREEN PRESENTATION (<= 576px) ===== */
@media (max-width: 576px) {
    .marketing-consent-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .marketing-consent-actions .marketing-consent-btn {
        width: 100%;
    }
}

/* ===== REDUCED MOTION PREFERENCE ===== */
@media (prefers-reduced-motion: reduce) {
    [data-marketing-consent-placement],
    .marketing-consent-region,
    .marketing-consent-panel,
    .marketing-consent-trigger,
    .marketing-consent-btn {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}