/* ==========================================================================
   PowrUp Cookie — Component stylesheet  (assets/css/public.css)
   Design: Clean consent box — light background, dark text, 3-button row
   
   SINGLE SOURCE OF TRUTH — loaded on frontend AND admin preview.
   Preview wraps in .puc-isolated to cancel WP-admin CSS bleed.
   ========================================================================== */

/* ══════════════════════════════════════════════
   DESIGN TOKENS
   Frontend: overridden by PHP <style> :root{}
   Preview:  overridden via JS .setProperty()
══════════════════════════════════════════════ */
:root {
	--puc-bg:                   #ffffff;
	--puc-text:                 #111111;
	--puc-btn-primary-bg:       #2563eb;
	--puc-btn-primary-text:     #ffffff;
	--puc-btn-secondary-bg:     #ffffff;
	--puc-btn-secondary-text:   #2563eb;
	--puc-radius:               6px;
	--puc-toggle-on:            #2563eb;
	--puc-toggle-off:           #d1d5db;
	--puc-toggle-knob:          #ffffff;
	--puc-modal-bg:             #ffffff;
	--puc-modal-text:           #111111;
	--puc-border:               #e5e7eb;
	--puc-banner-border:        #e5e7eb;
	--puc-z:                    99999;
	--puc-shadow:               0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════
   ISOLATION WRAPPER  (preview only)
   Cancels WP-admin body font, p margins,
   h2 sizes, button styles before our CSS runs.
══════════════════════════════════════════════ */
.puc-isolated,
.puc-isolated * { box-sizing: border-box; }
.puc-isolated {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	font-size:   15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.puc-isolated p      { margin: 0; padding: 0; }
.puc-isolated h2     { margin: 0; padding: 0; font-size: 20px; line-height: 1.2; font-weight: 700; }
.puc-isolated button {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	font-size: inherit; line-height: inherit;
}

/* Box-sizing reset for frontend (no .puc-isolated there) */
.puc-banner *, .puc-banner *::before, .puc-banner *::after,
.puc-modal  *, .puc-modal  *::before, .puc-modal  *::after {
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════
   BANNER — compact consent box
══════════════════════════════════════════════ */
.puc-banner {
	position:    fixed;
	z-index:     var(--puc-z);
	background:  var(--puc-bg);
	color:       var(--puc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	font-size:   15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	border:      1px solid var(--puc-banner-border);
	box-shadow:  var(--puc-shadow);
	overflow:    hidden;
	animation:   pucBannerIn .3s ease both;
}
@keyframes pucBannerIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Position variants ──
   Default is bottom-center: compact box, not full-width.
   bottom-bar is the only truly full-width option.         */
.puc-pos-bottom-bar {
	left: 0; right: 0; bottom: 0;
	width: 100%;
	border-radius: 0;
	border-left: none; border-right: none; border-bottom: none;
}
.puc-pos-top-bar {
	left: 0; right: 0; top: 0;
	width: 100%;
	border-radius: 0;
	border-left: none; border-right: none; border-top: none;
}
/* All compact positions: fixed width, not full-width */
.puc-pos-center-modal {
	/* True center: horizontally AND vertically centred */
	top:         50%;
	left:        0;
	right:       0;
	bottom:      auto;
	transform:   translateY(-50%);
	margin-left: auto;
	margin-right: auto;
	width:       calc(100% - 48px);
	max-width:   680px;
	border-radius: calc(var(--puc-radius) + 2px);
}
.puc-pos-bottom-left {
	bottom: 24px; left: 24px;
	width: calc(100% - 48px);
	max-width: 520px;
	border-radius: calc(var(--puc-radius) + 2px);
}
.puc-pos-bottom-right {
	bottom: 24px; right: 24px;
	width: calc(100% - 48px);
	max-width: 520px;
	border-radius: calc(var(--puc-radius) + 2px);
}

/* ── Banner inner: vertical stack ──
   Title → Description → Buttons, all full-width of the box */
.puc-banner__inner {
	display:        flex;
	flex-direction: column;
	padding:        24px 24px 20px;
	gap:            0;
}

/* Content block */
.puc-banner__content {
	margin-bottom: 16px;
}
.puc-banner__title {
	display:     block;
	font-size:   20px;
	font-weight: 700;
	line-height: 1.2;
	margin:      0 0 12px;
	color:       var(--puc-text);
	letter-spacing: -.01em;
}
.puc-banner__desc {
	font-size:   15px;
	line-height: 1.6;
	color:       var(--puc-text);
	opacity:     .85;
	margin:      0;
	padding:     0;
}

/* Policy link — subtle, under description */
.puc-policy-link-wrap { display: block; margin-top: 8px; }
.puc-policy-link-wrap a {
	font-size:       13px;
	color:           var(--puc-btn-primary-bg);
	opacity:         .8;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.puc-policy-link-wrap a:hover { opacity: 1; }

/* ══════════════════════════════════════════════
   BANNER ACTION BUTTONS
   
   3 equal buttons on one row:
   [ Customize ]  [ Reject All ]  [ Accept All ]
   
   All same height, evenly distributed.
══════════════════════════════════════════════ */
.puc-banner__actions {
	display:   flex;
	flex-wrap: nowrap;
	gap:       10px;
	width:     100%;
}
/* All 3 buttons get equal flex share */
.puc-banner__actions .puc-btn {
	flex: 1 1 0;
	min-width: 0;
}

/* ══════════════════════════════════════════════
   BUTTONS — clean, balanced
══════════════════════════════════════════════ */
.puc-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	border:          1px solid transparent;
	border-radius:   var(--puc-radius);
	padding:         11px 16px;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                 "Helvetica Neue", Arial, sans-serif;
	font-size:       14px;
	font-weight:     600;
	line-height:     1.2;
	white-space:     nowrap;
	min-width:       0;
	text-decoration: none;
	background:      transparent;
	transition:      background .15s ease, opacity .15s ease, border-color .15s ease;
	-webkit-font-smoothing: antialiased;
}
.puc-btn:hover  { opacity: .85; }
.puc-btn:active { opacity: .7; }
.puc-btn:focus-visible { outline: 2px solid var(--puc-btn-primary-bg); outline-offset: 2px; }

/* Primary — solid fill (Accept All) */
.puc-btn--primary {
	background:   var(--puc-btn-primary-bg);
	color:        var(--puc-btn-primary-text);
	border-color: var(--puc-btn-primary-bg);
}
.puc-btn--primary:hover {
	opacity: .88;
}

/* Secondary — outlined (Customize / Manage settings) */
.puc-btn--secondary {
	background:   var(--puc-btn-secondary-bg);
	color:        var(--puc-btn-secondary-text);
	border-color: var(--puc-btn-secondary-text);
}
.puc-btn--secondary:hover {
	background: color-mix(in srgb, var(--puc-btn-secondary-text) 8%, transparent);
	opacity: 1;
}

/* Ghost — outlined with border color (Decline / Reject All) */
.puc-btn--ghost {
	background:   var(--puc-btn-secondary-bg);
	color:        var(--puc-btn-secondary-text);
	border-color: var(--puc-btn-secondary-text);
	opacity:      1;
}
.puc-btn--ghost:hover {
	background: color-mix(in srgb, var(--puc-btn-secondary-text) 8%, transparent);
	opacity: 1;
}

/* Ghost inside modal: uses modal text colour */
.puc-modal .puc-btn--ghost,
.puc-modal__footer .puc-btn--ghost {
	color:        var(--puc-modal-text);
	border-color: var(--puc-border);
	background:   transparent;
}
.puc-modal .puc-btn--ghost:hover,
.puc-modal__footer .puc-btn--ghost:hover {
	background: #f5f5f5;
}

/* Shortcode reopen button */
.puc-reopen-btn {
	display:       inline-flex;
	align-items:   center;
	cursor:        pointer;
	background:    var(--puc-btn-primary-bg);
	color:         var(--puc-btn-primary-text);
	border:        none;
	border-radius: var(--puc-radius);
	padding:       10px 20px;
	font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	               "Helvetica Neue", Arial, sans-serif;
	font-size:     14px;
	font-weight:   600;
	transition:    opacity .15s;
}
.puc-reopen-btn:hover { opacity: .85; }

/* ══════════════════════════════════════════════
   BACKDROP
══════════════════════════════════════════════ */
#puc-backdrop {
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,.6);
	z-index:    calc(var(--puc-z) - 1);
	animation:  pucFadeIn .2s ease;
}
@keyframes pucFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ══════════════════════════════════════════════
   MODAL — centered panel, white, clean
══════════════════════════════════════════════ */
.puc-modal {
	position:        fixed;
	inset:           0;
	z-index:         calc(var(--puc-z) + 1);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                 "Helvetica Neue", Arial, sans-serif;
	font-size:       15px;
	-webkit-font-smoothing: antialiased;
}

/* Modal box */
.puc-modal__box {
	background:     var(--puc-modal-bg);
	color:          var(--puc-modal-text);
	border-radius:  calc(var(--puc-radius) + 4px);
	box-shadow:     0 20px 60px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.08);
	width:          100%;
	max-width:      520px;
	max-height:     90vh;
	overflow-y:     auto;
	display:        flex;
	flex-direction: column;
	font-size:      15px;
	animation:      pucModalIn .25s ease both;
}
@keyframes pucModalIn {
	from { opacity: 0; transform: scale(.97) translateY(8px); }
	to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Modal header */
.puc-modal__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	padding:         24px 24px 16px;
	border-bottom:   1px solid var(--puc-border);
}
.puc-modal__header h2 {
	margin:      0; padding: 0;
	font-size:   20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color:       var(--puc-modal-text);
}

/* Close button */
.puc-modal__close {
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           32px; height: 32px;
	background:      transparent;
	color:           #6b7280;
	border:          1px solid var(--puc-border);
	border-radius:   calc(var(--puc-radius) - 1px);
	font-size:       16px;
	line-height:     1;
	cursor:          pointer;
	padding:         0;
	transition:      background .15s, color .15s;
}
.puc-modal__close:hover { background: #f3f4f6; color: #111111; }

/* Modal body */
.puc-modal__body { padding: 8px 24px; flex: 1 1 auto; }

/* Modal footer */
.puc-modal__footer {
	padding:     20px 24px 24px;
	border-top:  1px solid var(--puc-border);
	display:     flex;
	flex-wrap:   wrap;
	gap:         10px;
	align-items: center;
}
.puc-modal__footer .puc-btn {
	padding: 11px 20px;
	font-size: 14px;
}
.puc-modal__footer .puc-btn--primary {
	background:   var(--puc-btn-primary-bg);
	color:        var(--puc-btn-primary-text);
	border-color: var(--puc-btn-primary-bg);
}
.puc-modal__footer .puc-btn--ghost {
	background:   transparent;
	color:        var(--puc-modal-text);
	border:       1px solid var(--puc-border);
	opacity:      1;
}
.puc-modal__footer .puc-btn--ghost:hover { background: #f3f4f6; }

/* Category rows */
.puc-category {
	border-bottom: 1px solid var(--puc-border);
	padding:       18px 0;
}
.puc-category:last-child { border-bottom: none; }
.puc-category__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
}
.puc-category__info { flex: 1 1 0; min-width: 0; }
.puc-category__info strong {
	font-size:   14px;
	font-weight: 600;
	display:     block;
	margin:      0 0 4px; padding: 0;
	color:       var(--puc-modal-text);
	line-height: 1.3;
}
.puc-category__info p {
	margin: 0; padding: 0;
	font-size:   13px;
	line-height: 1.5;
	color:       #6b7280;
}

/* ══════════════════════════════════════════════
   TOGGLE SWITCH
══════════════════════════════════════════════ */
.puc-toggle {
	display: flex; flex-direction: column; align-items: center;
	gap: 4px; flex-shrink: 0;
}
.puc-toggle input[type="checkbox"] {
	position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.puc-toggle label        { cursor: pointer; display: inline-flex; }
.puc-toggle--disabled label { cursor: default; opacity: .45; pointer-events: none; }

.puc-toggle__track {
	display: block; width: 42px; height: 24px;
	background: var(--puc-toggle-off);
	border-radius: 12px; position: relative;
	transition: background .2s; flex-shrink: 0;
}
.puc-toggle__track::after {
	content: ''; position: absolute;
	top: 3px; left: 3px; width: 18px; height: 18px;
	background: var(--puc-toggle-knob);
	border-radius: 50%; transition: transform .2s;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.puc-toggle input:checked + label .puc-toggle__track  { background: var(--puc-toggle-on); }
.puc-toggle input:checked + label .puc-toggle__track::after { transform: translateX(18px); }
.puc-toggle__label {
	font-size: 10px; font-weight: 500;
	color: #9ca3af; text-align: center; margin-top: 2px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 600px) {
	/* Compact positions become full-width at bottom on small screens */
	.puc-pos-bottom-left,
	.puc-pos-bottom-right,
	.puc-pos-center-modal {
		left: 0 !important; right: 0 !important; bottom: 0 !important;
		top: auto !important; transform: none !important;
		margin-left: 0 !important; margin-right: 0 !important;
		width: 100% !important; max-width: none !important;
		border-radius: 0 !important;
		border-left: none !important; border-right: none !important; border-bottom: none !important;
	}
	/* Stack buttons vertically on very small screens */
	.puc-banner__actions {
		flex-wrap: wrap;
	}
	.puc-banner__actions .puc-btn {
		flex: 1 1 calc(50% - 5px);
	}
	.puc-banner__actions .puc-btn--primary {
		flex: 1 1 100%;
		order: -1; /* Accept All first on mobile */
	}
}
@media (max-width: 380px) {
	.puc-banner__actions .puc-btn {
		flex: 1 1 100%;
	}
}