/* =============================================================================
   My Account — Reservation Cards
   ============================================================================= */

/**
 * Orders list wrapper — vertical stack of cards.
 */
.wpr-orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 1rem 0;
}

/**
 * Individual reservation card.
 * Position relative so the full-card link overlay works correctly.
 */
.wpr-order-card {
    position: relative;
    border: var(--wpr-card-border, 1px solid #e5e7eb);
    border-radius: var(--wpr-card-radius, 12px);
    background: var(--wpr-card-bg, #fff);
    box-shadow: var(--wpr-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
    transition: box-shadow 0.15s ease;
    list-style: none;
}

.wpr-order-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/**
 * Invisible full-card link stretched over the entire card.
 * Actual interactive elements (cancel button) sit above it via z-index.
 */
.wpr-order-card__link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.wpr-order-card__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/**
 * Card content — sits above the full-card link overlay.
 */
.wpr-order-card__body {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.5rem;
    pointer-events: none; /* let clicks fall through to the link */
}

/* Re-enable pointer events only on truly interactive children */
.wpr-order-card__actions,
.wpr-order-card__actions a {
    pointer-events: auto;
}

/**
 * Header row: order number + status badge.
 */
.wpr-order-card__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.wpr-order-card__number {
    font-weight: 600;
    font-size: 1rem;
}

/**
 * Meta rows: destination + dates.
 */
.wpr-order-card__meta-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}

.wpr-order-card__meta {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.875rem;
    opacity: 0.7;
    line-height: 1.4;
}

.wpr-order-card__meta-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.wpr-order-card__nights {
    margin-left: 0.25rem;
}

/**
 * Footer row: total (left) + cancel action (right).
 */
.wpr-order-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid;
    border-color: inherit;
}

.wpr-order-card__total {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.wpr-order-card__total-amount {
    font-weight: 600;
    font-size: 1rem;
}

.wpr-order-card__total-rooms {
    font-size: 0.75rem;
    opacity: 0.6;
}

/**
 * Cancel button — red destructive style, smaller than the default WC button.
 * Positioned above the full-card link overlay via the parent z-index:2.
 */
.wpr-order-card__actions {
    flex-shrink: 0;
}

.wpr-checkin-link.button,
.wpr-checkin-link.woocommerce-button,
.wpr-cancel-reservation.button,
.wpr-cancel-reservation.woocommerce-button {
    font-size:        0.75rem !important;
    padding:          0.25rem 0.75rem !important;
    line-height:      1.5 !important;
    border-radius:    0.375rem !important;
    transition:       background-color 0.15s, border-color 0.15s;
    color:            #fff    !important;
}

.wpr-checkin-link.button,
.wpr-checkin-link.woocommerce-button {
    background-color: #2563eb !important;
    border-color:     #2563eb !important;
}

.wpr-checkin-link.button:hover,
.wpr-checkin-link.woocommerce-button:hover {
    background-color: #1d4ed8 !important;
    border-color:     #1d4ed8 !important;
    color:            #fff    !important;
}

.wpr-cancel-reservation.button,
.wpr-cancel-reservation.woocommerce-button {
    background-color: #dc2626 !important;
    border-color:     #dc2626 !important;
}

.wpr-cancel-reservation.button:hover,
.wpr-cancel-reservation.woocommerce-button:hover {
    background-color: #b91c1c !important;
    border-color:     #b91c1c !important;
    color:            #fff    !important;
}

/* =============================================================================
   Responsive — Mobile
   ============================================================================= */

@media screen and (max-width: 600px) {
    .wpr-order-card__body {
        padding: 1rem;
    }

    .wpr-order-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


/**
 * 1. Stack nav above content.
 *    Override WooCommerce's default float-based two-column layout so the
 *    navigation renders as a full-width tab bar above the content area.
 */
.woocommerce-account .woocommerce {
	display: flex;
	flex-direction: column;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
  margin-bottom: 1rem;
}

/**
 * 2. Tab list — horizontal row with a bottom border acting as the
 *    baseline shared by all tabs.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid;
}

/**
 * 3. Reset individual list items.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
}

/**
 * 4. Tab links — each sits flush against the baseline border.
 *    A transparent bottom border reserves space for the active indicator
 *    and the negative margin-bottom overlaps the ul's border.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.625rem 1.125rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	line-height: 1.4;
	white-space: nowrap;
}

/**
 * 5. Active tab — bottom border becomes visible using the element's
 *    own text color so the theme controls the accent automatically.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	border-bottom-color: currentColor;
	font-weight: 600;
}

/**
 * 6. Logout item — pushed to the far right and visually de-emphasised
 *    so it reads as a secondary action, not a navigation tab.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-left: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	font-size: 0.875em;
	opacity: 0.65;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* =============================================================================
   Responsive — Mobile
   ============================================================================= */

/**
 * On small screens the tabs wrap naturally. Remove the auto margin on
 * logout so it flows inline with the other tabs instead of jumping to a
 * lone position on a new line.
 */
@media screen and (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-wrap: wrap;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-left: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		padding: 0.5rem 0.875rem;
		font-size: 0.9rem;
	}
}