/**
 * Fitting Room Styles
 *
 * @package WOPT_Trello
 */

/* Theme wrapper is hidden further down via visibility-based rules (not display:none)
   so form.cart inside remains initializable by EPO JS. */

/* Container */
.wopt-fitting-room-container {
	max-width: 800px;
	margin: 40px auto;
	padding: 20px;
}

/* Page Header */
.wopt-fitting-room-header {
	text-align: center;
	margin-bottom: 30px;
}

.wopt-fitting-room-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.wopt-fitting-room-header p {
	color: #666;
	font-size: 1.1em;
}

.wopt-fitting-room-header .wopt-fitting-room-instructions {
	color: #555;
	font-size: 0.95em;
	line-height: 1.5;
	margin-top: 5px;
}

.wopt-fitting-room-header .wopt-success-message {
	font-size: 1.6em;
	color: #2e7d32;
	margin-top: 20px;
}

/* Halve the gap between success message header and the progress bar. */
.wopt-fitting-room-header:has(.wopt-success-message) {
	margin-bottom: 15px;
}
.wopt-fitting-room-header:has(.wopt-success-message) + .wopt-progress-bar {
	margin-top: 0;
}

.wopt-fitting-room-actions {
	text-align: center;
	margin: 30px 0;
}

/* Order Info */
.wopt-order-info {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
	margin-bottom: 30px;
}

.wopt-order-info h3 {
	margin-top: 0;
	color: #333;
}

/* Multi–line-item orders: emphasize Order Information heading and per-item product + athlete. */
.wopt-order-info--multiple-items {
	font-size: 1.06em;
}

.wopt-order-info--multiple-items > h3 {
	font-size: 1.35em;
	margin-bottom: 0.65em;
	line-height: 1.3;
}

.wopt-fitting-room--multi-item .wopt-measurement-section .wopt-measurement-item > h3 {
	font-size: 1.35em;
	line-height: 1.35;
	font-weight: 600;
	color: #222;
}

.wopt-order-info p {
	margin: 2px 0;
	padding-bottom: 0.3em;
	color: #666;
	font-size: 1.05em;
}

.wopt-order-info h4:not(.wopt-order-info-item-headline) {
	margin: 15px 0 5px;
	color: #555;
	font-size: 1.1em;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 5px;
}

.wopt-order-info h4.wopt-order-info-item-headline {
	font-size: 1.35em;
	font-weight: 600;
	line-height: 1.35;
	margin: 1rem 0 0.65rem;
	color: #222;
	border-bottom: 2px solid #e0e0e0;
	padding-bottom: 0.45rem;
}

/* New Order Button */
.wopt-new-order-button-wrap {
	margin-bottom: 25px;
}

.wopt-new-order-button {
	display: inline-block;
	padding: 10px 24px;
	background: #f0f0f0;
	color: #333 !important;
	text-decoration: none !important;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.wopt-new-order-button:hover {
	background: #e0e0e0;
	color: #007cba !important;
}

/* Error Messages */
.wopt-fitting-room-error {
	background: #ffebee;
	border: 1px solid #f44336;
	border-radius: 5px;
	padding: 15px;
	margin-bottom: 20px;
	color: #c62828;
}

.wopt-fitting-room-error p {
	margin: 0;
}

/* Order Lookup Form */
.wopt-order-lookup-form {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
	margin-top: 20px;
}

.wopt-order-lookup-form h3 {
	margin-top: 0;
}

.wopt-order-lookup-form input[type="text"] {
	width: 100%;
	max-width: 300px;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-bottom: 10px;
}

.wopt-order-lookup-form button {
	padding: 10px 20px;
	background: #007cba;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	font-size: 16px;
}

.wopt-order-lookup-form button:hover {
	background: #005a87;
}

/* Measurements Section */
.wopt-measurement-section {
	background: #fff;
	border-radius: 5px;
	padding: 20px;
	margin: 0 auto 20px;
	width: 80%;
}

.wopt-measurement-section h3 {
	margin-top: 0;
	color: #333;
	border-bottom: 2px solid #007cba;
	padding-bottom: 10px;
}

/* Measurements Form */
#wopt-measurements-form {
	margin-top: 20px;
}

#wopt-measurements-form .form-row {
	margin-bottom: 20px;
}

#wopt-measurements-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	color: #333;
}

#wopt-measurements-form input[type="text"],
#wopt-measurements-form input[type="number"],
#wopt-measurements-form input[type="email"],
#wopt-measurements-form select,
#wopt-measurements-form textarea {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-sizing: border-box;
}

#wopt-measurements-form input[type="text"]:focus,
#wopt-measurements-form input[type="number"]:focus,
#wopt-measurements-form input[type="email"]:focus,
#wopt-measurements-form select:focus,
#wopt-measurements-form textarea:focus {
	border-color: #007cba;
	outline: none;
	box-shadow: 0 0 0 1px #007cba;
}

