/* =========================================================================
   account-f2-datepicker.css — "Ändra leveransdag"-dialogen (#fma-popup-gordon)
   kontosidor-design 2026-10-20 · W4 · Jossans designförslag 4.5 + F2-KONTRAKT

   Presentation ENBART. Vilka datum som går att välja (Fix 364, Gordon-fönster,
   beforeShowDay) och vad Spara skickar rörs inte. Allt prefixat .fma-f2 (body)
   så reglerna bara träffar kontot; specificitet ≥ style.css:s
   `.woocommerce-account .fma-account-page .fma-popup--gordon …` så de vinner
   oavsett laddordning. Kill-switch: fnm_account_f2_disable=1 (W1).

   Klassregister (W4): .f2-dp-current (td = nuvarande leveransdag, sätts av
   account-f2-datepicker.js).
   ========================================================================= */

/* ---------- Modal: krämvit, radie 24, hemsidans kortskugga ---------- */
.fma-f2 .fma-account-page .fma-popup--gordon {
	border: 0;
	padding: 0;
	background: var(--f2-cream);
	border-radius: var(--f2-radius-lg);
	box-shadow: var(--f2-shadow-lifted);
	color: var(--f2-green);
	font-family: 'gelica', Georgia, serif;
	overflow: visible;
}
.fma-f2 .fma-account-page .fma-popup--gordon::backdrop {
	background-color: rgba(31, 62, 54, 0.32);
}
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__wrapper {
	background: transparent;
	box-shadow: none;
	border-radius: var(--f2-radius-lg);
	max-width: 520px;
	padding: 32px 32px 28px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__content {
	max-width: none;
}

/* Öppning: style.css tonar in alla .fma-popup[open] under 0,6 s (@keyframes open),
   vilket döljer innehållet i mer än 150 ms (checkpoint 1: skärmdump mitt i
   intoningen = bara dimmad overlay). Samma specificitet (0,4,0), senare i
   kaskaden → 120 ms. Mobil-bladet nedan skriver över med sin egen animation. */
.fma-f2 .fma-account-page .fma-popup--gordon[open] {
	animation: f2-dp-fade-in 0.12s ease-out forwards;
}
@keyframes f2-dp-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Rund stängknapp (ikon-knapp) i stället för "X" i svart ram */
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--f2-shadow-card);
	color: var(--f2-green);
	font-family: 'gelica', Georgia, serif;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s, color 0.15s;
}
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close:hover {
	background: var(--f2-tint);
}
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close:focus-visible {
	outline: 2px solid var(--f2-green);
	outline-offset: 2px;
}

/* Titel = kortrubrik (.f2-h3-stil) */
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__title {
	margin: 0 0 16px;
	padding-right: 40px;
	font: 500 18px/1.2 'gelica', Georgia, serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--f2-green);
	text-align: left;
}

/* ---------- OBS-rutan (Fix 198 .fnmk-note-obs, inline-stilad) → .f2-info--warn ----------
   Markupen + inline-style ägs av Fix 198 (W2). Här överstyrs värdena med !important
   tills W2 byter till <p class="f2-info f2-info--warn"> utan inline-style. */
.fma-f2 .fma-account-page .fma-popup--gordon .fnmk-dialog-note {
	margin: 0 0 20px;
	text-align: left;
}
.fma-f2 .fma-account-page .fma-popup--gordon .fnmk-dialog-note .fnmk-note-obs,
.fma-f2 .fma-account-page .fma-popup--gordon .fnmk-note-obs {
	display: block;
	background: #FBE3CF !important;
	border-left: 4px solid var(--f2-orange) !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	color: #7A3A10 !important;
	font: 400 15px/1.5 'gelica', Georgia, serif !important;
	letter-spacing: 0;
}
.fma-f2 .fma-account-page .fma-popup--gordon .fnmk-note-obs strong {
	color: inherit !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}

