/* The banner and the panel.
   Every colour is a custom property the settings screen writes, and the list
   lives in one place in PHP so a variable cannot exist in the stylesheet and be
   invisible to the screen that sets it.

   Accept and Reject can be given different colours because a designer will
   always need that, and the settings screen measures the pair and says so when
   refusing has been made the quieter answer. What they cannot be given is
   different geometry: they share .xrs-consent-btn and therefore the same size,
   padding, radius, weight and layer, and there is no selector here that changes
   one without the other. That part is not a preference. */

/* This stylesheet renders inside somebody else's theme, and the theme wins by
   default: it loads later, and its selectors are usually longer than ours. That
   is not a hypothetical. On one site a global border rule repainted the two
   "transparent" edges of the caret triangle, turning it into a pink rectangle
   in front of every category name, and put a box around every category label
   at the same time.

   So the properties that define this component are declared as its own rather
   than offered up to the cascade. Only within these two containers, only on
   the properties a theme actually clobbers, and never on the colours an owner
   sets: those are theirs to choose and have to stay in the normal cascade. */
.xrs-consent :is(button,input,label,svg,span,p,h2,div,table,td,th),
.xrs-consent-modal :is(button,input,label,svg,span,p,h2,div,table,td,th) {
	box-sizing: border-box !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	float: none !important;
	max-width: none !important;
	text-shadow: none !important;
}
.xrs-consent button,
.xrs-consent-modal button,
.xrs-consent-reopen {
	-webkit-appearance: none !important;
	appearance: none !important;
	text-decoration: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	transform: none;
}

