/**
 * Order Preference for WooCommerce — Popup Stylesheet (Premium UI)
 *
 * Scoped entirely under #op-popup so nothing here can leak into the rest
 * of the site's theme. All selectors target IDs/classes that already
 * exist in templates/popup.php and class-popup.php — nothing has been
 * renamed. Icons are rendered via Font Awesome 6 Free glyph codepoints on
 * ::before/::after pseudo-elements, so no new markup was needed for them.
 *
 * @package OrderPreference
 */

@import url( 'https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap' );
@import url( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' );

/* -------------------------------------------------------------------- */
/* Design tokens                                                         */
/* -------------------------------------------------------------------- */
#op-popup {
	--op-white: #ffffff;
	--op-burgundy: #3a1035;
	--op-text: #3a1035;
	--op-text-muted: #7a6f7e;
	--op-border: #ece6ec;
	--op-border-strong: #ddd2dd;
	--op-accent-1: #ff6b6b;
	--op-accent-2: #ff4d6d;
	--op-gradient: linear-gradient( 135deg, var( --op-accent-1 ), var( --op-accent-2 ) );
	--op-blue-bg: #eaf4ff;
	--op-blue-text: #1d6fa5;
	--op-blue-bg-hover: #dcecff;
	--op-success-bg: #e9f8ee;
	--op-success-text: #1f8a4c;
	--op-closed-bg: #fdeceb;
	--op-closed-text: #c8402f;
	--op-radius-lg: 22px;
	--op-radius-md: 16px;
	--op-radius-sm: 12px;
	--op-radius-pill: 999px;
	--op-shadow-popup: 0 30px 80px rgba( 58, 16, 53, 0.22 ), 0 8px 24px rgba( 58, 16, 53, 0.10 );
	--op-shadow-card: 0 2px 8px rgba( 58, 16, 53, 0.05 );
	--op-shadow-card-hover: 0 12px 28px rgba( 58, 16, 53, 0.12 );
	--op-transition: 200ms cubic-bezier( 0.2, 0.7, 0.3, 1 );

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var( --op-text );
	background: var( --op-white );
	max-width: 900px;
	width: 92vw;
	margin: 20px auto;
	border-radius: var( --op-radius-lg );
	box-shadow: var( --op-shadow-popup );
	padding: 40px 44px 32px;
	box-sizing: border-box;
	position: relative;
	animation: op-fade-in 320ms cubic-bezier( 0.2, 0.7, 0.3, 1 );

	/* Viewport-fit: never taller than the window, scroll internally instead. */
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
}

#op-popup *,
#op-popup *::before,
#op-popup *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------- */
/* Viewport fitting / overflow (Elementor popup wrapper support)         */
/* -------------------------------------------------------------------- */
/* Our own popup content never causes horizontal scroll, regardless of
   what wraps it. */
html body #op-popup {
	max-width: 100%;
}

/* Elementor Pro's dialog wrapper around our popup content — these are
   Elementor's own standard class names, not markup we control. Rules are
   purely additive: if a theme/Elementor version uses different classes,
   these simply have no effect and #op-popup's own max-height/overflow-y
   above still guarantees the popup itself never exceeds the viewport. */
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .dialog-lightbox-widget-content {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
}

.elementor-popup-modal .dialog-message.dialog-lightbox-message {
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px;
}

/* Prevent the page behind the popup from scrolling while it's open
   (matches Elementor/Dialog's own "dialog-prevent-scroll" convention
   already referenced by this plugin's existing JS). */
html.dialog-prevent-scroll,
body.dialog-prevent-scroll {
	overflow: hidden !important;
}

@keyframes op-fade-in {
	from {
		opacity: 0;
		transform: translateY( 12px ) scale( 0.98 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#op-popup,
	#op-popup * {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------- */
/* Header                                                                 */
/* -------------------------------------------------------------------- */
#op-popup .op-popup__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 4px;
}

#op-popup .op-popup__heading {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.1;
	color: var( --op-burgundy );
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

#op-popup .op-popup__subtitle {
	font-size: 16px;
	color: var( --op-text-muted );
	margin: 0 0 28px;
	font-weight: 500;
}

#op-popup .op-popup__header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding-top: 6px;
}

