/* ================================================================
 * Feature 4 — Fase A del 2 (redesign): /medlem header
 * Optimalisert for daglig bruk — minimal friksjon mellom bruker og faner.
 * ================================================================ */

/* ── Skjul gammel Forrige/Neste + tittel fra grocery_prepp_func() ── */
/* Håndteres nå av weekly-nav.css (felles for alle tre sider) */

/* ── Felles header-layout ──────────────────────────────────────── */

.smud-medlem-header {
	max-width: 1000px;
	margin: 0 auto 6px;
	padding: 0 20px;
	font-family: "Josefin Sans", sans-serif;
}

/* ── Tilbake-lenke (kun neste-uke-visning) ──────────────────────── */

.smud-medlem-back {
	display: inline-block;
	font-size: 13px;
	font-weight: 400;
	color: #534AB7;
	text-decoration: none;
	margin-bottom: 6px;
}

.smud-medlem-back:hover {
	text-decoration: underline;
}

/* ── Navigasjonsrad — nå i weekly-nav.css (.smud-weekly-nav) ───── */

/* ── Tittel-blokk ──────────────────────────────────────────────── */

.smud-medlem-title {
	text-align: center;
	margin-bottom: 2px;
}

.smud-medlem-title__name {
	font-family: "Josefin Sans", sans-serif;
	font-size: 32px;
	font-weight: 400;
	color: #000;
	margin: 0;
	line-height: 1.2;
}

.smud-medlem-title__sub {
	font-family: "Josefin Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #888;
	margin: 4px 0 0;
}

/* ── "Bytt meny" outline-pill knapp ────────────────────────────── */

.smud-medlem-bytt-wrap {
	text-align: center;
	margin-bottom: 8px;
}

.smud-medlem-bytt-link {
	display: inline-block !important;
	font-family: "Josefin Sans", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #534AB7 !important;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid #534AB7 !important;
	border-radius: 20px !important;
	padding: 6px 16px !important;
	background: transparent !important;
	transition: background .15s, color .15s;
}

.smud-medlem-bytt-link:hover {
	background: #EEEDFE !important;
	color: #534AB7 !important;
	border-color: #534AB7 !important;
	text-decoration: none !important;
}

/* ── Bytt meny-panel ────────────────────────────────────────────── */

.smud-medlem-bytt-panel {
	max-width: 440px;
	margin: 0 auto 12px;
	background: #fff !important;
	border: 1px solid #e0dde6 !important;
	border-radius: 12px;
	padding: 18px;
}

.smud-medlem-bytt-panel__title {
	font-family: "Josefin Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #222 !important;
	margin: 0 0 12px;
	text-align: center;
}

.smud-medlem-bytt-option,
button.smud-medlem-bytt-option,
.smud-medlem-bytt-panel button,
.smud-medlem-bytt-panel a.smud-medlem-bytt-option {
	display: block;
	width: 100%;
	text-align: left;
	padding: 11px 14px !important;
	margin-bottom: 6px;
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid #e0dde6 !important;
	border-radius: 10px !important;
	cursor: pointer;
	font-family: "Josefin Sans", sans-serif !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: border-color .15s, background .15s;
	box-sizing: border-box;
}

.smud-medlem-bytt-option:hover,
button.smud-medlem-bytt-option:hover,
.smud-medlem-bytt-panel button:hover {
	border-color: #534AB7 !important;
	background: #f8f6fd !important;
	background-color: #f8f6fd !important;
}

.smud-medlem-bytt-option--recommended,
button.smud-medlem-bytt-option--recommended {
	border-left: 3px solid #534AB7 !important;
}

.smud-medlem-bytt-option--disabled {
	border-left: 3px solid #ccc !important;
	border-color: #e8e8e8 !important;
	border-left-color: #ccc !important;
	background: #f9f9f9 !important;
	opacity: 0.55;
	cursor: not-allowed !important;
}

.smud-medlem-bytt-option--disabled .smud-medlem-bytt-option__name {
	color: #999 !important;
	font-weight: 400 !important;
}

