/* VitaminFit — meal planner
   File: woodmart-child/assets/vf-planner.css

   Follows the site design system from the vitaminfit-blog article template:
   same tokens, the green-dot + dashed-rule heading, 35px pill buttons,
   30px dashed panels, line-height 2, font-family inherit.

   One deliberate difference: the tokens below are LITERAL, not
   var(--wd-title-color) / var(--wd-text-color). Those resolve to #fff and
   rgba(255,255,255,.8) on blog pages, but inside the WooCommerce account
   area they are #242424 and #767676 — which on the #1a1a1a background
   renders the text invisible. Learned the hard way. */

.vf-planner {
	--mg-accent: var(--wd-primary-color, #049a37);
	--mg-accent-soft: rgba(4, 154, 55, .14);
	--mg-title: #fff;
	--mg-text: rgba(255, 255, 255, .8);
	--mg-dim: rgba(255, 255, 255, .5);
	--mg-surface: #100f0f;
	--mg-surface-2: #222;
	--mg-border: rgba(255, 255, 255, .15);
	--mg-radius: 20px;
	--mg-over: #d9822b;

	direction: rtl;
	text-align: right;
	font-family: inherit;
	line-height: 2;
	color: var(--mg-text);
	width: 100%;
}

/* .vf-pick is a SIBLING of .vf-planner, not a child, so it needs the
   reset too. Without it the search input inherited the theme's
   content-box and width:100% + padding + border overflowed the dialog,
   pushing it out of alignment. */
.vf-planner *,
.vf-planner *::before,
.vf-planner *::after,
.vf-pick,
.vf-pick *,
.vf-pick *::before,
.vf-pick *::after {
	box-sizing: border-box;
}

/* ---------------- week strip ---------------- */

.vf-plan-week {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.vf-plan-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px dashed var(--mg-border);
	color: var(--mg-title);
	text-decoration: none !important;
	font-size: 1.3rem;
	line-height: 1;
	flex: none;
}

.vf-plan-arrow:hover {
	border-color: var(--mg-accent);
	border-style: solid;
	color: var(--mg-accent);
}

.vf-plan-range {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--mg-title);
}

.vf-plan-now {
	font-size: .9rem;
	padding: 6px 18px;
	border-radius: 35px;
	border: 1px solid var(--mg-border);
	color: var(--mg-text);
	text-decoration: none !important;
}

.vf-plan-now:hover {
	border-color: var(--mg-accent);
	color: var(--mg-accent);
}

/* ---------------- day chips ---------------- */

.vf-plan-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin-bottom: 26px;
	scrollbar-width: thin;
}

.vf-plan-chip {
	flex: 1 0 auto;
	min-width: 92px;
	text-align: center;
	padding: 11px 10px 9px;
	border-radius: var(--mg-radius);
	border: 1px solid var(--mg-border);
	background: var(--mg-surface);
	color: var(--mg-text);
	text-decoration: none !important;
	line-height: 1.7;
	transition: border-color .15s ease, background-color .15s ease;
}

.vf-plan-chip:hover {
	border-color: var(--mg-accent);
}

.vf-plan-chip.is-today {
	border-style: dashed;
	border-color: var(--mg-accent);
}

.vf-plan-chip.is-on {
	background: var(--mg-accent);
	border-color: var(--mg-accent);
	border-style: solid;
	color: #fff;
}

.vf-plan-chipdow {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	color: var(--mg-title);
}

.vf-plan-chip.is-on .vf-plan-chipdow {
	color: #fff;
}

.vf-plan-chipdate {
	display: block;
	font-size: .78rem;
	color: var(--mg-dim);
}

.vf-plan-chip.is-on .vf-plan-chipdate {
	color: rgba(255, 255, 255, .85);
}

.vf-plan-chipdot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin: 3px auto 0;
	background: transparent;
}

.vf-plan-chipdot.is-filled {
	background: var(--mg-accent);
}

.vf-plan-chip.is-on .vf-plan-chipdot.is-filled {
	background: #fff;
}

/* ---------------- day summary ---------------- */

.vf-plan-summary {
	margin-bottom: 30px;
}

.vf-plan-count {
	margin: 0;
	line-height: 1.4;
}

.vf-plan-eaten {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--mg-title);
}

.vf-planner.is-over .vf-plan-eaten {
	color: var(--mg-over);
}

.vf-plan-of,
.vf-plan-unit {
	font-size: 1rem;
	color: var(--mg-dim);
}

.vf-plan-bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	overflow: hidden;
	margin: 10px 0 6px;
	max-width: 520px;
}

.vf-plan-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--mg-accent);
	transition: width .25s ease;
}

