/* * FerryCounter — Booking Pages Design System * ============================================ * Drop into: public/front/css/fc-booking.css * Include in layouts/app.blade.php * * Covers all booking flow pages: * welcome · results · select-class · seat-selection * passenger-info · payment · confirmation */ /* ── Design Tokens ───────────────────────────────────────────────── */ :root { --fc-primary: #e84c2b; --fc-primary-dark: #c73e20; --fc-primary-light: #fff5f3; --fc-primary-muted: rgba(232, 76, 43, .09); --fc-navy: #1e2d4a; --fc-navy-mid: #2d4168; --fc-navy-light: #eef2f8; --fc-bg: #f1f3f5; --fc-surface: #ffffff; --fc-border: #e5e7eb; --fc-border-dark: #d1d5db; --fc-text-primary: #111827; --fc-text-body: #374151; --fc-text-muted: #6b7280; --fc-text-faint: #9ca3af; --fc-success: #059669; --fc-success-bg: #d1fae5; --fc-warning: #d97706; --fc-warning-bg: #fef3c7; --fc-error: #dc2626; --fc-error-bg: #fee2e2; --fc-info: #1d4ed8; --fc-info-bg: #dbeafe; --fc-radius-sm: 6px; --fc-radius: 10px; --fc-radius-md: 12px; --fc-radius-lg: 16px; --fc-shadow-sm: 0 1px 4px rgba(0, 0, 0, .06); --fc-shadow: 0 2px 16px rgba(0, 0, 0, .07); --fc-shadow-md: 0 4px 24px rgba(0, 0, 0, .10); --fc-shadow-lg: 0 6px 40px rgba(0, 0, 0, .12); --fc-input-h: 46px; --fc-btn-h: 46px; --fc-max-w: 1200px; --fc-gutter: 20px; } /* ── Base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } .fc-page { background: var(--fc-bg); min-height: calc(100vh - 60px); padding-bottom: 48px; } .fc-container { max-width: var(--fc-max-w); margin: 0 auto; padding: 0 var(--fc-gutter); } /* ── Progress Stepper ────────────────────────────────────────────── */ .fc-steps { background: var(--fc-surface); border-bottom: 1px solid var(--fc-border); padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fc-steps::-webkit-scrollbar { display: none; } .fc-steps-inner { max-width: var(--fc-max-w); margin: 0 auto; padding: 0 var(--fc-gutter); display: flex; align-items: stretch; gap: 0; min-width: max-content; } .fc-step { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: .78rem; font-weight: 600; color: var(--fc-text-faint); white-space: nowrap; border-bottom: 3px solid transparent; transition: all .15s; cursor: default; position: relative; text-decoration: none; } .fc-step-num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--fc-border-dark); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; background: var(--fc-surface); flex-shrink: 0; transition: all .15s; } .fc-step.done { color: var(--fc-text-muted); } .fc-step.done .fc-step-num { background: var(--fc-success-bg); border-color: var(--fc-success); color: var(--fc-success); } .fc-step.active { color: var(--fc-primary); border-bottom-color: var(--fc-primary); } .fc-step.active .fc-step-num { background: var(--fc-primary); border-color: var(--fc-primary); color: #fff; } /* Chevron between steps */ .fc-step+.fc-step::before { content: '›'; position: absolute; left: -2px; color: var(--fc-border-dark); font-size: 1rem; font-weight: 400; } /* ── Context Strip (source → dest · date · pax) ─────────────────── */ .fc-context-strip { background: var(--fc-surface); border-bottom: 1px solid var(--fc-border); padding: 11px 0; position: sticky; top: 0; z-index: 40; box-shadow: var(--fc-shadow-sm); } .fc-context-inner { max-width: var(--fc-max-w); margin: 0 auto; padding: 0 var(--fc-gutter); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .fc-context-back { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--fc-surface); border: 1.5px solid var(--fc-border); border-radius: var(--fc-radius); font-size: .8rem; font-weight: 600; color: var(--fc-text-body); text-decoration: none; white-space: nowrap; transition: all .15s; flex-shrink: 0; } .fc-context-back:hover { border-color: var(--fc-primary); color: var(--fc-primary); text-decoration: none; } .fc-context-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--fc-text-body); } .fc-context-meta strong { font-weight: 700; } .fc-context-meta i { font-size: .75rem; } /* ── Two-col booking layout ──────────────────────────────────────── */ .fc-booking-layout { max-width: var(--fc-max-w); margin: 24px auto 0; padding: 0 var(--fc-gutter); display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; } /* ── Card (shared surface) ───────────────────────────────────────── */ .fc-card { background: var(--fc-surface); border-radius: var(--fc-radius-md); box-shadow: var(--fc-shadow); overflow: hidden; } .fc-card-header { background: var(--fc-navy); padding: 10px 20px; display: flex; align-items: center; gap: 12px; height: 60px; box-sizing: border-box; } .fc-card-header-icon { width: 38px; height: 38px; background: rgba(255, 255, 255, .12); border-radius: var(--fc-radius); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .fc-card-header-info { flex: 1; min-width: 0; } .fc-card-header-title { font-size: .95rem; font-weight: 700; color: #fff; margin: 0; } .fc-card-header-sub { font-size: .76rem; color: rgba(255, 255, 255, .6); margin: 2px 0 0; } .fc-card-badge { padding: 3px 10px; border-radius: var(--fc-radius-sm); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; background: rgba(232, 76, 43, .25); color: #ff9f8a; border: 1px solid rgba(232, 76, 43, .4); } .fc-card-body { padding: 20px; } /* ── Booking Summary sidebar ─────────────────────────────────────── */ .fc-summary { background: var(--fc-surface); border-radius: 14px; box-shadow: var(--fc-shadow); overflow: hidden; position: sticky; top: 70px; } .fc-summary-header { background: var(--fc-navy); padding: 10px 18px; display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; } .fc-summary-header h3 { color: #fff; font-size: .9rem; font-weight: 700; margin: 0; } .fc-summary-body { padding: 16px 18px; } .fc-summary-route { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .fc-summary-route-dots { display: flex; flex-direction: column; align-items: center; padding-top: 3px; } .fc-summary-route-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .fc-summary-route-dot.origin { background: var(--fc-navy); } .fc-summary-route-dot.dest { background: var(--fc-primary); } .fc-summary-route-line { width: 1.5px; height: 22px; background: var(--fc-border); } .fc-summary-place { font-size: .85rem; font-weight: 700; color: var(--fc-text-primary); line-height: 1.1; } .fc-summary-place+.fc-summary-place { margin-top: 18px; } .fc-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 16px; } .fc-summary-item label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-faint); display: block; margin-bottom: 2px; } .fc-summary-item span { font-size: .83rem; font-weight: 600; color: var(--fc-text-primary); } .fc-class-tag { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: .75rem; font-weight: 700; background: var(--fc-info-bg); color: var(--fc-info); } .fc-fare-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .82rem; } .fc-fare-row .lbl { color: var(--fc-text-muted); } .fc-fare-row .val { font-weight: 600; color: var(--fc-text-primary); } .fc-fare-divider { border: none; border-top: 1px solid var(--fc-border); margin: 8px 0; } .fc-fare-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 0; } .fc-fare-total .lbl { font-size: .9rem; font-weight: 700; color: var(--fc-text-primary); } .fc-fare-total .val { font-size: 1.1rem; font-weight: 800; color: var(--fc-primary); } /* ── Buttons ─────────────────────────────────────────────────────── */ .fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--fc-btn-h); padding: 0 24px; border: none; border-radius: var(--fc-radius); font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; } .fc-btn-primary { background: var(--fc-primary); color: #fff; } .fc-btn-primary:hover:not(:disabled) { background: var(--fc-primary-dark); color: #fff; text-decoration: none; } .fc-btn-primary:disabled { opacity: .45; cursor: not-allowed; } .fc-btn-secondary { background: var(--fc-surface); color: var(--fc-text-body); border: 1.5px solid var(--fc-border); } .fc-btn-secondary:hover { border-color: var(--fc-primary); color: var(--fc-primary); text-decoration: none; } .fc-btn-full { width: 100%; padding: 0; } .fc-proceed-hint { text-align: center; font-size: .72rem; color: var(--fc-text-faint); margin-top: 6px; } /* ── Form elements ───────────────────────────────────────────────── */ .fc-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-faint); display: block; margin-bottom: 5px; } .fc-input, .fc-select { height: var(--fc-input-h); padding: 0 12px; border: 1.5px solid var(--fc-border); border-radius: var(--fc-radius); font-size: .88rem; color: var(--fc-text-primary); background: var(--fc-surface); width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; } .fc-input:focus, .fc-select:focus { border-color: var(--fc-primary); box-shadow: 0 0 0 3px var(--fc-primary-muted); } .fc-input.error, .fc-select.error { border-color: var(--fc-error); } .fc-field-group { display: flex; flex-direction: column; gap: 5px; } .fc-error-msg { font-size: .72rem; color: var(--fc-error); margin-top: 2px; } /* ── Section headings inside cards ───────────────────────────────── */ .fc-section-title { font-size: .82rem; font-weight: 700; color: var(--fc-text-primary); display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--fc-border); } .fc-section-title i { color: var(--fc-primary); font-size: .9rem; } /* Passenger block */ .fc-pax-block { border: 1.5px solid var(--fc-border); border-radius: var(--fc-radius-md); overflow: hidden; margin-bottom: 14px; } .fc-pax-block:last-child { margin-bottom: 0; } .fc-pax-block-header { background: var(--fc-navy-light); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 700; color: var(--fc-navy); } .fc-pax-block-body { padding: 16px; } /* Grid helpers */ .fc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .fc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* ── Alerts ──────────────────────────────────────────────────────── */ .fc-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--fc-radius); font-size: .82rem; margin-bottom: 16px; } .fc-alert i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } .fc-alert-info { background: var(--fc-info-bg); color: #1e40af; border: 1px solid #bfdbfe; } .fc-alert-success { background: var(--fc-success-bg); color: #065f46; border: 1px solid #6ee7b7; } .fc-alert-warning { background: var(--fc-warning-bg); color: #92400e; border: 1px solid #fcd34d; } .fc-alert-error { background: var(--fc-error-bg); color: #991b1b; border: 1px solid #fca5a5; } /* ── Wallet / Payment block ──────────────────────────────────────── */ .fc-wallet-card { border: 2px solid var(--fc-border); border-radius: var(--fc-radius-md); padding: 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; transition: border-color .15s; } .fc-wallet-card.sufficient { border-color: var(--fc-success); background: #f0fdf4; } .fc-wallet-card.insufficient { border-color: var(--fc-error); background: #fff8f8; } .fc-wallet-card.loading { border-color: var(--fc-border); background: var(--fc-bg); } .fc-wallet-icon { width: 44px; height: 44px; border-radius: var(--fc-radius); background: var(--fc-navy-light); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .fc-wallet-info { flex: 1; } .fc-wallet-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-faint); margin-bottom: 3px; } .fc-wallet-amount { font-size: 1.2rem; font-weight: 800; color: var(--fc-text-primary); } .fc-wallet-status { font-size: .75rem; font-weight: 600; margin-top: 3px; } .fc-wallet-card.sufficient .fc-wallet-status { color: var(--fc-success); } .fc-wallet-card.insufficient .fc-wallet-status { color: var(--fc-error); } /* Fare breakdown table */ .fc-fare-table { width: 100%; border-collapse: collapse; font-size: .83rem; } .fc-fare-table tr td { padding: 7px 0; color: var(--fc-text-body); } .fc-fare-table tr td:last-child { text-align: right; font-weight: 600; color: var(--fc-text-primary); } .fc-fare-table tr.divider td { border-top: 1px solid var(--fc-border); padding-top: 10px; } .fc-fare-table tr.total td { font-size: .95rem; font-weight: 800; color: var(--fc-primary); } .fc-fare-table tr.total td:first-child { color: var(--fc-text-primary); } /* ── Confirmation ticket ─────────────────────────────────────────── */ .fc-ticket { background: var(--fc-surface); border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow-md); overflow: hidden; max-width: 680px; margin: 0 auto; } .fc-ticket-header { background: var(--fc-navy); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; } .fc-ticket-route { display: flex; align-items: center; gap: 16px; } .fc-ticket-iata { font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: .02em; line-height: 1; } .fc-ticket-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, .5); font-size: .7rem; } .fc-ticket-arrow-line { width: 60px; height: 1px; background: rgba(255, 255, 255, .3); position: relative; } .fc-ticket-arrow-line::after { content: ''; position: absolute; right: 0; top: -3px; border-left: 6px solid rgba(255, 255, 255, .3); border-top: 3px solid transparent; border-bottom: 3px solid transparent; } .fc-ticket-body { padding: 20px 24px; } .fc-ticket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; } .fc-ticket-field label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-faint); display: block; margin-bottom: 3px; } .fc-ticket-field span { font-size: .88rem; font-weight: 700; color: var(--fc-text-primary); } .fc-ticket-divider { border: none; border-top: 2px dashed var(--fc-border); margin: 16px 0; } .fc-ticket-pnr { display: flex; align-items: center; justify-content: space-between; background: var(--fc-navy-light); padding: 12px 16px; border-radius: var(--fc-radius); margin-bottom: 16px; } .fc-ticket-pnr-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-faint); } .fc-ticket-pnr-value { font-size: 1.1rem; font-weight: 900; color: var(--fc-navy); letter-spacing: .06em; } .fc-ticket-confirmed { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; background: var(--fc-success-bg); color: var(--fc-success); font-size: .76rem; font-weight: 700; } /* ── Mobile responsiveness ───────────────────────────────────────── */ @media (max-width: 900px) { .fc-booking-layout { grid-template-columns: 1fr; } .fc-summary { position: static; order: -1; /* Summary goes above content on mobile */ } .fc-grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { :root { --fc-gutter: 14px; } .fc-step { padding: 10px 10px; font-size: .7rem; } .fc-step-num { width: 18px; height: 18px; font-size: .6rem; } .fc-context-meta { gap: 10px; font-size: .78rem; } .fc-booking-layout { margin-top: 16px; } .fc-card-body { padding: 14px; } .fc-summary-body { padding: 14px; } .fc-grid-2, .fc-grid-3, .fc-grid-4 { grid-template-columns: 1fr; } .fc-pax-block-body { padding: 12px; } .fc-ticket-grid { grid-template-columns: 1fr 1fr; } .fc-ticket-iata { font-size: 1.5rem; } .fc-ticket-header { padding: 14px 16px; } .fc-ticket-body { padding: 14px 16px; } } @media (max-width: 420px) { .fc-booking-layout { padding: 0 10px; } .fc-context-meta { flex-direction: column; gap: 4px; } .fc-ticket-grid { grid-template-columns: 1fr; } } /* ========================= RESULTS PAGE FIX (SAFE) ========================= */ .fc-results-scope .fc-results-row { display: flex; gap: 20px; align-items: flex-start; } /* LEFT SIDE */ .fc-results-scope .results-left { flex: 1; } /* RIGHT SIDEBAR */ .fc-results-scope .results-right { width: 300px; position: sticky; top: 70px; } /* MOBILE */ @media (max-width: 992px) { .fc-results-scope .fc-results-row { flex-direction: column; } .fc-results-scope .results-right { width: 100%; position: static; } }