/* NBT Railway Booking v7 — front-end form */
.nbt-rb-form-wrap, .nbt-rb-success, .nbt-rb-notice { width: 85%; max-width: 1000px; margin: 0 auto; box-sizing: border-box; }

.nbt-rb-datelabel { display: block; font-size: 14px; font-weight: 700; color: #344054; margin-bottom: 8px; }

/* Mobile stepper is hidden on desktop; desktop pills shown */
.nbt-rb-stepper { display: none; }

@media (max-width: 782px) {
    /* Fill the screen: the form's own padding is the only gap besides the theme's. */
    .nbt-rb-form-wrap, .nbt-rb-success, .nbt-rb-notice {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .nbt-rb-form { padding: 14px 12px; border-radius: 10px; }
    .nbt-rb-form h3 { font-size: 17px; margin-bottom: 14px; }
    .nbt-rb-subhead { margin: 16px 0 8px; }
    /* Swap step UI: hide desktop pills, show the numbered-circle stepper. */
    .nbt-rb-steps { display: none; }
    .nbt-rb-stepper { display: block; }
    .nbt-rb-grid { grid-template-columns: 1fr; }
    .nbt-rb-actions { flex-direction: column-reverse; gap: 10px; }
    .nbt-rb-actions button { width: 100%; margin: 0; }
    .nbt-rb-next, .nbt-rb-submit { margin-left: 0; }
    .nbt-rb-optcards { grid-template-columns: 1fr; }
    .nbt-rb-price-card, .nbt-rb-terms, .nbt-rb-qr { padding: 14px; }
    .nbt-rb-terms-body { max-height: 150px; }
}

/* ---- Mobile numbered-circle stepper (image reference) ---- */
.nbt-rb-stepper { position: relative; margin: 4px 0 22px; padding: 0 6px; }
.nbt-rb-stepper-track { position: absolute; left: 26px; right: 26px; top: 18px; height: 3px; background: #e5e7eb; border-radius: 3px; }
.nbt-rb-stepper-fill { position: absolute; left: 0; top: 0; height: 100%; background: #e08a3c; border-radius: 3px; transition: width .3s ease; }
.nbt-rb-stepper-dots { position: relative; display: flex; justify-content: space-between; }
.nbt-rb-dot { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid #e5e7eb; color: #98a2b3; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.nbt-rb-dot.is-active { background: #e08a3c; border-color: #e08a3c; color: #fff; box-shadow: 0 0 0 4px rgba(224,138,60,.15); }
.nbt-rb-dot.is-done { background: #e08a3c; border-color: #e08a3c; color: #fff; }


.nbt-rb-form {
    background: #fff; border: 1px solid #e3e6ea; border-radius: 14px;
    padding: 26px; box-shadow: 0 2px 12px rgba(16,24,40,.05);
}
.nbt-rb-form h3 { margin: 0 0 18px; font-size: 19px; }
.nbt-rb-subhead { margin: 22px 0 10px; font-size: 15px; color: #344054; border-top: 1px solid #f0f2f5; padding-top: 16px; }

.nbt-rb-steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.nbt-rb-step {
    flex: 1; min-width: 110px; text-align: center; font-size: 13px; font-weight: 600;
    color: #98a2b3; padding: 9px 6px; border-radius: 8px; background: #f2f4f7; transition: .2s;
}
.nbt-rb-step.is-active { color: #fff; background: #0a6bcb; }
.nbt-rb-step.is-done { color: #067647; background: #e7f6ec; }

.nbt-rb-panel { display: none; }
.nbt-rb-panel.is-active { display: block; animation: nbtfade .2s ease; }
@keyframes nbtfade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

.nbt-rb-form label { display: block; font-size: 14px; font-weight: 600; color: #344054; margin-bottom: 14px; }
.nbt-rb-form input[type=text], .nbt-rb-form input[type=email], .nbt-rb-form input[type=date],
.nbt-rb-form input[type=number], .nbt-rb-form input[type=file], .nbt-rb-form input[type=search],
.nbt-rb-form input[type=tel],
.nbt-rb-form select, .nbt-rb-form textarea {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
    font-weight: 400; border: 1px solid #d0d5dd; border-radius: 8px; box-sizing: border-box; background: #fff;
}
.nbt-rb-form input:focus, .nbt-rb-form select:focus, .nbt-rb-form textarea:focus {
    outline: none; border-color: #0a6bcb; box-shadow: 0 0 0 3px rgba(10,107,203,.12);
}

.nbt-rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .nbt-rb-grid { grid-template-columns: 1fr; } }

/* Date picker */
.nbt-rb-datewrap { margin-bottom: 16px; }

/* ---- Calendar: month header + day-card strip (same on desktop & mobile) ---- */
.nbt-rb-cal { border: 1px solid #e3e6ea; border-radius: 12px; padding: 12px; background: #fff; }
.nbt-rb-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.nbt-rb-cal-month { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 8px 14px; font-size: 15px; font-weight: 700; color: #101828; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nbt-rb-cal-caret { color: #98a2b3; font-size: 12px; }
.nbt-rb-cal-nav { display: flex; gap: 8px; }
.nbt-rb-cal-prev, .nbt-rb-cal-next { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #e3e6ea; background: #fff; font-size: 20px; line-height: 1; color: #344054; cursor: pointer; }
.nbt-rb-cal-prev:hover, .nbt-rb-cal-next:hover { border-color: #0a6bcb; color: #0a6bcb; }
.nbt-rb-cal-prev:disabled, .nbt-rb-cal-next:disabled { opacity: .4; cursor: not-allowed; }
.nbt-rb-cal-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.nbt-rb-daycard { border: 1px solid #e3e6ea; border-radius: 12px; background: #fff; padding: 12px 2px; text-align: center; cursor: pointer; transition: .15s; }
.nbt-rb-daycard .dow { display: block; font-size: 13px; color: #667085; margin-bottom: 4px; }
.nbt-rb-daycard .dnum { display: block; font-size: 22px; font-weight: 800; color: #101828; }
.nbt-rb-daycard:hover { border-color: #0a6bcb; }
.nbt-rb-daycard.is-selected { background: #0f172a; border-color: #0f172a; }
.nbt-rb-daycard.is-selected .dow { color: #cbd5e1; }
.nbt-rb-daycard.is-selected .dnum { color: #fff; }
.nbt-rb-daycard.is-disabled { background: #f7f8fa; border-color: #eef0f2; cursor: not-allowed; }
.nbt-rb-daycard.is-disabled .dnum { color: #cbd0d6; }
.nbt-rb-daycard.is-disabled .dow { color: #cbd0d6; }
.nbt-rb-cal-jump { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 12px; }
@media (max-width: 600px) {
    .nbt-rb-cal-days { grid-template-columns: repeat(4, 1fr); }
    .nbt-rb-daycard { padding: 10px 2px; }
    .nbt-rb-daycard .dnum { font-size: 19px; }
}

.nbt-rb-slot { margin: 10px 0 0; font-size: 14px; font-weight: 600; min-height: 20px; }
.nbt-rb-slot.ok { color: #067647; }
.nbt-rb-slot.bad { color: #b42318; }

/* Large clickable option cards (AC / time preference) */
.nbt-rb-optset { border: 0; padding: 0; margin: 6px 0 18px; }
.nbt-rb-optset legend { font-weight: 700; font-size: 14px; color: #344054; margin-bottom: 10px; padding: 0; }
.nbt-rb-optcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .nbt-rb-optcards { grid-template-columns: 1fr; } }
.nbt-rb-optcard { position: relative; margin: 0 !important; cursor: pointer; }
.nbt-rb-optcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nbt-rb-optcard-box { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 14px 18px; border: 2px solid #d0d5dd; border-radius: 12px; background: #fff; transition: .15s; text-align: center; }
.nbt-rb-optcard-title { font-size: 16px; font-weight: 700; color: #344054; }
.nbt-rb-optcard:hover .nbt-rb-optcard-box { border-color: #7fb0e6; }
.nbt-rb-optcard input:checked + .nbt-rb-optcard-box { border-color: #0a6bcb; background: #eef4ff; box-shadow: 0 0 0 3px rgba(10,107,203,.12); }
.nbt-rb-optcard input:checked + .nbt-rb-optcard-box .nbt-rb-optcard-title { color: #0a4d92; }

/* T&C acceptance checkbox (scoped so it never inherits the success-circle style) */
.nbt-rb-terms .nbt-rb-check { display: flex !important; align-items: center; gap: 10px; margin: 12px 0 0 !important; font-weight: 600 !important; width: auto !important; height: auto !important; line-height: normal !important; background: none !important; border-radius: 0 !important; color: #344054 !important; font-size: 14px !important; }
.nbt-rb-terms .nbt-rb-check input { width: 20px !important; height: 20px !important; min-width: 20px; margin: 0 !important; flex: 0 0 auto; }
.nbt-rb-terms .nbt-rb-check span { flex: 1; }

.nbt-rb-cond { display: none; }
.nbt-rb-cond.is-visible { display: block; }

.nbt-rb-payopts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
@media (max-width: 600px) { .nbt-rb-payopts { grid-template-columns: 1fr; } }

.nbt-rb-price-card { border: 1px solid #e3e6ea; border-radius: 12px; padding: 16px 18px; background: #f9fafb; margin: 8px 0 18px; }
.nbt-rb-price-card h4 { margin: 0 0 10px; font-size: 15px; }
.nbt-rb-price-line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: #344054; }
.nbt-rb-price-total { display: flex; justify-content: space-between; border-top: 2px solid #e3e6ea; margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 17px; color: #101828; }

.nbt-rb-qr { text-align: center; border: 1px solid #e3e6ea; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.nbt-rb-qr h4 { margin: 0 0 12px; font-size: 15px; }
.nbt-rb-qr img { max-width: 200px; height: auto; border: 1px solid #eaecf0; border-radius: 8px; }
.nbt-rb-upi { font-size: 13px; color: #667085; margin: 8px 0 0; }
.nbt-rb-qr-steps { text-align: left; max-width: 320px; margin: 12px auto 0; font-size: 13px; color: #475467; padding-left: 20px; }

.nbt-rb-terms { border: 1px solid #e3e6ea; border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.nbt-rb-terms h4 { margin: 0 0 10px; font-size: 15px; }
.nbt-rb-terms-body { max-height: 180px; overflow-y: auto; font-size: 13px; color: #475467; line-height: 1.6; white-space: pre-line; background: #fafbfc; border: 1px solid #f0f2f5; border-radius: 8px; padding: 10px 12px; }

.nbt-rb-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.nbt-rb-actions button { border: 0; border-radius: 8px; padding: 11px 24px; font-size: 15px; font-weight: 600; cursor: pointer; }
.nbt-rb-next, .nbt-rb-submit { background: #0a6bcb; color: #fff; margin-left: auto; }
.nbt-rb-next:hover, .nbt-rb-submit:hover { background: #0857a6; }
.nbt-rb-back { background: #eef1f4; color: #475467; }

.nbt-rb-hint { font-size: 13px; color: #667085; }

.nbt-rb-notice { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; background: #eef4ff; border: 1px solid #cfe0ff; color: #0a3c78; }
.nbt-rb-notice ul { margin: 8px 0 0 18px; }
.nbt-rb-error { background: #fef3f2; border-color: #fecdca; color: #912018; }
.nbt-rb-warn { background: #fffaeb; border-color: #fedf89; color: #93370d; }

.nbt-rb-success { text-align: center; padding: 34px 24px; background: #fff; border: 1px solid #e3e6ea; border-radius: 14px; }
.nbt-rb-success .nbt-rb-check { width: 56px; height: 56px; line-height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #e7f6ec; color: #17994b; font-size: 30px; font-weight: 700; display: block; }
.nbt-rb-summary { margin: 18px auto 0; border-collapse: collapse; text-align: left; min-width: 320px; }
.nbt-rb-summary th { padding: 8px 14px; color: #667085; font-weight: 600; }
.nbt-rb-summary td { padding: 8px 14px; font-weight: 600; color: #101828; }

.nbt-rb-btn { display: inline-block; background: #0a6bcb; color: #fff !important; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; }
.nbt-rb-btn:hover { background: #0857a6; }
.nbt-rb-btn-danger { background: #d92d20; }
.nbt-rb-btn-danger:hover { background: #b42318; }

.nbt-rb-credit { text-align: center; margin: 18px auto 0; font-size: 12px; color: #98a2b3; }
.nbt-rb-credit a { color: #667085; text-decoration: none; font-weight: 600; }
.nbt-rb-credit a:hover { text-decoration: underline; }

/* Success + summary tables must never overflow the card on mobile */
@media (max-width: 782px) {
    .nbt-rb-summary { width: 100%; min-width: 0; display: block; }
    .nbt-rb-summary tbody, .nbt-rb-summary tr { display: block; width: 100%; }
    .nbt-rb-summary tr { border-bottom: 1px solid #f0f2f5; padding: 6px 0; }
    .nbt-rb-summary th, .nbt-rb-summary td { display: block; width: auto; padding: 2px 0; }
    .nbt-rb-summary th { color: #667085; font-size: 12px; }
    .nbt-rb-summary td { color: #101828; font-weight: 700; word-break: break-word; }
    .nbt-rb-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; }
}

/* Required-field asterisk + full-width label */
.nbt-req { color: #d92d20; font-weight: 700; }
.nbt-rb-full { grid-column: 1 / -1; }
.nbt-rb-fieldgroup { border-top: 1px solid #f0f2f5; margin-top: 8px; padding-top: 4px; }