#op-popup .op-skip-button {
	background: none;
	border: none;
	color: var( --op-text-muted );
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: var( --op-radius-sm );
	transition: background var( --op-transition ), color var( --op-transition );
}

#op-popup .op-skip-button:hover {
	background: var( --op-border );
	color: var( --op-text );
}

#op-popup .op-popup-close {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var( --op-border );
	background: var( --op-white );
	color: var( --op-text-muted );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all var( --op-transition );
}

#op-popup .op-popup-close:hover {
	background: var( --op-closed-bg );
	color: var( --op-closed-text );
	border-color: var( --op-closed-text );
	transform: rotate( 90deg );
}

#op-popup .op-popup-close .dashicons {
	display: none; /* replaced visually by the ::before icon below */
}

#op-popup .op-popup-close::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f00d";
}

#op-popup .op-popup__empty-notice {
	background: var( --op-closed-bg );
	color: var( --op-closed-text );
	padding: 18px 20px;
	border-radius: var( --op-radius-sm );
	font-weight: 500;
}

/* -------------------------------------------------------------------- */
/* Section headings                                                       */
/* -------------------------------------------------------------------- */
#op-popup .op-section-heading {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var( --op-burgundy );
	margin: 32px 0 16px;
}

/* -------------------------------------------------------------------- */
/* Order Type buttons                                                     */
/* -------------------------------------------------------------------- */
#op-popup .op-order-types {
	display: flex;
	gap: 14px;
	margin-top: 8px;
}

#op-popup .op-type {
	flex: 1 1 0;
	height: 70px;
	border-radius: var( --op-radius-md );
	border: 2px solid var( --op-border );
	background: var( --op-white );
	color: var( --op-text );
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform var( --op-transition ), box-shadow var( --op-transition ),
		background var( --op-transition ), border-color var( --op-transition ), color var( --op-transition );
}

#op-popup .op-type::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 20px;
}

#op-popup .op-type[ data-type="delivery" ]::before {
	content: "\f0d1"; /* truck */
}

#op-popup .op-type[ data-type="pickup" ]::before {
	content: "\f290"; /* bag-shopping */
}

#op-popup .op-type[ data-type="dinein" ]::before {
	content: "\f2e7"; /* utensils */
}

#op-popup .op-type:hover {
	transform: translateY( -2px );
	box-shadow: var( --op-shadow-card-hover );
	border-color: var( --op-border-strong );
}

#op-popup .op-type.active {
	background: var( --op-gradient );
	border-color: transparent;
	color: var( --op-white );
	box-shadow: 0 10px 24px rgba( 255, 77, 109, 0.35 );
}

/* -------------------------------------------------------------------- */
/* Delivery Address                                                       */
/* -------------------------------------------------------------------- */
#op-popup .op-delivery-address {
	margin-top: 28px;
}

#op-popup .op-delivery-address > label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var( --op-text );
	margin-bottom: 8px;
}

#op-popup .op-address-row {
	display: flex;
	gap: 12px;
}

#op-popup .op-customer-address-input {
	flex: 1 1 auto;
	height: 54px;
	border-radius: var( --op-radius-sm );
	border: 2px solid var( --op-border );
	padding: 0 18px;
	font-size: 15px;
	font-family: 'Inter', sans-serif;
	color: var( --op-text );
	background: var( --op-white );
	transition: border-color var( --op-transition ), box-shadow var( --op-transition );
}

#op-popup .op-customer-address-input::placeholder {
	color: #b9afc0;
	font-weight: 400;
}

#op-popup .op-customer-address-input:focus {
	outline: none;
	border-color: var( --op-accent-2 );
	box-shadow: 0 0 0 4px rgba( 255, 77, 109, 0.12 );
}

