/**
 * MV Square Shop — Checkout CSS
 *
 * Styles for the checkout panel (pickup picker + recipient form + nudge) and
 * the order-confirmation page ([mvsq_checkout_return]).
 *
 * Namespaced (.mvsq-co-*, .mvsq-confirmation-*) — no global overrides.
 * Mobile-first. CSS custom properties inherit from storefront.css vars.
 *
 * @package Mindfeeder\MVSquareShop
 */

/* =========================================================================
   Checkout panel (overlay dialog)
   ========================================================================= */

.mvsq-co-panel {
	position: fixed;
	inset:    0;
	z-index:  600;
	display:  flex;
	align-items: flex-end;          /* Bottom sheet on mobile */
	justify-content: center;
}

.mvsq-co-panel__overlay {
	position:   absolute;
	inset:      0;
	background: rgba( 0, 0, 0, 0.5 );
}

.mvsq-co-panel__inner {
	position:        relative;
	width:           100%;
	max-width:       480px;
	max-height:      92vh;
	overflow-y:      auto;
	background:      var( --mvsq-color-surface, #fff );
	border-radius:   var( --mvsq-radius, 12px ) var( --mvsq-radius, 12px ) 0 0;
	padding:         var( --mvsq-space-md, 1.25rem );
	display:         flex;
	flex-direction:  column;
	gap:             var( --mvsq-space-md, 1.25rem );
	box-shadow:      0 -4px 24px rgba( 0, 0, 0, 0.18 );
	animation:       mvsq-co-panel-in 0.25s ease;
}

@keyframes mvsq-co-panel-in {
	from { transform: translateY( 40px ); opacity: 0; }
	to   { transform: translateY( 0 );   opacity: 1; }
}

/* Desktop: centered dialog */
@media ( min-width: 600px ) {
	.mvsq-co-panel {
		align-items: center;
	}
	.mvsq-co-panel__inner {
		border-radius: var( --mvsq-radius, 12px );
	}
}

.mvsq-co-panel__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding-bottom:  var( --mvsq-space-sm, 0.75rem );
	border-bottom:   1px solid var( --mvsq-color-border, #e5e5e5 );
}

.mvsq-co-panel__title {
	margin:      0;
	font-size:   1.1rem;
	font-weight: 600;
}

.mvsq-co-panel__close {
	background:  none;
	border:      none;
	cursor:      pointer;
	font-size:   1.5rem;
	color:       var( --mvsq-color-muted, #888 );
	padding:     0.2rem 0.4rem;
	line-height: 1;
	border-radius: 4px;
}

.mvsq-co-panel__close:focus-visible {
	outline: 2px solid var( --mvsq-color-primary, #c0392b );
}

.mvsq-co-panel__body {
	display:        flex;
	flex-direction: column;
	gap:            var( --mvsq-space-md, 1.25rem );
}

.mvsq-co-panel__error {
	color:     var( --mvsq-color-danger, #c0392b );
	font-size: 0.9rem;
	min-height: 1rem;
}

.mvsq-co-panel__footer {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	padding-top:    var( --mvsq-space-sm, 0.75rem );
	border-top:     1px solid var( --mvsq-color-border, #e5e5e5 );
}

.mvsq-co-panel__secure-note {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.3rem;
	font-size:       0.78rem;
	color:           var( --mvsq-color-muted, #888 );
	margin:          0;
}

.mvsq-co-panel__powered-by {
	text-align: center;
	font-size:  0.72rem;
	color:      var( --mvsq-color-muted, #888 );
	margin:     0;
}

/* =========================================================================
   Section titles
   ========================================================================= */

.mvsq-co-section-title {
	margin:      0 0 0.6rem;
	font-size:   0.95rem;
	font-weight: 600;
	color:       var( --mvsq-color-text, #222 );
}

/* =========================================================================
   Pickup chips (ASAP / Schedule)
   ========================================================================= */

.mvsq-co-pickup-chips {
	display: flex;
	gap:     0.5rem;
	flex-wrap: wrap;
}

.mvsq-co-chip {
	background:    var( --mvsq-color-bg, #f5f5f5 );
	border:        1px solid var( --mvsq-color-border, #e5e5e5 );
	border-radius: 999px;
	padding:       0.4rem 1rem;
	font-size:     0.88rem;
	cursor:        pointer;
	transition:    background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
	color:         var( --mvsq-color-text, #222 );
}

.mvsq-co-chip:hover {
	border-color: var( --mvsq-color-primary, #c0392b );
}

.mvsq-co-chip--selected {
	background:    var( --mvsq-color-primary, #c0392b );
	border-color:  var( --mvsq-color-primary, #c0392b );
	color:         #fff;
}

.mvsq-co-chip:focus-visible {
	outline:        2px solid var( --mvsq-color-primary, #c0392b );
	outline-offset: 2px;
}

/* =========================================================================
   Schedule section (date + slot grid)
   ========================================================================= */

.mvsq-co-schedule {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	margin-top:     0.6rem;
}

.mvsq-co-label {
	display:     block;
	font-size:   0.85rem;
	font-weight: 500;
	color:       var( --mvsq-color-text, #222 );
	margin-bottom: 0.25rem;
}

.mvsq-co-select {
	width:         100%;
	padding:       0.5rem 0.75rem;
	border:        1px solid var( --mvsq-color-border, #e5e5e5 );
	border-radius: 6px;
	font-size:     0.9rem;
	background:    var( --mvsq-color-surface, #fff );
	color:         var( --mvsq-color-text, #222 );
	cursor:        pointer;
}

.mvsq-co-select:focus-visible {
	outline:     2px solid var( --mvsq-color-primary, #c0392b );
	border-color: var( --mvsq-color-primary, #c0392b );
}

/* Slot grid — flexible wrapping grid of time buttons */
.mvsq-co-slots {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.4rem;
}

.mvsq-co-slot-btn {
	background:    var( --mvsq-color-bg, #f5f5f5 );
	border:        1px solid var( --mvsq-color-border, #e5e5e5 );
	border-radius: 6px;
	padding:       0.4rem 0.75rem;
	font-size:     0.82rem;
	cursor:        pointer;
	transition:    background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
	color:         var( --mvsq-color-text, #222 );
}

.mvsq-co-slot-btn:hover {
	border-color: var( --mvsq-color-primary, #c0392b );
}

.mvsq-co-slot-btn--selected {
	background:   var( --mvsq-color-primary, #c0392b );
	border-color: var( --mvsq-color-primary, #c0392b );
	color:        #fff;
}

.mvsq-co-slot-btn:focus-visible {
	outline:        2px solid var( --mvsq-color-primary, #c0392b );
	outline-offset: 2px;
}

.mvsq-co-slots__loading,
.mvsq-co-slots__empty,
.mvsq-co-slots__error {
	font-size: 0.85rem;
	color:     var( --mvsq-color-muted, #888 );
	margin:    0;
}

.mvsq-co-slots__error {
	color: var( --mvsq-color-danger, #c0392b );
}

/* =========================================================================
   Recipient form
   ========================================================================= */

.mvsq-co-recipient {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.mvsq-co-field {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
}

.mvsq-co-input,
.mvsq-co-textarea {
	width:         100%;
	padding:       0.5rem 0.75rem;
	border:        1px solid var( --mvsq-color-border, #e5e5e5 );
	border-radius: 6px;
	font-size:     0.9rem;
	background:    var( --mvsq-color-surface, #fff );
	color:         var( --mvsq-color-text, #222 );
	box-sizing:    border-box;
	transition:    border-color 0.12s ease;
}

.mvsq-co-input:focus,
.mvsq-co-textarea:focus {
	outline:     none;
	border-color: var( --mvsq-color-primary, #c0392b );
	box-shadow:  0 0 0 2px rgba( 192, 57, 43, 0.15 );
}

.mvsq-co-input[aria-invalid="true"] {
	border-color: var( --mvsq-color-danger, #c0392b );
}

.mvsq-co-field-error {
	color:     var( --mvsq-color-danger, #c0392b );
	font-size: 0.8rem;
	min-height: 1rem;
}

.mvsq-co-textarea {
	min-height: 4rem;
	resize:     vertical;
}

/* =========================================================================
   Large-order nudge
   ========================================================================= */

.mvsq-co-nudge {
	background:    var( --mvsq-color-bg, #fef9e7 );
	border:        1px solid var( --mvsq-color-border, #e5e5e5 );
	border-radius: 8px;
	padding:       0.75rem 1rem;
	display:       flex;
	flex-direction: column;
	gap:           0.5rem;
}

.mvsq-co-nudge__msg {
	font-size: 0.9rem;
	color:     var( --mvsq-color-text, #222 );
	margin:    0;
}

.mvsq-co-nudge__call {
	display:       inline-block;
	background:    var( --mvsq-color-primary, #c0392b );
	color:         #fff;
	border-radius: 6px;
	padding:       0.45rem 1rem;
	font-size:     0.9rem;
	font-weight:   500;
	text-decoration: none;
	text-align:    center;
}

.mvsq-co-nudge__call:hover {
	background: var( --mvsq-color-primary-dark, #a93226 );
	color:      #fff;
}

.mvsq-co-nudge__continue {
	background:  none;
	border:      none;
	cursor:      pointer;
	color:       var( --mvsq-color-muted, #888 );
	font-size:   0.82rem;
	text-decoration: underline;
	padding:     0;
	text-align:  left;
}

.mvsq-co-nudge__continue:focus-visible {
	outline: 2px solid var( --mvsq-color-primary, #c0392b );
}

/* =========================================================================
   Order confirmation ([mvsq_checkout_return])
   ========================================================================= */

.mvsq-confirmation {
	max-width:      520px;
	margin:         0 auto;
	padding:        var( --mvsq-space-lg, 2rem ) var( --mvsq-space-md, 1.25rem );
	text-align:     center;
	display:        flex;
	flex-direction: column;
	gap:            var( --mvsq-space-sm, 0.75rem );
}

.mvsq-confirmation__icon {
	font-size: 3rem;
	line-height: 1;
}

.mvsq-confirmation__title {
	margin:      0;
	font-size:   1.6rem;
	font-weight: 700;
}

.mvsq-confirmation__order-ref {
	font-size:  1rem;
	color:      var( --mvsq-color-muted, #888 );
	margin:     0;
	font-family: monospace;
}

.mvsq-confirmation__pickup,
.mvsq-confirmation__location {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.4rem;
	font-size:       0.95rem;
	color:           var( --mvsq-color-text, #222 );
}

.mvsq-confirmation__location {
	flex-direction: column;
	gap:            0.15rem;
}

.mvsq-confirmation__location-name {
	font-weight: 600;
}

.mvsq-confirmation__location-addr {
	font-size: 0.85rem;
	color:     var( --mvsq-color-muted, #888 );
}

.mvsq-confirmation__pickup-icon,
.mvsq-confirmation__location-icon {
	font-size: 1.1rem;
}

/* Line items */
.mvsq-confirmation__items {
	background:    var( --mvsq-color-bg, #f8f8f8 );
	border:        1px solid var( --mvsq-color-border, #e5e5e5 );
	border-radius: 8px;
	padding:       1rem;
	text-align:    left;
}

.mvsq-confirmation__items-title {
	font-size:   0.9rem;
	font-weight: 600;
	margin:      0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:       var( --mvsq-color-muted, #888 );
}

.mvsq-confirmation__items-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        0.4rem;
}

.mvsq-confirmation__item {
	display:         flex;
	align-items:     baseline;
	gap:             0.4rem;
	font-size:       0.9rem;
}

.mvsq-confirmation__item-qty {
	color:       var( --mvsq-color-muted, #888 );
	min-width:   1.5rem;
}

.mvsq-confirmation__item-name {
	flex: 1;
}

.mvsq-confirmation__item-price {
	font-weight: 500;
}

/* Branding */
.mvsq-confirmation__branding {
	display:     flex;
	align-items: center;
	justify-content: center;
	gap:         0.3rem;
	font-size:   0.78rem;
	color:       var( --mvsq-color-muted, #888 );
	margin:      0.5rem 0 0;
}

/* Pending / error states */
.mvsq-confirmation--pending .mvsq-confirmation__spinner {
	width:         2.5rem;
	height:        2.5rem;
	border:        3px solid var( --mvsq-color-border, #e5e5e5 );
	border-top-color: var( --mvsq-color-primary, #c0392b );
	border-radius: 50%;
	animation:     mvsq-spin 0.8s linear infinite;
	margin:        0 auto;
}

@keyframes mvsq-spin {
	to { transform: rotate( 360deg ); }
}

.mvsq-confirmation--pending .mvsq-confirmation__pending-msg {
	font-size: 0.9rem;
	color:     var( --mvsq-color-muted, #888 );
	margin:    0;
}

.mvsq-confirmation--error .mvsq-confirmation__error-msg {
	font-size:  0.9rem;
	color:      var( --mvsq-color-muted, #888 );
	margin:     0;
	max-width:  360px;
	margin:     0 auto;
}