/**
 * Cookie Consent Manager – Stylesheet
 *
 * Sections:
 *  1. CSS custom properties (theme tokens)
 *  2. Reset / base
 *  3. Banner (bottom bar)
 *  4. Buttons
 *  5. Modal overlay + box
 *  6. Category list + toggle switch
 *  7. Necessary Info Popup
 *  8. Responsive (≤ 640 px)
 *  9. Dark mode (prefers-color-scheme)
 * 10. Reduced motion
 *
 * @package CookieConsentManager
 * @version 1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS Custom Properties
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Brand */
	--ccm-primary:        #FF7500;
	--ccm-primary-hover:  #1d4ed8;
	--ccm-primary-text:   #ffffff;

	/* Neutral */
	--ccm-bg:             #F7F7F7;
	--ccm-bg-muted:       #f8fafc;
	--ccm-text:           #173748;
	--ccm-text-muted:     #64748b;
	--ccm-border:         #FF7500;

	/* Secondary button */
	--ccm-secondary:      #ffffff;
	--ccm-secondary-hover:#FF7500;

	/* Elevation */
	--ccm-shadow-banner:  0 -2px 16px rgba(0, 0, 0, 0.08);
	--ccm-shadow-modal:   0px 3px 12.7px rgba(0, 0, 0, 0.28);

	/* Radii */
	--ccm-radius:         12px;
	--ccm-radius-sm:      8px;
	--ccm-radius-pill:    100px;

	/* Toggle */
	--ccm-toggle-w:       32px;
	--ccm-toggle-h:       19px;

	/* Z-indexes */
	--ccm-z-banner:       99998;
	--ccm-z-modal:        99999;

	/* Motion */
	--ccm-duration:       200ms;
	--ccm-ease:           cubic-bezier(.4, 0, .2, 1);

	/* Icon (overridden via wp_add_inline_style with content_url()) */
	--ccm-icon-url:       none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Base
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden elements (use `hidden` attribute) */
.ccm-banner[hidden],
.ccm-modal[hidden] {
	display: none !important;
}

/* Prevent scroll when modal is open */
body.ccm-modal-open {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Banner
   ═══════════════════════════════════════════════════════════════════════════ */

.ccm-banner {
	max-width: 600px;
    position: fixed;
    bottom: 22px;
    right: 125px;
    z-index: var(--ccm-z-banner);
    background: var(--ccm-bg);
    border-top: 1px solid var(--ccm-border);
    box-shadow: var(--ccm-shadow-banner);
    padding: 24px;
    font-family: inherit;
    animation: ccm-slide-up var(--ccm-duration) var(--ccm-ease) both;
    border-radius: 16px;
    border: 1px solid var(--e-global-color-secondary);
}

@keyframes ccm-slide-up {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.ccm-banner__inner {
	max-width:    1200px;
	margin:       0 auto;
	display:      flex;
	align-items:  center;
	gap:          16px;
	flex-wrap:    wrap;
}

.ccm-banner__content {
	flex:      1;
	min-width: 260px;
}

.ccm-banner__title {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--ccm-text);
	margin:      0 0 4px;
	line-height: 1.4;
	display: flex;
	align-content: center;
	gap: 8px;
	font-family: 'Poppins', sans-serif;
}
.ccm-banner__title::before {
	content: '';
	width: 23px;
	height: 23px;
	display: block;
	background-image: var(--ccm-icon-url);
	background-size: cover;
}

.ccm-banner__desc {
	font-size:   .875rem;
	color:       var(--ccm-text);
	margin:      0;
	line-height: 1.55;
}

.ccm-banner__actions {
	display:     flex;
	width: 100%;
	gap:         8px;
	flex-wrap:   nowrap;
	align-items: center;
	flex-shrink: 0;
}

.ccm-link {
	color:           var(--ccm-primary);
	text-decoration: underline;
	margin-left:     4px;
	font-size:       inherit;
	font-weight: 600;
}

.ccm-link:hover {
	color: var(--ccm-primary);
}

/* In-banner preferences panel */
.ccm-banner__prefs {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	width:          100%;
	overflow-y:     auto;
	margin-top: 16px;
}

.ccm-banner__prefs[hidden] {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Buttons
   ═══════════════════════════════════════════════════════════════════════════ */

#ccm-banner .ccm-btn,
#ccm-modal .ccm-btn {
	display:         inline-flex;
	width: 100%;
	max-width: 178px;
	align-items:     center;
	justify-content: center;
	border:          1px solid transparent;
	border-radius:   var(--ccm-radius-sm);
	font-family:     'Poppins', sans-serif;
	font-size:       .875rem;
	font-weight:     600;
	line-height:     1.25;
	padding:         8px 30px;
	cursor:          pointer;
	white-space:     nowrap;
	text-decoration: none;
	transition:      background var(--ccm-duration) var(--ccm-ease),
	                 border-color var(--ccm-duration) var(--ccm-ease),
	                 color var(--ccm-duration) var(--ccm-ease),
	                 box-shadow var(--ccm-duration) var(--ccm-ease);
}

#ccm-banner .ccm-btn:focus-visible,
#ccm-modal .ccm-btn:focus-visible {
	outline:        3px solid var(--ccm-primary);
	outline-offset: 2px;
}

