/**
 * Visa Eligibility form – shared base styles (lw classes)
 * Same structure as enquiry form.
 */
/* Prevent WordPress theme conflicts - use specific selectors */
#leadWizard.lw,
div#leadWizard.lw,
[id="leadWizard"].lw {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
}
#leadWizard.lw *,
div#leadWizard.lw * {
    box-sizing: border-box !important;
}
@media (max-width: 767px) {
    #leadWizard.lw, div#leadWizard.lw { max-width: 100% !important; width: 100% !important; padding: 0 15px !important; }
}
@media (max-width: 479px) {
    #leadWizard.lw, div#leadWizard.lw { max-width: 100% !important; width: 100% !important; padding: 0 10px !important; }
}
#leadWizard .lw__card, .lw__card {
    background: white !important; border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important; position: relative !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
}
.lw__progress { height: 4px; background: #e0e0e0; position: relative; }
.lw__bar { height: 100%; background: #E30B17; width: 0%; transition: width 0.3s ease; }
#leadWizard .lw__step, .lw__step {
    display: none !important; padding: 40px !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
}
#leadWizard .lw__step.is-active, .lw__step.is-active {
    display: block !important; animation: fadeIn 0.3s ease !important;
    width: 100% !important; max-width: 100% !important;
}
#leadWizard .lw__step:not(.is-active), .lw__step:not(.is-active) {
    display: none !important; visibility: hidden !important; opacity: 0 !important;
    pointer-events: none !important; overflow: hidden !important;
}
/* Intro screen (before step 1) – center aligned */
/* Ensure intro and steps never show together: only one can have is-active */
#leadWizard .lw__intro, .lw__intro {
    padding: 40px !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    text-align: center !important;
}
#leadWizard .lw__intro:not(.is-active), .lw__intro:not(.is-active) {
    display: none !important; visibility: hidden !important; opacity: 0 !important;
    pointer-events: none !important; overflow: hidden !important;
}
#leadWizard .lw__intro.is-active, .lw__intro.is-active {
    display: block !important; animation: fadeIn 0.3s ease !important;
}
.lw__intro .lw__title {
    margin-left: auto; margin-right: auto;
}
.lw__introSub {
    font-size: 18px; font-weight: 600; color: #333; margin: 0 0 16px 0;
}
.lw__introDesc {
    color: #555; line-height: 1.7; margin: 0 auto 20px auto; font-size: 15px;
    max-width: 540px;
}
.lw__introNotice {
    font-size: 14px; color: #666; font-style: italic; margin: 0 0 24px 0;
}
.lw__introActions {
    margin-top: 24px;
    display: flex; justify-content: center;
}
.lw__introActions .lw__btn { flex: 0 0 auto; min-width: 160px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}
/* Validation error – red border and shake */
#leadWizard .lw__input--error,
#leadWizard .lw__select--error,
#leadWizard .lw__textarea--error,
.lw__input--error, .lw__select--error, .lw__textarea--error {
    border-color: #E30B17 !important;
    animation: shake 0.5s ease;
}
#leadWizard .iti.lw__input--error .iti__flag-container,
#leadWizard .iti.lw__input--error input,
.iti.lw__input--error .iti__flag-container,
.iti.lw__input--error input {
    border-color: #E30B17 !important;
}
.lw__radio--error {
    animation: shake 0.5s ease;
}
.lw__radio--error .lw__radioRow {
    border-color: #E30B17 !important;
}
.lw__title { font-size: 24px; font-weight: 700; color: #000; margin-bottom: 12px; }
.lw__sub { color: #777; margin-bottom: 24px; line-height: 1.6; }
.lw__label { display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px; }
#leadWizard .lw__input, #leadWizard .lw__select, #leadWizard .lw__textarea,
.lw__input, .lw__select, .lw__textarea {
    width: 100% !important; max-width: 100% !important;
    padding: 12px 16px !important; border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important; font-size: 16px !important;
    transition: border-color 0.3s !important; font-family: inherit !important;
    box-sizing: border-box !important;
}
.lw__input:focus, .lw__select:focus, .lw__textarea:focus { outline: none; border-color: #E30B17; }
.lw__textarea { min-height: 100px; resize: vertical; }
#leadWizard .lw__grid, .lw__grid {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 16px !important; width: 100% !important; box-sizing: border-box !important;
}
.lw__actions { display: flex; gap: 12px; margin-top: 24px; justify-content: space-between; }
.lw__btn {
    padding: 12px 24px; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: all 0.3s; font-family: inherit;
}
.lw__btn--primary { background: #E30B17; color: white; flex: 1; }
.lw__btn--primary:hover { background: #C00A14; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(227, 11, 23, 0.4); }
.lw__btn:not(.lw__btn--primary) { background: #f5f5f5; color: #666; }
.lw__btn:not(.lw__btn--primary):hover { background: #e0e0e0; }
.lw__status { margin-top: 16px; padding: 12px; border-radius: 8px; text-align: center; font-size: 14px; }
.lw__status.error { background: #FFF5F5; color: #E30B17; border: 1px solid #E30B17; }
.lw__status.success { background: #F0F9F0; color: #2D7A2D; border: 1px solid #2D7A2D; }
/* Radio buttons – match enquiry form card style */
.lw__radio { display: flex; flex-direction: column; gap: 12px; }
.lw__radioRow {
    display: flex; align-items: flex-start; padding: 14px 16px;
    border: 2px solid #e0e0e0; border-radius: 10px;
    cursor: pointer; transition: all 0.2s;
    accent-color: #E30B17;
}
.lw__radioRow:hover { border-color: #E30B17; background: #F5F5F5; }
.lw__radioRow input[type="radio"] {
    margin-right: 12px; margin-top: 2px; flex-shrink: 0;
    cursor: pointer;
}
.lw__radioRow input[type="radio"]:checked + span { font-weight: 600; color: #E30B17; }
.lw__radioRow:has(input[type="radio"]:checked) {
    border-color: #E30B17 !important;
    background: #fff5f5 !important;
}
.lw__radioRow span {
    font-size: 15px; color: #1a1a1a; line-height: 1.4;
}
/* intl-tel-input – flag container and input with 8px gap */
/* Override library's position:absolute on flag container so flex layout works */
#leadWizard .iti,
#leadWizard .lw__phone-wrap .iti,
.iti {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important; /* 8px gap between flag dropdown and phone input */
}
#leadWizard .iti__tel-input,
#leadWizard .iti input[type="tel"],
.iti__tel-input,
.iti input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    transition: border-color 0.3s !important;
    font-family: inherit !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
#leadWizard .iti__flag-container,
.iti__flag-container {
    position: static !important; /* Override library's absolute – required for flex gap */
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #f9f9f9 !important;
    padding: 0 10px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.3s !important;
}
#leadWizard .iti--focus .iti__flag-container,
.iti--focus .iti__flag-container {
    border-color: #E30B17 !important;
}
#leadWizard .iti__tel-input:focus,
#leadWizard .iti input:focus,
.iti__tel-input:focus,
.iti input:focus {
    outline: none;
    border-color: #E30B17 !important;
}
@media (max-width: 767px) {
    .lw__step, .lw__intro { padding: 30px 24px !important; }
    .lw__btn { min-height: 44px !important; width: 100% !important; }
}
