/**
 * Variant Selection Styles (Step 1)
 * Course variant and quantity selection
 * 
 * @package SureCartCourseExtension
 * @since 1.2.0
 */

/* ===================================
   Variant Selection Container
   =================================== */

.sce-variant-selection {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ===================================
   Form Group
   =================================== */

.sce-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sce-form-group__label {
	font-size: 14px;
	font-weight: 600;
	color: #1F2937;
	margin: 0;
}

.sce-form-group__label .required {
	color: #DC2626;
	margin-left: 2px;
}

.sce-form-group__help {
	font-size: 13px;
	color: #6B7280;
	margin: 0;
}

.sce-form-group__error {
	font-size: 13px;
	color: #DC2626;
	margin: 0;
	display: none;
}

.sce-form-group.has-error .sce-form-group__error {
	display: block;
}

.sce-form-group.has-error .sce-select,
.sce-form-group.has-error .sce-input {
	border-color: #DC2626;
}

/* ===================================
   Select Dropdown
   =================================== */

.sce-select {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	color: #1F2937;
	background: #FFFFFF;
	border: 2px solid #D1D5DB;
	border-radius: 6px;
	cursor: pointer;
	transition: all 150ms ease;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 48px;
}

.sce-select:hover:not(:disabled) {
	border-color: #9CA3AF;
}

.sce-select:focus {
	outline: none;
	border-color: #00C896;
	box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.1);
}

.sce-select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #F9FAFB;
}

/* ===================================
   Quantity Selector
   =================================== */

.sce-quantity-selector {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sce-quantity-selector__button {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 600;
	color: #1F2937;
	background: #FFFFFF;
	border: 2px solid #D1D5DB;
	border-radius: 6px;
	cursor: pointer;
	transition: all 150ms ease;
	user-select: none;
}

.sce-quantity-selector__button:hover:not(:disabled) {
	border-color: #00C896;
	color: #00C896;
}

.sce-quantity-selector__button:active:not(:disabled) {
	transform: scale(0.95);
}

.sce-quantity-selector__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sce-quantity-selector__input {
	width: 80px;
	padding: 10px 12px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: #1F2937;
	background: #F9FAFB;
	border: 2px solid #E5E7EB;
	border-radius: 6px;
	transition: all 150ms ease;
}

.sce-quantity-selector__input:focus {
	outline: none;
	border-color: #00C896;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.1);
}

.sce-quantity-selector__input::-webkit-inner-spin-button,
.sce-quantity-selector__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ===================================
   Capacity Indicator
   =================================== */

.sce-capacity-indicator {
	padding: 16px;
	background: #F0FDF4;
	border: 1px solid #86EFAC;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sce-capacity-indicator.is-warning {
	background: #FEF3C7;
	border-color: #FDE047;
}

.sce-capacity-indicator.is-full {
	background: #FEF2F2;
	border-color: #FCA5A5;
}

.sce-capacity-indicator__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.sce-capacity-indicator__icon svg {
	width: 100%;
	height: 100%;
}

.sce-capacity-indicator__text {
	flex: 1;
	font-size: 14px;
	color: #1F2937;
	margin: 0;
}

.sce-capacity-indicator__text strong {
	font-weight: 600;
	color: #059669;
}

.sce-capacity-indicator.is-warning .sce-capacity-indicator__text strong {
	color: #D97706;
}

.sce-capacity-indicator.is-full .sce-capacity-indicator__text strong {
	color: #DC2626;
}

/* ===================================
   Price Display
   =================================== */

.sce-price-display {
	padding: 20px;
	background: #F9FAFB;
	border: 2px solid #E5E7EB;
	border-radius: 8px;
	text-align: center;
}

.sce-price-display__label {
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 8px 0;
}

.sce-price-display__amount {
	font-size: 32px;
	font-weight: 700;
	color: #1F2937;
	margin: 0;
	line-height: 1;
}

.sce-price-display__amount .currency {
	font-size: 20px;
	font-weight: 600;
	color: #6B7280;
	margin-right: 4px;
}

.sce-price-display__per {
	font-size: 14px;
	color: #6B7280;
	margin: 4px 0 0 0;
}

.sce-price-display__total {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #E5E7EB;
}

.sce-price-display__total-label {
	font-size: 14px;
	font-weight: 600;
	color: #6B7280;
	margin: 0 0 4px 0;
}

.sce-price-display__total-amount {
	font-size: 24px;
	font-weight: 700;
	color: #00C896;
	margin: 0;
}

/* ===================================
   Waitlist Option
   =================================== */

.sce-waitlist-option {
	padding: 20px;
	background: #FEF2F2;
	border: 2px solid #FCA5A5;
	border-radius: 8px;
	text-align: center;
}

.sce-waitlist-option__title {
	font-size: 16px;
	font-weight: 600;
	color: #991B1B;
	margin: 0 0 8px 0;
}

.sce-waitlist-option__message {
	font-size: 14px;
	color: #B91C1C;
	margin: 0 0 16px 0;
}

.sce-waitlist-option__button {
	width: 100%;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
	background: #DC2626;
	border: 2px solid #DC2626;
	border-radius: 6px;
	cursor: pointer;
	transition: all 150ms ease;
}

.sce-waitlist-option__button:hover:not(:disabled) {
	border-color: #B91C1C;
}

.sce-waitlist-option__button:focus {
	outline: 2px solid #DC2626;
	outline-offset: 2px;
}

/* ===================================
   Loading Skeleton
   =================================== */

.sce-skeleton {
	background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s ease-in-out infinite;
	border-radius: 4px;
}

.sce-skeleton--select {
	height: 48px;
	width: 100%;
}

.sce-skeleton--text {
	height: 20px;
	width: 100%;
}

.sce-skeleton--price {
	height: 80px;
	width: 100%;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

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

@media (max-width: 639px) {
	.sce-variant-selection {
		gap: 20px;
	}
	
	.sce-price-display__amount {
		font-size: 28px;
	}
	
	.sce-price-display__total-amount {
		font-size: 20px;
	}
}