/* --- the notice ------------------------------------------------------- */
.xrs-consent{position:fixed;z-index:99999;background:var(--xrs-consent-bg,#fff);color:var(--xrs-consent-fg,#3c434a);font-size:15px;line-height:1.5;box-sizing:border-box}
.xrs-consent *,.xrs-consent-modal *{box-sizing:border-box}

/* A card in a corner. The default, because a full-width bar on a phone is most
   of the screen. */
.xrs-consent-box{width:min(420px,calc(100vw - 32px));border:1px solid var(--xrs-consent-border,#dcdcde);border-radius:var(--xrs-consent-radius,6px);box-shadow:0 8px 32px rgba(0,0,0,.22)}
.xrs-consent-box.xrs-consent-at-bottom-left{left:16px;bottom:16px}
.xrs-consent-box.xrs-consent-at-bottom-right{right:16px;bottom:16px}
.xrs-consent-box.xrs-consent-at-top-left{left:16px;top:16px}
.xrs-consent-box.xrs-consent-at-top-right{right:16px;top:16px}

/* The full-width bar. What every install before this one had. */
.xrs-consent-footer{left:0;right:0;width:100%;border-top:1px solid var(--xrs-consent-border,#dcdcde);box-shadow:0 -2px 24px rgba(0,0,0,.18)}
.xrs-consent-footer.xrs-consent-at-bottom-left,.xrs-consent-footer.xrs-consent-at-bottom-right{bottom:0}
.xrs-consent-footer.xrs-consent-at-top-left,.xrs-consent-footer.xrs-consent-at-top-right{top:0;border-top:0;border-bottom:1px solid var(--xrs-consent-border,#dcdcde);box-shadow:0 2px 24px rgba(0,0,0,.18)}
.xrs-consent-footer .xrs-consent-inner{max-width:1100px;margin:0 auto;flex-wrap:wrap;flex-direction:row;align-items:center}
.xrs-consent-footer .xrs-consent-text{flex:1 1 380px}

/* Centred, over a dimmed page, for a site that means it. */
.xrs-consent-popup{left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.xrs-consent-popup .xrs-consent-inner{width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--xrs-consent-bg,#fff);border:1px solid var(--xrs-consent-border,#dcdcde);border-radius:var(--xrs-consent-radius,6px);box-shadow:0 20px 60px rgba(0,0,0,.4)}

.xrs-consent-inner{position:relative;padding:20px;display:flex;flex-direction:column;gap:14px}
.xrs-consent-text{min-width:0}
.xrs-consent h2{margin:0 0 8px;font-size:17px;line-height:1.3;color:var(--xrs-consent-title,#1d2327)}
.xrs-consent-body{margin:0}
.xrs-consent-body p{margin:0 0 8px}
.xrs-consent-body p:last-child{margin-bottom:0}
.xrs-consent-links{margin:10px 0 0;font-size:13px;display:flex;flex-wrap:wrap;gap:14px}
.xrs-consent-links a{color:var(--xrs-consent-link,#2271b1)}

/* --- the two answers, and the way to the third ------------------------ */
.xrs-consent-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* The geometry is the part that is not a preference: both answers the same
   size, the same shape, the same layer. A theme cannot be allowed to change
   one of those by accident any more than an owner can on purpose. */
.xrs-consent-btn{cursor:pointer!important;font-family:inherit!important;font-weight:600!important;font-size:14px!important;padding:11px 18px!important;border:1px solid transparent!important;border-radius:var(--xrs-consent-radius,6px)!important;min-width:132px!important;width:auto!important;text-align:center!important;flex:1 1 auto;line-height:1.2!important;box-shadow:none}
/* Darkened by an overlay rather than by brightness(). brightness above 1
   lightens, which reads as a press on a dark button and as nothing at all on a
   white or cream one: the two commonest banner colours there are. An overlay is
   the same amount of change whatever is underneath it, and the lift says
   "button" on the ones where the colour shift is subtle. */
.xrs-consent-btn{transition:background-image .12s ease,box-shadow .12s ease,transform .12s ease}
.xrs-consent-btn:hover{background-image:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13))!important;box-shadow:0 2px 10px rgba(0,0,0,.2)!important}
.xrs-consent-btn:active{background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22))!important;box-shadow:none!important;transform:translateY(1px)}
.xrs-consent-btn:focus-visible{outline:3px solid currentColor;outline-offset:2px}
/* The colours are the owner's. They are stated firmly here only because a
   theme's button rule would otherwise paint over a choice somebody made on the
   settings screen, and then the preview would be telling the truth about a
   page that no longer looks like it. */
/* background-color, never the background shorthand. The shorthand also sets
   background-image, and with !important on it that beats the hover, which is
   an overlay drawn as a background-image. Fixing the theme problem by breaking
   the hover would have been a poor trade. */
.xrs-consent-accept{background-color:var(--xrs-consent-accept-bg,#2271b1)!important;color:var(--xrs-consent-accept-fg,#fff)!important}
.xrs-consent-reject{background-color:var(--xrs-consent-reject-bg,#2271b1)!important;color:var(--xrs-consent-reject-fg,#fff)!important}
.xrs-consent-save{background-color:var(--xrs-consent-save-bg,#2271b1)!important;color:var(--xrs-consent-save-fg,#fff)!important}
.xrs-consent-choose{background-color:var(--xrs-consent-choose-bg,#f0f0f1)!important;color:var(--xrs-consent-choose-fg,#1d2327)!important;border-color:var(--xrs-consent-border,#dcdcde)!important}
.xrs-consent-btn:hover,.xrs-consent-btn:active{background-repeat:no-repeat!important}

.xrs-consent-close{position:absolute;top:8px;right:10px;appearance:none;background:none;border:0;cursor:pointer;color:inherit;font-size:24px;line-height:1;padding:2px 8px;opacity:.55}
.xrs-consent-close:hover{opacity:1}

/* --- the panel -------------------------------------------------------- */
.xrs-consent-modal{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);display:flex;font-size:15px;line-height:1.5}
.xrs-consent-modal-card{position:relative;background:var(--xrs-consent-prefs-bg,#fff);color:var(--xrs-consent-prefs-fg,#3c434a);border:1px solid var(--xrs-consent-prefs-border,#dcdcde);display:flex;flex-direction:column;overflow:auto;padding:24px}
.xrs-consent-modal h2{margin:0 0 10px;font-size:20px;line-height:1.25;color:var(--xrs-consent-prefs-title,#1d2327)}
.xrs-consent-modal a{color:var(--xrs-consent-link,#2271b1)}

.xrs-consent-prefs-center{align-items:center;justify-content:center;padding:20px}
.xrs-consent-prefs-center .xrs-consent-modal-card{width:min(680px,100%);max-height:88vh;border-radius:var(--xrs-consent-radius,6px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.xrs-consent-prefs-side{align-items:stretch;justify-content:flex-end}
.xrs-consent-prefs-side .xrs-consent-modal-card{width:min(480px,100%);height:100%;border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.35)}
.xrs-consent-prefs-drawer{align-items:flex-start;justify-content:center}
.xrs-consent-prefs-drawer .xrs-consent-modal-card{width:100%;max-height:92vh;border-radius:0 0 var(--xrs-consent-radius,6px) var(--xrs-consent-radius,6px);box-shadow:0 12px 40px rgba(0,0,0,.35)}

.xrs-consent-cats{margin:16px 0}
.xrs-consent-cat{border-top:1px solid var(--xrs-consent-prefs-border,#dcdcde);padding:12px 0}
.xrs-consent-cat:last-child{border-bottom:1px solid var(--xrs-consent-prefs-border,#dcdcde)}
.xrs-consent-cat-head{display:flex;align-items:center;gap:12px}
/* A row of text with an arrow, not a button that looks like a button. Stated
   as its own, because the theme that broke the caret also put a bordered box
   around every one of these. */
.xrs-consent-cat-toggle{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer!important;font-family:inherit!important;font-size:inherit!important;color:inherit!important;display:flex!important;align-items:center;gap:8px;padding:2px 0!important;margin:0!important;flex:1 1 auto;text-align:left!important}
.xrs-consent-cat-toggle[disabled]{cursor:default!important}
.xrs-consent-caret{width:12px!important;height:12px!important;flex:0 0 auto;border:0!important;background:none!important;transition:transform .15s ease;overflow:visible}
.xrs-consent-cat-toggle[disabled] .xrs-consent-caret{opacity:.25}
.xrs-consent-cat-toggle[aria-expanded="true"] .xrs-consent-caret{transform:rotate(90deg)}
.xrs-consent-count{font-size:12px;opacity:.7}
.xrs-consent-cat-help{margin:6px 0 0 15px;font-size:13px;opacity:.85}
.xrs-consent-cat-body{margin:10px 0 2px 15px;overflow-x:auto}
.xrs-consent-cat-body table{width:100%;border-collapse:collapse;font-size:13px}
.xrs-consent-cat-body th,.xrs-consent-cat-body td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--xrs-consent-prefs-border,#dcdcde);vertical-align:top}
.xrs-consent-always{font-size:12px;opacity:.75;flex:0 0 auto}

/* The switch. A checkbox underneath, so it is a checkbox to everything that
   is not a mouse. */
.xrs-consent-switch{position:relative;display:inline-block!important;width:44px!important;height:24px!important;flex:0 0 auto;margin:0!important;padding:0!important}
.xrs-consent-switch input{position:absolute;opacity:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;cursor:pointer;z-index:1;appearance:none!important;-webkit-appearance:none!important}
.xrs-consent-slider{position:absolute;inset:0;border-radius:24px;background:var(--xrs-consent-off,#8c8f94);transition:background .15s ease}
.xrs-consent-slider::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s ease;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.xrs-consent-switch input:checked+.xrs-consent-slider{background:var(--xrs-consent-on,#2271b1)}
.xrs-consent-switch input:checked+.xrs-consent-slider::before{transform:translateX(20px)}
.xrs-consent-switch input:focus-visible+.xrs-consent-slider{outline:3px solid currentColor;outline-offset:2px}

/* --- the way back ------------------------------------------------------ */
.xrs-consent-reopen{appearance:none;cursor:pointer;font:inherit;font-size:13px;padding:8px 14px;border:1px solid var(--xrs-consent-border,#dcdcde);border-radius:var(--xrs-consent-radius,6px);background:var(--xrs-consent-bg,#fff);color:var(--xrs-consent-fg,#3c434a)}
.xrs-consent-reopen-fixed{position:fixed;left:16px;bottom:16px;z-index:99998}
.xrs-consent-badge{width:46px;height:46px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--xrs-consent-handle-bg,#2271b1);color:var(--xrs-consent-btn-fg,#fff);box-shadow:0 2px 12px rgba(0,0,0,.28);overflow:hidden}
.xrs-consent-badge:hover{background-image:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13));box-shadow:0 3px 16px rgba(0,0,0,.34)}
.xrs-consent-badge:active{transform:translateY(1px)}
.xrs-consent-badge,.xrs-consent-reopen{transition:background-image .12s ease,box-shadow .12s ease,transform .12s ease}
.xrs-consent-reopen:hover{background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08))}
.xrs-consent-close{transition:opacity .12s ease}
.xrs-consent-cat-toggle:hover:not([disabled]) strong{text-decoration:underline}
.xrs-consent-badge:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.xrs-consent-badge svg,.xrs-consent-badge img{width:26px;height:26px;display:block;object-fit:contain}

/* Said out loud, because a theme that resets [hidden] would otherwise put the
   banner back in front of somebody who already answered it. */
.xrs-consent[hidden],.xrs-consent-modal[hidden],.xrs-consent-reopen[hidden],.xrs-consent-close[hidden],.xrs-consent-links[hidden],.xrs-consent-cat-body[hidden]{display:none}

/* --- the generated policy table ---------------------------------------- */
.xrs-cookie-policy table{width:100%;border-collapse:collapse;margin:0 0 24px}
.xrs-cookie-policy th,.xrs-cookie-policy td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(127,127,127,.25);vertical-align:top;font-size:14px}
.xrs-cookie-policy-date{font-size:13px;opacity:.75}

@media (max-width:600px){
	.xrs-consent-box{left:8px!important;right:8px!important;width:auto}
	.xrs-consent-inner{padding:16px}
	.xrs-consent-btn{flex:1 1 100%}
	.xrs-consent-modal-card{padding:18px}
}