/* =========================================================
   PaidHR CMP – Frontend Styles
   Design: CKY-inspired, PaidHR edition
   ========================================================= */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
	--cmp-primary:     #3B35D0;
	--cmp-primary-h:   #2F2BAA;
	--cmp-bg:          #ffffff;
	--cmp-text:        #0f172a;
	--cmp-text-soft:   #475569;
	--cmp-text-muted:  #64748b;
	--cmp-border:      rgba(229, 231, 235, 0.8);
	--cmp-border-soft: #e2e8f0;
	--cmp-radius-sm:   9px;
	--cmp-radius:      16px;
	--cmp-radius-lg:   20px;
	--cmp-shadow:      0 25px 60px -15px rgba(15, 23, 42, .25), 0 6px 18px -6px rgba(15, 23, 42, .1);
	--cmp-shadow-lg:   0 30px 80px -20px rgba(15, 23, 42, .25), 0 8px 24px -8px rgba(15, 23, 42, .12);
	--cmp-overlay-bg:  rgba(10, 10, 30, .55);
	--cmp-z:           99999;
	--cmp-speed:       .32s;
	--cmp-ease:        cubic-bezier(.16, 1, .3, 1);
}

/* ── Shared Reset ────────────────────────────────────────────────────────── */
#cmp-banner, #cmp-modal, #cmp-modal-overlay, #cmp-floating-btn,
#cmp-banner *, #cmp-modal *, #cmp-floating-btn * {
	box-sizing:  border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* =========================================================
   BANNER
   ========================================================= */

#cmp-banner {
	position:   fixed;
	z-index:    var(--cmp-z);
	opacity:    0;
	transition: opacity var(--cmp-speed) var(--cmp-ease),
	            transform var(--cmp-speed) var(--cmp-ease);
}

/* Position variants */
#cmp-banner.cmp-pos-bottom-left {
	left:      20px;
	bottom:    20px;
	max-width: 460px;
	width:     calc(100% - 40px);
	transform: translateY(20px) scale(0.97);
}
#cmp-banner.cmp-pos-bottom-right {
	right:     20px;
	bottom:    20px;
	max-width: 460px;
	width:     calc(100% - 40px);
	transform: translateY(20px) scale(0.97);
}
#cmp-banner.cmp-pos-center {
	top:        50%;
	left:       50%;
	transform:  translate(-50%, -48%) scale(0.97);
	max-width:  480px;
	width:      calc(100% - 40px);
}
#cmp-banner.cmp-pos-bottom-bar,
#cmp-banner.cmp-pos-top-bar {
	left:      0;
	right:     0;
	width:     100%;
	max-width: none;
	transform: translateY(20px);
}
#cmp-banner.cmp-pos-top-bar { top: 0; bottom: auto; }
#cmp-banner.cmp-pos-bottom-bar { bottom: 0; }

/* Visible state */
#cmp-banner.cmp-visible {
	opacity:   1;
	transform: translateY(0) scale(1) !important;
}
#cmp-banner.cmp-pos-center.cmp-visible {
	transform: translate(-50%, -50%) scale(1) !important;
}

/* Banner card */
.cmp-banner-bar {
	background:    var(--cmp-bg);
	border:        1px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	padding:       20px 22px;
	box-shadow:    var(--cmp-shadow);
	color:         var(--cmp-text);
	font-size:     14px;
	position:      relative;
	overflow:      hidden;
}

/* Blue accent stripe */
.cmp-banner-bar::before {
	content:    "";
	position:   absolute;
	top:        0;
	left:       0;
	right:      0;
	height:     3px;
	background: linear-gradient(90deg, var(--cmp-primary) 0%, #60a5fa 50%, var(--cmp-primary) 100%);
}

/* Full-width bar adjustment */
#cmp-banner.cmp-pos-bottom-bar .cmp-banner-bar,
#cmp-banner.cmp-pos-top-bar .cmp-banner-bar {
	border-radius: 0;
	max-width:     900px;
	margin:        0 auto;
	box-shadow:    none;
	border-left:   none;
	border-right:  none;
}
#cmp-banner.cmp-pos-top-bar .cmp-banner-bar::before { top: auto; bottom: 0; }

