/* * Окно и подсказка «Условия тарифа» (assets/js/fare-rules.js). * Свои стили, без зависимости от Bootstrap: чип встраивается в карточку рейса, * окно и подсказка живут в и не наследуют её отступы. */ /* Чип с кодом тарифа в карточке рейса */ .fare-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cbd5e1; background: #f8fafc; color: #1f2937; border-radius: 999px; padding: 3px 10px; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; cursor: pointer; vertical-align: middle; transition: border-color .15s ease, background-color .15s ease; } .fare-chip:hover, .fare-chip:focus-visible { border-color: #0d6efd; background: #eff6ff; color: #0d6efd; } .fare-chip:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } .fare-chip .fare-chip-rbd { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 4px; background: #e2e8f0; color: #334155; font-size: 10px; font-weight: 700; } .fare-chip .fare-chip-info { font-weight: 400; color: #64748b; } /* * Цвет по классу бронирования. * J/C/B — бизнес, W/S — гибкий эконом, Y/K/H — обычный, G/Q/T — самый дешёвый. * Чем дешевле и жёстче тариф, тем бледнее — так три карточки одного рейса * различаются с одного взгляда, ещё до открытия условий. */ .fare-class-badge { font-size: 11px; padding: 4px 8px; font-weight: 600; letter-spacing: .01em; color: #fff; background: #6c757d; vertical-align: middle; } .fare-class-badge[data-tier="first"] { background: #6f42c1; } .fare-class-badge[data-tier="business"] { background: #198754; } .fare-class-badge[data-tier="flex"] { background: #0f766e; } .fare-class-badge[data-tier="standard"] { background: #0d6efd; } .fare-class-badge[data-tier="basic"] { background: #eef1f4; color: #5a6570; box-shadow: inset 0 0 0 1px #d5dbe1; } .fare-chip[data-tier="first"] { background: #f2ecfb; border-color: #c9b8e8; color: #59359a; } .fare-chip[data-tier="business"] { background: #e8f5ee; border-color: #a7d3bb; color: #146c43; } .fare-chip[data-tier="flex"] { background: #e6f6f4; border-color: #a7d8d2; color: #0f766e; } .fare-chip[data-tier="standard"] { background: #e9f1ff; border-color: #b3ccf5; color: #0a58ca; } .fare-chip[data-tier="basic"] { background: #f4f6f8; border-color: #d5dbe1; color: #5a6570; } .fare-chip[data-tier] .fare-chip-rbd { background: rgba(255, 255, 255, .72); color: inherit; } .fare-chip[data-tier] .fare-chip-info { color: inherit; opacity: .65; } .fare-chip[data-tier="first"]:hover, .fare-chip[data-tier="first"]:focus-visible { background: #e9dffa; border-color: #6f42c1; color: #4c2a86; } .fare-chip[data-tier="business"]:hover, .fare-chip[data-tier="business"]:focus-visible { background: #d9eee3; border-color: #198754; color: #0f5132; } .fare-chip[data-tier="flex"]:hover, .fare-chip[data-tier="flex"]:focus-visible { background: #d5efeb; border-color: #0f766e; color: #0b5b55; } .fare-chip[data-tier="standard"]:hover, .fare-chip[data-tier="standard"]:focus-visible { background: #dbe8ff; border-color: #0d6efd; color: #084298; } .fare-chip[data-tier="basic"]:hover, .fare-chip[data-tier="basic"]:focus-visible { background: #e9edf1; border-color: #94a0ac; color: #414b55; } /* Подсказка при наведении */ .fr-tip { position: absolute; z-index: 2000; max-width: 290px; background: #111827; color: #f9fafb; border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.55; box-shadow: 0 8px 24px rgba(15, 23, 42, .28); pointer-events: none; } .fr-tip i { color: #cbd5e1; font-style: normal; } .fr-tip b { color: #fff; } .fr-tip::after { content: ""; position: absolute; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #111827; bottom: -12px; } .fr-tip.fr-tip-below::after { bottom: auto; top: -12px; border-top-color: transparent; border-bottom-color: #111827; } /* Окно */ body.fr-open { overflow: hidden; } .fr-overlay { position: fixed; inset: 0; z-index: 2050; background: rgba(15, 23, 42, .55); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } .fr-overlay[hidden] { display: none; } .fr-dialog { position: relative; background: #fff; color: #111827; border-radius: 14px; width: 100%; max-width: 540px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); margin: auto; } .fr-close { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 26px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .fr-close:hover { color: #111827; } .fr-close:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } .fr-head { padding: 18px 22px 14px; border-bottom: 1px solid #eef2f6; } .fr-code { font-size: 19px; font-weight: 700; letter-spacing: .02em; } .fr-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; text-transform: capitalize; } .fr-body { padding: 6px 22px 20px; } .fr-headline { margin: 14px 0 0; padding: 9px 12px; background: #f1f5f9; border-radius: 8px; font-size: 13.5px; font-weight: 600; } .fr-sec { margin-top: 18px; } .fr-sec h4 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; margin: 0 0 7px; font-weight: 700; } .fr-sec p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #374151; } .fr-why { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: #374151; } .fr-why li { margin-bottom: 4px; } .fr-table { width: 100%; border-collapse: collapse; font-size: 13px; } .fr-table th { text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; font-weight: 700; padding: 0 0 5px; border-bottom: 1px solid #eef2f6; } .fr-table td { padding: 7px 0; border-bottom: 1px solid #f4f6f8; color: #374151; vertical-align: top; } .fr-table td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: #111827; } .fr-table tr:last-child td { border-bottom: none; } .fr-table tr.fr-blocked td:last-child { color: #b91c1c; } .fr-noshow { margin: 14px 0 0; font-size: 13px; color: #374151; } .fr-note { margin: 14px 0 0; font-size: 13px; color: #64748b; } .fr-error { color: #b45309; } .fr-notes { margin: 16px 0 0; padding: 12px 14px 12px 30px; background: #f8fafc; border-radius: 8px; font-size: 12px; line-height: 1.55; color: #64748b; } .fr-notes li { margin-bottom: 5px; } .fr-notes li:last-child { margin-bottom: 0; } @media (max-width: 480px) { .fr-dialog { max-width: 100%; } .fr-body { padding: 6px 16px 18px; } .fr-head { padding: 16px 16px 12px; } }