/**
 * BWOD Kvantumsvarsel – front-end styles.
 *
 * Dependency-free warning box + modal. Neutral amber palette that reads as a
 * caution without clashing with most themes.
 *
 * THEME-HARDENING: WooCommerce themes aggressively style `button`, `a` and
 * `:focus`/`:active` states. When a theme's focus/active rule overrode the
 * close button's position, the button jumped left between mousedown and
 * mouseup — so the `click` never fired and the first click appeared to do
 * nothing. Every layout- and appearance-critical property below is therefore
 * pinned with `!important` and scoped to the plugin's own container classes,
 * and the interactive states (:hover/:focus/:active/:focus-visible) re-assert
 * the exact same geometry so nothing can shift on interaction.
 */

/* Reset box model for everything inside the widget so theme paddings/borders
   can't distort our layout math. */
.bwod-kvsvarsel-wrap,
.bwod-kvsvarsel-wrap *,
.bwod-kvsvarsel-wrap *::before,
.bwod-kvsvarsel-wrap *::after,
.bwod-kvsvarsel-modal,
.bwod-kvsvarsel-modal *,
.bwod-kvsvarsel-modal *::before,
.bwod-kvsvarsel-modal *::after {
	box-sizing: border-box;
}

.bwod-kvsvarsel-wrap {
	margin: 1em 0;
}

/* Warning box ------------------------------------------------------------- */

.bwod-kvsvarsel {
	display: block !important;
	margin: 0 !important;
	border: 1px solid #f0c36d !important;
	background: #fff8e5 !important;
	color: #6b5310 !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

.bwod-kvsvarsel .bwod-kvsvarsel__inner {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bwod-kvsvarsel .bwod-kvsvarsel__icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	margin: 1px 0 0 0 !important;
	padding: 0 !important;
	background: #e0a800 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	float: none !important;
}

.bwod-kvsvarsel .bwod-kvsvarsel__text {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #6b5310 !important;
}

/* "Les mer" link — themes style <a> heavily, so pin its appearance. */
.bwod-kvsvarsel .bwod-kvsvarsel__readmore,
.bwod-kvsvarsel .bwod-kvsvarsel__readmore:link,
.bwod-kvsvarsel .bwod-kvsvarsel__readmore:visited {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #8a6d00 !important;
	font-weight: 600 !important;
	font-size: inherit !important;
	text-decoration: underline !important;
	text-transform: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

.bwod-kvsvarsel .bwod-kvsvarsel__readmore:hover,
.bwod-kvsvarsel .bwod-kvsvarsel__readmore:focus,
.bwod-kvsvarsel .bwod-kvsvarsel__readmore:active {
	color: #6b5310 !important;
	background: none !important;
	text-decoration: underline !important;
	outline: none !important;
}

/* Modal ------------------------------------------------------------------- */

.bwod-kvsvarsel-modal {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 100000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 20px !important;
}

.bwod-kvsvarsel-modal[hidden] {
	display: none !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__overlay {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba( 0, 0, 0, 0.55 ) !important;
	border: 0 !important;
	cursor: pointer !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__dialog {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: 560px !important;
	max-height: 85vh !important;
	overflow: auto !important;
	margin: 0 !important;
	padding: 28px 30px !important;
	background: #fff !important;
	color: #333 !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 ) !important;
	float: none !important;
	transform: none !important;
	text-align: left !important;
}

/* Close button — the element that misbehaved. Geometry is pinned identically
   across all states so a theme :focus/:active rule cannot move it. */
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:hover,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:focus,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:focus-visible,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:active {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 2 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-indent: 0 !important;
	float: none !important;
	transform: none !important;
	transition: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;
	opacity: 1 !important;
	cursor: pointer !important;
	outline: none !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close {
	color: #888 !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:hover,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:focus,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:focus-visible,
.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__close:active {
	color: #333 !important;
	background: #f1f1f1 !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__title {
	margin: 0 0 12px 0 !important;
	padding: 0 24px 0 0 !important;
	background: none !important;
	color: #222 !important;
	font-size: 20px !important;
	line-height: 1.3 !important;
	text-align: left !important;
	text-transform: none !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__content {
	color: #333 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	text-align: left !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__content p {
	margin: 0 0 1em 0 !important;
	padding: 0 !important;
	color: #333 !important;
}

.bwod-kvsvarsel-modal .bwod-kvsvarsel-modal__content p:last-child {
	margin-bottom: 0 !important;
}

body.bwod-kvsvarsel-modal-open {
	overflow: hidden !important;
}