.cmp-notice {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

/* Title */
.cmp-banner-title {
	font-size:      16px;
	font-weight:    700;
	color:          #0f172a;
	letter-spacing: -0.02em;
	margin:         0;
	line-height:    1.3;
	display:        flex;
	align-items:    center;
	gap:            10px;
}
.cmp-banner-title::before {
	content:       "";
	width:         22px;
	height:        22px;
	min-width:     22px;
	background:    linear-gradient(135deg, var(--cmp-primary) 0%, #60a5fa 100%);
	border-radius: 50%;
	box-shadow:    0 2px 6px rgba(59, 53, 208, .25);
}

.cmp-notice-group {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

/* Description */
.cmp-banner-desc {
	color:     var(--cmp-text-soft);
	font-size: 13px;
	line-height: 1.6;
}
.cmp-banner-desc p { margin: 0; }

.cmp-policy {
	color:           var(--cmp-primary);
	font-weight:     600;
	text-decoration: none;
	border-bottom:   1px solid transparent;
	transition:      border-color .2s;
}
.cmp-policy:hover { border-bottom-color: var(--cmp-primary); }

/* Countdown */
.cmp-banner-countdown {
	font-size:  12px;
	color:      var(--cmp-text-muted);
	margin:     0;
}

/* Button row */
.cmp-banner-actions {
	display:   flex;
	gap:       8px;
	flex-wrap: wrap;
}

/* ── Buttons (shared) ──────────────────────────────────────────────────── */
.cmp-btn {
	padding:        9px 16px;
	border-radius:  var(--cmp-radius-sm);
	font-size:      13px;
	font-weight:    600;
	cursor:         pointer;
	transition:     all .2s ease;
	letter-spacing: -0.005em;
	flex:           1;
	min-width:      90px;
	text-align:     center;
	font-family:    inherit;
	border:         1.5px solid;
	line-height:    1.4;
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
}

/* Customize / Reject All — outline with primary color */
.cmp-btn-customize,
.cmp-btn-reject {
	color:      var(--cmp-primary);
	border-color: var(--cmp-primary);
	background: transparent;
}
.cmp-btn-customize:hover,
.cmp-btn-reject:hover {
	background: color-mix(in srgb, var(--cmp-primary) 8%, transparent);
}

/* Accept All — filled primary */
.cmp-btn-accept {
	color:        #fff;
	border-color: var(--cmp-primary);
	background:   var(--cmp-primary);
	box-shadow:   0 1px 3px rgba(59, 53, 208, .2);
}
.cmp-btn-accept:hover {
	background:  var(--cmp-primary-h);
	border-color: var(--cmp-primary-h);
	box-shadow:  0 4px 12px rgba(59, 53, 208, .3);
	transform:   translateY(-1px);
}
.cmp-btn-accept:active { transform: translateY(0); }

/* Save Preferences (modal only) — outline with primary color */
.cmp-btn-preferences {
	color:        var(--cmp-primary);
	border-color: var(--cmp-primary);
	background:   transparent;
}
.cmp-btn-preferences:hover {
	background: color-mix(in srgb, var(--cmp-primary) 8%, transparent);
}

/* =========================================================
   MODAL OVERLAY
   ========================================================= */

#cmp-modal-overlay {
	position:   fixed;
	inset:      0;
	background: var(--cmp-overlay-bg);
	z-index:    calc(var(--cmp-z) + 1);
	opacity:    0;
	transition: opacity .3s ease;
}
#cmp-modal-overlay.cmp-visible { opacity: 1; }

/* =========================================================
   MODAL
   ========================================================= */

#cmp-modal {
	position:       fixed;
	top:            50%;
	left:           50%;
	transform:      translate(-50%, -46%) scale(0.98);
	width:          calc(100% - 48px);
	max-width:      720px;
	max-height:     calc(100vh - 48px);
	z-index:        calc(var(--cmp-z) + 2);
	background:     var(--cmp-bg);
	border:         1px solid var(--cmp-border);
	border-radius:  var(--cmp-radius-lg);
	box-shadow:     var(--cmp-shadow-lg);
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	opacity:        0;
	transition:     opacity .3s ease, transform .35s var(--cmp-ease);
	color:          var(--cmp-text);
	font-size:      14px;
}
#cmp-modal.cmp-visible {
	opacity:   1;
	transform: translate(-50%, -50%) scale(1);
}

/* ── Modal Header ─────────────────────────────────────────────────────── */
.cmp-modal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         22px 28px;
	border-bottom:   1px solid #f1f5f9;
	background:      linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	flex-shrink:     0;
}

.cmp-modal-title {
	font-size:      19px;
	font-weight:    700;
	color:          #0f172a;
	letter-spacing: -0.02em;
	line-height:    1.3;
	margin:         0;
}

