/* =WP Cookie Consent — banner + modal styles
 * Variables are set via inline CSS from PHP (accent colour from settings).
 * ─────────────────────────────────────────────────────────────────────── */

:root {
	--wcc-accent:  #0073aa;
	--wcc-bg:      #ffffff;
	--wcc-text:    #333333;
	--wcc-muted:   #666666;
	--wcc-border:  #dddddd;
	--wcc-radius:  6px;
	--wcc-shadow:  0 2px 20px rgba(0, 0, 0, 0.15);
	--wcc-font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =Banner
 * ─────────────────────────────────────────────────────────────────────── */

#wcc-banner {
	position:    fixed;
	z-index:     99999;
	background:  var(--wcc-bg);
	box-shadow:  var(--wcc-shadow);
	padding:     16px 24px;
	font-family: var(--wcc-font);
	font-size:   14px;
	line-height: 1.5;
	color:       var(--wcc-text);
	box-sizing:  border-box;
	transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.25s ease;
}

/* Bottom bar — full width */
#wcc-banner.wcc-bottom-bar {
	bottom:      0;
	left:        0;
	right:       0;
	display:     flex;
	align-items: center;
	gap:         16px;
	flex-wrap:   wrap;
	border-top:  3px solid var(--wcc-accent);
	transform: translateY(100%);
}

/* Bottom-left floating card */
#wcc-banner.wcc-bottom-left {
	bottom:        24px;
	left:          24px;
	max-width:     400px;
	border-radius: var(--wcc-radius);
	border-left:   4px solid var(--wcc-accent);
	transform: translateY(12px); opacity: 0;
}

#wcc-banner.wcc-visible {
	transform: translateY(0);
	opacity:   1;
}

.wcc-banner-text {
	flex:       1;
	min-width:  200px;
	margin:     0;
}

.wcc-banner-text a {
	color: var(--wcc-accent);
}

.wcc-banner-actions {
	display:     flex;
	gap:         8px;
	flex-wrap:   wrap;
	align-items: center;
	margin-top:  0;
}

/* In card mode, stack the text above the buttons */
.wcc-bottom-left .wcc-banner-actions {
	margin-top: 12px;
}

/* =Buttons
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	padding:       8px 18px;
	border-radius: var(--wcc-radius);
	font-family:   var(--wcc-font);
	font-size:     13px;
	font-weight:   600;
	line-height:   1.4;
	cursor:        pointer;
	border:        2px solid var(--wcc-accent);
	white-space:   nowrap;
	transition:    background 0.15s, color 0.15s, filter 0.15s;
	text-decoration: none;
}

.wcc-btn-primary {
	background: var(--wcc-accent);
	color:      #fff;
}

.wcc-btn-primary:hover,
.wcc-btn-primary:focus {
	filter: brightness(1.12);
	color:  #fff;
}

.wcc-btn-secondary {
	background: transparent;
	color:      var(--wcc-accent);
}

.wcc-btn-secondary:hover,
.wcc-btn-secondary:focus {
	background: var(--wcc-accent);
	color:      #fff;
}

.wcc-btn-link {
	border:          none;
	background:      none;
	color:           var(--wcc-muted);
	padding:         8px 2px;
	text-decoration: underline;
	font-size:       13px;
	font-weight:     400;
}

.wcc-btn-link:hover,
.wcc-btn-link:focus {
	color: var(--wcc-accent);
}

/* =Modal overlay
 * ─────────────────────────────────────────────────────────────────────── */

#wcc-modal {
	position:        fixed;
	inset:           0;
	z-index:         100000;
	background:      rgba(0, 0, 0, 0.55);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
	font-family:     var(--wcc-font);
}

.wcc-modal-card {
	background:    var(--wcc-bg);
	border-radius: var(--wcc-radius);
	box-shadow:    var(--wcc-shadow);
	max-width:     560px;
	width:         100%;
	max-height:    90vh;
	overflow-y:    auto;
	padding:       24px;
	box-sizing:    border-box;
}

.wcc-modal-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   16px;
}

.wcc-modal-header h2 {
	font-size:   18px;
	font-weight: 700;
	margin:      0;
	color:       var(--wcc-text);
}

.wcc-modal-close {
	background:  none;
	border:      none;
	font-size:   26px;
	line-height: 1;
	cursor:      pointer;
	color:       var(--wcc-muted);
	padding:     0 4px;
	transition:  color 0.15s;
}

.wcc-modal-close:hover { color: var(--wcc-text); }