/* Primary */
#ccm-banner .ccm-btn--primary,
#ccm-modal .ccm-btn--primary {
	background: var(--ccm-primary);
	color:      var(--ccm-primary-text);
	box-shadow: 4px 4px 10px rgba(254, 166, 113, 0.2);
}

#ccm-banner .ccm-btn--primary:hover,
#ccm-banner .ccm-btn--primary:active,
#ccm-modal .ccm-btn--primary:hover,
#ccm-modal .ccm-btn--primary:active {
	background: var(--ccm-primary);
}

/* Secondary / reject */
#ccm-banner .ccm-btn--secondary,
#ccm-modal .ccm-btn--secondary {
	background: var(--ccm-secondary);
	color:      var(--ccm-primary);
}

#ccm-banner .ccm-btn--secondary:hover,
#ccm-banner .ccm-btn--secondary:active,
#ccm-modal .ccm-btn--secondary:hover,
#ccm-modal .ccm-btn--secondary:active {
	background: var(--ccm-secondary-hover);
	color: var(--ccm-secondary);
	box-shadow: 4px 4px 10px rgba(254, 166, 113, 0.2);
}

/* Outline / customize */
#ccm-banner .ccm-btn--outline,
#ccm-modal .ccm-btn--outline {
	background:   transparent;
	color:        var(--ccm-primary);
	border-color: var(--ccm-border);
}

#ccm-banner .ccm-btn--outline:hover,
#ccm-banner .ccm-btn--outline:active,
#ccm-modal .ccm-btn--outline:hover,
#ccm-modal .ccm-btn--outline:active {
	border-color: var(--ccm-primary);
	color:        var(--ccm-primary-text);
	background: var(--ccm-primary);
	box-shadow: 4px 4px 10px rgba(254, 166, 113, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.ccm-modal {
	position:        fixed;
	inset:           0;
	z-index:         var(--ccm-z-modal);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
}

.ccm-modal__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, .5);
	cursor:     pointer;
	animation:  ccm-fade-in var(--ccm-duration) var(--ccm-ease) both;
}

@keyframes ccm-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ccm-modal__box {
	position:        relative;
	background:      var(--ccm-bg);
	border-radius:   var(--ccm-radius);
	box-shadow:      var(--ccm-shadow-modal);
	width:           100%;
	max-width:       580px;
	max-height:      88vh;
	display:         flex;
	flex-direction:  column;
	overflow:        hidden;
	animation:       ccm-scale-in var(--ccm-duration) var(--ccm-ease) both;
}