.cmp-close-btn {
	background:      #f1f5f9;
	border:          none;
	border-radius:   50%;
	width:           36px;
	height:          36px;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	transition:      all .2s ease;
	padding:         0;
	flex-shrink:     0;
	color:           #475569;
}
.cmp-close-btn:hover {
	background: #e2e8f0;
	transform:  rotate(90deg);
}

/* ── Modal Body (scrollable) ─────────────────────────────────────────── */
.cmp-modal-body {
	padding:     8px 28px 20px;
	overflow-y:  auto;
	flex:        1;
	scrollbar-width:  thin;
	scrollbar-color:  #cbd5e1 transparent;
}
.cmp-modal-body::-webkit-scrollbar { width: 6px; }
.cmp-modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.cmp-modal-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Intro Text ──────────────────────────────────────────────────────── */
.cmp-modal-intro {
	color:       var(--cmp-text-soft);
	font-size:   14px;
	line-height: 1.65;
	padding:     16px 0 8px;
}
.cmp-modal-intro p { margin: 0 0 10px; }
.cmp-modal-intro p:last-of-type { margin-bottom: 0; }

/* Show more / Show less */
.cmp-intro-collapsible.cmp-intro-collapsed {
	max-height:  5.2em;
	overflow:    hidden;
}

.cmp-show-desc-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	background:      transparent;
	border:          none;
	color:           var(--cmp-primary);
	font-size:       13px;
	font-weight:     600;
	padding:         6px 0;
	cursor:          pointer;
	font-family:     inherit;
	transition:      color .2s;
}
.cmp-show-desc-btn::after {
	content:     "▸";
	font-size:   10px;
	transition:  transform .25s;
}
.cmp-show-desc-btn[aria-expanded="false"]::after { transform: rotate(90deg); }
.cmp-show-desc-btn:hover { color: var(--cmp-primary-h); }

/* DMA / extra info box */
.cmp-dma-content {
	color:         var(--cmp-text-soft);
	font-size:     13px;
	padding:       12px 16px;
	background:    #f8fafc;
	border-radius: 10px;
	border-left:   3px solid var(--cmp-primary);
	margin:        12px 0 8px;
}
.cmp-dma-content p { margin: 0; }

/* Separator */
.cmp-separator {
	height:     1px;
	background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
	border:     none;
	margin:     12px 0 4px;
}

/* ── Accordion ────────────────────────────────────────────────────────── */
.cmp-accordion {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-top:     16px;
}

.cmp-accordion-item {
	border:        1px solid #e5e7eb;
	border-radius: 12px;
	background:    #fff;
	overflow:      hidden;
	transition:    border-color .2s ease, box-shadow .2s ease;
}
.cmp-accordion-item:hover {
	border-color: #cbd5e1;
	box-shadow:   0 2px 8px rgba(15, 23, 42, .04);
}
.cmp-accordion-item.cmp-expanded {
	border-color: var(--cmp-primary);
	box-shadow:   0 4px 16px rgba(59, 53, 208, .08);
}

/* Trigger row (always visible) */
.cmp-accordion-row {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
	padding:     18px 20px;
	cursor:      pointer;
	user-select: none;
}

/* Chevron */
.cmp-accordion-chevron {
	flex-shrink: 0;
	margin-top:  3px;
	transition:  transform .3s cubic-bezier(.4, 0, .2, 1);
}
.cmp-accordion-item.cmp-expanded .cmp-accordion-chevron {
	transform: rotate(90deg);
}

/* CSS-drawn right-pointing chevron (like CKY) */
.cmp-chevron-right {
	display:      inline-block;
	width:        8px;
	height:       8px;
	border-right: 2px solid #64748b;
	border-top:   2px solid #64748b;
	transform:    rotate(45deg);
	transition:   border-color .2s ease;
}
.cmp-accordion-item.cmp-expanded .cmp-chevron-right {
	border-color: var(--cmp-primary);
}

.cmp-accordion-head-wrap {
	flex:      1;
	min-width: 0;
}

.cmp-accordion-head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
}

/* Category name button */
.cmp-accordion-trigger {
	background:     transparent;
	border:         none;
	padding:        0;
	font-size:      15px;
	font-weight:    600;
	color:          #0f172a;
	cursor:         pointer;
	text-align:     left;
	letter-spacing: -0.01em;
	flex:           1;
	font-family:    inherit;
	line-height:    1.3;
}