/* =Category rows
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-category {
	border:        1px solid var(--wcc-border);
	border-radius: var(--wcc-radius);
	padding:       12px 16px;
	margin-bottom: 8px;
}

.wcc-category-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   4px;
}

.wcc-category-label {
	font-weight: 600;
	font-size:   14px;
	color:       var(--wcc-text);
}

.wcc-category-desc {
	font-size: 13px;
	color:     var(--wcc-muted);
	margin:    0;
}

/* =Toggle switch
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-toggle {
	position:       relative;
	display:        inline-block;
	width:          46px;
	height:         26px;
	flex-shrink:    0;
}

.wcc-toggle input {
	opacity: 0;
	width:   0;
	height:  0;
}

.wcc-toggle-slider {
	position:      absolute;
	inset:         0;
	background:    #ccc;
	border-radius: 26px;
	cursor:        pointer;
	transition:    background 0.2s;
}

.wcc-toggle-slider::before {
	content:       '';
	position:      absolute;
	width:         20px;
	height:        20px;
	left:          3px;
	top:           3px;
	background:    #fff;
	border-radius: 50%;
	transition:    transform 0.2s;
	box-shadow:    0 1px 3px rgba(0,0,0,.25);
}

.wcc-toggle input:checked + .wcc-toggle-slider {
	background: var(--wcc-accent);
}

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

.wcc-toggle input:disabled + .wcc-toggle-slider {
	opacity: 0.55;
	cursor:  not-allowed;
}

.wcc-toggle input:focus-visible + .wcc-toggle-slider {
	outline: 2px solid var(--wcc-accent);
	outline-offset: 2px;
}

/* =Modal footer
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-modal-footer {
	display:         flex;
	gap:             8px;
	justify-content: flex-end;
	margin-top:      20px;
	flex-wrap:       wrap;
}

/* =Footer link
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-footer-link {
	font-size:       12px;
	color:           var(--wcc-muted);
	text-decoration: underline;
}

.wcc-footer-link:hover { color: var(--wcc-accent); }

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

@media ( max-width: 480px ) {
	#wcc-banner.wcc-bottom-left {
		left:      12px;
		right:     12px;
		max-width: none;
		bottom:    12px;
	}

	.wcc-modal-card { padding: 16px; }

	.wcc-modal-footer { justify-content: stretch; }
	.wcc-modal-footer .wcc-btn { flex: 1; justify-content: center; }
}

/* =Iframe / embed placeholders
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-iframe-placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f4f4f4;
	border:          2px dashed var(--wcc-border);
	border-radius:   var(--wcc-radius);
	box-sizing:      border-box;
	font-family:     var(--wcc-font);
	width:           100%;
	min-height:      315px;
}

.wcc-placeholder-inner {
	text-align: center;
	padding:    24px 20px;
	max-width:  340px;
}

.wcc-placeholder-icon {
	display:     block;
	font-size:   36px;
	line-height: 1;
	color:       #bbb;
	margin-bottom: 12px;
}

.wcc-placeholder-service {
	font-size:   16px;
	font-weight: 700;
	color:       var(--wcc-text);
	margin:      0 0 6px;
}

.wcc-placeholder-desc {
	font-size: 13px;
	color:     var(--wcc-muted);
	margin:    0 0 16px;
}

.wcc-placeholder-desc strong {
	color: var(--wcc-text);
}

.wcc-placeholder-inner .wcc-btn-link {
	display:    block;
	margin-top: 8px;
}

/* =Cookie declaration table
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-cookie-table {
	width:           100%;
	border-collapse: collapse;
	font-family:     var(--wcc-font);
	font-size:       14px;
	margin:          1em 0;
}

.wcc-cookie-table th,
.wcc-cookie-table td {
	padding:    8px 12px;
	text-align: left;
	border:     1px solid var(--wcc-border);
}

.wcc-cookie-table th {
	background:  #f9f9f9;
	font-weight: 600;
	color:       var(--wcc-text);
}

.wcc-cookie-table tr:nth-child(even) td {
	background: #fafafa;
}

@media ( max-width: 600px ) {
	.wcc-cookie-table { font-size: 12px; }
	.wcc-cookie-table th,
	.wcc-cookie-table td { padding: 6px 8px; }
}

/* =Cookie table headings (grouped view)
 * ─────────────────────────────────────────────────────────────────────── */

.wcc-cookie-table-heading {
	font-size:     15px;
	font-weight:   700;
	margin:        1.4em 0 0.4em;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--wcc-accent);
	color:         var(--wcc-text);
}

.wcc-cookie-table-heading:first-child { margin-top: 0; }

/* =Dark mode
 * ─────────────────────────────────────────────────────────────────────── */

@media ( prefers-color-scheme: dark ) {
	:root {
		--wcc-bg:     #1e1e1e;
		--wcc-text:   #e8e8e8;
		--wcc-muted:  #a0a0a0;
		--wcc-border: #444444;
	}

	#wcc-banner {
		border-color: var(--wcc-accent);
	}

	.wcc-modal-close { color: var(--wcc-muted); }
	.wcc-modal-close:hover { color: var(--wcc-text); }

	.wcc-iframe-placeholder { background: #2a2a2a; }

	.wcc-cookie-table th                      { background: #2a2a2a; }
	.wcc-cookie-table tr:nth-child(even) td   { background: #252525; }

	.wcc-btn-secondary {
		color:           var(--wcc-text);
		border-color:    var(--wcc-accent);
	}
}