/* =============================================================
 * Nikitabs Section Library - frontend styles
 *
 * Sections the client adds from the dashboard. They follow the same
 * rhythm as .product-section (56px vertical padding, centered titles,
 * brand navy) and reuse the theme's tokens, so an added section sits
 * next to a built-in one without looking pasted in.
 *
 * .faq-item and .pharmacy-card are styled in main.css on purpose:
 * those sections reuse the existing components.
 * ============================================================= */

.nik-sec {
	padding: 56px 0;
	position: relative;
}

.nik-sec__title {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--brand-primary, #1B3A6B);
	margin: 0 0 16px;
	line-height: 1.25;
}

.nik-sec__title--center {
	text-align: center;
	margin-bottom: 32px;
}

.nik-sec__subtitle {
	color: var(--brand-secondary, #00A0E3);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.8rem;
	margin: 0 0 8px;
}

.nik-sec__subtitle--center {
	text-align: center;
	margin-bottom: 32px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--text-gray, #555);
}

.nik-sec__text {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-dark, #2B2B2B);
	margin: 0 0 24px;
}

.nik-sec__text p { margin: 0 0 14px; }
.nik-sec__text p:last-child { margin-bottom: 0; }
.nik-sec__text a { color: var(--brand-primary-light, #0066B3); text-decoration: underline; }
.nik-sec__text ul,
.nik-sec__text ol { margin: 0 0 14px 20px; }
.nik-sec__text li { margin-bottom: 6px; }

/* -------------------------------------------------------------
 * Text + image
 * ------------------------------------------------------------- */
.nik-sec__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.nik-sec__image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg, 16px);
}

.nik-sec--text .container { max-width: 860px; }

.nik-sec--align-center { text-align: center; }
.nik-sec--align-center .nik-sec__text { max-width: 760px; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------- */
.nik-cards {
	display: grid;
	gap: 24px;
}

.nik-cards--3 { grid-template-columns: repeat(3, 1fr); }
.nik-cards--4 { grid-template-columns: repeat(4, 1fr); }

.nik-card {
	background: var(--white, #fff);
	border-radius: var(--radius-lg, 16px);
	padding: 32px 24px;
	text-align: center;
	box-shadow: var(--shadow-card, 0 4px 20px rgba(27, 58, 107, 0.08));
	transition: transform var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
}

.nik-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover, 0 8px 28px rgba(27, 58, 107, 0.14));
}

.nik-card__icon {
	width: var(--icon-size, 56px);
	height: var(--icon-size, 56px);
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--icon-bg, rgba(0, 160, 227, 0.12));
	border-radius: 50%;
}

.nik-card__icon img {
	max-width: 60%;
	max-height: 60%;
	object-fit: contain;
}

.nik-card__title {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--brand-primary, #1B3A6B);
	margin: 0 0 8px;
}

.nik-card__desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-gray, #555);
	margin: 0;
}

/* -------------------------------------------------------------
 * Stats circles
 * ------------------------------------------------------------- */
.nik-stats {
	display: grid;
	gap: 32px;
	justify-content: center;
}

.nik-sec--stats-3 .nik-stats { grid-template-columns: repeat(3, 1fr); }
.nik-sec--stats-4 .nik-stats { grid-template-columns: repeat(4, 1fr); }

.nik-stat { text-align: center; }

.nik-stat__circle {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	margin: 0 auto 16px;
	background: linear-gradient(135deg, var(--brand-primary, #1B3A6B), var(--brand-secondary, #00A0E3));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white, #fff);
	box-shadow: 0 8px 24px rgba(27, 58, 107, 0.2);
}

.nik-stat__value {
	font-family: var(--font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	padding: 0 10px;
	text-align: center;
	line-height: 1.2;
}

.nik-stat__label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-dark, #2B2B2B);
	margin: 0 auto;
	max-width: 180px;
	line-height: 1.45;
}

/* -------------------------------------------------------------
 * CTA banner
 * ------------------------------------------------------------- */
.nik-sec--cta {
	padding: 60px 0;
	color: var(--white, #fff);
}

.nik-cta {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.nik-cta__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 700;
	color: var(--white, #fff);
	margin: 0 0 12px;
}

.nik-cta__text {
	font-size: 1.05rem;
	line-height: 1.55;
	margin: 0 0 24px;
	opacity: 0.95;
}

/* -------------------------------------------------------------
 * FAQ and pharmacies reuse main.css components; only spacing here.
 * ------------------------------------------------------------- */
.nik-sec--faq .faq-list { max-width: 840px; margin: 0 auto; }
.nik-sec--pharmacies .pharmacy-grid { margin-top: 8px; }

/* -------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 960px) {
	.nik-sec { padding: 48px 0; }
	.nik-sec__grid { grid-template-columns: 1fr; gap: 32px; }
	.nik-sec--image-left .nik-sec__image { order: -1; }
	.nik-cards--3,
	.nik-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.nik-sec--stats-4 .nik-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.nik-sec { padding: 40px 0; }
	.nik-cards--3,
	.nik-cards--4 { grid-template-columns: 1fr; }
	.nik-sec--stats-3 .nik-stats,
	.nik-sec--stats-4 .nik-stats { grid-template-columns: 1fr; }
	.nik-stat__circle { width: 120px; height: 120px; }
	.nik-sec__title { font-size: 1.35rem; }
}