/**
 * CQI Consent Banner — Stylesheet
 *
 * Uses CSS custom properties for theming.
 * --cqi-primary is set inline on the banner element from PHP.
 *
 * @package CQI\Consent
 * @version 1.0.0
 */

/* =========================================================================
   Base variables
   ========================================================================= */

:root {
	--cqi-primary:        #1a1a2e;
	--cqi-primary-hover:  #16213e;
	--cqi-text:           #ffffff;
	--cqi-bg:             #ffffff;
	--cqi-border:         #e2e8f0;
	--cqi-shadow:         0 -2px 16px rgba(0, 0, 0, 0.10);
	--cqi-radius:         8px;
	--cqi-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cqi-z:              999999;
	--cqi-transition:     0.25s ease;
}

/* =========================================================================
   Banner wrapper
   ========================================================================= */

.cqi-consent-banner {
	position:       fixed;
	bottom:         0;
	left:           0;
	right:          0;
	z-index:        var(--cqi-z);
	background:     var(--cqi-bg);
	border-top:     1px solid var(--cqi-border);
	box-shadow:     var(--cqi-shadow);
	font-family:    var(--cqi-font);
	font-size:      14px;
	line-height:    1.5;
	color:          #1a1a2e;
	transition:     transform var(--cqi-transition), opacity var(--cqi-transition);
	transform:      translateY(0);
	opacity:        1;
}

/* Hidden state — used on initial render before JS runs */
.cqi-consent-banner--hidden {
	transform:  translateY(110%);
	opacity:    0;
	pointer-events: none;
}

/* Visible state — JS removes --hidden and adds --visible */
.cqi-consent-banner--visible {
	transform:  translateY(0);
	opacity:    1;
	pointer-events: auto;
}

/* =========================================================================
   UK mode: centred modal-style overlay with backdrop
   ========================================================================= */

.cqi-consent-banner--uk {
	max-width:  680px;
	left:       50%;
	right:      auto;
	bottom:     24px;
	transform:  translateX(-50%) translateY(0);
	border:     1px solid var(--cqi-border);
	border-radius: var(--cqi-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}

.cqi-consent-banner--uk.cqi-consent-banner--hidden {
	transform:  translateX(-50%) translateY(120%);
	opacity:    0;
}

.cqi-consent-banner--uk.cqi-consent-banner--visible {
	transform:  translateX(-50%) translateY(0);
	opacity:    1;
}

/* Backdrop overlay for UK mode */
.cqi-consent-backdrop {
	position:   fixed;
	inset:      0;
	z-index:    calc(var(--cqi-z) - 1);
	background: rgba(0, 0, 0, 0.45);
	transition: opacity var(--cqi-transition);
}

.cqi-consent-backdrop--hidden {
	opacity:    0;
	pointer-events: none;
}

/* =========================================================================
   Inner layout
   ========================================================================= */

.cqi-consent-banner__inner {
	padding: 20px 24px;
}

.cqi-consent-banner__content {
	margin-bottom: 16px;
}

.cqi-consent-banner__heading {
	margin:         0 0 8px;
	font-size:      16px;
	font-weight:    600;
	line-height:    1.3;
	color:          #1a1a2e;
}

.cqi-consent-banner__body {
	margin:     0;
	color:      #4a5568;
	font-size:  13px;
}

.cqi-consent-banner__link {
	color:              var(--cqi-primary);
	text-decoration:    underline;
	margin-left:        4px;
}

.cqi-consent-banner__link:hover {
	color: var(--cqi-primary-hover);
}

/* =========================================================================
   Action buttons
   ========================================================================= */

.cqi-consent-banner__actions {
	display:    flex;
	gap:        10px;
	flex-wrap:  wrap;
	align-items: center;
}

.cqi-consent-banner__btn {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	padding:        9px 20px;
	font-family:    var(--cqi-font);
	font-size:      14px;
	font-weight:    500;
	line-height:    1;
	border-radius:  6px;
	border:         2px solid transparent;
	cursor:         pointer;
	transition:     background var(--cqi-transition), color var(--cqi-transition), border-color var(--cqi-transition);
	white-space:    nowrap;
}

.cqi-consent-banner__btn--accept {
	background:     var(--cqi-primary);
	color:          var(--cqi-text);
	border-color:   var(--cqi-primary);
}

.cqi-consent-banner__btn--accept:hover,
.cqi-consent-banner__btn--accept:focus {
	background:     var(--cqi-primary-hover);
	border-color:   var(--cqi-primary-hover);
	outline:        none;
}

.cqi-consent-banner__btn--decline {
	background:     transparent;
	color:          #4a5568;
	border-color:   #cbd5e0;
}

.cqi-consent-banner__btn--decline:hover,
.cqi-consent-banner__btn--decline:focus {
	background:     #f7fafc;
	border-color:   #a0aec0;
	outline:        none;
}

/* Focus visible for keyboard users */
.cqi-consent-banner__btn:focus-visible {
	outline:        3px solid var(--cqi-primary);
	outline-offset: 2px;
}

/* =========================================================================
   Footer (Do Not Sell link — US mode)
   ========================================================================= */

.cqi-consent-banner__footer {
	margin-top:  12px;
	padding-top: 12px;
	border-top:  1px solid var(--cqi-border);
}

.cqi-consent-banner__dns-link {
	font-size:          12px;
	color:              #718096;
	text-decoration:    underline;
}

.cqi-consent-banner__dns-link:hover {
	color: #4a5568;
}

/* =========================================================================
   US mode: full-width bottom bar, compact layout
   ========================================================================= */

.cqi-consent-banner--us .cqi-consent-banner__inner {
	display:        flex;
	align-items:    center;
	flex-wrap:      wrap;
	gap:            12px;
	padding:        14px 24px;
}

.cqi-consent-banner--us .cqi-consent-banner__content {
	flex:           1 1 auto;
	min-width:      200px;
	margin-bottom:  0;
}

.cqi-consent-banner--us .cqi-consent-banner__heading {
	font-size:  14px;
	margin:     0;
}

.cqi-consent-banner--us .cqi-consent-banner__body {
	font-size:  12px;
}

.cqi-consent-banner--us .cqi-consent-banner__actions {
	flex:   0 0 auto;
}

.cqi-consent-banner--us .cqi-consent-banner__footer {
	flex:           0 0 100%;
	margin-top:     8px;
	padding-top:    8px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media ( max-width: 600px ) {
	.cqi-consent-banner--uk {
		left:           12px;
		right:          12px;
		bottom:         12px;
		max-width:      none;
		transform:      translateY(0);
	}

	.cqi-consent-banner--uk.cqi-consent-banner--hidden {
		transform: translateY(120%);
	}

	.cqi-consent-banner--uk.cqi-consent-banner--visible {
		transform: translateY(0);
	}

	.cqi-consent-banner__actions {
		flex-direction: column;
		align-items:    stretch;
	}

	.cqi-consent-banner__btn {
		width: 100%;
	}

	.cqi-consent-banner--us .cqi-consent-banner__inner {
		flex-direction: column;
		align-items:    flex-start;
	}

	.cqi-consent-banner--us .cqi-consent-banner__actions {
		width: 100%;
	}
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.cqi-consent-banner,
	.cqi-consent-banner--uk,
	.cqi-consent-backdrop {
		transition: none;
	}
}