#op-popup #op-use-current-location {
	flex-shrink: 0;
	height: 54px;
	padding: 0 22px;
	border-radius: var( --op-radius-pill );
	border: none;
	background: var( --op-blue-bg );
	color: var( --op-blue-text );
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background var( --op-transition ), transform var( --op-transition );
}

#op-popup #op-use-current-location .dashicons {
	display: none;
}

#op-popup #op-use-current-location::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f3c5"; /* location-dot */
	font-size: 15px;
}

#op-popup #op-use-current-location:hover {
	background: var( --op-blue-bg-hover );
	transform: translateY( -1px );
}

#op-popup .op-radius-warning {
	margin-top: 12px;
	background: var( --op-closed-bg );
	color: var( --op-closed-text );
	padding: 12px 16px;
	border-radius: var( --op-radius-sm );
	font-size: 14px;
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Saved Locations: Add Location card / Saved Location card              */
/* -------------------------------------------------------------------- */
#op-popup .op-add-location-card {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	border-radius: var( --op-radius-sm );
	border: 2px dashed var( --op-border-strong );
	background: var( --op-white );
	color: var( --op-accent-2 );
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: border-color var( --op-transition ), background var( --op-transition ), transform var( --op-transition );
}

#op-popup .op-add-location-card:hover {
	border-color: var( --op-accent-2 );
	background: var( --op-closed-bg );
	transform: translateY( -1px );
}

#op-popup .op-add-location-card .dashicons {
	display: none;
}

#op-popup .op-add-location-card::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f055"; /* plus-circle */
	font-size: 16px;
}

#op-popup .op-saved-location-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border: 2px solid var( --op-border );
	border-radius: var( --op-radius-sm );
	padding: 16px 18px;
	background: var( --op-white );
	transition: box-shadow var( --op-transition ), border-color var( --op-transition );
}

#op-popup .op-saved-location-card:hover {
	border-color: var( --op-border-strong );
	box-shadow: var( --op-shadow-card );
}

#op-popup .op-saved-location-card__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --op-closed-bg );
	display: flex;
	align-items: center;
	justify-content: center;
}

#op-popup .op-saved-location-card__icon .dashicons {
	display: none;
}

#op-popup .op-saved-location-card__icon::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f3c5"; /* location-dot */
	color: var( --op-accent-2 );
	font-size: 16px;
}

#op-popup .op-saved-location-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

#op-popup .op-saved-location-card__body strong {
	display: block;
	font-size: 15px;
	color: var( --op-text );
	margin-bottom: 2px;
}

#op-popup .op-saved-location-card__body p {
	margin: 0;
	font-size: 13px;
	color: var( --op-text-muted );
	line-height: 1.5;
	word-break: break-word;
}

#op-popup .op-edit-location-btn {
	flex-shrink: 0;
	border: 2px solid var( --op-border-strong );
	background: var( --op-white );
	color: var( --op-text );
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var( --op-radius-pill );
	cursor: pointer;
	transition: border-color var( --op-transition ), background var( --op-transition );
}

#op-popup .op-edit-location-btn:hover {
	border-color: var( --op-accent-2 );
	background: var( --op-closed-bg );
	color: var( --op-accent-2 );
}

/* -------------------------------------------------------------------- */
/* Add/Edit Location modal                                                */
/* -------------------------------------------------------------------- */
#op-location-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 58, 16, 53, 0.45 );
	padding: 20px;
	animation: op-fade-in 200ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

#op-location-modal[hidden] {
	display: none;
}

#op-location-modal .op-location-modal__panel {
	background: var( --op-white );
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: var( --op-radius-lg );
	box-shadow: var( --op-shadow-popup );
	box-sizing: border-box;
}

#op-location-modal .op-location-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var( --op-border );
}

#op-location-modal .op-location-modal__header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var( --op-burgundy );
}

#op-location-modal .op-location-modal__close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --op-border );
	background: var( --op-white );
	color: var( --op-text-muted );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var( --op-transition ), color var( --op-transition );
}

