/* =====================================================================
   Visa Express order form redesign (2026-11-05)
   Loaded only on order pages (body.ve-order). Brand: navy #163253,
   indigo #282E5B, orange #F4A003.
   ===================================================================== */
body.ve-order {
    --ve-navy: #163253;
    --ve-indigo: #282E5B;
    --ve-orange: #F4A003;
    --ve-orange-dark: #D98B00;
    --ve-ink: #1F2A37;
    --ve-muted: #5B6573;
    --ve-line: #DCE2EA;
    --ve-soft: #F4F6FA;
    background: #F4F6FA;
}
body.ve-order #wrapper { background: #F4F6FA; padding-bottom: 48px; }

/* Main column */
body.ve-order #wrapper section > .container,
body.ve-order #wrapper > .container,
body.ve-order #wrapper .container.mt-3 {
    max-width: 920px !important;
    margin-left: auto !important; margin-right: auto !important;
    padding-left: 16px !important; padding-right: 16px !important;
}

/* Step card */
body.ve-order #wrapper form#cmaForm,
body.ve-order #wrapper form#logsignpassportinform,
body.ve-order #wrapper form.ve-card,
body.ve-order #wrapper form[action*="set"] {
    background: #fff;
    border: 1px solid var(--ve-line);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(22,50,83,.06);
    padding: 28px 32px 26px;
    margin: 6px 0 0;
    display: flow-root;
    font-family: Roboto, Arial, sans-serif;
    color: var(--ve-ink);
}
body.ve-order #wrapper form * { font-family: Roboto, Arial, sans-serif; letter-spacing: normal; }

/* Headings */
body.ve-order #wrapper :is(h1, h2, h3, h4):not(footer *):not(.site-footer *) {
    font-family: Roboto, Arial, sans-serif !important;
    color: var(--ve-navy) !important;
    font-weight: 700 !important;
    text-transform: none !important;
}
body.ve-order #wrapper form h2 { font-size: 20px !important; line-height: 1.3 !important; margin: 18px 0 10px !important; padding: 0 !important; border: 0 !important; }
body.ve-order #wrapper .page-title, body.ve-order #wrapper .in-page-title {
    font-size: 22px !important; line-height: 1.25 !important; margin: 0 0 14px !important;
    padding: 0 0 10px !important; border: 0 !important; border-bottom: 2px solid var(--ve-orange) !important;
    display: block;
}
body.ve-order #wrapper form h2.item-name { font-size: 17px !important; border-bottom: 0 !important; padding: 0 !important; margin: 14px 0 10px !important; }
body.ve-order #wrapper form hr { border-color: var(--ve-line); opacity: 1; }
body.ve-order #wrapper form p, body.ve-order #wrapper form .text-muted { color: var(--ve-muted) !important; font-size: 15px; }

/* Traveler bar on services step */
body.ve-order #wrapper form h4.title-traveler-name.title-traveler-name, body.ve-order #wrapper .title-traveler-name {
    background: var(--ve-navy) !important; color: #fff !important;
    border-radius: 8px; padding: 11px 14px !important; margin: 6px 0 12px !important;
    font-size: 17px !important; border: 0 !important;
}

/* Labels */
body.ve-order #wrapper form label {
    font-size: 14px !important; font-weight: 700 !important; color: var(--ve-ink) !important;
    margin-bottom: 6px; line-height: 1.35; text-transform: none !important;
}
body.ve-order #wrapper form label span, body.ve-order #wrapper form .text-danger { color: #C62828 !important; }
body.ve-order #wrapper form label span[id], body.ve-order #wrapper form label span:has(+ span[id]) { color: var(--ve-navy) !important; font-weight: 700; }