/* ---------- Datumfält (visning av valt datum + tid) → F2-fältstil ---------- */
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container {
	color: var(--f2-green);
	font-family: 'gelica', Georgia, serif;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-selector {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: auto;
	border: 0;
	border-radius: 0;
	color: var(--f2-green);
	margin: 0 0 16px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-selector::after {
	display: none;
}
/* Etiketten ovanför fältet (inte inuti kanten) */
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .date-label {
	position: static;
	display: block;
	margin: 0 0 6px;
	padding: 0;
	background: transparent;
	font: 600 13px/1.3 'gelica', Georgia, serif;
	color: var(--f2-green);
	text-align: left;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	height: var(--f2-field-h, 52px);
	padding: 14px 52px 14px 14px;
	background: #fff;
	border: 1px solid var(--f2-line);
	border-radius: var(--f2-field-radius, 12px);
	font: 400 16px/1.3 'gelica', Georgia, serif;
	color: var(--f2-green);
	text-align: left;
	cursor: default;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-button::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	background: url(../images/icons/date.svg) no-repeat 50% / contain;
	pointer-events: none;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-btn-time {
	color: var(--f2-mut);
}
/* "MM/DD/YYYY"-hjälpraden är borttagen ur templaten; döljs även om en äldre template ligger kvar */
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-mm-dd-yyyy {
	display: none;
}

/* ---------- Kalenderkortet ---------- */
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-popup {
	background: #fff;
	border: 0;
	border-radius: var(--f2-radius);
	box-shadow: var(--f2-shadow-card);
	min-height: 0;
	padding: 12px 16px 16px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-popup.loading::after {
	background-color: #fff;
	border-radius: var(--f2-radius);
}

/* jQuery-UI-grund: inga smoothness-ramar/bilder, Gelica överallt */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .ui-datepicker-header,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .ui-widget-content {
	background: transparent;
	border: 0;
	font-family: 'gelica', Georgia, serif;
	color: var(--f2-green);
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker {
	margin: 0;
	padding: 0;
	width: 100%;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .ui-datepicker-title {
	margin: 0 0 10px;
	font-weight: 500;
}
/* Månad/år-selects */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .gordon-month-wrapper select,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .gordon-year-wrapper select {
	font: 600 15px/1.2 'gelica', Georgia, serif;
	color: var(--f2-green);
	text-transform: capitalize;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	padding: 8px 18px 8px 8px;
	cursor: pointer;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .gordon-month-wrapper select:hover,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .gordon-year-wrapper select:hover {
	background-color: var(--f2-tint);
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .gordon-month-wrapper select:focus-visible,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .gordon-year-wrapper select:focus-visible {
	outline: 2px solid var(--f2-green);
	outline-offset: 1px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-popup-buttons__nav--prev,
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-popup-buttons__nav--next {
	border-radius: 999px;
	transition: background 0.15s;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-popup-buttons__nav--prev:hover,
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-popup-buttons__nav--next:hover {
	background: var(--f2-tint);
}

/* Veckodagsrad M T O T F L S (texten sätts av account-f2-datepicker.js) */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker th {
	font: 600 12px/1 'gelica', Georgia, serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--f2-mut);
	height: 32px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker th span {
	height: 32px;
	font: inherit;
	color: inherit;
}

/* Dagar */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td {
	padding: 2px 0;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td span {
	position: relative;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: 400 15px/1 'gelica', Georgia, serif;
	text-decoration: none;
	opacity: 1;
	transition: background 0.15s, color 0.15s;
}
/* Valbara = grön text, hover ljusgrön */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a {
	color: var(--f2-green);
	font-weight: 500;
	cursor: pointer;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a:hover,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a:focus-visible {
	background: var(--f2-tint);
	color: var(--f2-green);
	outline: none;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a.ui-state-highlight {
	background: transparent;
	color: var(--f2-green);
}
/* Valt datum = fylld cirkel #1F3E36 med krämvit text */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a.ui-state-active,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td a.ui-state-active:hover {
	background: var(--f2-green);
	color: var(--f2-cream);
	font-weight: 600;
}
/* Ej valbara = ljusgrå */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.ui-datepicker-unselectable span,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.ui-state-disabled span {
	color: var(--f2-mut);
	opacity: 0.4;
	cursor: default;
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.ui-datepicker-other-month span {
	opacity: 0;
}
/* Nuvarande leveransdag = liten prick under siffran (klass från JS) */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.f2-dp-current a::after,
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.f2-dp-current span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--f2-orange);
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.f2-dp-current span {
	opacity: 0.8;
	color: var(--f2-green);
}
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td.f2-dp-current a.ui-state-active::after {
	background: var(--f2-cream);
}

/* "Visa bara veckor där leverans är möjlig": rena visningsregler på redan
   beräknade fönster. En vecka utan ett enda valbart datum (ingen <a>) döljs,
   MEN bara när månaden har minst ett valbart datum (annars blir rutnätet
   tomt) och aldrig den vecka som bär nuvarande leveransdag. Webbläsare utan
   :has() visar hela rutnätet som i dag. */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker-calendar:has(td a) tbody tr:not(:has(td a)):not(:has(td.f2-dp-current)) {
	display: none;
}

/* Linjen mellan kalender och tidsval (jQuery-UI:s buttonpane, "Idag" är dold) */
.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .ui-datepicker-buttonpane.ui-widget-content {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--f2-line);
	background: transparent;
}

/* ---------- Tidsfönster: pill-knappar i grön kontur, vald = fylld grön ---------- */
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots {
	padding: 4px 0 0;
	gap: 10px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-popup-label,
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-slot-label {
	padding: 10px 0 2px;
	font: 600 13px/1.3 'gelica', Georgia, serif;
	color: var(--f2-green);
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-label.error {
	color: var(--f2-error, #B4441B);
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 18px;
	border: 2px solid var(--f2-green);
	border-radius: 999px;
	background: transparent;
	color: var(--f2-green);
	font: 600 14px/1 'gelica', Georgia, serif;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-btn:hover {
	background: var(--f2-tint);
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-btn:focus-visible {
	outline: 2px solid var(--f2-green);
	outline-offset: 2px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-btn.selected,
.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-btn.selected:hover {
	background: var(--f2-green);
	border-color: var(--f2-green);
	color: var(--f2-cream);
}

/* ---------- Spara + fel ---------- */
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__buttons {
	margin-top: 20px;
}
.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__error {
	margin: 12px 0 0;
	font: 400 14px/1.5 'gelica', Georgia, serif;
	color: var(--f2-error, #B4441B);
	text-align: left;
}

/* ---------- Mobil: blad som glider upp från botten ----------
   Fix 198 centrerar alla .fma-popup[open] ≤600px med !important (inline i
   wp_head, rörs ej). Den här dialogen får i stället ett bottenblad: samma
   brytpunkt, högre specificitet + !important. Inslidningen animeras på
   `translate` (inte `transform`, som 198 låser med !important). */
@media (max-width: 600px) {
	.fma-f2 .fma-account-page .fma-popup--gordon[open] {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: none !important;
		max-height: 92vh !important;
		max-height: 92dvh !important;
		overflow-y: auto !important;
		border-radius: var(--f2-radius-lg) var(--f2-radius-lg) 0 0;
		box-shadow: 0 -8px 32px rgba(31, 58, 55, 0.18);
		animation: f2-dp-sheet-up 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* ≤150 ms: innehållet får inte döljas längre */
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__wrapper {
		max-width: none;
		padding: 28px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	}
	/* Handtag överst på bladet */
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__wrapper::before {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		margin: -12px auto 16px;
		border-radius: 999px;
		background: var(--f2-line2);
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close {
		top: 10px;
		right: 10px;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-popup {
		padding: 10px 10px 14px;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .gordon-delivery-container .gordon-delivery-slots .gordon-slot-btn {
		min-height: 44px;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__buttons .fma-popup__button {
		width: 100%;
		min-height: 48px !important;
		height: auto !important;
	}
}
/* W14 (mobilgranskning 21/10, fynd 2): stängknappen får en träffyta på 44 × 44 px på mobil.
   Den synliga vita cirkeln är oförändrad (36 px, samma mittpunkt): knappen växer 4 px åt varje håll
   och cirkeln ritas av ::before med inset 4 px. Bara presentation; stäng-beteendet är orört. */
@media (max-width: 767px) {
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close {
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		background: transparent;
		box-shadow: none;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close::before {
		content: "";
		position: absolute;
		inset: 4px;
		z-index: -1;
		border-radius: 999px;
		background: #fff;
		box-shadow: var(--f2-shadow-card);
		transition: background 0.15s;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close:hover {
		background: transparent;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close:hover::before {
		background: var(--f2-tint);
	}
}
@media (max-width: 600px) {
	.fma-f2 .fma-account-page .fma-popup--gordon .fma-popup__close {
		top: 6px;
		right: 6px;
	}
}
/* Svar 28/10 (N13, "kalendervyn lite stor"): på mobil något tätare blad — OBS-rutan 14 px, mindre luft i
   veckodagsrad och dagrader. Inga ändringar i vilka dagar som är valbara. */
@media (max-width: 600px) {
	.fma-f2 .fma-account-page .fma-popup--gordon .fnmk-dialog-note .fnmk-note-obs,
	.fma-f2 .fma-account-page .fma-popup--gordon .fnmk-note-obs {
		padding: 12px 14px !important;
		font-size: 14px !important;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker th,
	.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker th span {
		height: 26px;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker td {
		padding: 0;
	}
	.fma-f2 .fma-account-page .fma-popup--gordon .ui-datepicker .ui-datepicker-title {
		margin: 0 0 6px;
	}
}
@keyframes f2-dp-sheet-up {
	from {
		translate: 0 100%;
		opacity: 1;
	}
	to {
		translate: 0 0;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fma-f2 .fma-account-page .fma-popup--gordon[open] {
		animation: none;
		opacity: 1;
	}
}