#op-location-modal .op-location-modal__close .dashicons {
	display: none;
}

#op-location-modal .op-location-modal__close::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f00d"; /* xmark */
	font-size: 13px;
}

#op-location-modal .op-location-modal__close:hover {
	border-color: var( --op-accent-2 );
	color: var( --op-accent-2 );
}

#op-location-modal .op-location-map {
	width: 100%;
	height: 220px;
	background: var( --op-border );
}

/* Leaflet's own CSS handles the map internals; this just makes sure our
   container establishes a stacking context so tile/marker layers render
   correctly inside the modal. */
#op-location-modal .op-location-map.leaflet-container {
	border-radius: var( --op-radius-sm );
}

/* Address search results dropdown (free-text search via Nominatim) */
#op-location-modal .op-location-search-results {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 4px;
	list-style: none;
	background: var( --op-white );
	border: 1px solid var( --op-border );
	border-radius: var( --op-radius-sm );
	box-shadow: var( --op-shadow-popup );
	max-height: 220px;
	overflow-y: auto;
}

#op-location-modal .op-location-search-results[hidden] {
	display: none;
}

#op-location-modal .op-location-search-results li {
	padding: 8px 10px;
	font-size: 13px;
	color: var( --op-text );
	cursor: pointer;
	border-radius: var( --op-radius-sm );
	line-height: 1.35;
}

#op-location-modal .op-location-search-results li:hover {
	background: var( --op-closed-bg );
	color: var( --op-accent-2 );
}

#op-location-modal .op-field:has( #op-location-search ) {
	position: relative;
}

#op-location-modal .op-location-modal__body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#op-location-modal .op-field {
	margin: 0;
}

#op-location-modal .op-field label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var( --op-text );
	margin-bottom: 6px;
}

#op-location-modal input[type="text"],
#op-location-modal textarea {
	width: 100%;
	border-radius: var( --op-radius-sm );
	border: 2px solid var( --op-border );
	padding: 12px 16px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	color: var( --op-text );
	background: var( --op-white );
	transition: border-color var( --op-transition ), box-shadow var( --op-transition );
}

#op-location-modal input[type="text"]::placeholder,
#op-location-modal textarea::placeholder {
	color: #b9afc0;
	font-weight: 400;
}

#op-location-modal input[type="text"]:focus,
#op-location-modal textarea:focus {
	outline: none;
	border-color: var( --op-accent-2 );
	box-shadow: 0 0 0 4px rgba( 255, 77, 109, 0.12 );
}

#op-location-modal textarea {
	resize: vertical;
	min-height: 60px;
}

#op-location-modal .op-use-current-location-btn {
	align-self: flex-start;
}

#op-location-modal .op-location-modal__error {
	margin: 0;
	background: var( --op-closed-bg );
	color: var( --op-closed-text );
	padding: 10px 14px;
	border-radius: var( --op-radius-sm );
	font-size: 13px;
	font-weight: 600;
}

#op-location-modal .op-save-location-btn {
	width: 100%;
	height: 54px;
	border: none;
	border-radius: var( --op-radius-pill );
	background: var( --op-gradient );
	color: var( --op-white );
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	transition: transform var( --op-transition ), box-shadow var( --op-transition );
}

#op-location-modal .op-save-location-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 10px 24px rgba( 255, 77, 109, 0.3 );
}

@media ( max-width: 600px ) {

	#op-location-modal .op-location-modal__panel {
		max-height: 95vh;
	}

	#op-location-modal .op-location-map {
		height: 180px;
	}
}

/* -------------------------------------------------------------------- */
/* Outlet List / Cards                                                    */
/* -------------------------------------------------------------------- */
#op-popup .op-outlet-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#op-popup .op-no-outlets {
	color: var( --op-text-muted );
	font-style: italic;
}