/* "Always Active" badge */
.cmp-always-active {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	background:      #ecfdf5;
	color:           #047857;
	font-size:       11px;
	font-weight:     600;
	padding:         4px 10px;
	border-radius:   999px;
	border:          1px solid #a7f3d0;
	text-transform:  uppercase;
	letter-spacing:  .04em;
	white-space:     nowrap;
	flex-shrink:     0;
}
.cmp-always-active::before {
	content:       "";
	width:         6px;
	height:        6px;
	background:    #10b981;
	border-radius: 50%;
}

/* Category description (always visible in header) */
.cmp-accordion-desc {
	color:       #64748b;
	font-size:   13px;
	line-height: 1.6;
	margin-top:  6px;
}
.cmp-accordion-desc p { margin: 0 0 4px; }
.cmp-accordion-desc p:last-child { margin-bottom: 0; }

/* Service tags */
.cmp-accordion-services {
	display:    flex;
	flex-wrap:  wrap;
	gap:        5px;
	margin-top: 8px;
}
.cmp-service-tag {
	font-size:     11px;
	font-weight:   500;
	color:         var(--cmp-primary);
	background:    color-mix(in srgb, var(--cmp-primary) 8%, #fff);
	border:        1px solid color-mix(in srgb, var(--cmp-primary) 20%, #fff);
	border-radius: 999px;
	padding:       2px 8px;
}

/* Toggle switch — appearance-none approach (CKY style) */
.cmp-toggle-wrap {
	flex-shrink: 0;
}
.cmp-toggle-input {
	appearance:        none;
	-webkit-appearance: none;
	width:             40px;
	height:            22px;
	background:        #d1d5db;
	border-radius:     999px;
	position:          relative;
	cursor:            pointer;
	outline:           none;
	transition:        background .25s ease;
	margin:            0;
	display:           block;
	flex-shrink:       0;
}
.cmp-toggle-input::before {
	content:       "";
	position:      absolute;
	top:           2px;
	left:          2px;
	width:         18px;
	height:        18px;
	background:    #fff;
	border-radius: 50%;
	box-shadow:    0 2px 4px rgba(0, 0, 0, .15);
	transition:    transform .25s cubic-bezier(.4, 0, .2, 1);
}
.cmp-toggle-input:checked {
	background: var(--cmp-primary);
}
.cmp-toggle-input:checked::before {
	transform: translateX(18px);
}
.cmp-toggle-input:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmp-primary) 30%, transparent);
}

/* Accordion body */
.cmp-accordion-body {
	display:     none;
	padding:     0 20px 20px;
	border-top:  1px solid #f1f5f9;
	background:  #fafbfc;
}
.cmp-accordion-item.cmp-expanded .cmp-accordion-body {
	display: block;
}

/* ── Cookie audit table ──────────────────────────────────────────────── */
.cmp-cookie-audit-table {
	border:        1px solid #e5e7eb;
	border-radius: 10px;
	background:    #fff;
	overflow:      hidden;
	margin-top:    14px;
}

.cmp-cookie-row {
	list-style:            none;
	padding:               0;
	margin:                0;
	display:               grid;
	grid-template-columns: 110px 140px 1fr;
	gap:                   0;
	border-bottom:         1px solid #f1f5f9;
	transition:            background .15s ease;
}
.cmp-cookie-row:last-child { border-bottom: none; }
.cmp-cookie-row:hover { background: #f8fafc; }

.cmp-cookie-row li {
	padding:    10px 14px;
	font-size:  12.5px;
	line-height: 1.5;
	border-right: 1px solid #f1f5f9;
	word-break: break-word;
	display:    flex;
	flex-direction: column;
	gap:        3px;
}
.cmp-cookie-row li:last-child { border-right: none; }

/* Field label (Cookie / Duration / Description) */
.cmp-cookie-row li div:first-child {
	font-weight:     600;
	color:           #94a3b8;
	text-transform:  uppercase;
	font-size:       10px;
	letter-spacing:  .04em;
}
/* Value */
.cmp-cookie-row li div:last-child {
	color:       #1e293b;
	font-weight: 500;
}
.cmp-cookie-row li:last-child div:last-child {
	color:       #475569;
	font-weight: 400;
}
/* Cookie column background */
.cmp-cookie-row li:first-child {
	background: #f8fafc;
}

/* ── Modal Footer ────────────────────────────────────────────────────── */
.cmp-modal-footer {
	position:       relative;
	border-top:     1px solid #f1f5f9;
	background:     #fff;
	padding:        16px 20px 0;
	flex-shrink:    0;
}

.cmp-modal-actions {
	display:   flex;
	gap:       10px;
	padding:   4px 0 14px;
	flex-wrap: wrap;
}

/* Larger buttons in modal */
.cmp-modal-footer .cmp-btn {
	flex:      1;
	min-width: 120px;
	padding:   11px 18px;
	border-radius: 10px;
	font-size:  13.5px;
}

.cmp-powered-by {
	padding:     8px 0 12px;
	font-size:   11px;
	font-weight: 400;
	color:       #64748b;
	text-align:  right;
	border-top:  1px solid #f1f5f9;
}
.cmp-powered-by strong { font-weight: 600; }

/* =========================================================
   FLOATING BUTTON
   ========================================================= */

#cmp-floating-btn {
	position:        fixed;
	z-index:         var(--cmp-z);
	background:      var(--cmp-primary);
	color:           #fff;
	border:          none;
	border-radius:   999px;
	padding:         10px 18px;
	font-size:       13px;
	font-weight:     600;
	cursor:          pointer;
	box-shadow:      0 4px 16px rgba(59, 53, 208, .3);
	display:         flex;
	align-items:     center;
	gap:             7px;
	font-family:     inherit;
	transition:      transform .2s ease, box-shadow .2s ease;
}
#cmp-floating-btn:hover {
	transform:  translateY(-2px);
	box-shadow: 0 8px 24px rgba(59, 53, 208, .35);
}

