/* =========================================================
   RenovEL – Offertguide/quiz (shortcode [renovel_offertforfragan])
   Mobil-first, ren & elegant premium-känsla (ljust tema).
   Ljus/vit bakgrund, grafit text, gul accent sparsamt.
   Alla EGNA klasser prefixade renovel-lp- och scopade under .renovel-lp.
   ========================================================= */

.renovel-lp {
	--renovel-lp-bg: #f4f6f8;          /* ljus bakgrund */
	--renovel-lp-surface: #ffffff;     /* kort */
	--renovel-lp-ink: #1f2430;         /* grafit text */
	--renovel-lp-muted: #6b7280;       /* dämpad text */
	--renovel-lp-border: #e6e8ec;      /* diskret kant */
	--renovel-lp-accent: #f5a623;      /* gul accent (sparsamt) */
	--renovel-lp-dark: #20242b;        /* mörk knapp/primär */
	--renovel-lp-dark-hover: #33394480;
	--renovel-lp-shadow: 0 6px 22px rgba(31, 36, 48, .08);
	--renovel-lp-shadow-lg: 0 12px 34px rgba(31, 36, 48, .12);
	--renovel-lp-radius: 16px;
	--renovel-lp-maxw: 460px;

	box-sizing: border-box;
	background: var(--renovel-lp-bg);
	color: var(--renovel-lp-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	padding: 22px 18px 96px;
	-webkit-font-smoothing: antialiased;
}

.renovel-lp *,
.renovel-lp *::before,
.renovel-lp *::after { box-sizing: border-box; }

.renovel-lp img { max-width: 100%; display: block; }

.renovel-lp-progress,
.renovel-lp-step { max-width: var(--renovel-lp-maxw); margin-left: auto; margin-right: auto; }

/* =========================================================
   PROGRESS
   ========================================================= */
.renovel-lp-progress { margin-bottom: 16px; }
.renovel-lp-progress__track { background: #e3e6ea; border-radius: 999px; height: 6px; overflow: hidden; }
.renovel-lp-progress__fill { display: block; height: 100%; width: 0; background: var(--renovel-lp-accent); border-radius: 999px; transition: width .35s ease; }
.renovel-lp-progress__label { margin-top: 8px; font-size: .8rem; color: var(--renovel-lp-muted); text-align: right; }

/* =========================================================
   STEG
   ========================================================= */
.renovel-lp-step { display: none; animation: renovel-lp-fade .28s ease; }
.renovel-lp-step.is-active { display: block; }

@keyframes renovel-lp-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   KNAPPAR
   ========================================================= */
.renovel-lp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	flex-direction: column;
	text-decoration: none; text-align: center; font-weight: 700;
	padding: 13px 18px; border-radius: 12px; border: 1.5px solid transparent;
	cursor: pointer; font-size: .98rem; font-family: inherit;
	line-height: 1.2;
	transition: background .15s ease, color .15s ease, transform .05s ease, border-color .15s ease, box-shadow .15s ease;
}
.renovel-lp-btn:active { transform: translateY(1px); }
.renovel-lp-btn--block { display: flex; width: 100%; }
.renovel-lp-btn__sub { display: block; font-size: .78rem; font-weight: 600; opacity: .7; margin-top: 2px; }

.renovel-lp-btn--primary { background: var(--renovel-lp-dark); color: #fff; box-shadow: var(--renovel-lp-shadow); }
.renovel-lp-btn--primary:hover { background: #2c313b; }

.renovel-lp-btn--ghost { background: var(--renovel-lp-surface); color: var(--renovel-lp-ink); border-color: var(--renovel-lp-border); box-shadow: var(--renovel-lp-shadow); }
.renovel-lp-btn--ghost:hover { border-color: #cfd3da; }

/* Diskret back-knapp */
.renovel-lp-back {
	background: none; border: none; color: var(--renovel-lp-muted);
	font-size: .95rem; font-family: inherit; cursor: pointer; padding: 6px 0; margin-bottom: 10px;
}
.renovel-lp-back:hover { color: var(--renovel-lp-ink); }

/* =========================================================
   TRUST-BADGES – karusell på mobil, statiskt rutnät på desktop
   ========================================================= */
.renovel-lp-badges { margin: 18px 0 6px; }
.renovel-lp-badges__track {
	list-style: none; margin: 0;
	/* Vertikalt andrum så kortets skugga inte kapas av scroll-behållaren */
	padding: 10px 4px 16px;
	display: flex; gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.renovel-lp-badges__track::-webkit-scrollbar { display: none; }
.renovel-lp-badge {
	scroll-snap-align: center;
	flex: 0 0 100%;
	display: flex; align-items: center; gap: 14px;
	background: var(--renovel-lp-surface);
	border: 1px solid var(--renovel-lp-border);
	border-radius: 14px; padding: 18px 18px;
	box-shadow: 0 2px 10px rgba(31, 36, 48, .06);
}
.renovel-lp-badge__icon {
	width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
}
.renovel-lp-badge__icon svg { width: 24px; height: 24px; }
.renovel-lp-badge__icon--auth { background: #e9f7ef; color: #1f9d55; }
.renovel-lp-badge__icon--eff { background: #e8f0fe; color: #2f6fed; }
.renovel-lp-badge__icon--terms { background: #f2ecfc; color: #7c4dff; }
.renovel-lp-badge__icon--google { background: #fff4de; color: #f5a623; }
.renovel-lp-badge__title { font-weight: 700; font-size: 1.05rem; margin: 0; }

/* =========================================================
   FRÅGOR + ALTERNATIV (premium-kort)
   ========================================================= */
.renovel-lp-question { font-size: 1.45rem; line-height: 1.25; margin: 4px 0 20px; letter-spacing: -.01em; }
.renovel-lp-step__hint { color: var(--renovel-lp-muted); margin: -12px 0 18px; }

.renovel-lp-options { display: flex; flex-direction: column; gap: 12px; }
.renovel-lp-option {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; text-align: left;
	background: var(--renovel-lp-surface);
	color: var(--renovel-lp-ink);
	border: 1.5px solid var(--renovel-lp-border);
	border-radius: 14px; padding: 17px 18px;
	font-size: 1.05rem; font-weight: 600; font-family: inherit;
	cursor: pointer; box-shadow: var(--renovel-lp-shadow);
	transition: border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.renovel-lp-option:hover { transform: translateY(-1px); box-shadow: var(--renovel-lp-shadow-lg); }
.renovel-lp-option:active { transform: translateY(0); }
.renovel-lp-option.is-selected { border-color: var(--renovel-lp-accent); background: #fffaf0; }
.renovel-lp-option__arrow { color: #c2c7cf; font-size: 1.3rem; line-height: 1; }
.renovel-lp-option.is-selected .renovel-lp-option__arrow { color: var(--renovel-lp-accent); }

/* =========================================================
   STEG 3 – WPForms i ett rent, integrerat kort
   ========================================================= */
.renovel-lp-formcard {
	background: var(--renovel-lp-surface);
	border: 1px solid var(--renovel-lp-border);
	border-radius: var(--renovel-lp-radius);
	padding: 22px 18px;
	box-shadow: var(--renovel-lp-shadow);
}

.renovel-lp-formcard .wpforms-field-label,
.renovel-lp-formcard label { color: var(--renovel-lp-ink) !important; font-weight: 600; }
.renovel-lp-formcard .wpforms-field-description,
.renovel-lp-formcard .wpforms-required-label { color: var(--renovel-lp-muted) !important; }

.renovel-lp-formcard input[type="text"],
.renovel-lp-formcard input[type="tel"],
.renovel-lp-formcard input[type="email"],
.renovel-lp-formcard input[type="number"],
.renovel-lp-formcard textarea,
.renovel-lp-formcard select {
	width: 100%;
	background: #fff !important;
	color: var(--renovel-lp-ink) !important;
	border: 1.5px solid var(--renovel-lp-border) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 1rem !important;
	font-family: inherit !important;
}
.renovel-lp-formcard input::placeholder,
.renovel-lp-formcard textarea::placeholder { color: #a6acb5 !important; }

.renovel-lp-formcard input:focus,
.renovel-lp-formcard textarea:focus,
.renovel-lp-formcard select:focus {
	outline: none !important;
	border-color: var(--renovel-lp-accent) !important;
	box-shadow: 0 0 0 3px rgba(245, 166, 35, .18) !important;
}

/* Premium dropdown (egen pil) */
.renovel-lp-formcard select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 40px !important;
}

/* Kort beskrivning: låst höjd (~4 rader), ingen resize, scroll */
.renovel-lp-formcard textarea {
	resize: none !important;
	min-height: 104px !important;
	max-height: 104px !important;
	overflow-y: auto !important;
	line-height: 1.4;
}

/* Submit = mörk premium-knapp, full bredd */
.renovel-lp-formcard .wpforms-submit,
.renovel-lp-formcard button[type="submit"] {
	background: var(--renovel-lp-dark) !important;
	color: #fff !important;
	border: none !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	padding: 15px 24px !important;
	border-radius: 12px !important;
	width: 100%;
	cursor: pointer;
	box-shadow: var(--renovel-lp-shadow);
}
.renovel-lp-formcard .wpforms-submit:hover { background: #2c313b !important; }

/* =========================================================
   PLACEHOLDERS
   ========================================================= */
.renovel-lp-placeholder {
	border: 1px dashed #cfd3da; background: #fafbfc; color: var(--renovel-lp-muted);
	padding: 20px; border-radius: 14px; text-align: center; font-size: .92rem;
}
.renovel-lp-placeholder__fields { font-size: .8rem; margin-top: 10px; }

/* =========================================================
   FOOTER
   ========================================================= */
.renovel-lp-footer {
	max-width: var(--renovel-lp-maxw); margin: 34px auto 0; text-align: center;
	font-size: .72rem; line-height: 1.5; color: var(--renovel-lp-muted);
}

/* =========================================================
   STICKY RING-KNAPP (mobil) – dold på steg 4 och desktop
   ========================================================= */
.renovel-lp-call-fab {
	position: fixed; bottom: 16px; right: 16px;
	background: var(--renovel-lp-accent); color: var(--renovel-lp-dark);
	font-weight: 700; text-decoration: none; padding: 12px 18px;
	border-radius: 50px; box-shadow: var(--renovel-lp-shadow-lg); z-index: 50;
	display: inline-flex; align-items: center;
}

/* =========================================================
   DESKTOP (≥768px)
   ========================================================= */
@media (min-width: 768px) {
	.renovel-lp { padding: 44px 20px 60px; }
	.renovel-lp-question { font-size: 1.6rem; }

	/* Korten rullar ett i taget även på desktop (ingen grid). */
}

/* =========================================================
   HEADER (logo + Offerta-märken), SIDFOT (ring + partners),
   GDPR som klickbar rad. Syns hela vägen.
   ========================================================= */
.renovel-lp-header {
	margin: 0 auto 18px;
	max-width: var(--renovel-lp-maxw);
}
.renovel-lp-header__banner {
	width: 100%; height: auto; display: block;
	border-radius: 14px;
	box-shadow: var(--renovel-lp-shadow);
}

.renovel-lp-footer__call { display: inline-block; font-weight: 700; color: var(--renovel-lp-ink); text-decoration: none; margin-bottom: 14px; font-size: .95rem; }
.renovel-lp-footer__partners { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.renovel-lp-footer__partner { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--renovel-lp-muted); border: 1px solid var(--renovel-lp-border); border-radius: 999px; padding: 4px 10px; background: #fff; }
.renovel-lp-footer__partner svg { width: 13px; height: 13px; flex: 0 0 auto; }
.renovel-lp-footer__partners--img img { max-width: 320px; width: 100%; height: auto; }
.renovel-lp-footer__legal { font-size: .72rem; color: var(--renovel-lp-muted); }

/* WPForms GDPR-kryssruta stylad som en stor klickbar rad */
.renovel-lp-formcard .wpforms-field-gdpr-checkbox ul,
.renovel-lp-formcard .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; }
.renovel-lp-formcard .wpforms-field-gdpr-checkbox label,
.renovel-lp-formcard .wpforms-field-gdpr-checkbox li label {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border: 1.5px solid var(--renovel-lp-border);
	border-radius: 12px; padding: 14px 16px; cursor: pointer;
	box-shadow: var(--renovel-lp-shadow); font-weight: 400 !important;
}