/* Fields */
body.ve-order #wrapper form input[type="text"],
body.ve-order #wrapper form input[type="email"],
body.ve-order #wrapper form input[type="tel"],
body.ve-order #wrapper form input[type="password"],
body.ve-order #wrapper form input[type="number"],
body.ve-order #wrapper form select,
body.ve-order #wrapper form textarea,
body.ve-order #wrapper form .form-control {
    min-height: 44px; height: auto;
    padding: 9px 12px !important;
    border: 1px solid #C6CFDB !important; border-radius: 8px !important;
    background-color: #fff !important; color: var(--ve-ink) !important;
    font-size: 15px !important; line-height: 1.35 !important;
    box-shadow: none !important;
}
body.ve-order #wrapper form textarea { min-height: 96px; }
body.ve-order #wrapper form input:focus, body.ve-order #wrapper form select:focus, body.ve-order #wrapper form textarea:focus {
    outline: none !important; border-color: var(--ve-navy) !important; box-shadow: 0 0 0 3px rgba(244,160,3,.30) !important;
}
body.ve-order #wrapper form input[readonly], body.ve-order #wrapper form input:disabled, body.ve-order #wrapper form select:disabled {
    background-color: var(--ve-soft) !important; color: var(--ve-muted) !important;
}
body.ve-order #wrapper form .d-flex:has(> .day_time) { gap: 8px; }
body.ve-order #wrapper form .d-flex > .day_time { flex: 1 1 0; min-width: 0; }
body.ve-order #wrapper form input[type="checkbox"], body.ve-order #wrapper form input[type="radio"] {
    width: 17px; height: 17px; min-height: 0; accent-color: var(--ve-navy); vertical-align: -3px;
}
body.ve-order #wrapper form .ui-datepicker-trigger { cursor: pointer; }
body.ve-order #wrapper form label.error, body.ve-order #wrapper form .error:not(input):not(select) {
    color: #C62828 !important; font-size: 13px !important; font-weight: 600 !important;
}
body.ve-order #wrapper form input.error, body.ve-order #wrapper form select.error { border-color: #C62828 !important; }

/* Service choices on travel step */
body.ve-order #wrapper form .service-item {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--ve-line); border-radius: 100px;
    padding: 7px 14px 7px 10px; margin: 0 8px 10px 0; background: #fff;
}
body.ve-order #wrapper form .service-item:has(input:checked) { border-color: var(--ve-navy); background: #EEF2F8; }
body.ve-order #wrapper form .service-item label { margin: 0 !important; font-weight: 600 !important; cursor: pointer; }
body.ve-order #wrapper form .service-item a { position: static !important; display: inline-flex; align-items: center; margin: 0 0 0 2px !important; transform: none !important; }
body.ve-order #wrapper form .service-item a img { width: 16px; height: 16px; position: static !important; margin: 0 !important; }

/* Fee table */
body.ve-order #wrapper .fee_table {
    border-collapse: separate !important; border-spacing: 0; width: 100%;
    border: 1px solid var(--ve-line) !important; border-radius: 10px; overflow: hidden; margin-bottom: 14px;
}
body.ve-order #wrapper .fee_table th, body.ve-order #wrapper .fee_table .fee_bg th, body.ve-order #wrapper .thead-dark th {
    background: var(--ve-navy) !important; color: #fff !important; border: 0 !important;
    font-size: 14px !important; font-weight: 700 !important; padding: 11px 12px !important;
}
body.ve-order #wrapper .fee_table td {
    border: 0 !important; border-top: 1px solid var(--ve-line) !important;
    padding: 10px 12px !important; font-size: 15px !important; color: var(--ve-ink) !important; background: #fff;
}
body.ve-order #wrapper .fee_table tbody tr:nth-child(even) td { background: var(--ve-soft); }

/* Fee summary rows */
body.ve-order #wrapper form .row:has(> .col-md-2) { align-items: center; }
body.ve-order #wrapper form .row:has(> .col-md-2) label { margin: 0 !important; }
body.ve-order #wrapper form label.sum_4 { font-weight: 600 !important; }
body.ve-order #wrapper form .col-md-2 input[readonly], body.ve-order #wrapper form .col-md-2 .form-control[readonly] {
    background: transparent !important; border-color: transparent !important; text-align: right !important; font-weight: 700; color: var(--ve-ink) !important;
}
body.ve-order #wrapper form .row:has(#final_pay) { border-top: 2px solid var(--ve-navy); margin-top: 8px; padding-top: 10px; }
body.ve-order #wrapper form label.final-pay { font-size: 18px !important; font-weight: 800 !important; color: var(--ve-navy) !important; }
body.ve-order #wrapper form #final_pay { font-size: 20px !important; font-weight: 800 !important; color: var(--ve-navy) !important; }

