/**
 * TourFlow My Account Styles
 *
 * Fully compatible with Astra theme using CSS variables.
 * Uses brand colors and adapts to theme changes.
 *
 * @package TourFlow
 * @since 1.0.0
 */

/* Tickets Section — base layout; glass background defined with the unified
   order-details card rule below (neutral wizard step-3 look). */
.tourflow-tickets-section {
	margin-top: 2em;
}

.tourflow-tickets-description {
	color: var(--ast-global-color-3, #ecf1fe);
	font-size: 14px;
	margin-bottom: 1.5em;
}

.tourflow-tickets-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.tourflow-ticket-item {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1.2em;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tourflow-ticket-item:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: translateX(4px);
}

.tourflow-ticket-icon {
	flex-shrink: 0;
}

.tourflow-ticket-icon .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: var(--ast-global-color-0, #14abc4);
}

.tourflow-ticket-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.tourflow-ticket-info strong {
	font-size: 16px;
	color: var(--ast-global-color-2, #ffffff);
}

.tourflow-ticket-filename {
	font-size: 13px;
	color: var(--ast-global-color-3, #ecf1fe);
	opacity: 0.7;
}

.tourflow-ticket-actions {}

.tourflow-download-ticket {
	padding: 0.5em 1.5em !important;
	background: var(--ast-global-color-0, #14abc4) !important;
	color: var(--ast-global-color-2, #fff) !important;
	border: none !important;
	text-decoration: none !important;
	transition: background 0.2s !important;
}

.tourflow-download-ticket:hover {
	background: var(--ast-global-color-1, #108a9e) !important;
}

/* Passengers Section — base layout; glass background defined with the unified
   order-details card rule below (neutral wizard step-3 look). */
.tourflow-passengers-section {
	margin-top: 2em;
}

.tourflow-edit-locked {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 1em;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	margin-bottom: 1.5em;
}

.tourflow-edit-locked .dashicons {
	color: #856404;
}

.tourflow-passenger-group {
	margin-bottom: 1.5em;
	padding: 1.5em;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px;
	box-shadow: none;
}

.tourflow-passenger-group:last-child {
	margin-bottom: 0;
}

.tourflow-tour-name {
	margin: 0 0 0.5em 0;
	font-size: 18px;
	color: var(--ast-global-color-2, #ffffff);
	font-weight: 600;
}

.tourflow-booking-details {
	margin: 0 0 1.5em 0;
	font-size: 14px;
	color: var(--ast-global-color-3, #ecf1fe);
}

.tourflow-passengers-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 1.5em;
}

.tourflow-passenger-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.tourflow-passenger-input-group label {
	font-weight: 600;
	font-size: 14px;
	color: var(--ast-global-color-2, #ffffff);
}

.tourflow-passenger-input {
	background: rgba(255, 255, 255, 0.05) !important;
	border: none !important;
	border-bottom: 1px solid rgba(80, 227, 194, 0.5) !important;
	border-radius: 4px 4px 0 0 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-family: inherit !important;
	padding: 12px 15px !important;
	font-size: 15px;
	transition: all 0.3s ease;
	box-shadow: none !important;
	height: auto !important;
	box-sizing: border-box;
	line-height: 1.2;
}

.tourflow-passenger-input:focus {
	outline: none !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-bottom-color: #50e3c2 !important;
	box-shadow: 0 4px 12px rgba(80, 227, 194, 0.1) !important;
}

/* Read-only is the default (Option C) — clean, calm, no teal underline so it
   reads as display text until the customer clicks Edit. */
.tourflow-passenger-input[readonly] {
	background: rgba(255, 255, 255, 0.02) !important;
	border-bottom-color: rgba(255, 255, 255, 0.12) !important;
	cursor: default;
}

.tourflow-passenger-actions {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex-wrap: wrap;
}

/* Edit button — primary action in the read-only state, so it uses the same
   solid teal style as Save for visual consistency. */
.tourflow-edit-passengers {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
	background: var(--ast-global-color-0, #14abc4) !important;
	color: var(--ast-global-color-2, #fff) !important;
	border: none !important;
	transition: background 0.2s !important;
}

.tourflow-edit-passengers:hover {
	background: var(--ast-global-color-1, #108a9e) !important;
}

.tourflow-edit-passengers .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

/* Cancel — quiet, neutral */
.tourflow-cancel-passengers {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	transition: all 0.2s !important;
}

.tourflow-cancel-passengers:hover {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Re-issue warning note shown only while editing */
.tourflow-passenger-edit-note {
	margin: 0.75em 0 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
}

.tourflow-save-passengers {
	background: var(--ast-global-color-0, #14abc4) !important;
	color: var(--ast-global-color-2, #fff) !important;
	border: none !important;
	transition: background 0.2s !important;
}

.tourflow-save-passengers:hover {
	background: var(--ast-global-color-1, #108a9e) !important;
}

.tourflow-save-passengers:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tourflow-save-status {
	font-size: 14px;
}

.tourflow-save-status.success {
	color: #28a745;
}

.tourflow-save-status.error {
	color: #dc3545;
}

.tourflow-save-status.loading {
	color: var(--ast-global-color-3, #ecf1fe);
}

/* WooCommerce Table Headers — scoped to avoid theme bleed-through.
   The white header can sit on thead / tr (Astra default), not just th, so
   we zero the background on all three. */
.tourflow-boutique-account .woocommerce-orders-table thead,
.tourflow-boutique-account .woocommerce-orders-table thead tr,
.tourflow-boutique-account .woocommerce-table--order-details thead,
.tourflow-boutique-account .woocommerce-table--order-details thead tr,
.tourflow-boutique-account .woocommerce-table thead,
.tourflow-boutique-account .woocommerce-table thead tr {
	background: transparent !important;
	background-color: transparent !important;
}

.tourflow-boutique-account .woocommerce-orders-table thead th,
.tourflow-boutique-account .woocommerce-table--order-details thead th,
.tourflow-boutique-account .woocommerce-table thead th,
.woocommerce-orders-table thead th,
.woocommerce-table--order-details thead th,
.woocommerce-table thead th {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ast-global-color-0, #14abc4) !important;
	padding: 0.75em !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: none !important;
}

.tourflow-boutique-account .woocommerce-orders-table thead th a,
.woocommerce-orders-table thead th a,
.woocommerce-table--order-details thead th a,
.woocommerce-table thead th a {
	color: var(--ast-global-color-2, #ffffff) !important;
}

/* Order Details Page - Section Headers — white card titles matching booking
   wizard step 3 (.tourflow-review-card-title). Table column headers (thead th)
   stay teal as accent. */
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details .woocommerce-column__title {
	background: transparent !important;
	color: #ffffff !important;
	padding: 0;
	margin: 0 0 1.5em 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 1.1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: block;
	width: 100%;
}

/* Order Summary - Highlighted elements (order number, date, status) */
.woocommerce-order p mark,
.woocommerce-notices-wrapper + p mark,
mark.order-number,
mark.order-date,
mark.order-status {
	background: transparent;
	color: var(--ast-global-color-0, #14abc4);
	font-weight: 600;
}

/* Order Details Sections — neutral glass card matching booking wizard step 3
   (.tourflow-review-card). Sits inside the outer .woocommerce glass pane. */
/* .woocommerce-order-details / .woocommerce-customer-details cards are defined
   canonically in tourflow-frontend.css (it wins via table.* specificity). Here
   we only style our own sibling sections, which now render OUTSIDE the WC
   order-details section (hooked on woocommerce_after_order_details). */
.tourflow-tickets-section,
.tourflow-passengers-section,
.tourflow-deposit-upload-section {
	background: rgba(38, 40, 46, 0.55) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	margin: 0 0 2em 0 !important;
	padding: 1.75em 2em !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
	box-shadow: none !important;
}

/* Order Details Table — step-3 label/value rhythm (no grid lines). */
.woocommerce-order-details .woocommerce-table--order-details {
	background: transparent !important;
	margin: 1.25em 0 0 0 !important;
	border-radius: 0 !important;
	border: none !important;
	border-collapse: collapse !important;
	width: 100% !important;
}

/* Body cells: airy rows with a faint separator, product left / total right. */
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tbody th {
	color: var(--ast-global-color-3, #ecf1fe) !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding: 0.9em 0 !important;
	vertical-align: top;
}

.woocommerce-table--order-details tbody td.product-total,
.woocommerce-table--order-details tfoot td {
	text-align: right !important;
	white-space: nowrap;
}

.woocommerce-table--order-details tbody tr:last-child td,
.woocommerce-table--order-details tbody tr:last-child th {
	border-bottom: none !important;
}

/* Product name link + nested meta (Date/Time/Passengers) */
.woocommerce-table--order-details .product-name a {
	color: #ffffff !important;
	font-weight: 600;
}

.woocommerce-table--order-details .product-name .wc-item-meta,
.woocommerce-table--order-details .product-name dl {
	margin: 0.5em 0 0 0 !important;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer totals (subtotal / total / payment method) — label/value rows. */
.woocommerce-table--order-details tfoot {
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
	color: #ffffff !important;
	background: transparent !important;
	border: none !important;
	padding: 0.6em 0 !important;
}

.woocommerce-table--order-details tfoot th {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

/* Emphasise the grand-total row */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	font-size: 1.05rem;
	color: var(--ast-global-color-0, #14abc4) !important;
	font-weight: 700;
	padding-top: 0.9em !important;
}

/* Hide the WooCommerce customer/billing-details section on the order view.
   WC outputs this block directly from the order-details template (not via a
   removable action), so it is suppressed here. The customer can manage their
   billing details from the Account Details page instead. */
.tourflow-boutique-account .woocommerce-customer-details {
	display: none !important;
}


/* Customer Details - Address — subtle inner panel on the glass card */
.woocommerce-customer-details address {
	background: rgba(255, 255, 255, 0.03) !important;
	color: var(--ast-global-color-3, #ecf1fe) !important;
	padding: 1.5em !important;
	margin: 1.5em 0 0 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.woocommerce-customer-details address p {
	color: var(--ast-global-color-3, #ecf1fe) !important;
}

/* Billing/Shipping columns */
.woocommerce-customer-details .woocommerce-columns {
	padding: 0;
}

.woocommerce-customer-details .woocommerce-column {
	background: transparent;
}

/* TourFlow section titles — unified white card-title look (no solid banner),
   matching the order-details/customer-details section headers above. */
.tourflow-tickets-section .woocommerce-order-details__title,
.tourflow-passengers-section .woocommerce-order-details__title {
	background: transparent !important;
	color: #ffffff !important;
	padding: 0 !important;
	margin: 0 0 1.5em 0 !important;
	border-radius: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Account Details - Form Labels — aviation style */
.woocommerce-EditAccountForm label,
.woocommerce-MyAccount-content form label,
.woocommerce-address-fields label,
.edit-account label {
	color: rgba(255, 255, 255, 0.9) !important;
	text-transform: uppercase !important;
	font-size: 0.8rem !important;
	letter-spacing: 1px !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
	display: block;
}

/* Password Change Fieldset Legend */
.woocommerce-EditAccountForm fieldset legend,
fieldset legend {
	color: var(--ast-global-color-2, #ffffff);
	font-weight: 600;
}

/* Edit Address - Section Headers — white, consistent with other account headings */
.woocommerce-MyAccount-content h3,
.woocommerce-address-fields h3,
.u-column1 h3,
.u-column2 h3,
.woocommerce-Addresses .woocommerce-Address-title h3 {
	background: transparent !important;
	color: #ffffff !important;
	padding: 0;
	margin: 0 0 1em 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: block;
	width: 100%;
}

/* Address Title Container */
.woocommerce-Address-title,
.woocommerce-Addresses .woocommerce-Address-title {
	background: var(--ast-global-color-4, #1c224b) !important;
	padding: 0;
	margin: 0;
	border-radius: 4px 4px 0 0;
}

.woocommerce-Address-title a {
	color: var(--ast-global-color-0, #14abc4) !important;
}

/* Address Cards on My Account Dashboard */
.woocommerce-Addresses .woocommerce-Address {
	background: var(--ast-global-color-5, #131739);
	border: 1px solid var(--ast-global-color-6, #2e3666);
	border-radius: 4px;
	overflow: hidden;
}

.woocommerce-Addresses .woocommerce-Address address {
	padding: 1em;
	color: var(--ast-global-color-3, #ecf1fe);
}

/* Form inputs in Account sections — full aviation spec.
   WC outputs .woocommerce-Input and .input-text classes so we target both
   the type selectors AND those classes to avoid missing any field. */
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm input[type="tel"],
.woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-EditAccountForm .input-text,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields .woocommerce-Input,
.woocommerce-address-fields .input-text,
.woocommerce-address-fields select {
	background: rgba(255, 255, 255, 0.05) !important;
	border: none !important;
	border-bottom: 1px solid rgba(80, 227, 194, 0.5) !important;
	border-radius: 4px 4px 0 0 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-family: inherit !important;
	padding: 12px 15px !important;
	transition: all 0.3s ease;
	box-shadow: none !important;
	height: auto !important;
	box-sizing: border-box;
	vertical-align: middle;
	line-height: 1.2;
	width: 100% !important;
}

.woocommerce-EditAccountForm input[type="text"]:focus,
.woocommerce-EditAccountForm input[type="email"]:focus,
.woocommerce-EditAccountForm input[type="password"]:focus,
.woocommerce-EditAccountForm input[type="tel"]:focus,
.woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-EditAccountForm .input-text:focus,
.woocommerce-address-fields input[type="text"]:focus,
.woocommerce-address-fields input[type="email"]:focus,
.woocommerce-address-fields input[type="tel"]:focus,
.woocommerce-address-fields .woocommerce-Input:focus,
.woocommerce-address-fields .input-text:focus,
.woocommerce-EditAccountForm select:focus {
	background: rgba(255, 255, 255, 0.1) !important;
	border-bottom-color: #50e3c2 !important;
	box-shadow: 0 4px 12px rgba(80, 227, 194, 0.1) !important;
	outline: none !important;
}

.woocommerce-EditAccountForm input::placeholder,
.woocommerce-address-fields input::placeholder {
	color: rgba(255, 255, 255, 0.3);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 1px;
}

/* Ensure Select dropdown text isn't cut off */
.woocommerce-EditAccountForm select {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Invoicing Section Refactoring */
.tourflow-my-account-invoicing-section {
	margin-top: 40px;
	padding: 20px 0 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	width: 100% !important;
	clear: both;
}

.tourflow-section-title {
	background: transparent !important;
	color: #ffffff !important;
	padding: 0 !important;
	margin: 0 0 1.5em 0 !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	font-size: 1.3rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	display: block !important;
	width: 100% !important;
}

.tourflow-form-row-split,
.tourflow-form-row-triple {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 1em;
	width: 100% !important;
	max-width: none !important;
}

.tourflow-form-row-split .form-row {
	flex: 1 1 250px;
	flex-grow: 1;
}

.tourflow-form-row-triple .form-row {
	flex: 1 1 180px;
	flex-grow: 1;
}

.tourflow-form-row-split .form-row label,
.tourflow-form-row-triple .form-row label {
	margin-bottom: 8px;
	display: block;
}

/* Responsive Invoicing */
@media (max-width: 768px) {
	.tourflow-form-row-split,
	.tourflow-form-row-triple {
		flex-direction: column;
		gap: 15px;
	}
	
	.tourflow-form-row-split .form-row,
	.tourflow-form-row-triple .form-row {
		width: 100% !important;
		min-width: 0;
		flex: none !important; /* Fixes massive vertical gaps on mobile */
	}
}

/* Custom File Upload UI Styling */
.woocommerce-EditAccountForm .tourflow-btn.button.alt {
	background: var(--ast-global-color-0, #14abc4) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
	transition: background 0.3s;
	display: inline-block;
}

.woocommerce-EditAccountForm .tourflow-btn.button.alt:hover {
	background: var(--ast-global-color-1, #108a9e) !important;
}

#tourflow_account_cedula_name_display {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* Graceful Stacking for File Input on Mobile */
@media (max-width: 480px) {
	.woocommerce-EditAccountForm .tourflow-btn.button.alt {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 10px !important;
	}
	
	#tourflow_account_cedula_name_display {
		display: block;
		margin-left: 0 !important;
		text-align: center;
	}
}

/* Force Gutenberg/Spectra wrappers to center content on My Account */
.uagb-is-root-container:has(.woocommerce) {
	flex-direction: column !important;
	align-items: center !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
}

.uagb-is-root-container:has(.woocommerce) > p:empty {
	display: none !important;
}

.uagb-container-inner-blocks-wrap:has(.woocommerce) {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: none !important; /* Allow cloud background to stretch fully */
}

/* Ensure WooCommerce outer container fills width */
.woocommerce {
	width: 100% !important;
}

/* My Account content pane: block layout so inner forms aren't squashed by flexbox */
.woocommerce-MyAccount-content {
	width: 100% !important;
	display: block !important;
}

/* Edit Account form — full width within the glass pane */
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* WC float-based first/last name row — restore float layout */
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
	width: 47% !important;
	float: left !important;
}
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-last {
	float: right !important;
}
.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-address-fields .form-row-wide {
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* Ensure clear-fix for floating WooCommerce rows */
.woocommerce-EditAccountForm::after,
.woocommerce-address-fields::after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive */
@media (max-width: 768px) {
	.tourflow-ticket-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.tourflow-ticket-actions {
		width: 100%;
	}

	.tourflow-download-ticket {
		width: 100%;
		text-align: center;
	}

	/* Mobile Stacking for Edit Account Form */
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
	}

	.woocommerce-EditAccountForm {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* Deposit Receipt Upload Section */
/* Deposit section base layout; glass background comes from the unified
   order-details card rule above (neutral wizard step-3 look). */
.tourflow-boutique-wizard.tourflow-deposit-upload-section {
	margin-top: 0;
}

.tourflow-boutique-wizard .tourflow-deposit-upload-container {
	padding: 1em 0 0 0;
}

.tourflow-boutique-wizard .tourflow-deposit-uploaded-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5em;
	background: rgba(28, 34, 75, 0.6);
	border-left: 3px solid var(--ast-global-color-0, #14abc4);
	border-radius: 0 8px 8px 0;
}

.tourflow-boutique-wizard .tourflow-success-icon {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #50e3c2;
	margin-bottom: 10px;
}

.tourflow-boutique-wizard .tourflow-deposit-status-text {
	color: var(--ast-global-color-3, #ecf1fe);
	font-size: 15px;
	margin-bottom: 1.2em;
}

.tourflow-boutique-wizard .tourflow-deposit-file-details {
	font-size: 14px;
	color: var(--ast-global-color-2, #ffffff);
	margin-bottom: 1.5em;
}

.tourflow-boutique-wizard .tourflow-deposit-file-link {
	color: var(--ast-global-color-0, #14abc4);
	text-decoration: underline;
	font-weight: 500;
}

.tourflow-boutique-wizard .tourflow-deposit-file-link:hover {
	color: var(--ast-global-color-1, #108a9e);
}

.tourflow-boutique-wizard .tourflow-change-receipt-btn {
	background: transparent !important;
	border: 1px solid var(--ast-global-color-0, #14abc4) !important;
	color: var(--ast-global-color-0, #14abc4) !important;
	transition: all 0.3s ease !important;
}

.tourflow-boutique-wizard .tourflow-change-receipt-btn:hover {
	background: var(--ast-global-color-0, #14abc4) !important;
	color: #fff !important;
}

.tourflow-boutique-wizard .tourflow-deposit-instruction {
	color: var(--ast-global-color-3, #ecf1fe);
	font-size: 14px;
	margin-bottom: 1.5em;
}

.tourflow-boutique-wizard .tourflow-upload-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2.5em 2em;
	border: 2px dashed rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: all 0.3s ease;
}

.tourflow-boutique-wizard .tourflow-upload-dropzone:hover,
.tourflow-boutique-wizard .tourflow-upload-dropzone.is-dragover {
	border-color: var(--ast-global-color-0, #14abc4);
	background: rgba(20, 171, 196, 0.05);
}

.tourflow-boutique-wizard .tourflow-upload-icon {
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: var(--ast-global-color-0, #14abc4);
	margin-bottom: 12px;
}

.tourflow-boutique-wizard .tourflow-upload-text {
	font-size: 15px;
	font-weight: 600;
	color: var(--ast-global-color-2, #ffffff);
	margin: 0 0 6px 0;
	text-align: center;
}

.tourflow-boutique-wizard .tourflow-upload-limits {
	font-size: 12px;
	color: var(--ast-global-color-3, #ecf1fe);
	opacity: 0.6;
	margin: 0 0 16px 0;
	text-align: center;
}

.tourflow-boutique-wizard .tourflow-select-file-btn {
	background: var(--ast-global-color-0, #14abc4) !important;
	color: #fff !important;
	border: none !important;
	padding: 8px 20px !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.tourflow-boutique-wizard .tourflow-select-file-btn:hover {
	background: var(--ast-global-color-1, #108a9e) !important;
}

.tourflow-boutique-wizard .tourflow-deposit-upload-status-bar {
	margin-top: 1.5em;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tourflow-boutique-wizard .tourflow-progress-wrapper {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	overflow: hidden;
}

.tourflow-boutique-wizard .tourflow-progress-bar {
	width: 0%;
	height: 100%;
	background: var(--ast-global-color-0, #14abc4);
	transition: width 0.1s linear;
}

.tourflow-boutique-wizard .tourflow-upload-status-text {
	font-size: 13px;
	color: var(--ast-global-color-3, #ecf1fe);
}

/* ==========================================================================
   My Account Sub-Pages — Glass Pane + Layout Fixes
   Applied via .tourflow-boutique-account body class (all is_account_page() views).
   The dashboard landing is handled by .tourflow-boutique-account .woocommerce
   in shortcodes.css. These rules cover orders list, order detail, edit account,
   and addresses — pages where .woocommerce-MyAccount-content is the content zone.
   ========================================================================== */

/* Content zone: transparent inside the outer .woocommerce glass pane.
   No second glass layer — the outer .woocommerce in shortcodes.css already
   provides the dark glass background for all is_account_page() views. */
.tourflow-boutique-account .woocommerce-MyAccount-content {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 0 0 30px !important;
	color: #ecf1fe !important;
}

/* Page title ("Mi Cuenta") — the theme's h1.entry-title, teal by default from
   Astra's global heading color. Override to white on account pages. */
.tourflow-boutique-account h1.entry-title,
.tourflow-boutique-account .entry-header h1,
.tourflow-boutique-account .ast-single-post .entry-title {
	color: #ffffff !important;
}

/* In-pane account section headings (ORDENES, DETALLES DE CUENTA, etc.) — white
   for consistency with the order-detail section titles. */
.tourflow-boutique-account .woocommerce-MyAccount-content h2 {
	color: #ffffff !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin: 0 0 25px !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	width: 100% !important;
}

/* Orders table — soft neutral rows, no blue tint */
.tourflow-boutique-account .woocommerce-orders-table {
	background: transparent !important;
	border: none !important;
	border-collapse: collapse !important;
	width: 100% !important;
}

.tourflow-boutique-account .woocommerce-orders-table__row {
	background: rgba(255, 255, 255, 0.04) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	transition: background 0.2s ease;
}

.tourflow-boutique-account .woocommerce-orders-table__row:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}

.tourflow-boutique-account .woocommerce-orders-table__cell,
.tourflow-boutique-account .woocommerce-orders-table__cell td,
.tourflow-boutique-account .woocommerce-orders-table td,
.tourflow-boutique-account .woocommerce-orders-table th {
	color: var(--ast-global-color-3, #ecf1fe) !important;
	background: transparent !important;
	border: none !important;
	padding: 14px 12px !important;
}

.tourflow-boutique-account .woocommerce-orders-table__cell a {
	color: var(--ast-global-color-0, #14abc4) !important;
}

/* "View" action button inside orders table */
.tourflow-boutique-account .woocommerce-orders-table__cell .woocommerce-button,
.tourflow-boutique-account .woocommerce-orders-table__cell .button {
	background: var(--ast-global-color-0, #14abc4) !important;
	color: #fff !important;
	border: none !important;
	font-size: 0.85rem !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	padding: 6px 16px !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	transition: box-shadow 0.2s ease !important;
}

.tourflow-boutique-account .woocommerce-orders-table__cell .woocommerce-button:hover,
.tourflow-boutique-account .woocommerce-orders-table__cell .button:hover {
	background: var(--ast-global-color-0, #14abc4) !important;
	box-shadow: 0 0 12px rgba(80, 227, 194, 0.45) !important;
}

/* Phone field: prevent aviation label rules from breaking the inline country-code layout */
.tourflow-boutique-account .woocommerce-EditAccountForm .xoo-aff-phone-field > label,
.tourflow-boutique-account .woocommerce-EditAccountForm .xoo-aff-phone-field .xoo-aff-phone-wrapper label,
.tourflow-boutique-account .woocommerce-address-fields .xoo-aff-phone-field > label,
.woocommerce-MyAccount-content .xoo-aff-phone-flag-container label {
	text-transform: none !important;
	font-size: 0.75rem !important;
	letter-spacing: 0 !important;
	font-weight: normal !important;
}

/* Password section — no boxed outline (the fieldset border rendered broken). Keep
   the password fields, drop the box, and clear the float from the preceding
   country/phone row so the section sits full-width below them rather than floating
   into the empty right column. */
.tourflow-boutique-account .woocommerce-EditAccountForm fieldset {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 20px 0 0 !important;
	clear: both !important;
	width: 100% !important;
}

.tourflow-boutique-account .woocommerce-EditAccountForm fieldset legend {
	color: var(--ast-global-color-0, #14abc4) !important;
	text-transform: uppercase !important;
	font-size: 0.85rem !important;
	letter-spacing: 1px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	margin-bottom: 10px !important;
}

/* Save / submit buttons — full-width teal CTA matching wizard style */
.tourflow-boutique-account .woocommerce-EditAccountForm .woocommerce-Button,
.tourflow-boutique-account .woocommerce-EditAccountForm button[type="submit"],
.tourflow-boutique-account .woocommerce-address-fields + p button[type="submit"],
.tourflow-boutique-account .woocommerce-MyAccount-content button[name="save_account_details"] {
	background-color: var(--ast-global-color-0, #14abc4) !important;
	color: #fff !important;
	border: none !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	padding: 14px 30px !important;
	border-radius: 4px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
	box-shadow: none !important;
	margin-top: 25px !important;
	width: 100% !important;
	display: block !important;
	cursor: pointer !important;
}

.tourflow-boutique-account .woocommerce-EditAccountForm .woocommerce-Button:hover,
.tourflow-boutique-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.tourflow-boutique-account .woocommerce-MyAccount-content button[name="save_account_details"]:hover {
	background-color: var(--ast-global-color-0, #14abc4) !important;
	box-shadow: 0 0 15px rgba(80, 227, 194, 0.5) !important;
}

/* WC password show/hide toggle icon */
.tourflow-boutique-account .woocommerce-EditAccountForm .show-password-input,
.tourflow-boutique-account .woocommerce-EditAccountForm .show-password-input::after {
	color: rgba(255, 255, 255, 0.5) !important;
}
.tourflow-boutique-account .woocommerce-EditAccountForm .show-password-input.display-password::after,
.tourflow-boutique-account .woocommerce-EditAccountForm .show-password-input:hover::after {
	color: var(--ast-global-color-0, #14abc4) !important;
}

/* Form row spacing — consistent vertical rhythm */
.tourflow-boutique-account .woocommerce-EditAccountForm .form-row,
.tourflow-boutique-account .woocommerce-address-fields .form-row {
	margin-bottom: 16px !important;
}

/* Remove WC's default white background on form-row p elements */
.tourflow-boutique-account .woocommerce-EditAccountForm p,
.tourflow-boutique-account .woocommerce-MyAccount-content .woocommerce-form-row {
	background: transparent !important;
}

/* Pagination links */
.tourflow-boutique-account .woocommerce-pagination a {
	color: var(--ast-global-color-0, #14abc4) !important;
}

/* Plain text links within content (not buttons) */
.tourflow-boutique-account .woocommerce-MyAccount-content p a:not(.button),
.tourflow-boutique-account .woocommerce-MyAccount-content .woocommerce-info a:not(.button) {
	color: var(--ast-global-color-0, #14abc4) !important;
}

/* The "Browse products" button inside the empty-state notice (e.g. empty Orders).
   The generic text-link rule above otherwise paints its label the same teal as the
   button background, making it invisible. Force a contrasting label. */
.tourflow-boutique-account .woocommerce-MyAccount-content .woocommerce-info a.button,
.tourflow-boutique-account .woocommerce-MyAccount-content .woocommerce-info a.wc-forward {
	color: #fff !important;
}

@media (max-width: 768px) {
	.tourflow-boutique-account .woocommerce-orders-table__cell {
		padding: 10px 8px !important;
	}

	/* Stack first/last name side-by-side → full width on mobile */
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last,
	.woocommerce-address-fields .form-row-first,
	.woocommerce-address-fields .form-row-last {
		width: 100% !important;
		float: none !important;
	}

	/* Content zone: drop the desktop 30px left indent so dashboard boxes and
	   content align flush on mobile (the !important desktop rule otherwise wins). */
	.tourflow-boutique-account .woocommerce-MyAccount-content {
		padding: 0 !important;
	}

	/* Order-detail / sibling cards: tighter padding so content fits narrow screens. */
	.woocommerce-order-details,
	.tourflow-tickets-section,
	.tourflow-passengers-section,
	.tourflow-deposit-upload-section {
		padding: 1.25em 1em !important;
	}

	/* Order details table: prevent horizontal overflow — allow wrapping, no nowrap. */
	table.woocommerce-table--order-details,
	table.shop_table.order_details {
		table-layout: fixed !important;
		width: 100% !important;
	}

	table.woocommerce-table--order-details td,
	table.woocommerce-table--order-details th,
	table.shop_table.order_details td,
	table.shop_table.order_details th {
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		padding: 0.7em 0 !important;
	}
}

/* ==========================================================================
   Country Code / Phone Dropdown (xoo-aff select2 + flag sprites)
   Dropdown is appended to <body> with classes: .select2-dropdown + .xoo-aff-select2-dropdown
   Flags use CSS sprite background-image from flags.css — never override background on .flag.
   ========================================================================== */

/* The My Account phone-code field wrapper is .xoo-aff-myacc-field (NOT .xoo-aff-group,
   which is the login/register form). The visible select2 container is a direct sibling
   of the hidden <select>. Style the container to match the aviation inputs. */
.tourflow-boutique-account .xoo-aff-myacc-field select + .select2,
.tourflow-boutique-account .xoo-aff-myacc-field .select2-container--default {
	background: rgba(255, 255, 255, 0.05) !important;
	border: none !important;
	border-bottom: 1px solid rgba(80, 227, 194, 0.5) !important;
	border-radius: 4px 4px 0 0 !important;
	box-shadow: none !important;
	height: 46px !important;
}

/* Inner selection element — transparent so container bg shows through */
.tourflow-boutique-account .xoo-aff-myacc-field .select2-selection--single {
	background-color: transparent !important;
	border: none !important;
	height: 46px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 12px !important;
}

/* Rendered value (flag + dial code) */
.tourflow-boutique-account .xoo-aff-myacc-field .select2-selection__rendered {
	color: #fff !important;
	line-height: normal !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* Dropdown arrow */
.tourflow-boutique-account .xoo-aff-myacc-field .select2-selection__arrow {
	height: 46px !important;
}
.tourflow-boutique-account .xoo-aff-myacc-field .select2-selection__arrow b {
	border-top-color: rgba(255, 255, 255, 0.6) !important;
}

/* Open dropdown panel — appended to body, must beat select2.css white default.
   Using html body prefix for maximum specificity without !important on z-index. */
html body .xoo-aff-select2-dropdown {
	background-color: #181a2e !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65) !important;
}

/* Search field inside dropdown */
html body .xoo-aff-select2-dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.07) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 4px !important;
	outline: none !important;
}

html body .xoo-aff-select2-dropdown .select2-search__field::placeholder {
	color: rgba(255, 255, 255, 0.35) !important;
}

/* Country option rows */
html body .xoo-aff-select2-dropdown .select2-results__option {
	color: rgba(255, 255, 255, 0.8) !important;
	background-color: transparent !important;
}

/* Override select2's #5897fb blue highlight */
html body .xoo-aff-select2-dropdown .select2-results__option--highlighted,
html body .xoo-aff-select2-dropdown .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: rgba(20, 171, 196, 0.22) !important;
	color: #fff !important;
}

/* Already-selected */
html body .xoo-aff-select2-dropdown .select2-results__option--selected {
	background-color: rgba(20, 171, 196, 0.1) !important;
}

/* Flag sprites — preserve background-image from flags.css, only fix layout */
.xoo-aff-flag-cont {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Protect flag sprite: background-image + background-position come from flags.css.
   We only guarantee the sprite box keeps its 32x32 dimensions and isn't clipped
   or painted over inside the closed selection (.select2-selection__rendered has
   overflow:hidden + nowrap from select2's base CSS, which can collapse the flag). */
.xoo-aff-flag-cont .flag,
.select2-selection__rendered .flag,
.select2-results__option .flag {
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	/* flags.css sets width:32px, height:32px, and per-country background-position
	   against the native-size sprite. Do NOT set background-size — it rescales
	   the sprite sheet and misaligns every flag. */
}

/* Dial code text */
.xoo-aff-flag-cont span:not(.flag) {
	color: #fff !important;
	font-size: 13px !important;
}

/* Hide the WooCommerce "Display name" (Nombre visible) field on Account Details.
   Not needed here (no public reviews/forums); the field is not HTML-required, so
   hiding it is submission-safe, and new accounts default the display name to the
   account email. Scoped to the edit-account page. */
body.woocommerce-edit-account p.woocommerce-form-row:has(#account_display_name) {
	display: none !important;
}