@keyframes ccm-scale-in {
	from { transform: scale(.95); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

/* Header */
.ccm-modal__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 24px;
	border-bottom:   1px solid var(--ccm-border);
	flex-shrink:     0;
}

.ccm-modal__header h2 {
	font-size:   1.125rem;
	font-weight: 700;
	color:       var(--ccm-text);
	margin:      0;
}

.ccm-modal__close {
	background:    none;
	border:        none;
	cursor:        pointer;
	font-size:     1.5rem;
	line-height:   1;
	color:         var(--ccm-text-muted);
	padding:       4px 6px;
	border-radius: 4px;
	transition:    color var(--ccm-duration);
}

.ccm-modal__close:hover  { color: var(--ccm-text); }

.ccm-modal__close:focus-visible {
	outline:        3px solid var(--ccm-primary);
	outline-offset: 2px;
}

/* Body */
.ccm-modal__body {
	flex:           1;
	overflow-y:     auto;
	padding:        16px 24px;
	display:        flex;
	flex-direction: column;
	gap:            12px;
	scroll-padding: 8px;
}

/* Footer */
.ccm-modal__footer {
	padding:         16px 24px;
	border-top:      1px solid var(--ccm-border);
	display:         flex;
	justify-content: flex-end;
	gap:             10px;
	flex-shrink:     0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Category + Toggle
   ═══════════════════════════════════════════════════════════════════════════ */

.ccm-category:not(:last-child) {
	border-bottom: 2px solid #FFFFFF;
	padding-bottom: 16px;
}

.ccm-category__header {
	display:     flex;
	align-items: center;
	gap:         12px;
	margin-bottom: 4px;
}

.ccm-category__name {
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--ccm-primary);
	font-family: 'Roboto', sans-serif;
}

.ccm-category__desc {
	font-size:   .75rem;
	color:       var(--ccm-text);
	margin:      0;
	line-height: 1.55;
	font-family: 'Roboto', sans-serif;
}


/* Toggle label wrapper */
.ccm-toggle {
	display:     flex;
	align-items: center;
	cursor:      pointer;
	width: 100%;
	justify-content: space-between;
}

/* Visually-hidden checkbox (remains in tab order) */
.ccm-toggle input[type="checkbox"] {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* Track */
.ccm-toggle__track {
	position:      relative;
	display:       inline-block;
	flex-shrink:   0;
	width:         var(--ccm-toggle-w);
	height:        var(--ccm-toggle-h);
	background:    #5D6977;
	border-radius: var(--ccm-radius-pill);
	transition:    background var(--ccm-duration) var(--ccm-ease);
}

/* Thumb */
.ccm-toggle__track::after {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         calc(var(--ccm-toggle-h) - 6px);
	height:        calc(var(--ccm-toggle-h) - 6px);
	background:    #fff;
	border-radius: 50%;
	box-shadow:    0 1px 3px rgba(0, 0, 0, .2);
	transition:    transform var(--ccm-duration) var(--ccm-ease);
}

/* Checked state */
.ccm-toggle input:checked + .ccm-toggle__track {
	background: var(--ccm-primary);
}

.ccm-toggle input:checked + .ccm-toggle__track::after {
	transform: translateX(calc(var(--ccm-toggle-w) - var(--ccm-toggle-h)));
}

/* Disabled state (necessary cookies) */
.ccm-toggle input:disabled + .ccm-toggle__track {
	cursor:  not-allowed;
}

/* Focus ring for keyboard users */
.ccm-toggle input:focus-visible + .ccm-toggle__track {
	outline:        3px solid var(--ccm-primary);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Necessary Info Popup
   ═══════════════════════════════════════════════════════════════════════════ */

.ccm-necessary-popup[hidden] {
	display: none !important;
}

.ccm-necessary-popup {
	position:        fixed;
	inset:           0;
	z-index:         calc(var(--ccm-z-modal) + 1);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
}

.ccm-necessary-popup__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, .5);
	cursor:     pointer;
	animation:  ccm-fade-in var(--ccm-duration) var(--ccm-ease) both;
}

.ccm-necessary-popup__box {
	position:       relative;
	background:     var(--ccm-primary-text);
	border-radius:  16px;
	box-shadow:     var(--ccm-shadow-modal);
	width:          100%;
	max-width:      520px;
	padding:        30px 30px 24px;
	display:        flex;
	flex-direction: column;
	gap:            5px;
	animation:      ccm-scale-in var(--ccm-duration) var(--ccm-ease) both;
}

.ccm-necessary-popup__title {
	font-size:   2rem;
	font-weight: 700;
	color:       var(--ccm-text);
	margin:      0;
	font-family: 'Poppins', sans-serif;
	text-align: center;
}

.ccm-necessary-popup__divider {
	border:        none;
	border-top:    5px solid var(--ccm-border);
	margin:        0 auto;
	width: 60px;
	text-align: center;
	border-radius: 50px;
}

.ccm-necessary-popup__desc {
	font-size:   .875rem;
	color:       var(--ccm-text);
	margin:      15px 0 19px;
	line-height: 1.55;
	font-family: 'Roboto', sans-serif;
	text-align: center;
}

#ccm-necessary-popup .ccm-necessary-popup__btn {
	margin: 0 auto;
	padding: 12px 30px;
	background: var(--ccm-primary);
	color: var(--ccm-secondary);
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	line-height: 1.5;
	box-shadow: 4px 4px 10px rgba(254, 166, 113, 0.2);
}

/* Make necessary category show a pointer to hint it's clickable */
.ccm-category[data-category="necessary"] {
	cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. Responsive – mobile (≤ 640 px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

	.ccm-banner {
		padding: 24px 16px;
		left: 22px;
		right: 22px;
		bottom: 115px;
	}

	.ccm-banner__inner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            14px;
	}

	#ccm-banner .ccm-btn, #ccm-modal .ccm-btn {
		padding: 8px 6.5px;
	}

	.ccm-modal__box {
		max-height:    92vh;
		border-radius: var(--ccm-radius) var(--ccm-radius) 0 0;
		align-self:    flex-end;
	}

	.ccm-modal {
		align-items: flex-end;
		padding:     0;
	}

	.ccm-modal__header,
	.ccm-modal__body,
	.ccm-modal__footer {
		padding-left:  16px;
		padding-right: 16px;
	}

	.ccm-modal__footer {
		flex-direction: column;
	}

	.ccm-modal__footer .ccm-btn {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	:root {
		--ccm-bg:         #1e293b;
		--ccm-bg-muted:   #0f172a;
		--ccm-text:       #f1f5f9;
		--ccm-text-muted: #94a3b8;
		--ccm-border:     #334155;
	}

	.ccm-toggle__track {
		background: #475569;
	}


}

/* ═══════════════════════════════════════════════════════════════════════════
   10. Reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.ccm-banner,
	.ccm-modal__box,
	.ccm-modal__overlay,
	.ccm-btn,
	.ccm-toggle__track,
	.ccm-toggle__track::after,
	.ccm-modal__close {
		animation:  none !important;
		transition: none !important;
	}
}