/**
 * Ian's Pizza — Order Online popup.
 *
 * Enqueued from inc/ip-order-online-popup.php. Nothing here belongs in
 * styles.css — it only loads on pages that actually render a popup trigger.
 *
 * Values are taken from styles.css rather than invented, so the modal stays in
 * step if the theme's are changed:
 *   - fadeIn keyframe (already defined for SmoothState) at its .25s ease-in timing
 *   - 10px radius + 0 3px 3px rgba(0,0,0,0.2) shadow from the nav dropdown
 *   - #E9212F red, #F3E5CB tan, solid 3px #E72536 focus ring
 *   - .screen-reader-text and [hidden] from the utilities/normalize blocks
 * Type and body color are inherited, so there's nothing to declare for them.
 *
 * Note: CTA triggers render as anchors, so nothing here styles the header
 * button — <a class="btn btn-outline"> picks up the theme's own rules as it
 * always did.
 */

 .ip-oo-modal {
 	width: min(34rem, calc(100vw - 2rem));
 	max-width: none;
 	padding: 0; /* Keeps backdrop clicks reporting the dialog as the target. */
 	border: 0;
 	border-radius: 10px;
 	background: #fff;
 	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
 }

 .ip-oo-modal::backdrop {
 	background: rgba(0, 0, 0, 0.6);
 }

 .ip-oo-modal[open] {
 	animation: fadeIn 0.25s ease-in both;
 }

 @media (prefers-reduced-motion: reduce) {
 	.ip-oo-modal[open] {
 		animation: none;
 	}
 }

 /* Fallback for browsers without showModal(). */
 .ip-oo-modal--fallback {
 	position: fixed;
 	z-index: 99999;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }

 .ip-oo-modal-is-open {
 	overflow: hidden;
 }

 .ip-oo-modal__inner {
 	position: relative;
 	padding: 2rem;
 }

 .ip-oo-modal__title {
 	margin: 0 2.5rem 1rem 0;
 }

 .ip-oo-modal__body > :last-child {
 	margin-bottom: 0;
 }

 .ip-oo-modal__actions {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 1rem;
 	margin-top: 1.5rem;
 }

 .ip-oo-modal__dismiss {
 	position: absolute;
 	top: 0.75rem;
 	right: 0.75rem;
 	width: 2.5rem;
 	height: 2.5rem;
 	padding: 0;
 	border: 0;
 	border-radius: 50%;
 	background: #F3E5CB;
 	color: #E9212F;
 	font-size: 1.5rem;
 	line-height: 1;
 	cursor: pointer;
 }

 .ip-oo-modal__dismiss:hover,
 .ip-oo-modal__dismiss:focus {
 	background: #E9212F;
 	color: #fff;
 }

 /* Theme zeroes outlines globally; put the keyboard ring back inside the dialog. */
 .ip-oo-modal :focus-visible {
 	outline: solid 3px #E72536;
 	outline-offset: 2px;
 }

 /**
  * "Got it" is a <button class="btn btn-outline"> — safe here, since the dialog
  * renders in the footer where navigation.js can't reach it.
  *
  * The theme's base rule gives every button a grey fill, 3px radius, borders
  * and padding, none of which an anchor gets. Stripping those back is the whole
  * job, but the reset must not outrank .btn-outline's own border, background
  * and color. :where() contributes nothing to specificity, so this weighs the
  * same as the base `button` selector (0,0,1) and simply lands later in the
  * cascade. Any .btn or .btn-outline declaration (0,1,0) still wins over it.
  */
 .ip-oo-modal button:where(.btn) {
 	padding: 0;
 	border: 0;
 	border-radius: 0;
 	background: none;
 	color: inherit;
 	font: inherit;
 	cursor: pointer;
 	-webkit-appearance: none;
 	appearance: none;
 }

 :root {
 	--ip-green: #6ea553;
 }

 .ip-oo-modal .btn-primary {
 	align-content: center;
 }

 .ip-oo-modal .ip-oo-modal__actions .btn.btn-outline {
 	border: 2px solid var(--ip-green) !important;
 	background: transparent !important;
 	padding: 0.5rem 1rem !important;
 	border-radius: 22px !important;

 	color: var(--ip-green);
 }