.payment-section { margin: 3rem 0; padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg,#f7fbfd,#fff); box-shadow: var(--shadow); }
.payment-section h2 { margin: .35rem 0 0; }
.payment-intro { max-width: 780px; margin: .75rem 0 1.5rem; color: var(--muted); }
.payment-grid { display: grid; gap: 1rem; }
.payment-card { display: flex; align-items: flex-start; gap: .9rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.payment-card h3,.payment-card p { margin: 0; }
.payment-card p { margin-top: .35rem; color: var(--muted); }
.payment-card a { display: inline-block; margin-top: .55rem; font-size: .84rem; font-weight: 750; }
.payment-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; background: #e6f2f7; color: var(--primary); }
.payment-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.payment-card.is-caution { border-color: #f1d18a; background: #fffbef; }
.payment-card.is-caution .payment-icon { background: #fff0c7; color: #9a5b00; }
.payment-note { margin-top: 1rem; padding: 1rem 1.15rem; border-left: 4px solid var(--accent); border-radius: 8px; background: #fff7df; }
.payment-note p { margin: .2rem 0 0; color: #6f4b12; font-size: .88rem; }
@media (min-width:800px) { .payment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .payment-section { padding: 1.2rem; } .payment-card { display: grid; } }
.fare-calculator { margin: 2rem 0; padding: clamp(1.25rem,3vw,2rem); }
.fare-calculator h2 { margin: .35rem 0 .45rem; }
.fare-calculator>p { max-width: 760px; margin: 0 0 1.25rem; color: var(--muted); }
.fare-calculator-form { display: grid; gap: 1rem; align-items: end; }
.fare-calculator-form label { margin: 0; }
.fare-calculator-form button { min-height: 46px; }
.fare-payment-link { display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; margin: 2rem 0; padding: 1.25rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: #f2f8fb; }
.fare-payment-link h2,.fare-payment-link p { margin: 0; }
.fare-payment-link p { margin-top: .25rem; color: var(--muted); }
.fare-payment-link .button { flex: 0 0 auto; }
@media (min-width:800px) { .fare-calculator-form { grid-template-columns: repeat(2,minmax(0,1fr)) auto; } }
@media (max-width:620px) { .fare-payment-link { align-items: flex-start; flex-direction: column; } }