/* Buttons */
body.ve-order #wrapper form .btn,
body.ve-order #wrapper form input[type="submit"],
body.ve-order #wrapper form input[type="button"],
body.ve-order #wrapper form button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 11px 26px !important;
    border-radius: 8px !important; border: 2px solid var(--ve-navy) !important;
    background: var(--ve-navy) !important; color: #fff !important;
    font-family: Roboto, Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important;
    text-transform: none !important; box-shadow: none !important; cursor: pointer; line-height: 1.2;
}
body.ve-order #wrapper form .btn:hover, body.ve-order #wrapper form input[type="submit"]:hover, body.ve-order #wrapper form input[type="button"]:hover { background: #0F2540 !important; border-color: #0F2540 !important; }
body.ve-order #wrapper form .prevbutton, body.ve-order #wrapper form .btn.prevbutton {
    background: #fff !important; color: var(--ve-navy) !important; border-color: #A9B6C6 !important; text-decoration: none !important;
}
body.ve-order #wrapper form .prevbutton:hover { border-color: var(--ve-navy) !important; background: #fff !important; }
body.ve-order #wrapper form #add_another_traveller {
    background: #fff !important; color: var(--ve-navy) !important; border: 2px dashed var(--ve-orange) !important;
    min-height: 42px; padding: 9px 18px !important; text-decoration: none !important;
}
body.ve-order #wrapper form #add_another_traveller::before { content: "+"; font-size: 18px; line-height: 1; margin-right: 8px; color: var(--ve-orange-dark); }
body.ve-order #wrapper form #card-button, body.ve-order #wrapper form #btn-place-order, body.ve-order #wrapper form .btn-success {
    background: var(--ve-orange) !important; border-color: var(--ve-orange) !important; color: var(--ve-navy) !important; min-width: 180px;
}
body.ve-order #wrapper form #card-button:hover, body.ve-order #wrapper form #btn-place-order:hover { background: var(--ve-orange-dark) !important; border-color: var(--ve-orange-dark) !important; }
body.ve-order #wrapper form .btn-danger, body.ve-order #wrapper form .remove-item .btn {
    background: #fff !important; color: #C62828 !important; border: 1px solid #F0C4C4 !important; min-height: 36px; padding: 6px 14px !important; font-size: 14px !important;
}
body.ve-order #wrapper form .buton_continue {
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--ve-line);
}
body.ve-order #wrapper form .buton_continue .prevbutton { order: -1; margin-right: auto; }

/* Payment box */
body.ve-order #wrapper #payment-form .card-title, body.ve-order #wrapper .card-title { color: var(--ve-navy) !important; font-weight: 700; }
body.ve-order #wrapper #payment-status-container.is-failure #payment-error,
body.ve-order #wrapper #payment-status-container.is-failure #err-list { color: #C62828 !important; font-weight: 600; }