.vf-planner.is-over .vf-plan-bar span {
	background: var(--mg-over);
}

.vf-plan-left {
	margin: 0;
	font-size: .92rem;
	color: var(--mg-dim);
	min-height: 1.6em;
}

.vf-plan-nogoal a {
	color: var(--mg-accent);
}

/* ---------------- meals ---------------- */

.vf-plan-slot + .vf-plan-slot {
	margin-top: 30px;
}

.vf-plan-slotname {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 6px;
	padding-bottom: .35em;
	border-bottom: 2px dashed var(--mg-border);
	font-size: 1.28rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--mg-title);
}

.vf-plan-slotname::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mg-accent);
	flex: none;
	align-self: center;
}

.vf-plan-slotkcal {
	margin-right: auto;
	font-size: .85rem;
	font-weight: 400;
	color: var(--mg-dim);
}

.vf-plan-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Rows, not cards — a border around all 28 of these was too much box. */
.vf-plan-item {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--mg-border);
}

.vf-plan-thumb {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	object-fit: cover;
	flex: none;
	display: block;
}

.vf-plan-thumb-none {
	background: var(--mg-surface-2);
	border: 1px dashed var(--mg-border);
}

.vf-plan-itemname {
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--mg-title);
	overflow-wrap: anywhere;
}

.vf-plan-itemkcal {
	font-size: .88rem;
	color: var(--mg-dim);
	white-space: nowrap;
}

.vf-plan-status {
	margin: 26px 0 0;
	font-size: .88rem;
	color: var(--mg-dim);
	min-height: 1.6em;
}