/* Error State */
.wopt-field-error {
	border-color: #f44336 !important;
	box-shadow: 0 0 0 1px #f44336 !important;
}

/* Error state for EPO containers */
.tmcp-field-wrap.wopt-field-error,
.tc-container.wopt-field-error {
	background: #ffebee;
	border-left: 3px solid #f44336;
	padding-left: 10px;
}

.tmcp-field-wrap.wopt-field-error input,
.tmcp-field-wrap.wopt-field-error select,
.tmcp-field-wrap.wopt-field-error textarea,
.tc-container.wopt-field-error input,
.tc-container.wopt-field-error select,
.tc-container.wopt-field-error textarea {
	border-color: #f44336 !important;
}

/* Submit Button Container */
.wopt-submit-measurements {
	margin-top: 30px;
	text-align: left;
}

.wopt-pre-submit-hint {
	color: #856404;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 5px;
	padding: 10px 16px;
	margin: 0 0 16px;
	font-size: 0.95em;
	line-height: 1.5;
}

/* Submit Button */
#wopt-submit-measurements {
	padding: 15px 40px 20px 40px;
	background: #007cba;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	transition: background 0.3s ease;
}

#wopt-submit-measurements:hover {
	background: #005a87;
}

#wopt-submit-measurements:disabled {
	background: #ccc !important;
	color: #666 !important;
	cursor: not-allowed !important;
	opacity: 0.6;
	pointer-events: none;
}

#wopt-submit-measurements:disabled:hover {
	background: #ccc !important;
}

/* Notice Box */
.wopt-fitting-room-notice {
	background: #fff3cd;
	border: 2px solid #ffc107;
	border-radius: 8px;
	padding: 25px 0 10px 0;
	margin: 30px auto;
	text-align: center;
}

.wopt-fitting-room-notice h3 {
	margin: 0 0 16px;
	color: #856404;
	font-size: 1.6em;
	line-height: 1.3;
}

.wopt-fitting-room-notice__text {
	color: #5a4e1a;
	margin: 0;
	font-size: 1.05em;
	line-height: 1.6;
}

.wopt-fitting-room-notice__button-wrap {
	margin: 0;
}

.wopt-fitting-room-notice__button {
	display: inline-block;
	padding: 15px 40px 15px;
	background: #007cba;
	color: #fff !important;
	text-decoration: none !important;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wopt-fitting-room-notice__button:hover {
	background: #005a87;
}

.wopt-fitting-room-notice__footer {
	color: #856404;
	margin: 0;
	font-size: 0.92em;
	line-height: 1.5;
	font-style: italic;
}

/* Notice Warning Variant */
.wopt-fitting-room-notice--warning {
	background: #fff3cd;
	border: 1px solid #ffc107;
	padding: 15px;
	border-radius: 4px;
	margin: 20px 0;
}

/* ==========================================================================
   Fitting Room Container Layout
   ========================================================================== */

.wopt-fitting-room-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.wopt-fitting-room-order-info {
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
	margin-bottom: 30px;
}

.wopt-fitting-room-order-info h2 {
	margin-top: 0;
}

.wopt-fitting-room-order-info .order-details {
	margin-top: 15px;
}

/* EPO Fields Wrapper - ensure EPO uses only its own styles */
.wopt-epo-fields-wrapper {
	margin: 30px 0;
}

/* Let EPO control its own styling — do not reset with all:initial */

/* Submit Button Container (product page) */
.wopt-submit-button-container {
	margin: 30px 0;
	text-align: center;
}

.wopt-submit-button-container #wopt-submit-measurements {
	padding: 15px 40px;
	font-size: 16px;
}

#wopt-submit-message {
	margin-top: 15px;
	display: none;
}

/* Measurement Item Headers */
.wopt-measurement-item h4 {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid #ddd;
}

.wopt-measurement-item:first-child h4 {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Loading State for EPO Fields */
.wopt-epo-loading {
	padding: 40px;
	text-align: center;
	color: #666;
	background: #f9f9f9;
	border: 1px dashed #ddd;
	border-radius: 4px;
	margin: 15px 0;
	min-height: 120px;
}

.wopt-epo-loading span {
	font-size: 16px;
}

/* Show measurements form - EPO fields should be visible */
#wopt-measurements-form {
	display: block !important;
	visibility: visible !important;
}

/* ==========================================================================
   WooCommerce Overrides for Fitting Room
   ========================================================================== */

/* Hide WooCommerce elements that definitely don't contain form.cart */
.product-template-default .images,
.product-template-default .woocommerce-product-gallery,
.woocommerce-tabs,
.related.products,
.up-sells,
.tc-hide-add-to-cart-button {
	display: none !important;
}

