/**
 * Training Events - Checkout Attendee Fields
 *
 * @package S4L_Hello_Child
 */

/* ==========================================================================
   Cart Count Badge
   ========================================================================== */

.cart-count {
	display: inline-block;
	background: #ff6b6b;
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	border-radius: 12px;
	margin-left: 0.5rem;
	min-width: 1.5rem;
	text-align: center;
	vertical-align: middle;
}

/* For Elementor navigation menus */
.elementor-nav-menu a .cart-count {
	position: relative;
	top: -2px;
}

/* Alternative badge style - positioned absolutely (uncomment if preferred) */
/*
.elementor-nav-menu a {
	position: relative;
}

.elementor-nav-menu a .cart-count {
	position: absolute;
	top: -8px;
	right: -12px;
	margin-left: 0;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0.2rem 0.35rem;
	font-size: 0.7rem;
	border-radius: 50%;
}
*/

/* ==========================================================================
   Global Checkout Form Styling
   ========================================================================== */

/* Billing and Shipping sections styling to match attendee fields */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: #f8f8f8;
	padding: 2rem;
	border-radius: 8px;
	margin: 2rem 0;
	border: 1px solid #e0e0e0;
}

/* Order Review section styling */
.woocommerce-checkout #order_review_heading {
	color: #333;
	font-size: 1.25rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

.woocommerce-checkout #order_review {
	background: #f8f8f8;
	padding: 2rem;
	border-radius: 8px;
	margin: 2rem 0;
	border: 1px solid #e0e0e0;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	color: #333;
	font-size: 1.25rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Style all checkout input fields */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	background-color: white;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state for all inputs */
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout input[type="number"]:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
	outline: none;
	border-color: #23b5d3;
	box-shadow: 0 0 0 2px rgba(35, 181, 211, 0.1);
}

/* Labels styling */
.woocommerce-checkout label {
	font-weight: 600;
	color: #333;
	margin-bottom: 0.5rem;
	display: block;
}

/* Required asterisk */
.woocommerce-checkout .required {
	color: #ff6b6b;
	margin-left: 0.25rem;
}

/* Form rows spacing */
.woocommerce-checkout .form-row {
	margin-bottom: 1rem;
}

/* Textarea specific styling */
.woocommerce-checkout textarea {
	min-height: 100px;
	resize: vertical;
}

/* Select dropdown styling */
.woocommerce-checkout select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	padding-right: 2.5rem;
}

/* ==========================================================================
   Checkout Attendee Fields
   ========================================================================== */

.training-attendee-fields {
	background: #f8f8f8;
	padding: 2rem;
	border-radius: 8px;
	margin: 2rem 0;
	border: 1px solid #e0e0e0;
}

.training-attendee-fields h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	color: #333;
	font-size: 1.25rem;
}

.form-help {
	color: #666;
	font-size: 0.95em;
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

.training-attendee-fields .form-row {
	margin-bottom: 1rem;
}

.training-attendee-fields label {
	font-weight: 600;
	color: #333;
}

.training-attendee-fields input[type="text"] {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
}

.training-attendee-fields input[type="text"]:focus {
	outline: none;
	border-color: #23b5d3;
	box-shadow: 0 0 0 2px rgba(35, 181, 211, 0.1);
}

.training-attendee-fields .required {
	color: #ff6b6b;
	margin-left: 0.25rem;
}

/* ==========================================================================
   Admin Order Display
   ========================================================================== */

.order-training-attendees {
	margin-top: 20px;
	padding: 12px;
	background: #f8f8f8;
	border-radius: 4px;
}

.order-training-attendees h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.order-training-attendees ol {
	margin: 10px 0;
	padding-left: 20px;
}

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

@media (max-width: 768px) {
	.training-attendee-fields,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review {
		padding: 1.5rem;
	}
}

@media (max-width: 480px) {
	.training-attendee-fields,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review {
		padding: 1rem;
	}
}

/* ==========================================================================
   External Product Button
   ========================================================================== */

.external-product-button-wrapper {
	margin: 1rem 0;
}

.external-product-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #4ba73c !important;
	color: white !important;
	padding: 0.75rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
	border: none !important;
}

.external-product-button:hover {
	background: #3d8c30 !important;
	color: white !important;
}

.external-product-button svg {
	margin-left: 0.5rem;
}

.external-product-button-small {
	font-size: 0.9rem !important;
	padding: 0.5rem 1rem !important;
}

/* ==========================================================================
   Product Event Details
   ========================================================================== */

.product-event-details {
	background: #f8f8f8;
	padding: 1rem;
	border-radius: 4px;
	margin: 1rem 0;
	border: 1px solid #e0e0e0;
}

.event-detail-item {
	display: flex;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid #e0e0e0;
}

.event-detail-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.event-detail-item:first-child {
	padding-top: 0;
}

.event-detail-item svg {
	flex-shrink: 0;
	margin-right: 0.75rem;
	color: #4ba73c;
	width: 14px;
	height: 14px;
}

.event-detail-item .detail-label {
	font-weight: 600;
	color: #333;
	margin-right: 0.5rem;
	min-width: 60px;
	font-size: 0.9rem;
}

.event-detail-item .detail-value {
	color: #666;
	flex: 1;
	font-size: 0.9rem;
}

/* ==========================================================================
   Print Styles (for order printing)
   ========================================================================== */

@media print {
	.order-training-attendees {
		background: white;
		border: 1px solid #ddd;
		page-break-inside: avoid;
	}
}