.smud-medlem-bytt-option--disabled .smud-medlem-bytt-option__desc {
	color: #aaa !important;
}

.smud-medlem-bytt-option--disabled:hover {
	border-color: #e8e8e8 !important;
	border-left-color: #ccc !important;
	background: #f9f9f9 !important;
}

.smud-medlem-bytt-option__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #222 !important;
}

.smud-medlem-bytt-option__desc {
	display: block;
	font-size: 12px;
	color: #888 !important;
	margin-top: 1px;
}

.smud-medlem-bytt-close {
	display: block;
	text-align: center;
	font-family: "Josefin Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #534AB7 !important;
	text-decoration: none !important;
	margin-top: 8px;
	cursor: pointer;
	background: none !important;
	border: none !important;
}

.smud-medlem-bytt-close:hover {
	text-decoration: underline !important;
	color: #534AB7 !important;
}

/* ── Neste-uke-banner ───────────────────────────────────────────── */

.smud-medlem-next-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #EEEDFE;
	border: none;
	border-radius: 10px;
	padding: 10px 16px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background .15s;
}

.smud-medlem-next-banner:hover {
	background: #e2e0f8;
}

.smud-medlem-next-banner__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex-shrink: 0;
	animation: smud-pulse-green 2s infinite;
}

@keyframes smud-pulse-green {
	0%, 100% { opacity: 1; }
	50%      { opacity: .4; }
}

.smud-medlem-next-banner__text {
	flex: 1;
	font-family: "Josefin Sans", sans-serif;
	font-size: 14px;
	color: #333;
}

.smud-medlem-next-banner__text strong {
	color: #534AB7;
	font-weight: 600;
}

.smud-medlem-next-banner__arrow {
	font-size: 20px;
	color: #534AB7;
	line-height: 1;
}

/* ── Direkte visning (grocery_prepp_id) ──────────────────────────── */

div.smud-medlem-direct {
	margin: 0 auto;
	font-family: "Josefin Sans", sans-serif;
}

div.smud-medlem-direct .smud-medlem-back {
	margin-bottom: 8px;
}

div.smud-medlem-direct .smud-medlem-bytt-wrap {
	margin-bottom: 12px;
}

/* ── "Bruk denne menyen"-knapp (på /standard) ───────────────────── */

.smud-bruk-meny-wrap {
	text-align: center;
	margin: 8px 0 24px;
}

.smud-bruk-meny-btn {
	display: inline-block !important;
	padding: 8px 20px !important;
	font-family: "Josefin Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #534AB7 !important;
	background: transparent !important;
	border: 1px solid #534AB7 !important;
	border-radius: 20px !important;
	cursor: pointer;
	transition: background .15s, color .15s;
	line-height: 1;
}

.smud-bruk-meny-btn:hover {
	background: #EEEDFE !important;
	color: #534AB7 !important;
}

.smud-bruk-meny-btn:disabled {
	opacity: .6;
	cursor: default;
}

/* ── "Bruk som ukas meny"-knapp (på Mine favoritter) ────────────── */

.mine_favoritter-grid-collection-actions {
	flex-wrap: wrap;
}

.mine_favoritter-bruk-meny {
	flex-basis: 100%;
	order: 10;
}

.smud-bruk-favoritt-btn {
	display: inline-block;
	padding: 6px 14px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #534AB7;
	background: transparent;
	border: 1px solid #534AB7;
	border-radius: 20px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.smud-bruk-favoritt-btn:hover {
	background: #534AB7;
	color: #fff;
}

.smud-bruk-favoritt-btn:disabled {
	opacity: .6;
	cursor: default;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.smud-medlem-header {
		padding: 0 16px;
	}
	.smud-medlem-title__name {
		font-size: 26px;
	}
	.smud-bruk-meny-wrap {
		margin-top: 8px;
	}
	.smud-bruk-meny-btn {
		font-size: 12px !important;
		padding: 6px 14px !important;
	}
}

@media (max-width: 480px) {
	.smud-medlem-title__name {
		font-size: 22px;
	}
}