/**
 * Suba Cookie Consent — Banner Styles
 *
 * Design goals: minimal, modern, accessible, <3 KB.
 * Uses CSS custom properties for easy brand overrides.
 *
 * @package Suba_Cookie_Consent
 */

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
	--suba-cc-bg:           #111111;
	--suba-cc-fg:           #f5f5f5;
	--suba-cc-muted:        #888888;
	--suba-cc-accent:       #f9d308;      /* Suba-Arch gold */
	--suba-cc-accent-dark:  #d4b100;
	--suba-cc-border:       rgba(255, 255, 255, 0.1);
	--suba-cc-radius:       14px;
	--suba-cc-shadow:       0 8px 32px rgba(0, 0, 0, 0.45);
	--suba-cc-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--suba-cc-z:            999999;
}

/* ── Utility ────────────────────────────────────────────────────────────────── */
.suba-cc--hidden  { display: none !important; }
.suba-cc--visible { display: block !important; }

/* ── Banner ─────────────────────────────────────────────────────────────────── */
#suba-cc-banner {
	position:         fixed;
	bottom:           24px;
	left:             50%;
	transform:        translateX(-50%);
	z-index:          var(--suba-cc-z);
	width:            calc(100% - 48px);
	max-width:        680px;

	display:          flex;
	align-items:      center;
	flex-wrap:        wrap;
	gap:              16px;

	background:       var(--suba-cc-bg);
	border:           1px solid var(--suba-cc-border);
	border-radius:    var(--suba-cc-radius);
	box-shadow:       var(--suba-cc-shadow);
	padding:          20px 24px;

	font-family:      var(--suba-cc-font);
	font-size:        14px;
	color:            var(--suba-cc-fg);
	line-height:      1.55;

	/* Animate in */
	animation:        suba-cc-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes suba-cc-slide-up {
	from { opacity: 0; transform: translateX(-50%) translateY(20px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.suba-cc__message {
	flex: 1 1 260px;
	margin: 0;
	color: #cccccc;
	font-size: 13px;
	line-height: 1.6;
}

.suba-cc__actions {
	display:     flex;
	gap:         8px;
	flex-wrap:   wrap;
	flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.suba-cc__btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         9px 20px;
	border-radius:   980px;
	border:          1px solid transparent;
	font-family:     var(--suba-cc-font);
	font-size:       13px;
	font-weight:     600;
	line-height:     1;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      background 0.2s, border-color 0.2s, opacity 0.2s;
}

.suba-cc__btn:focus-visible {
	outline:        2px solid var(--suba-cc-accent);
	outline-offset: 2px;
}

/* Accept */
.suba-cc__btn--accept {
	background:    var(--suba-cc-accent);
	border-color:  var(--suba-cc-accent);
	color:         #000000;
}
.suba-cc__btn--accept:hover {
	background:   var(--suba-cc-accent-dark);
	border-color: var(--suba-cc-accent-dark);
}

/* Reject */
.suba-cc__btn--reject {
	background:    transparent;
	border-color:  var(--suba-cc-border);
	color:         var(--suba-cc-muted);
}
.suba-cc__btn--reject:hover {
	background:   rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.2);
	color:        var(--suba-cc-fg);
}

/* Preferences (ghost/text style) */
.suba-cc__btn--prefs {
	background:   transparent;
	border-color: transparent;
	color:        var(--suba-cc-muted);
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.suba-cc__btn--prefs:hover { color: var(--suba-cc-fg); }

/* ── Preferences Panel (modal overlay) ─────────────────────────────────────── */
#suba-cc-prefs {
	position:   fixed;
	inset:      0;
	z-index:    calc(var(--suba-cc-z) + 1);
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);

	display:         none;   /* toggled by JS */
	align-items:     center;
	justify-content: center;
}

#suba-cc-prefs.suba-cc--visible {
	display: flex;
}