.vf-plan-status.is-saved { color: var(--mg-accent); }
.vf-plan-status.is-failed { color: #e06666; }

/* ---------------- picker ---------------- */

.vf-pick[hidden] {
	display: none;
}

.vf-pick {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, .7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

body.vf-pick-open {
	overflow: hidden;
}

.vf-pick-box {
	direction: rtl;
	text-align: right;
	font-family: inherit;
	line-height: 2;
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 30px;
	width: 100%;
	max-width: 480px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 26px 22px;
	position: relative;
	color: rgba(255, 255, 255, .8);
}

.vf-pick-close {
	position: absolute;
	top: 16px;
	left: 18px;
	line-height: 1;
}

.vf-pick-title {
	margin: 0 0 14px;
	font-size: 1.15rem;
	font-weight: 600;
	color: #fff;
}

/* normalize.css sets `input[type="search"] { box-sizing: content-box }`,
   which is (0,1,1) and beat the `.vf-pick *` reset at (0,1,0). Two classes
   plus the attribute wins it back without !important. `appearance: none`
   drops the browser's search decorations so it matches the other fields. */
.vf-pick input[type="search"].vf-pick-search {
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.vf-pick-search {
	width: 100%;
	padding: 11px 14px;
	border-radius: 35px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: #222;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
}

.vf-pick-search::placeholder {
	color: rgba(255, 255, 255, .38);
}

.vf-pick-search:focus {
	outline: 2px solid var(--wd-primary-color, #049a37);
	outline-offset: 1px;
}

.vf-pick-list {
	list-style: none;
	margin: 14px 0;
	padding: 0;
	max-height: 42vh;
	overflow-y: auto;
}

.vf-pick-thumb {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}

.vf-pick-row.is-fit .vf-pick-name::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wd-primary-color, #049a37);
	margin-right: 7px;
	vertical-align: middle;
}

.vf-pick-name {
	overflow-wrap: anywhere;
}

.vf-pick-empty {
	padding: 16px;
	text-align: center;
	color: rgba(255, 255, 255, .5);
}


/* ----------------------------------------------------------------
   Theme override.

   Woodmart ships:
     :is(.btn, .button, button, [type="submit"], [type="button"])
       { background:#f3f3f3; color:#3e3e3e; border-radius:0;
         text-transform:uppercase; }

   :is() takes the specificity of its most specific argument — .btn,
   so (0,1,0) — the same as a single class of ours, and it loads later,
   so it won. That is why these looked like stock theme buttons, and why
   the calorie text vanished: the picker rows were given a LIGHT grey
   background under our white text.

   Scoping under .vf-planner / .vf-pick gives (0,2,0) and wins outright;
   !important is kept only on the properties the theme forces, which is
   how the site's own .mg-btn handles it.
   ---------------------------------------------------------------- */

.vf-planner button,
.vf-pick button {
	background: none !important;
	color: inherit;
	border-radius: 0;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	font-family: inherit !important;
	min-height: 0 !important;
	line-height: inherit;
}

.vf-planner .vf-plan-add {
	display: inline-block;
	margin-top: 14px;
	border: 1px dashed var(--mg-border) !important;
	border-radius: 35px !important;
	background: none !important;
	color: var(--mg-dim) !important;
	padding: 10px 28px !important;
	font-size: .95rem !important;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.vf-planner .vf-plan-add:hover,
.vf-planner .vf-plan-add:focus-visible {
	border-style: solid !important;
	border-color: var(--mg-accent) !important;
	color: var(--mg-accent) !important;
}

.vf-planner .vf-plan-remove {
	border: 0 !important;
	background: none !important;
	color: var(--mg-dim) !important;
	font-size: 1.4rem !important;
	line-height: 1 !important;
	padding: 4px 8px !important;
	border-radius: 50% !important;
	cursor: pointer;
}

.vf-planner .vf-plan-remove:hover,
.vf-planner .vf-plan-remove:focus-visible {
	color: #e06666 !important;
	background: rgba(224, 102, 102, .14) !important;
}

.vf-pick .vf-pick-close {
	border: 0 !important;
	background: none !important;
	color: rgba(255, 255, 255, .5) !important;
	font-size: 1.6rem !important;
	padding: 2px 6px !important;
	cursor: pointer;
}

.vf-pick .vf-pick-close:hover {
	color: #fff !important;
}

/* The picker row: a dark list row, never a grey theme button. */
.vf-pick .vf-pick-pickbtn {
	width: 100%;
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
	background: none !important;
	border-radius: 0 !important;
	padding: 10px 6px !important;
	color: rgba(255, 255, 255, .85) !important;
	font-size: .98rem !important;
	line-height: 1.6;
	text-align: right;
	cursor: pointer;
}

.vf-pick .vf-pick-pickbtn:hover,
.vf-pick .vf-pick-pickbtn:focus-visible {
	background: rgba(255, 255, 255, .05) !important;
	color: #fff !important;
}

.vf-pick .vf-pick-pickbtn .vf-pick-name {
	color: #fff;
}

/* Calories must stay legible against the dark row. */
.vf-pick .vf-pick-pickbtn .vf-pick-kcal {
	color: rgba(255, 255, 255, .72) !important;
	font-size: .85rem !important;
	white-space: nowrap;
}

.vf-pick .vf-pick-row.is-fit .vf-pick-kcal {
	color: var(--wd-primary-color, #049a37) !important;
}

/* Week arrows / «امروز» are links, but the theme styles those too. */
.vf-planner .vf-plan-arrow,
.vf-planner .vf-plan-now,
.vf-planner .vf-plan-chip {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* ---------------- small screens ---------------- */

@media (max-width: 600px) {
	.vf-plan-eaten {
		font-size: 2.1rem;
	}

	/* Layout itself is handled by the grid-areas below; only sizes change. */
	.vf-plan-item {
		gap: 2px 11px;
	}

	.vf-plan-thumb {
		width: 48px;
		height: 48px;
	}

	.vf-plan-itemkcal {
		font-size: .82rem;
	}
}

/* ---------------- servings stepper ---------------- */

/* The row gains a second line: name on top, servings + calories under it.
   Grid areas rather than more columns, so a long recipe name still gets
   the full width instead of squeezing the controls. */
.vf-plan-item {
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"thumb name   remove"
		"thumb meta   remove";
	align-items: center;
	gap: 2px 14px;
}

.vf-plan-thumb { grid-area: thumb; }
.vf-plan-itemname { grid-area: name; align-self: end; }
.vf-plan-meta { grid-area: meta; align-self: start; }
.vf-plan-remove { grid-area: remove; }

.vf-plan-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.vf-plan-serv {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--mg-border);
	border-radius: 35px;
	padding: 2px;
}

.vf-planner .vf-plan-servbtn {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	background: none !important;
	border-radius: 50% !important;
	color: var(--mg-text) !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	padding: 0 !important;
	cursor: pointer;
}

.vf-planner .vf-plan-servbtn:hover,
.vf-planner .vf-plan-servbtn:focus-visible {
	background: rgba(255, 255, 255, .1) !important;
	color: #fff !important;
}

.vf-plan-servnum {
	min-width: 4.6em;
	text-align: center;
	font-size: .82rem;
	color: var(--mg-dim);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.vf-plan-meta {
		gap: 10px;
	}

	.vf-plan-servnum {
		min-width: 4.2em;
	}
}

/* Recipe names link to the recipe. Woodmart styles links in the account
   area, so colour and underline are stated explicitly. */
a.vf-plan-itemname {
	color: var(--mg-title) !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

a.vf-plan-itemname:hover,
a.vf-plan-itemname:focus-visible {
	color: var(--mg-accent) !important;
	border-bottom-color: currentColor;
}