#op-popup .op-outlet-card {
	position: relative;
	border: 2px solid var( --op-border );
	border-radius: var( --op-radius-md );
	background: var( --op-white );
	padding: 20px;
	box-shadow: var( --op-shadow-card );
	transition: box-shadow var( --op-transition ), border-color var( --op-transition ), transform var( --op-transition );
}

#op-popup .op-outlet-card::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f54e"; /* store */
	position: absolute;
	left: 20px;
	top: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var( --op-closed-bg );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var( --op-accent-2 );
}

#op-popup .op-outlet-card:hover {
	box-shadow: var( --op-shadow-card-hover );
	transform: translateY( -2px );
}

#op-popup .op-outlet-card:has( input:checked ) {
	border-color: var( --op-accent-2 );
	box-shadow: 0 8px 24px rgba( 255, 77, 109, 0.15 );
}

#op-popup .op-outlet-card--disabled {
	opacity: 0.55;
}

#op-popup .op-outlet-card--disabled:hover {
	transform: none;
	box-shadow: var( --op-shadow-card );
}

#op-popup .op-outlet-card__select {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	cursor: pointer;
	margin: 0;
}

#op-popup .op-outlet-card__select input[ type="radio" ] {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var( --op-accent-2 );
	flex-shrink: 0;
	cursor: pointer;
}

#op-popup .op-outlet-card__body {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 20px;
	row-gap: 4px;
	align-items: start;
}

#op-popup .op-outlet-card__title-row {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

#op-popup .op-outlet-card__name {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var( --op-text );
}

#op-popup .op-outlet-badge {
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: var( --op-radius-pill );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

#op-popup .op-outlet-badge--open {
	background: var( --op-success-bg );
	color: var( --op-success-text );
}

#op-popup .op-outlet-badge--closed {
	background: var( --op-closed-bg );
	color: var( --op-closed-text );
}

#op-popup .op-outlet-card__address,
#op-popup .op-outlet-card__phone {
	grid-column: 1;
	font-size: 14px;
	color: var( --op-text-muted );
	margin: 2px 0;
}

#op-popup .op-outlet-card__phone {
	display: flex;
	align-items: center;
	gap: 6px;
}

#op-popup .op-outlet-card__phone .dashicons {
	display: none;
}

#op-popup .op-outlet-card__phone::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f095"; /* phone */
	font-size: 12px;
	color: var( --op-text-muted );
}

#op-popup .op-outlet-card__hours,
#op-popup .op-outlet-card__fee,
#op-popup .op-outlet-card__eta {
	grid-column: 2;
	text-align: right;
	font-size: 13px;
	color: var( --op-text-muted );
	margin: 2px 0;
	font-weight: 500;
}

#op-popup .op-outlet-card__hours::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f017 ";
	margin-right: 4px;
}

#op-popup .op-outlet-card__eta {
	color: var( --op-accent-2 );
	font-weight: 700;
}

#op-popup .op-outlet-card__next-opening {
	grid-column: 1 / -1;
	font-size: 13px;
	color: var( --op-closed-text );
	font-weight: 600;
	margin: 4px 0 0;
}

#op-popup .op-outlet-card__distance {
	grid-column: 1 / -1;
	display: block;
	text-align: right;
	font-size: 12px;
	color: var( --op-text-muted );
}

/* -------------------------------------------------------------------- */
/* Delivery Time                                                          */
/* -------------------------------------------------------------------- */
#op-popup .op-delivery-time-toggle {
	display: flex;
	gap: 14px;
}

#op-popup .op-deliver-now,
#op-popup .op-deliver-schedule {
	flex: 1 1 0;
	border: 2px solid var( --op-border );
	background: var( --op-white );
	border-radius: var( --op-radius-md );
	padding: 18px 20px;
	text-align: left;
	cursor: pointer;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var( --op-text );
	position: relative;
	padding-left: 54px;
	min-height: 74px;
	transition: all var( --op-transition );
}

#op-popup .op-deliver-now::before,
#op-popup .op-deliver-schedule::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	left: 18px;
	top: 18px;
	font-size: 20px;
}

