/* Mr Fresh box purchase options. Uses the theme's tokens and mirrors the size cards (.variant). */

.mb{margin-bottom:24px}

/* One-time / Subscribe cards */
.mb-modes{display:grid;gap:10px}
.mb-mode{position:relative;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1.5px solid var(--line);border-radius:18px;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.mb-mode:hover{border-color:#CFE0CE}
.mb-mode input{position:absolute;opacity:0;pointer-events:none}
.mb-mode:has(input:checked){border-color:var(--green-700);box-shadow:0 0 0 3px rgba(46,125,50,.14)}
.mb-mode:has(input:focus-visible){outline:2px solid var(--green-900);outline-offset:2px}
.mb-mode__dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:border-color .2s var(--ease)}
.mb-mode:has(input:checked) .mb-mode__dot{border-color:var(--green-700)}
.mb-mode:has(input:checked) .mb-mode__dot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--green-700)}
.mb-mode__text{display:grid;gap:2px;min-width:0}
.mb-mode__text b{font-size:15.5px;color:var(--ink)}
.mb-mode__text small{font-size:13px;color:var(--muted);line-height:1.35}
.mb-mode__price{font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap;text-align:right}
.mb-mode__price s{display:block;font-weight:500;font-size:13px;color:var(--muted)}

/* Subscription details, revealed under the cards */
.mb-sub{display:grid;gap:18px;margin-top:12px;padding:18px;border-radius:18px;background:var(--beige-soft,#f7f5ef)}
.mb-sub[hidden]{display:none}
.mb-field{display:grid;gap:8px}
.mb-field[hidden]{display:none}
.mb-field__label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* Frequency: segmented control */
.mb-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:#fff;border:1.5px solid var(--line);border-radius:14px}
.mb-seg label{position:relative;cursor:pointer}
.mb-seg input{position:absolute;opacity:0;pointer-events:none}
.mb-seg span{display:block;padding:10px 6px;border-radius:10px;text-align:center;font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.mb-seg input:checked+span{background:var(--green-700);color:#fff}
.mb-seg input:focus-visible+span{outline:2px solid var(--green-900);outline-offset:2px}

/* Delivery day chips, each showing its first delivery date */
.mb-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.mb-days label{position:relative;cursor:pointer}
.mb-days input{position:absolute;opacity:0;pointer-events:none}
.mb-days span{display:grid;gap:1px;justify-items:center;padding:12px 2px;background:#fff;border:1.5px solid var(--line);border-radius:12px;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.mb-days b{font-size:14px;color:inherit}
.mb-days small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.mb-days label:hover span{border-color:#CFE0CE}
.mb-days input:checked+span{background:var(--green-700);border-color:var(--green-700);color:#fff}
.mb-days input:checked+span small{color:rgba(255,255,255,.85)}
.mb-days input:focus-visible+span{outline:2px solid var(--green-900);outline-offset:2px}

.mb select{width:100%;min-height:48px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}

/* Schedule summary */
.mb-summary{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:12px 14px;border-radius:12px;background:#fff;color:var(--muted);font-size:14px;line-height:1.5}
.mb-summary svg{width:20px;height:20px;margin-top:1px}
.mb-summary p{margin:0}
.mb-summary.is-set{color:var(--ink)}
.mb-summary.is-set svg{color:var(--green-700)}
.mb-summary b{color:var(--green-900)}

@media (max-width:420px){
	.mb-mode{grid-template-columns:22px 1fr;padding:14px}
	.mb-mode__price{grid-column:2;text-align:left}
	.mb-mode__price s{display:inline;margin-right:6px}
	.mb-days{gap:4px}
	.mb-days b{font-size:13px}
	.mb-days small{font-size:10.5px}
	.mb-sub{padding:14px}
}

/* Missing delivery day/date: an in-page error instead of the browser tooltip */
.mb-error{display:flex;align-items:center;gap:6px;margin:2px 0 0;color:#b3261e;font-size:13.5px;font-weight:600;line-height:1.35}
.mb-error[hidden]{display:none}
.mb-error::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#b3261e;color:#fff;font-size:12px;font-weight:800}
.mb-field--error .mb-field__label{color:#b3261e}
.mb-field--error .mb-days label span,
.mb-field--error select{border-color:#d93025;background:#fff7f6}
.mb-field--error .mb-days,
.mb-field--error select{animation:mb-shake .4s ease}
.mb-summary.is-error{color:#b3261e}
@keyframes mb-shake{
	0%,100%{transform:translateX(0)}
	20%{transform:translateX(-6px)}
	40%{transform:translateX(6px)}
	60%{transform:translateX(-4px)}
	80%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
	.mb-field--error .mb-days,
	.mb-field--error select{animation:none}
}