/* ==========================================================================
   Concept Relining – components.css
   Reusable blocks. Each block is targeted by a CSS class set in
   Elementor > widget/container > Advanced > CSS Classes.
   (Moved here from Appearance > Customize > Additional CSS on 2026-10-08.)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FAQ accordion (homepage "Vanliga frågor")
   Class: h-faq-acc  (on the Elementor Nested Accordion widget)
   Colors, borders, spacing and fonts are set in Elementor (Style tab).
   CSS only adds what Elementor can't: the round icon badge, joining an
   open question to its answer, and soft shadows.
   -------------------------------------------------------------------------- */
.h-faq-acc .e-n-accordion-item-title-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F1F5F9;
	transition: background-color .2s ease;
}

.h-faq-acc .e-n-accordion-item-title-icon > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.h-faq-acc .e-n-accordion-item-title {
	transition: border-color .2s ease, box-shadow .2s ease;
}

.h-faq-acc .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:hover {
	box-shadow: 0 6px 20px rgba(14, 22, 41, .06);
}

/* Open question: cyan icon badge, title and answer look like one card. */
.h-faq-acc .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
	background: var(--e-global-color-primary);
}

/* Strong selector: must beat Elementor's own border/radius rules for the title. */
.elementor .elementor-element.h-faq-acc .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-width: 0;
	border-radius: 16px 16px 0 0;
}

.elementor .elementor-element.h-faq-acc .e-n-accordion > .e-n-accordion-item[open] > .e-con {
	border-top-width: 0;
	padding-top: 4px;
}

.h-faq-acc .e-n-accordion-item[open] {
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 176, 243, .10);
}

@media (max-width: 767px) {
	.h-faq-acc .e-n-accordion-item-title-icon {
		flex-basis: 30px;
		width: 30px;
		height: 30px;
	}
}


/* --------------------------------------------------------------------------
   2. Relining vs Stambyte comparison table
   ID:    cus-table         (on the container)
   Class: comparison-table  (on the wrapper around the <table>)
   -------------------------------------------------------------------------- */
#cus-table table {
	border: unset !important;
}

.comparison-table {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 28px;
	overflow: hidden;
	color: #f4f7fb;
	font-family: inherit;
}

.comparison-table table {
	width: 100%;
	border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
	padding: 20px 34px;
	text-align: left;
	font-size: 16px;
	line-height: 1.3;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.comparison-table th {
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.62);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.comparison-table tr:last-child td {
	border-bottom: none;
}

.comparison-table td:first-child {
	width: 27%;
	font-weight: 700;
	color: #f4f7fb;
}

.comparison-table td:nth-child(2),
.comparison-table .highlight {
	color: #00bfff;
}

.comparison-table td:nth-child(3) {
	color: rgba(255, 255, 255, 0.70);
}

/* Mobile: stack each row as a card with RELINING / STAMBYTE labels */
@media (max-width: 767px) {
	.comparison-table {
		border-radius: 18px;
	}

	.comparison-table table,
	.comparison-table tbody,
	.comparison-table tr,
	.comparison-table td {
		display: block;
		width: 100%;
	}

	.comparison-table thead {
		display: none;
	}

	.comparison-table tr {
		border: 1px solid rgba(255, 255, 255, 0.10) !important;
		padding: 12px 15px;
	}

	.comparison-table tr:last-child {
		border-bottom: none;
	}

	.comparison-table td {
		border: none;
		padding: 6px 0;
		font-size: 16px;
	}

	.comparison-table td:first-child {
		width: 100%;
		font-size: 16px;
		margin-bottom: 8px;
	}

	.comparison-table td:nth-child(2)::before {
		content: "RELINING: ";
		color: rgba(255, 255, 255, 0.55);
	}

	.comparison-table td:nth-child(3)::before {
		content: "STAMBYTE: ";
		color: rgba(255, 255, 255, 0.55);
	}
}