/* ========================
   Elegant form skin (STEP 2)
   ======================== */

/* container background tweak (optional, keeps panel look) */
#bookingStep2 {
    --form-bg: linear-gradient(180deg, rgba(14, 16, 20, 0.72), rgba(8, 10, 12, 0.76));
    background: var(--form-bg);
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: #e6eef8;
}

/* overall inputs & textarea */
#bookingStep2 input[type="text"],
#bookingStep2 input[type="tel"],
#bookingStep2 input[type="email"],
#bookingStep2 textarea {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #e6eef8 !important;
    /* override text color classes */
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 6px 20px rgba(2, 6, 23, 0.45);
    transition: transform 160ms cubic-bezier(.2, .9, .25, 1), box-shadow 160ms ease, border-color 160ms ease;
    outline: none;
    width: 100%;
    font-size: 0.98rem;
}

/* placeholder */
#bookingStep2 input::placeholder,
#bookingStep2 textarea::placeholder {
    color: rgba(230, 238, 248, 0.45);
    font-weight: 500;
}

/* focus */
#bookingStep2 input:focus,
#bookingStep2 textarea:focus {
    transform: translateY(-3px);
    border-color: rgba(255, 158, 60, 0.95);
    box-shadow: 0 10px 30px rgba(255, 140, 50, 0.08), 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* labels */
#bookingStep2 label.block {
    color: rgba(230, 238, 248, 0.85);
    font-weight: 600;
    margin-bottom: 6px;
}

/* checkbox list wrapper */
#bookingStep2 .grid.grid-cols-1.sm\\:grid-cols-2.gap-2 {
    margin-top: 6px;
}

/* checkbox input styling (custom look) */
#bookingStep2 input[type="checkbox"] {
    /* hide default appearance but keep accessible focusable element */
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    vertical-align: middle;
    margin-right: 10px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    position: relative;
    transition: all 180ms ease;
    cursor: pointer;
}

/* checkbox checked state: gradient fill + SVG checkmark as background */
#bookingStep2 input[type="checkbox"]:checked {
    background: linear-gradient(180deg, #ffd68a, #ff9a47);
    border-color: rgba(255, 155, 45, 0.9);
    box-shadow: 0 6px 18px rgba(255, 140, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.5l3 3 8-8' stroke='%230b1220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
}

/* focus-visible for keyboard users */
#bookingStep2 input[type="checkbox"]:focus {
    box-shadow: 0 0 0 4px rgba(255, 150, 40, 0.10), 0 6px 20px rgba(2, 6, 23, 0.5);
}

/* checkbox label text */
#bookingStep2 label.flex.items-center.gap-2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 160ms ease, transform 160ms ease;
    cursor: pointer;
    color: rgba(230, 238, 248, 0.95);
}

#bookingStep2 label.flex.items-center.gap-2:hover {
    background: rgba(255, 255, 255, 0.02);
    transform: translateY(-3px);
}

/* make label text slightly muted for less important items */
#bookingStep2 label.flex.items-center.gap-2 input~span,
#bookingStep2 label.flex.items-center.gap-2 {
    font-size: 0.95rem;
}

/* Additional note textarea */
#bookingStep2 textarea {
    min-height: 90px;
    resize: vertical;
}

/* Terms checkbox alignment */
#bookingStep2 .flex.items-center.gap-3 {
    margin-top: 6px;
}

#bookingStep2 #agreeTnC {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
    vertical-align: middle;
    display: inline-block;
}

#bookingStep2 #agreeTnC:checked {
    background: linear-gradient(180deg, #ffd68a, #ff9a47);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.5l3 3 8-8' stroke='%230b1220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    border-color: rgba(255, 155, 45, 0.9);
}

/* Terms label link highlight */
#bookingStep2 label[for="agreeTnC"] a,
#bookingStep2 .flex.items-center.gap-3 a {
    color: #ffd68a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* buttons: keep ids same but upgrade look */
#bookingStep2 button#step2Back {
    background: transparent;
    color: #dbe9ff;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 26px rgba(2, 6, 23, 0.45);
    padding: 10px 14px;
    border-radius: 10px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

#bookingStep2 button#step2Back:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.6);
}

/* accent next button */
#bookingStep2 button#step2Next,
#bookingStep2 button.accent-btn {
    background: linear-gradient(90deg, #ffd68a 0%, #ff9a47 50%, #ff7b2a 100%);
    color: #0b1220;
    font-weight: 700;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(255, 130, 40, 0.12), 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: transform 180ms cubic-bezier(.2, .9, .25, 1), box-shadow 180ms ease;
}

#bookingStep2 button#step2Next:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 28px 80px rgba(255, 120, 40, 0.14);
}

/* small screens: make inputs full width and buttons stack neatly */
@media (max-width: 640px) {
    #bookingStep2 .grid.grid-cols-1.sm\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #bookingStep2 .mt-6.flex.flex-col.sm\\:flex-row {
        flex-direction: column;
    }

    #bookingStep2 button#step2Back,
    #bookingStep2 button#step2Next {
        width: 100%;
    }
}

/* tiny decorative accent under heading */
#bookingStep2>.text-xl.font-semibold.mb-4 {
    position: relative;
}

#bookingStep2>.text-xl.font-semibold.mb-4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 214, 138, 0.9), rgba(255, 138, 62, 0.9));
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(255, 140, 40, 0.08);
}