#op-popup .op-deliver-now::before {
	content: "\f0e7"; /* bolt */
}

#op-popup .op-deliver-schedule::before {
	content: "\f073"; /* calendar */
}

#op-popup .op-deliver-now::after,
#op-popup .op-deliver-schedule::after {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12.5px;
	margin-top: 3px;
	opacity: 0.75;
}

#op-popup .op-deliver-now::after {
	content: "As soon as possible";
}

#op-popup .op-deliver-schedule::after {
	content: "Choose date and time";
}

#op-popup .op-deliver-now:hover,
#op-popup .op-deliver-schedule:hover {
	transform: translateY( -2px );
	box-shadow: var( --op-shadow-card-hover );
	border-color: var( --op-border-strong );
}

#op-popup .op-deliver-now.active,
#op-popup .op-deliver-schedule.active {
	background: var( --op-gradient );
	border-color: transparent;
	color: var( --op-white );
	box-shadow: 0 10px 24px rgba( 255, 77, 109, 0.3 );
}

#op-popup #op-schedule-wrapper {
	margin-top: 16px;
	overflow: hidden;
}

#op-popup .op-schedule {
	display: flex;
	gap: 16px;
	margin-top: 4px;
}

#op-popup .op-field {
	flex: 1 1 0;
	margin: 0;
}

#op-popup .op-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var( --op-text-muted );
	margin-bottom: 6px;
}

#op-popup .op-delivery-date-input,
#op-popup .op-delivery-time-select {
	width: 100%;
	height: 50px;
	border-radius: var( --op-radius-sm );
	border: 2px solid var( --op-border );
	padding: 0 16px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	color: var( --op-text );
	background: var( --op-white );
	transition: border-color var( --op-transition ), box-shadow var( --op-transition );
	appearance: none;
	-webkit-appearance: none;
}

#op-popup .op-delivery-time-select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237a6f7e'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%237a6f7e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

#op-popup .op-delivery-date-input::-webkit-calendar-picker-indicator {
	filter: invert( 24% ) sepia( 46% ) saturate( 3000% ) hue-rotate( 320deg );
	cursor: pointer;
}

#op-popup .op-delivery-date-input:focus,
#op-popup .op-delivery-time-select:focus {
	outline: none;
	border-color: var( --op-accent-2 );
	box-shadow: 0 0 0 4px rgba( 255, 77, 109, 0.12 );
}

/* -------------------------------------------------------------------- */
/* Order Instructions                                                     */
/* -------------------------------------------------------------------- */
#op-popup .op-notes {
	margin-top: 28px;
	position: relative;
}

#op-popup .op-notes label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

#op-popup #op_order_notes {
	width: 100%;
	min-height: 96px;
	border-radius: var( --op-radius-sm );
	border: 2px solid var( --op-border );
	padding: 16px 18px;
	font-size: 14.5px;
	font-family: 'Inter', sans-serif;
	color: var( --op-text );
	resize: vertical;
	transition: border-color var( --op-transition ), box-shadow var( --op-transition );
}

#op-popup #op_order_notes::placeholder {
	color: #b9afc0;
}

#op-popup #op_order_notes:focus {
	outline: none;
	border-color: var( --op-accent-2 );
	box-shadow: 0 0 0 4px rgba( 255, 77, 109, 0.12 );
}

#op-popup .op-notes::after {
	content: "Max 500 characters";
	display: block;
	text-align: right;
	font-size: 12px;
	color: var( --op-text-muted );
	margin-top: 6px;
}

/* -------------------------------------------------------------------- */
/* Validation message                                                     */
/* -------------------------------------------------------------------- */
#op-popup .op-validation-message {
	background: var( --op-closed-bg );
	color: var( --op-closed-text );
	padding: 12px 16px;
	border-radius: var( --op-radius-sm );
	font-size: 14px;
	font-weight: 600;
	margin-top: 20px;
}

