/* Main Form Wrapper */
#wpsb-booking-form-wrapper {
    max-width: 600px;
    margin: 20px auto;
    padding: 25px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
}

/* Form Rows */
.form-row {
    margin-bottom: 15px;
}

.form-row-html {
    padding: 10px;
    background: #f0f0f0;
    border-radius: 4px;
    color: #555;
}

/* Labels */
#wpsb-booking-form-wrapper label {
    display: block;
    font-weight: 500; /* Medium weight for Quicksand */
    margin-bottom: 5px;
    color: #333;
}

#wpsb-booking-form-wrapper label .required {
    color: #d9534f;
}

/* Inputs, Textarea */
#wpsb-booking-form-wrapper input[type="text"],
#wpsb-booking-form-wrapper input[type="email"],
#wpsb-booking-form-wrapper input[type="date"],
#wpsb-booking-form-wrapper select,
#wpsb-booking-form-wrapper textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Important for padding and width */
    font-family: 'Quicksand', sans-serif; /* Apply font to inputs */
}

#wpsb-booking-form-wrapper select[multiple] {
    height: auto;
    min-height: 120px;
}


#wpsb-booking-form-wrapper textarea {
    min-height: 100px;
    resize: vertical;
}

/* Radio & Checkbox Alignment for custom fields */
#wpsb-booking-form-wrapper fieldset div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#wpsb-booking-form-wrapper fieldset div input[type="radio"],
#wpsb-booking-form-wrapper fieldset div input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0;
}

#wpsb-booking-form-wrapper fieldset div label {
    margin-bottom: 0;
    font-weight: 500;
}


/* Time Slots Container */
#wpsb-time-slots-container .wpsb-notice,
#wpsb-time-slots-container .wpsb-loading,
#wpsb-time-slots-container .wpsb-error {
    color: #777;
    padding: 15px;
    background-color: #efefef;
    border-radius: 4px;
    text-align: center;
}
#wpsb-time-slots-container .wpsb-error {
    color: #d9534f;
    background-color: #f2dede;
}


/* Time Slot Cards Grid */
.wpsb-time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

/* Individual Time Slot Card */
.time-slot-card {
    position: relative;
}

.time-slot-card input[type="radio"] {
    /* Hide the default radio button */
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.time-slot-card label {
    display: block;
    padding: 15px 10px;
    background-color: #fff;
    border: 1px solid #0073aa;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    font-weight: 700; /* Bold weight for Quicksand */
    color: #0073aa;
    transition: all 0.2s ease-in-out;
}

/* Checked State */
.time-slot-card input[type="radio"]:checked + label {
    background-color: #0073aa;
    color: #fff;
    border-color: #005a87;
}

/* Hover State */
.time-slot-card:not(.disabled) input[type="radio"]:hover + label {
    background-color: #f0f8ff;
}

/* Disabled/Booked State */
.time-slot-card.disabled label {
    background-color: #e9e9e9;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --- VOUCHER STYLES --- */
.wpsb-voucher-wrapper {
    display: flex;
    gap: 10px;
}
#wpsb-voucher-code {
    flex-grow: 1;
}
#wpsb-apply-voucher-btn {
    padding: 0 20px;
    background-color: #555;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
#wpsb-apply-voucher-btn:hover {
    background-color: #333;
}
#wpsb-voucher-feedback {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
}
#wpsb-voucher-feedback.success {
    color: #4CAF50;
}
#wpsb-voucher-feedback.error {
    color: #d9534f;
}

/* Updated Package Price Display */
.package-price-wrapper {
    text-align: center;
}
.package-price-wrapper .original-price {
    text-decoration: line-through;
    color: #999;
    font-weight: 500;
    margin-right: 8px;
    font-size: 14px;
}
.package-price-wrapper .discounted-price {
    font-size: 18px;
    font-weight: 700;
    color: #0073aa;
}
.package-price-wrapper .normal-price {
    font-size: 14px;
    color: #999;
    font-weight: 500;
    text-decoration: line-through;
    margin-left: 8px;
}
.discount-info {
    font-size: 12px;
    color: #4CAF50;
    font-weight: 700;
}

/* --- PACKAGE CARD STYLES --- */
.wpsb-package-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

label.wpsb-radio-card {
	cursor: pointer;
    display: block;
}

label.wpsb-radio-card .card-content-wrapper {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    border: 2px solid #e3e3e3;
    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.2);
    transition: all 200ms linear;
    position: relative;
}

label.wpsb-radio-card:hover .card-content-wrapper {
    border-color: #0073aa;
}


label.wpsb-radio-card .check-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    border: 2px solid #e3e3e3;
    border-radius: 50%;
    transition: all 200ms linear;
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #fff;
}

label.wpsb-radio-card .check-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.6);
    width: 12px;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center center;
    transition: all 200ms linear;
    opacity: 0;
}

label.wpsb-radio-card input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: none; /* Hide it completely */
}

label.wpsb-radio-card input[type='radio']:checked + .card-content-wrapper {
    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #0073aa;
    border-color: #0073aa;
}

label.wpsb-radio-card input[type='radio']:checked + .card-content-wrapper .check-icon {
    background: #0073aa;
    border-color: #0073aa;
    transform: scale(1.2);
}

label.wpsb-radio-card input[type='radio']:checked + .card-content-wrapper .check-icon::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

label.wpsb-radio-card .card-content {
    text-align: center;
}

label.wpsb-radio-card .card-content img {
    max-width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 auto 15px auto;
}

label.wpsb-radio-card .card-content .package-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f2949;
    margin-bottom: 10px;
}

/* Submit Button */
#wpsb-submit-btn {
    background-color: #0085ba;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Quicksand', sans-serif; /* Apply font to button */
    font-weight: 700;
}

#wpsb-submit-btn:hover {
    background-color: #0073aa;
}

#wpsb-submit-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Response Messages */
#wpsb-response-message {
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
    display: none; /* Hidden by default */
}
#wpsb-response-message.success {
    display: block;
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}
#wpsb-response-message.error {
    display: block;
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}