/* MSC Cart Cautions: anchored popover, tabs and sheet. Blush #FCEFEE, pink #FF1F7D, charcoal. */
.msc-modal[hidden] { display: none; }
.msc-modal { position: fixed; inset: 0; z-index: 100000; }
.msc-backdrop { position: absolute; inset: 0; background: transparent; }
html.msc-lock { overflow: hidden; }

/* Popover: JS sets top and left from the clicked button. */
.msc-dialog {
	position: fixed; top: 0; left: 0; width: 440px; max-width: calc(100vw - 16px); max-height: 80vh; overflow-y: auto;
	background: #fff; color: #2b2b2b; border-radius: 14px; padding: 18px 18px 22px;
	font-family: "Work Sans", sans-serif; font-size: 15px; line-height: 1.45;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); outline: none;
	animation: msc-in 0.16s ease-out;
}
.msc-arrow {
	position: fixed; top: 0; left: 0; width: 16px; height: 16px; background: #fff;
	transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.12); pointer-events: none;
}
.msc-arrow.is-below { box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.12); }
.msc-arrow[hidden] { display: none; }
.msc-dialog .msc-heading { margin: 0 0 10px; padding: 0; font-family: "Fraunces", serif; font-size: 19px !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none; color: #2b2b2b; }

.msc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 2px solid #FCEFEE; }
.msc-tabs[hidden] { display: none; }
.msc-tab {
	appearance: none; background: #FCEFEE; border: 0; border-radius: 10px 10px 0 0; padding: 9px 12px;
	font: inherit; font-size: 14px; font-weight: 600; color: #2b2b2b; cursor: pointer; min-height: 44px;
}
.msc-tab[aria-selected="true"] { background: #FF1F7D; color: #fff; }
.msc-tab.is-done .msc-tab-mark { font-weight: 700; }

.msc-panel[hidden] { display: none; }
.msc-panel { background: #FCEFEE; border-radius: 10px; padding: 12px 14px; outline-offset: 2px; }
.msc-note { margin: 0 0 10px; }
.msc-note a { color: #FF1F7D; }

.msc-status { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; color: #555; }
.msc-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

.msc-btn {
	appearance: none; border: 2px solid #FF1F7D; border-radius: 999px; padding: 11px 20px; min-height: 44px;
	font: inherit; font-weight: 600; cursor: pointer; background: #FF1F7D; color: #fff;
}
.msc-dialog .msc-tab { margin: 0; padding: 8px 10px; font-size: 13px; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.msc-dialog .msc-btn { margin: 0; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.msc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.msc-btn-ghost { background: #fff; color: #FF1F7D; }
.msc-btn-ack.is-done { background: #fff; color: #2b2b2b; border-color: #2b2b2b; opacity: 1; }
.msc-btn:focus-visible, .msc-tab:focus-visible, .msc-panel:focus-visible { outline: 3px solid #2b2b2b; outline-offset: 2px; }

@keyframes msc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bottom sheet: used when the popover cannot fit (class set by JS). */
.msc-modal.is-sheet .msc-backdrop { background: rgba(34, 34, 34, 0.5); }
.msc-modal.is-sheet .msc-dialog {
	top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh;
	border-radius: 16px 16px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.msc-modal.is-sheet .msc-arrow { display: none; }
.msc-modal.is-sheet .msc-actions { flex-direction: column-reverse; }
.msc-modal.is-sheet .msc-actions .msc-btn { width: 100%; }
.msc-tab { flex: 0 1 auto; }

@media (prefers-reduced-motion: reduce) {
	.msc-dialog { animation: none; }
}