.suba-cc-prefs__inner {
	position:     relative;
	background:   var(--suba-cc-bg);
	border:       1px solid var(--suba-cc-border);
	border-radius: calc(var(--suba-cc-radius) + 4px);
	box-shadow:   var(--suba-cc-shadow);
	padding:      36px 32px 28px;
	width:        100%;
	max-width:    460px;
	margin:       16px;

	font-family:  var(--suba-cc-font);
	color:        var(--suba-cc-fg);

	animation: suba-cc-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes suba-cc-scale-in {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

.suba-cc-prefs__title {
	font-size:     18px;
	font-weight:   700;
	margin:        0 0 20px;
	letter-spacing: -0.01em;
}

/* Close (✕) button */
.suba-cc-prefs__close {
	position:    absolute;
	top:         14px;
	right:       14px;
	width:       30px;
	height:      30px;
	padding:     0;
	border-radius: 50%;
	font-size:   14px;
}

/* Row */
.suba-cc-prefs__row {
	border-bottom: 1px solid var(--suba-cc-border);
	padding:       16px 0;
}
.suba-cc-prefs__row:last-of-type { border-bottom: none; }

.suba-cc-prefs__label {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
	cursor:      pointer;
}

/* Custom checkbox that becomes a toggle */
.suba-cc-prefs__checkbox {
	-webkit-appearance: none;
	appearance:         none;
	position:           relative;
	width:              40px;
	height:             22px;
	background:         #333;
	border-radius:      22px;
	flex-shrink:        0;
	margin-top:         1px;
	cursor:             pointer;
	transition:         background 0.2s;
}
.suba-cc-prefs__checkbox::after {
	content:    '';
	position:   absolute;
	top:        3px;
	left:       3px;
	width:      16px;
	height:     16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
}
.suba-cc-prefs__checkbox:checked {
	background: var(--suba-cc-accent);
}
.suba-cc-prefs__checkbox:checked::after {
	transform: translateX(18px);
}
.suba-cc-prefs__checkbox:focus-visible {
	outline:        2px solid var(--suba-cc-accent);
	outline-offset: 2px;
}

.suba-cc-prefs__label strong {
	display:     block;
	font-size:   14px;
	font-weight: 600;
	margin-bottom: 3px;
	color:       var(--suba-cc-fg);
}

.suba-cc-prefs__desc {
	display:   block;
	font-size: 12px;
	color:     var(--suba-cc-muted);
	line-height: 1.5;
}

/* Save button inside prefs panel */
.suba-cc-prefs__inner .suba-cc__btn--accept {
	width:      100%;
	margin-top: 20px;
	padding:    12px 20px;
	font-size:  14px;
}

/* ── Floating Manage Button ─────────────────────────────────────────────────── */
#suba-cc-manage-btn {
	position:      fixed !important;
	bottom:        20px !important;
	left:          20px !important;
	right:         auto !important;
	z-index:       var(--suba-cc-z);

	background:    var(--suba-cc-bg);
	border:        1px solid var(--suba-cc-border);
	border-radius: 980px;
	box-shadow:    var(--suba-cc-shadow);

	padding:       10px 18px;
	font-family:   var(--suba-cc-font);
	font-size:     12px;
	font-weight:   600;
	color:         var(--suba-cc-fg);
	cursor:        pointer;
	white-space:   nowrap;

	transition:    background 0.2s, border-color 0.2s;
}

#suba-cc-manage-btn:hover {
	background:   rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
}

#suba-cc-manage-btn:focus-visible {
	outline:        2px solid var(--suba-cc-accent);
	outline-offset: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	#suba-cc-banner {
		bottom:  0;
		left:    0;
		right:   0;
		width:   100%;
		transform: none;
		border-radius: var(--suba-cc-radius) var(--suba-cc-radius) 0 0;
		border-bottom: none;
		padding: 16px;
	}

	@keyframes suba-cc-slide-up {
		from { opacity: 0; transform: translateY(20px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	.suba-cc__actions {
		width: 100%;
	}

	.suba-cc__btn--accept,
	.suba-cc__btn--reject {
		flex: 1;
		text-align: center;
	}

	#suba-cc-manage-btn {
		bottom: 16px;
		left:   16px;
		right:  auto;
		font-size: 11px;
		padding: 8px 14px;
	}
}

@media ( max-width: 360px ) {
	#suba-cc-manage-btn {
		bottom: 12px;
		left:   12px;
		font-size: 10px;
		padding: 7px 12px;
	}
}