/* Hide elements that MAY contain form.cart — use visibility-based hiding
   so EPO JS can still initialize on form.cart inside them. */
.product-template-default .summary.entry-summary,
.product-template-default .nectar-prod-wrap {
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	pointer-events: none !important;
}

/* Hide native form.cart WITHOUT display:none so EPO JS can still initialize on it.
   JS will move it into #wopt-measurements-form and reset these styles. */
form.cart:not(#wopt-measurements-form) {
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	pointer-events: none !important;
}

/* Once form.cart is moved into our container and gets id=wopt-measurements-form,
   hide WooCommerce elements that came along (add-to-cart, quantity). */
#wopt-measurements-form .single_add_to_cart_button,
#wopt-measurements-form button.single_add_to_cart_button,
#wopt-measurements-form .quantity,
#wopt-measurements-form input.qty,
#wopt-measurements-form input[name="add-to-cart"] {
	display: none !important;
}

/* EPO popup elements - allow TM EPO to control visibility */
/* .tm-section-link = popup trigger button */
/* .tm-section-pop = popup container */

/* ==========================================================================
   EPO Fields Visibility
   ========================================================================== */

/* EPO renders natively inside form.cart — no forced visibility needed.
   After JS moves form.cart into our container, EPO controls its own display. */

/* ==========================================================================
   Radio Buttons and Checkboxes
   ========================================================================== */

/* Keep radio button and checkbox list items inline */
.wopt-fitting-room-container ul.tmcp-ul-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wopt-fitting-room-container ul.tmcp-ul-wrap li {
	display: inline-flex !important;
	align-items: center !important;
	margin-right: 8px !important;
	margin-bottom: 8px !important;
}

/* ==========================================================================
   Interactive Elements
   ========================================================================== */

/* Ensure interactive elements are clickable (no forced position/z-index to avoid EPO conflicts) */
.wopt-fitting-room-container label,
.wopt-fitting-room-container input,
.wopt-fitting-room-container select,
.wopt-fitting-room-container textarea,
.wopt-fitting-room-container button {
	pointer-events: auto;
	cursor: pointer;
}

/* Text inputs and selects sizing */
.wopt-fitting-room-container input[type="text"],
.wopt-fitting-room-container input[type="number"],
.wopt-fitting-room-container select,
.wopt-fitting-room-container textarea {
	width: 100%;
	max-width: 400px;
}

/* ==========================================================================
   Submit Measurements Container (Shortcode)
   ========================================================================== */

/* Submit measurements container styling */
.wopt-submit-measurements-container {
	clear: both;
	background: #f9f9f9;
	border: 2px solid #007cba;
	border-radius: 5px;
	padding: 30px;
	margin: 30px 0;
	text-align: center;
	z-index: 100;
	position: relative;
	display: block !important;
}

.wopt-submit-measurements-container h3 {
	margin-top: 0;
	color: #333;
}

.wopt-submit-measurements-container p {
	margin-bottom: 20px;
	color: #666;
}

.wopt-submit-measurements-container #wopt-submit-measurements {
	padding: 15px 50px;
	font-size: 18px;
	font-weight: 600;
	background: #007cba;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block !important;
}

.wopt-submit-measurements-container #wopt-submit-measurements:hover {
	background: #005a87 !important;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.wopt-fitting-room-container {
		margin: 10px auto 20px;
		padding: 15px;
	}

	.wopt-measurement-section {
		padding: 15px;
	}

	#wopt-submit-measurements {
		width: 100%;
		padding: 12px 20px;
	}
}

/* ==========================================================================
   WOPT Popup Modal
   ========================================================================== */

.wopt-popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99999;
}

.wopt-popup-modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 8px;
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 100000;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.wopt-popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #eee;
	background: #f8f8f8;
	border-radius: 8px 8px 0 0;
}

.wopt-popup-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.wopt-popup-close {
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	padding: 0 5px;
	color: #666;
	line-height: 1;
}

.wopt-popup-close:hover {
	color: #000;
}

.wopt-popup-content {
	padding: 20px;
}