#cmp-floating-btn[data-floating-pos="bottom-right"] { bottom: 24px; right: 24px; }
#cmp-floating-btn[data-floating-pos="bottom-left"]  { bottom: 24px; left: 24px; }
#cmp-floating-btn:not([data-floating-pos])          { bottom: 24px; right: 24px; }

/* =========================================================
   RECEIPT MODAL
   ========================================================= */
.cmp-receipt-modal {
	position:   fixed;
	inset:      0;
	z-index:    calc(var(--cmp-z) + 3);
	display:    flex;
	align-items: center;
	justify-content: center;
	background: var(--cmp-overlay-bg);
	padding:    20px;
}
.cmp-receipt-inner {
	background:    #fff;
	border-radius: 16px;
	padding:       28px;
	max-width:     480px;
	width:         100%;
	box-shadow:    var(--cmp-shadow-lg);
}
.cmp-receipt-inner h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: #0f172a; }
.cmp-receipt-inner dl { margin: 0 0 16px; display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 13px; }
.cmp-receipt-inner dt { color: #64748b; font-weight: 600; }
.cmp-receipt-inner dd { margin: 0; color: #1e293b; }
.cmp-receipt-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   ACCESSIBILITY HELPERS
   ========================================================= */
.cmp-sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0,0,0,0);
	white-space: nowrap;
	border:     0;
}
.cmp-announce {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px) {
	#cmp-banner.cmp-pos-bottom-left,
	#cmp-banner.cmp-pos-bottom-right {
		left:      12px !important;
		right:     12px !important;
		bottom:    12px !important;
		width:     auto;
		max-width: none;
	}
	.cmp-banner-bar {
		padding:       16px 18px;
		border-radius: 14px;
	}
	.cmp-banner-title { font-size: 15px; }
	.cmp-banner-actions {
		flex-direction: column;
	}
	.cmp-banner-actions .cmp-btn { width: 100%; flex: none; }

	#cmp-modal {
		width:      calc(100% - 24px);
		max-height: calc(100vh - 24px);
		border-radius: 16px;
	}
	.cmp-modal-header { padding: 18px 20px; }
	.cmp-modal-title  { font-size: 17px; }
	.cmp-modal-body   { padding: 8px 16px 16px; }
	.cmp-accordion-row  { padding: 14px 16px; }
	.cmp-modal-footer   { padding: 14px 16px 0; }
	.cmp-modal-actions  { flex-direction: column; }
	.cmp-modal-footer .cmp-btn { width: 100%; flex: none; }

	/* Cookie table → single column on mobile */
	.cmp-cookie-row {
		grid-template-columns: 1fr;
	}
	.cmp-cookie-row li {
		border-right:  none;
		border-bottom: 1px solid #f1f5f9;
	}
	.cmp-cookie-row li:last-child { border-bottom: none; }
	.cmp-cookie-row li:first-child { background: transparent; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	#cmp-banner, #cmp-modal, #cmp-modal-overlay, .cmp-close-btn,
	.cmp-btn, .cmp-accordion-chevron, .cmp-toggle-input, .cmp-toggle-input::before {
		transition: none !important;
		animation:  none !important;
	}
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
	#cmp-banner, #cmp-modal, #cmp-floating-btn, #cmp-modal-overlay { display: none !important; }
}