/* Step bar (built by order-2026.js from the old step image) */
body.ve-order .steps_div { margin: 22px 0 18px !important; text-align: initial; }
body.ve-order .steps_div img.ve-old-steps { display: none !important; }
body.ve-order .ve-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
body.ve-order .ve-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 2px; background: var(--ve-line); }
body.ve-order .ve-steps li { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 13px/1.25 Roboto, Arial, sans-serif; color: var(--ve-muted); text-align: center; }
body.ve-order .ve-steps .ve-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--ve-line); color: var(--ve-muted); font-size: 15px; font-weight: 700; }
body.ve-order .ve-steps li.is-done { color: var(--ve-ink); }
body.ve-order .ve-steps li.is-done .ve-dot { background: var(--ve-orange); border-color: var(--ve-orange); color: var(--ve-navy); }
body.ve-order .ve-steps li.is-current { color: var(--ve-navy); font-weight: 700; }
body.ve-order .ve-steps li.is-current .ve-dot { background: var(--ve-navy); border-color: var(--ve-navy); color: #fff; box-shadow: 0 0 0 4px rgba(22,50,83,.12); }

/* Mobile */
@media (max-width: 767px) {
    body.ve-order #wrapper form#cmaForm,
    body.ve-order #wrapper form#logsignpassportinform,
    body.ve-order #wrapper form.ve-card,
    body.ve-order #wrapper form[action*="set"] { padding: 20px 16px; border-radius: 12px; }
    body.ve-order #wrapper section > .container, body.ve-order #wrapper > .container, body.ve-order #wrapper .container.mt-3 { padding-left: 12px !important; padding-right: 12px !important; }
    body.ve-order #wrapper form .row:not(:has(> .col-md-2)) > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
    body.ve-order #wrapper form .row:has(> .col-md-2) { flex-wrap: wrap; align-items: center; }
    body.ve-order #wrapper form .row:has(> .col-md-2) > [class*="col-md-"]:not(.col-md-2) { flex: 1 1 calc(100% - 106px); max-width: calc(100% - 106px); text-align: left !important; }
    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-6,
    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-8 { flex: 0 0 100%; max-width: 100%; margin-bottom: 4px; }
    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-2 { flex: 0 0 96px; max-width: 96px; }
    body.ve-order #wrapper form .row:has(> .col-md-2) .text-md-right { text-align: left !important; }
    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-2:last-child, body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-2:last-child input { text-align: right !important; }
    body.ve-order #wrapper form .row:has(> .col-md-2) select { width: 100% !important; }
    body.ve-order #wrapper .table-responsive { overflow: visible; }
    body.ve-order #wrapper .fee_table, body.ve-order #wrapper .fee_table tbody { display: block; width: 100% !important; border: 0 !important; border-radius: 0; background: transparent; }
    body.ve-order #wrapper .fee_table thead { display: none; }
    body.ve-order #wrapper .fee_table tr { display: block; border: 1px solid var(--ve-line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
    body.ve-order #wrapper .fee_table td { display: flex; justify-content: space-between; gap: 12px; text-align: right !important; border: 0 !important; padding: 4px 0 !important; font-size: 14px !important; background: transparent !important; }
    body.ve-order #wrapper .fee_table td::before { font-weight: 700; color: var(--ve-muted); text-align: left; flex: 0 0 auto; }
    body.ve-order #wrapper .fee_table td:nth-child(1) { font-weight: 700; color: var(--ve-navy) !important; }
    body.ve-order #wrapper .fee_table td:nth-child(1)::before { content: "Applicant"; }
    body.ve-order #wrapper .fee_table td:nth-child(2)::before { content: "Product"; }
    body.ve-order #wrapper .fee_table td:nth-child(3)::before { content: "Government fee"; }
    body.ve-order #wrapper .fee_table td:nth-child(4)::before { content: "Service fee"; }

    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-2 { flex: 0 0 110px !important; max-width: 110px !important; }
    body.ve-order #wrapper form .row:has(> .col-md-2) > [class*="col-md-"]:not(.col-md-2) { flex: 1 1 calc(100% - 120px); max-width: calc(100% - 120px); }
    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-6,
    body.ve-order #wrapper form .row:has(> .col-md-2) > .col-md-8,
    body.ve-order #wrapper form .row:has(> .col-md-2 + .col-md-2) > :first-child { flex: 0 0 100% !important; max-width: 100% !important; }
    body.ve-order #wrapper form .row:has(> .col-md-2 + .col-md-2) > .col-md-2:not(:last-child) { flex: 1 1 0 !important; min-width: 0; max-width: none !important; text-align: left !important; }
    body.ve-order #wrapper form .col-md-2 input[readonly] { padding-left: 0 !important; padding-right: 0 !important; }
    body.ve-order #wrapper form .buton_continue .btn, body.ve-order #wrapper form .buton_continue input { flex: 1 1 100%; }
    body.ve-order #wrapper form .buton_continue .prevbutton { order: 2; margin-right: 0; }
    body.ve-order .ve-steps li { font-size: 0; gap: 0; }
    body.ve-order .ve-steps li.is-current { font-size: 12px; gap: 4px; white-space: nowrap; }
    body.ve-order .ve-steps::before { left: 8%; right: 8%; }
}