/**
 * WPForms — Form ID 61 (Book Your Training)
 * Ported styles from the original site's form 1556.
 */

/* ── Text inputs, selects, textarea ─────────────────────────── */

#wpforms-61 input[type="text"],
#wpforms-61 input[type="email"],
#wpforms-61 input[type="tel"],
#wpforms-61 input[type="number"],
#wpforms-61 select {
    border-radius: 50px !important;
}

#wpforms-61 textarea {
    border-radius: 16px !important;
}

#wpforms-61 input[type="text"],
#wpforms-61 input[type="email"],
#wpforms-61 input[type="tel"],
#wpforms-61 input[type="number"],
#wpforms-61 select,
#wpforms-61 textarea {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    background-color: #fff !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
}

#wpforms-61 input[type="text"]:focus,
#wpforms-61 input[type="email"]:focus,
#wpforms-61 input[type="tel"]:focus,
#wpforms-61 textarea:focus {
    border-color: rgba(0, 0, 0, 0.4) !important;
    outline: none !important;
}

/* ── Labels ──────────────────────────────────────────────────── */

#wpforms-61 label.wpforms-field-label,
#wpforms-61 legend.wpforms-field-label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400 !important;
}

/* ── Training Type — pill card radio buttons ─────────────────── */

#wpforms-61-field_11 li.choice-1.depth-1,
#wpforms-61-field_11 li.choice-2.depth-1,
#wpforms-61-field_11 li.choice-3.depth-1 {
    padding: 15px;
    border-radius: 99px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#wpforms-61-field_11 li.choice-1.depth-1:has(input[type="radio"]:checked),
#wpforms-61-field_11 li.choice-2.depth-1:has(input[type="radio"]:checked),
#wpforms-61-field_11 li.choice-3.depth-1:has(input[type="radio"]:checked) {
    background-color: #DFE9EF;
}

/* Hide the actual radio inputs inside Training Type */
input#wpforms-61-field_11_1,
input#wpforms-61-field_11_2,
input#wpforms-61-field_11_3 {
    display: none;
}

/* ── Training Details containers (conditional sub-fields) ────── */

#wpforms-61-field_12-container,
#wpforms-61-field_13-container,
#wpforms-61-field_16-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
}

/* Hide radio inputs inside Training Details */
input#wpforms-61-field_12_1,
input#wpforms-61-field_12_2,
input#wpforms-61-field_13_1,
input#wpforms-61-field_16_1 {
    display: none;
}

/* ── Training Details — pill card style for sub-choices ─────── */

#wpforms-61-field_12 li.choice-1.depth-1,
#wpforms-61-field_12 li.choice-2.depth-1,
#wpforms-61-field_13 li.choice-1.depth-1,
#wpforms-61-field_16 li.choice-1.depth-1 {
    padding: 15px;
    border-radius: 99px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 8px;
}

#wpforms-61-field_12 li:has(input[type="radio"]:checked),
#wpforms-61-field_13 li:has(input[type="radio"]:checked),
#wpforms-61-field_16 li:has(input[type="radio"]:checked) {
    background-color: #DFE9EF;
}

/* ── Student checkbox — no border, horizontal ────────────────── */

#wpforms-61-field_10 li {
    display: flex !important;
    flex-direction: row;
    justify-content: start;
    border: none !important;
    border-width: 0px !important;
    padding: 0;
}

/* ── Checked radio — show tick before label ──────────────────── */

#wpforms-61 input[type="radio"]:checked + .wpforms-field-label-inline {
    position: relative;
}

/* ── Submit button ───────────────────────────────────────────── */

button#wpforms-submit-61 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background-color: var(--color-primary) !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    -webkit-font-smoothing: antialiased !important;
}

button#wpforms-submit-61:hover {
    background-color: #6b0a7a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

button#wpforms-submit-61:active {
    transform: translateY(0) !important;
}