/**
 * Custom Checkout Fields Styles
 *
 * @package CustomCheckoutFields
 */

/* Hide fields that are not needed for food checkout */
.ccf-hidden-field {
	display: none !important;
}

/* Delivery fields with smooth transition */
.ccf-delivery-field {
	transition: opacity 0.3s ease-in-out;
}

.ccf-delivery-field.ccf-hidden-field {
	opacity: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* Custom field styling */
.ccf-order-type,
.ccf-room-number,
.ccf-checkin-id,
.ccf-dine-in-time,
.ccf-order-notes {
	margin-bottom: 1.5em;
}

/* Order type dropdown */
.ccf-order-type select {
	width: 100%;
	padding: 0.75em;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
	transition: border-color 0.3s ease;
}

.ccf-order-type select:focus {
	border-color: #007cba;
	outline: none;
	box-shadow: 0 0 0 1px #007cba;
}

/* Text inputs */
.ccf-room-number input[type="text"],
.ccf-checkin-id input[type="text"],
.ccf-dine-in-time input[type="time"] {
	width: 100%;
	padding: 0.75em;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
	transition: border-color 0.3s ease;
}

.ccf-room-number input[type="text"]:focus,
.ccf-checkin-id input[type="text"]:focus,
.ccf-dine-in-time input[type="time"]:focus {
	border-color: #007cba;
	outline: none;
	box-shadow: 0 0 0 1px #007cba;
}

/* Validation states */
.ccf-room-number.woocommerce-invalid input,
.ccf-checkin-id.woocommerce-invalid input,
.ccf-dine-in-time.woocommerce-invalid input,
.ccf-order-type.woocommerce-invalid select {
	border-color: #e2401c;
}

.ccf-room-number.woocommerce-validated input,
.ccf-checkin-id.woocommerce-validated input,
.ccf-dine-in-time.woocommerce-validated input,
.ccf-order-type.woocommerce-validated select {
	border-color: #0f834d;
}

/* Admin order details */
.ccf-custom-fields-admin {
	margin-top: 20px;
	padding: 15px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.ccf-custom-fields-admin h3 {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 1.1em;
	color: #333;
}

.ccf-custom-fields-admin p {
	margin: 8px 0;
	line-height: 1.6;
}

.ccf-custom-fields-admin strong {
	color: #555;
	min-width: 120px;
	display: inline-block;
}

/* Customer order details */
.ccf-custom-fields-customer {
	margin-top: 30px;
	padding: 20px 0;
	border-top: 1px solid #e0e0e0;
}

.ccf-custom-fields-customer h2 {
	margin-bottom: 15px;
	font-size: 1.3em;
	color: #333;
}

.ccf-custom-fields-customer table {
	width: 100%;
	border-collapse: collapse;
}

.ccf-custom-fields-customer table th,
.ccf-custom-fields-customer table td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
}

.ccf-custom-fields-customer table th {
	font-weight: 600;
	color: #555;
	width: 40%;
}

.ccf-custom-fields-customer table td {
	color: #333;
}

/* Responsive design */
@media screen and (max-width: 768px) {
	.ccf-custom-fields-customer table th {
		width: 35%;
		font-size: 0.9em;
	}

	.ccf-custom-fields-customer table td {
		font-size: 0.9em;
	}

	.ccf-order-type select,
	.ccf-room-number input[type="text"],
	.ccf-checkin-id input[type="text"],
	.ccf-dine-in-time input[type="time"] {
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* Loading state for validation */
.ccf-checkin-id.validating {
	position: relative;
}

.ccf-checkin-id.validating::after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border: 2px solid #007cba;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ccf-spin 0.6s linear infinite;
}

@keyframes ccf-spin {
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* Hide "(optional)" label text added by WooCommerce on custom food checkout fields */
.ccf-room-number label .optional,
.ccf-checkin-id label .optional,
.ccf-dine-in-time label .optional,
.ccf-pickup-field label .optional {
	display: none !important;
}

/* ── Booking Payment Option (finalize-book) ────────────────────────────── */
#ccf-payment-option-wrap {
    margin-bottom: 24px;
}

#ccf-payment-option-wrap label {
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#ccf-payment-option-wrap label:hover {
    background: #f9fdf9;
}

#ccf-payment-option-wrap input[type="radio"] {
    accent-color: #1a7a3f;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}