/* Ensure EPO fields in popup are visible */
.wopt-popup-content .cpf-element,
.wopt-popup-content .tc-epo-element-wrapper,
.wopt-popup-content .tmcp-field-wrap {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

@media (max-width: 480px) {
	.wopt-popup-modal {
		width: 95%;
		max-height: 90vh;
	}

	.wopt-popup-header {
		padding: 12px 15px;
	}

	.wopt-popup-content {
		padding: 15px;
	}
}

/* ==========================================================================
   WOPT Popup - Show Original Element as Overlay
   ========================================================================== */

/* When popup is active, show it as a modal overlay */
.tm-section-pop.wopt-popup-active {
	display: block !important;
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 100000 !important;
	background: #fff !important;
	padding: 30px !important;
	border-radius: 8px !important;
	max-width: 90vw !important;
	width: 600px !important;
	max-height: 80vh !important;
	overflow-y: auto !important;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Close button for popup */
.wopt-popup-close-btn {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	background: #f0f0f0 !important;
	border: none !important;
	font-size: 24px !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	color: #666 !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 100001 !important;
	transition: background 0.2s, color 0.2s !important;
}

.wopt-popup-close-btn:hover {
	background: #e0e0e0 !important;
	color: #333 !important;
}

/* Ensure popup has relative positioning for close button */
.tm-section-pop.wopt-popup-active {
	position: fixed !important;
}

/* Make sure labels inside popup are clickable */
.tm-section-pop.wopt-popup-active label {
	cursor: pointer !important;
	pointer-events: auto !important;
}

.tm-section-pop.wopt-popup-active input[type="radio"],
.tm-section-pop.wopt-popup-active input[type="checkbox"] {
	cursor: pointer !important;
	pointer-events: auto !important;
}

/* CRITICAL: Reset stacking context for all children to make popup interactive */
.tm-section-pop.wopt-popup-active * {
	position: relative !important;
	z-index: auto !important;
}

/* Keep close button absolute positioned */
.tm-section-pop.wopt-popup-active .wopt-popup-close-btn {
	position: absolute !important;
	z-index: 10 !important;
}

/* Ensure popup content is above overlay */
.tm-section-pop.wopt-popup-active {
	isolation: isolate !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
	.tm-section-pop.wopt-popup-active {
		width: 95vw !important;
		max-width: 95vw !important;
		padding: 20px !important;
		padding-top: 50px !important;
	}

	.wopt-popup-close-btn {
		top: 8px !important;
		right: 8px !important;
	}
}

/* ==========================================================================
   Progress Bar -- rounded rectangle blocks
   ========================================================================== */

.wopt-progress-bar {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 30px 0;
}

.wopt-progress-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	min-width: 180px;
	text-decoration: none;
	transition: border-color 0.3s, color 0.3s, background 0.3s;
	position: relative;
}

.wopt-progress-block--active {
	background: #4CAF50;
	color: #fff;
	border: 3px solid #4CAF50;
	cursor: default;
}

.wopt-progress-block--pending,
.wopt-progress-block--completed {
	background: #fff;
	color: #4CAF50;
	border: 3px dashed #4CAF50;
}

a.wopt-progress-block--pending:hover,
a.wopt-progress-block--completed:hover {
	border-color: #2E7D32;
	color: #2E7D32;
}

.wopt-progress-block-name {
	display: block;
	line-height: 1.3;
}

.wopt-progress-block-athlete {
	display: block;
	font-size: 13px;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 2px;
}

.wopt-progress-block--active .wopt-progress-block-athlete {
	color: rgba(255, 255, 255, 0.9);
}

.wopt-progress-block-check {
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 14px;
}

.wopt-progress-connector {
	display: none !important;
}

/* ==========================================================================
   Navigation Buttons
   ========================================================================== */

.wopt-navigation-buttons {
	display: flex;
	justify-content: space-between;
	margin: 30px 0;
	padding: 20px 0;
	border-top: 1px solid #ddd;
}

.wopt-nav-button {
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.wopt-nav-prev {
	background: #f0f0f0;
	color: #333;
	border: 1px solid #ddd;
}

.wopt-nav-prev:hover {
	background: #e0e0e0;
	color: #007cba;
}

.wopt-nav-next {
	background: #007cba;
	color: #fff;
	border: 1px solid #007cba;
}

.wopt-nav-next:hover {
	background: #005a87;
	border-color: #005a87;
}

/* ==========================================================================
   Draft Saved Indicator
   ========================================================================== */

.wopt-draft-saved-indicator {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #4caf50;
	color: #fff;
	padding: 12px 20px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 10000;
	font-size: 14px;
	font-weight: 600;
	display: none;
}

.wopt-draft-saved-indicator .wopt-draft-saved-text {
	margin: 0;
}

/* ==========================================================================
   Submit Message (when not all items completed)
   ========================================================================== */

.wopt-submit-message {
	text-align: center;
	padding: 20px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 5px;
	margin: 20px 0;
	color: #856404;
}

.wopt-submit-message p {
	margin: 0;
	font-size: 16px;
}

/* ==========================================================================
   Responsive Progress Bar
   ========================================================================== */

@media (max-width: 768px) {
	.wopt-progress-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.wopt-progress-block {
		min-width: auto;
	}

	.wopt-navigation-buttons {
		flex-direction: column;
		gap: 10px;
	}

	.wopt-nav-button {
		width: 100%;
		text-align: center;
	}

	.wopt-draft-saved-indicator {
		bottom: 10px;
		right: 10px;
		left: 10px;
		text-align: center;
	}
}