/* -------------------------------------------------------------------- */
/* Footer                                                                 */
/* -------------------------------------------------------------------- */
#op-popup .op-actions {
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 32px;
}

#op-popup .op-btn-cancel {
	height: 54px;
	padding: 0 26px;
	border-radius: var( --op-radius-pill );
	border: 2px solid var( --op-border );
	background: var( --op-white );
	color: var( --op-text );
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all var( --op-transition );
}

#op-popup .op-btn-cancel::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f00d";
	font-size: 13px;
}

#op-popup .op-btn-cancel:hover {
	background: var( --op-border );
	border-color: var( --op-border-strong );
}

#op-popup #op_save_btn {
	height: 54px;
	padding: 0 34px;
	border-radius: var( --op-radius-pill );
	border: none;
	background: var( --op-gradient );
	color: var( --op-white );
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 10px 24px rgba( 255, 77, 109, 0.35 );
	transition: transform var( --op-transition ), box-shadow var( --op-transition );
}

#op-popup #op_save_btn::after {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f00c"; /* check */
	font-size: 14px;
}

#op-popup #op_save_btn:hover {
	transform: translateY( -2px );
	box-shadow: 0 14px 32px rgba( 255, 77, 109, 0.45 );
}

#op-popup #op_save_btn:active {
	transform: translateY( 0 );
}

#op-popup::after {
	content: "\f023  Your information is safe and secure";
	display: block;
	text-align: center;
	font-family: 'Font Awesome 6 Free', 'Inter', sans-serif;
	font-weight: 900;
	font-size: 12px;
	color: var( --op-text-muted );
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var( --op-border );
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------- */
/* Focus visibility (accessibility floor)                                 */
/* -------------------------------------------------------------------- */
#op-popup button:focus-visible,
#op-popup input:focus-visible,
#op-popup select:focus-visible,
#op-popup textarea:focus-visible {
	outline: 3px solid var( --op-accent-2 );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Responsive — Tablet                                                    */
/* -------------------------------------------------------------------- */
@media ( max-width: 782px ) {

	#op-popup {
		padding: 32px 28px 24px;
		width: 94vw;
		border-radius: 18px;
	}

	#op-popup .op-popup__heading {
		font-size: 32px;
	}

	#op-popup .op-order-types {
		flex-wrap: wrap;
	}

	#op-popup .op-type {
		flex: 1 1 calc( 50% - 7px );
	}

	#op-popup .op-outlet-card__body {
		grid-template-columns: 1fr;
	}

	#op-popup .op-outlet-card__hours,
	#op-popup .op-outlet-card__fee,
	#op-popup .op-outlet-card__eta {
		grid-column: 1;
		text-align: left;
	}

	#op-popup .op-outlet-card__distance {
		text-align: left;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive — Mobile                                                    */
/* -------------------------------------------------------------------- */
@media ( max-width: 480px ) {

	#op-popup {
		padding: 24px 18px 20px;
		border-radius: 16px;
		width: 96vw;
	}

	#op-popup .op-popup__heading {
		font-size: 26px;
	}

	#op-popup .op-popup__subtitle {
		font-size: 14px;
		margin-bottom: 20px;
	}

	#op-popup .op-order-types {
		flex-direction: column;
	}

	#op-popup .op-type {
		flex: 1 1 auto;
		width: 100%;
		justify-content: flex-start;
		padding-left: 20px;
	}

	#op-popup .op-address-row {
		flex-direction: column;
	}

	#op-popup #op-use-current-location {
		width: 100%;
		justify-content: center;
	}

	#op-popup .op-outlet-card {
		padding: 18px 16px 18px 54px;
	}

	#op-popup .op-outlet-card::before {
		left: 16px;
		top: 20px;
		font-size: 17px;
	}

	#op-popup .op-schedule {
		flex-direction: column;
	}

	#op-popup .op-actions {
		flex-direction: column-reverse;
	}

	#op-popup .op-btn-cancel,
	#op-popup #op_save_btn {
		width: 100%;
		justify-content: center;
	}
}