/* Corporate look of Reserva de Pistas (Ayuntamiento de El Pedroso) on top of Filament.
   Plain CSS because Filament's compiled stylesheet only contains its own classes.
   Filament's styles live in cascade layers, so these unlayered rules win without !important. */
:root {
    --rp-blue: #0071bc; --rp-blue-700: #005a96; --rp-blue-900: #0b2c4d; --rp-blue-50: #e9f3fb; --rp-blue-100: #cfe5f5;
    --rp-red: #ed1c24; --rp-red-700: #c4121a; --rp-red-50: #fdeced;
    --rp-yellow: #eac102; --rp-yellow-600: #c9a500; --rp-yellow-50: #fdf7dc;
    --rp-green: #1f9d55; --rp-green-50: #e7f6ee;
    --rp-text: #17212b; --rp-muted: #5d6b7a; --rp-border: #dde3ea; --rp-bg: #f3f6f9; --rp-card: #fff;
    --rp-radius: 14px; --rp-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
}

/* ---------- Shell ---------- */
.fi-body { background: var(--rp-bg); color: var(--rp-text); }
.rp-stripe { height: 5px; background: linear-gradient(90deg, var(--rp-blue) 0 33.3%, var(--rp-red) 33.3% 66.6%, var(--rp-yellow) 66.6%); }

.fi-topbar { background: var(--rp-blue); color: #fff; box-shadow: none; }
.fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn .fi-icon { color: #fff; }
.fi-topbar .fi-icon-btn:hover { background: rgba(255,255,255,.12); }
.fi-topbar-item-btn { color: rgba(255,255,255,.88); }
.fi-topbar-item-btn .fi-icon, .fi-topbar-item-label { color: inherit; }
.fi-topbar-item-btn:hover, .fi-topbar-item-btn:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.fi-topbar-item.fi-active .fi-topbar-item-btn { background: #fff; }
.fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon, .fi-topbar-item.fi-active .fi-topbar-item-label { color: var(--rp-blue); }
.fi-topbar-item-label { font-weight: 600; }
.fi-topbar .fi-user-menu-trigger .fi-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }

.rp-brand { display: flex; align-items: center; gap: .7rem; color: inherit; height: 100%; }
.rp-brand-logo { height: 2.75rem; width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.rp-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.rp-brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.rp-brand-sub { font-size: .75rem; color: rgba(255,255,255,.85); }
.fi-simple-layout .rp-brand { flex-direction: column; text-align: center; gap: .5rem; }
.fi-simple-layout .rp-brand-logo { height: 5.5rem; filter: none; }
.fi-simple-layout .rp-brand-name { color: var(--rp-blue-900); font-size: 1.35rem; }
.fi-simple-layout .rp-brand-sub { color: var(--rp-muted); font-size: .85rem; }
.fi-simple-layout .fi-logo { height: auto !important; }

.rp-wallet-pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--rp-yellow); color: #1d1a05; font-weight: 700; font-size: .9rem; padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; text-decoration: none; }
.rp-wallet-pill:hover { background: var(--rp-yellow-600); }
.rp-wallet-pill-icon { width: 1.1rem; height: 1.1rem; }

.rp-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: 1.25rem 1rem; font-size: .8rem; color: var(--rp-muted); border-top: 1px solid var(--rp-border); background: #fff; }
.rp-footer a { text-decoration: underline; }

.rp-bottom-nav { display: none; }

/* Admin sidebar in corporate navy (desktop). */
@media (min-width: 64rem) {
    .fi-panel-admin .fi-main-sidebar, .fi-panel-admin .fi-sidebar { background: var(--rp-blue-900); }
}
.fi-panel-admin .fi-sidebar { background: var(--rp-blue-900); }
.fi-panel-admin .fi-sidebar-header { background: var(--rp-blue-900); }
.fi-panel-admin .fi-sidebar-group-label { color: #7d97b3; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.fi-panel-admin .fi-sidebar-group-btn .fi-icon { color: #7d97b3; }
.fi-panel-admin .fi-sidebar-item-btn { color: #c9d7e6; }
.fi-panel-admin .fi-sidebar-item-btn .fi-icon, .fi-panel-admin .fi-sidebar-item-label { color: inherit; }
.fi-panel-admin .fi-sidebar-item-btn:hover, .fi-panel-admin .fi-sidebar-item-btn:focus-visible { background: rgba(255,255,255,.07); color: #fff; }
.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--rp-blue); color: #fff; }
.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff; }
.fi-panel-admin .fi-sidebar .fi-badge { background: var(--rp-red); color: #fff; }

/* Filament picks a light shade + dark text for buttons; use the solid corporate colours instead. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) { background: var(--rp-blue); color: #fff; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover { background: var(--rp-blue-700); color: #fff; }
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) { background: var(--rp-red); color: #fff; }
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link):hover { background: var(--rp-red-700); color: #fff; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) .fi-icon,
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) .fi-icon { color: inherit; }
.fi-btn.fi-color-primary.fi-disabled, .fi-btn.fi-color-primary[disabled] { background: #a9c6dc; color: #fff; }
.fi-btn.fi-color-warning:not(.fi-outlined):not(.fi-link) { background: var(--rp-yellow); color: #1d1a05; }
.fi-btn.fi-color-warning:not(.fi-outlined):not(.fi-link):hover { background: var(--rp-yellow-600); }

/* ---------- Generic pieces ---------- */
.rp-card { background: var(--rp-card); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); }
.rp-card-pad { padding: 1.25rem; }
.rp-empty { padding: 2rem 1rem; text-align: center; color: var(--rp-muted); }
.rp-muted { color: var(--rp-muted); font-size: .9rem; }
.rp-small { font-size: .8rem; margin-top: .9rem; }
.rp-text-red { color: var(--rp-red-700); }
.rp-loading { opacity: .5; pointer-events: none; }
.rp-badge { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.rp-badge-blue { background: var(--rp-blue-50); color: var(--rp-blue-700); }
.rp-badge-green { background: var(--rp-green-50); color: #13693a; }
.rp-badge-gray { background: #eef1f4; color: var(--rp-muted); }
.rp-alert { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 12px; font-size: .9rem; }
.rp-alert a { font-weight: 700; text-decoration: underline; color: inherit; }
.rp-alert-sm { display: block; padding: .6rem .8rem; margin: .6rem 0; font-size: .85rem; }
.rp-alert-icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .05rem; }
.rp-alert-yellow { background: var(--rp-yellow-50); border: 1px solid #f1dd7c; color: #5f4d00; }
.rp-alert-blue { background: var(--rp-blue-50); border: 1px solid var(--rp-blue-100); color: var(--rp-blue-900); }
.rp-alert-red { background: var(--rp-red-50); border: 1px solid #f7c3c5; color: var(--rp-red-700); }
.rp-note { display: flex; gap: .5rem; font-size: .85rem; color: var(--rp-muted); margin: .7rem 0 0; }
.rp-note strong { color: var(--rp-text); }
.rp-note-icon { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; }
.rp-btn-block { width: 100%; }
.rp-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--rp-muted); margin-bottom: .75rem; }
.rp-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.rp-legend i { width: .9rem; height: .9rem; border-radius: 4px; border: 1.5px solid; display: inline-block; }
.rp-lg-free { border-color: var(--rp-blue-100); background: #fff; }
.rp-lg-own { border-color: var(--rp-yellow); background: var(--rp-yellow-50); }
.rp-lg-busy { border-color: #e3e7ec; background: #f1f3f6; }
.rp-lg-linked { border-color: #dfe4ea; background: repeating-linear-gradient(135deg, #f1f3f6 0 3px, #dfe4ea 3px 6px); }
.rp-lg-block { border-color: #f7c3c5; background: var(--rp-red-50); }
.rp-lg-booking { border-color: var(--rp-blue); background: var(--rp-blue-50); }

.rp-ico { width: 2.75rem; height: 2.75rem; border-radius: 12px; display: grid; place-items: center; flex: none; }
.rp-ico svg { width: 1.6rem; height: 1.6rem; }
.rp-tint-blue { background: var(--rp-blue-50); color: var(--rp-blue); }
.rp-tint-green { background: var(--rp-green-50); color: var(--rp-green); }
.rp-tint-red { background: var(--rp-red-50); color: var(--rp-red); }
.rp-tint-yellow { background: var(--rp-yellow-50); color: #a88a00; }

/* ---------- Citizen: booking ---------- */
.rp-book { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.rp-step { margin-bottom: 1.75rem; }
.rp-step-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.rp-step-h h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.rp-step-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--rp-blue); color: #fff; font-weight: 700; font-size: .8rem; display: grid; place-items: center; }

.rp-facilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.rp-facility { position: relative; background: #fff; border: 2px solid var(--rp-border); border-radius: var(--rp-radius); padding: .9rem; text-align: left; display: flex; flex-direction: column; gap: .6rem; cursor: pointer; transition: .15s; color: var(--rp-text); }
.rp-facility:hover { border-color: var(--rp-blue-100); transform: translateY(-1px); }
.rp-facility.is-selected { border-color: var(--rp-blue); box-shadow: 0 0 0 4px var(--rp-blue-100); }
.rp-facility.is-selected::after { content: "✓"; position: absolute; top: .6rem; right: .6rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--rp-blue); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.rp-facility-name { display: block; font-weight: 700; }
.rp-facility-meta { display: block; font-size: .78rem; color: var(--rp-muted); }

.rp-subopt { margin-top: .9rem; padding: 1rem; background: #fff; border: 1px solid var(--rp-border); border-radius: var(--rp-radius); display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 1.1rem; align-items: center; }
.rp-subopt-single { grid-template-columns: 1fr; }
.rp-subopt h3 { font-size: .9rem; font-weight: 700; margin: 0 0 .6rem; }
.rp-seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.rp-seg button { border: 1.5px solid var(--rp-border); background: #fff; border-radius: 10px; padding: .55rem .9rem; font-weight: 600; font-size: .9rem; color: var(--rp-text); cursor: pointer; }
.rp-seg button:hover { border-color: var(--rp-blue); }
.rp-seg button.is-selected { background: var(--rp-blue); border-color: var(--rp-blue); color: #fff; }
.rp-pitch { width: 100%; height: auto; display: block; }

.rp-days { display: flex; gap: .6rem; flex-wrap: wrap; }
.rp-day { border: 1.5px solid var(--rp-border); background: #fff; border-radius: 12px; padding: .6rem 1.1rem; text-align: center; min-width: 6.5rem; cursor: pointer; color: var(--rp-text); }
.rp-day small { display: block; font-size: .75rem; color: var(--rp-muted); }
.rp-day.is-selected { background: var(--rp-blue); border-color: var(--rp-blue); color: #fff; }
.rp-day.is-selected small { color: rgba(255,255,255,.85); }

.rp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: .6rem; }
.rp-slot { border: 1.5px solid var(--rp-blue-100); background: #fff; border-radius: 12px; padding: .6rem .75rem; text-align: left; display: flex; flex-direction: column; gap: .1rem; min-height: 4.2rem; color: var(--rp-text); }
.rp-slot strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.rp-slot small { font-size: .75rem; color: var(--rp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.rp-slot { cursor: pointer; transition: .12s; }
.rp-slot-free:hover { border-color: var(--rp-blue); background: var(--rp-blue-50); }
.rp-slot-free.is-selected { background: var(--rp-blue); border-color: var(--rp-blue); color: #fff; }
.rp-slot-free.is-selected small { color: rgba(255,255,255,.9); }
.rp-slot-busy { background: #f1f3f6; border-color: #e3e7ec; color: #98a3ae; }
.rp-slot-busy small { color: #98a3ae; }
.rp-slot-linked { background: repeating-linear-gradient(135deg, #f1f3f6 0 6px, #e6eaef 6px 12px); border-color: #dfe4ea; color: #8794a1; }
.rp-slot-linked small { color: #7b8794; }
.rp-slot-block { background: var(--rp-red-50); border-color: #f7c3c5; color: var(--rp-red-700); }
.rp-slot-block small { color: var(--rp-red-700); }
.rp-slot-own { background: var(--rp-yellow-50); border-color: var(--rp-yellow); color: #5f4d00; }
.rp-slot-own small { color: #6f5a00; }
.rp-slot-past { background: transparent; border-style: dashed; border-color: #e0e4e9; color: #b4bcc5; }
.rp-slot-past small { color: #b4bcc5; }

.rp-summary { position: sticky; top: calc(var(--topbar-height, 4rem) + 1.25rem); background: #fff; border: 1px solid var(--rp-border); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); overflow: hidden; scroll-margin-top: calc(var(--topbar-height, 4rem) + 1rem); }
.rp-summary-head { background: var(--rp-blue-900); color: #fff; padding: 1rem 1.25rem; }
.rp-summary-head small { opacity: .75; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.rp-summary-head h3 { font-size: 1.1rem; font-weight: 700; margin: .15rem 0 0; }
.rp-summary-body { padding: .9rem 1.25rem 1.25rem; }
.rp-summary-empty { text-align: center; padding: 1.75rem 1rem; color: var(--rp-muted); font-size: .9rem; }
.rp-summary-empty-icon { width: 2.2rem; height: 2.2rem; margin: 0 auto .5rem; color: var(--rp-blue-100); }
.rp-summary-btn { width: 100%; margin-top: .8rem; }
.rp-summary-foot { font-size: .78rem; color: var(--rp-muted); text-align: center; margin: .7rem 0 0; }
.rp-row { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; font-size: .9rem; }
.rp-row > span:first-child { color: var(--rp-muted); }
.rp-row strong { text-align: right; }
.rp-row-center { align-items: center; }
.rp-divider { border-top: 1px dashed var(--rp-border); margin: .5rem 0; }
.rp-price { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Citizen: my bookings ---------- */
.rp-page-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rp-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--rp-border); }
.rp-tabs button { background: none; border: 0; padding: .6rem .9rem; font-weight: 600; color: var(--rp-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.rp-tabs button.is-selected { color: var(--rp-blue); border-color: var(--rp-blue); }
.rp-res-list { display: flex; flex-direction: column; gap: .75rem; }
.rp-res { display: flex; gap: 1rem; align-items: center; padding: .9rem 1rem; }
.rp-res-date { width: 4rem; text-align: center; border-radius: 12px; background: var(--rp-blue-50); color: var(--rp-blue-700); padding: .45rem 0; flex: none; line-height: 1.1; }
.rp-res-date strong { display: block; font-size: 1.5rem; }
.rp-res-date small { font-size: .68rem; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.rp-res-info { flex: 1; min-width: 0; }
.rp-res-info h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.rp-res-info p { margin: .2rem 0 0; font-size: .85rem; color: var(--rp-muted); }
.rp-res-side { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.rp-res.is-past { opacity: .7; }
.rp-res.is-past .rp-res-date { background: #eef1f4; color: var(--rp-muted); }

/* ---------- Citizen: wallet ---------- */
.rp-wallet { display: grid; grid-template-columns: 23rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.rp-wallet-card { background: linear-gradient(135deg, var(--rp-blue) 0%, var(--rp-blue-900) 100%); color: #fff; border-radius: 20px; padding: 1.5rem; position: relative; overflow: hidden; }
.rp-wallet-card::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 10rem; height: 10rem; border-radius: 50%; background: var(--rp-yellow); opacity: .9; }
.rp-wallet-card::before { content: ""; position: absolute; right: 2.5rem; top: 4.4rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--rp-red); opacity: .9; }
.rp-wallet-card > * { position: relative; z-index: 1; }
.rp-wallet-card small { opacity: .85; font-size: .85rem; }
.rp-wallet-balance { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; margin: .2rem 0 1rem; }
.rp-topup { margin-top: 1rem; }
.rp-topup h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.rp-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .75rem; }
.rp-amounts button { border: 1.5px solid var(--rp-border); background: #fff; border-radius: 10px; padding: .7rem 0; font-weight: 700; cursor: pointer; color: var(--rp-text); }
.rp-amounts button.is-selected { border-color: var(--rp-blue); background: var(--rp-blue-50); color: var(--rp-blue-700); }
label.rp-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; font-size: .8rem; font-weight: 600; }
label.rp-field input { border: 1px solid var(--rp-border); border-radius: 10px; padding: .6rem .75rem; font-weight: 400; font-size: .95rem; }
label.rp-field input:focus { outline: none; border-color: var(--rp-blue); box-shadow: 0 0 0 3px var(--rp-blue-100); }
.rp-secure { display: flex; justify-content: center; align-items: center; gap: .4rem; font-size: .78rem; color: var(--rp-muted); margin: .6rem 0 0; }

/* ---------- Admin: agenda ---------- */
.rp-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.rp-date-nav { display: flex; align-items: center; background: #fff; border: 1px solid var(--rp-border); border-radius: 10px; overflow: hidden; }
.rp-date-nav button { background: none; border: 0; padding: .55rem .7rem; color: var(--rp-muted); cursor: pointer; }
.rp-date-nav button:hover { background: var(--rp-blue-50); color: var(--rp-blue); }
.rp-date-nav span { padding: 0 .6rem; font-weight: 600; min-width: 15rem; text-align: center; font-size: .9rem; }
.rp-date { border: 1px solid var(--rp-border); background: #fff; color: var(--rp-text); border-radius: 10px; padding: .45rem .6rem; }

.rp-agenda-scroll { overflow-x: auto; }
.rp-agenda { display: grid; position: relative; min-width: 56rem; }
.rp-ag-head { position: sticky; top: 0; z-index: 3; background: #f8fafc; border-bottom: 1px solid var(--rp-border); border-top: 3px solid transparent; padding: .55rem .4rem; font-size: .8rem; font-weight: 700; text-align: center; }
.rp-ag-head small { display: block; font-weight: 500; color: var(--rp-muted); font-size: .7rem; }
.rp-tint-border-blue { border-top-color: var(--rp-blue); }
.rp-tint-border-green { border-top-color: var(--rp-green); }
.rp-tint-border-red { border-top-color: var(--rp-red); }
.rp-tint-border-yellow { border-top-color: var(--rp-yellow); }
.rp-ag-time { font-size: .7rem; color: var(--rp-muted); text-align: right; padding-right: .5rem; transform: translateY(-.45rem); font-variant-numeric: tabular-nums; }
.rp-ag-line { border-bottom: 1px solid #f1f3f6; }
.rp-ag-line.is-hour { border-bottom-color: #e3e7ec; }
.rp-ev { z-index: 1; margin: 2px 3px; border-radius: 8px; padding: .3rem .45rem; font-size: .72rem; line-height: 1.25; overflow: hidden; border: 0; border-left: 4px solid; text-align: left; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rp-ev strong { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ev span { opacity: .9; }
button.rp-ev { cursor: pointer; }
.rp-ev-booking { background: var(--rp-blue-50); border-color: var(--rp-blue); color: var(--rp-blue-900); }
.rp-ev-booking:hover { background: var(--rp-blue-100); }
.rp-ev-block { background: var(--rp-red-50); border-color: var(--rp-red); color: var(--rp-red-700); }
.rp-ev-block:hover { background: #fbd9db; }
.rp-ev-linked { background: repeating-linear-gradient(135deg, #f3f5f7 0 6px, #e8ecf0 6px 12px); border-color: #b9c3cd; color: #6b7785; font-style: italic; }
.rp-ev-past { background: transparent; border-color: transparent; color: #c0c7cf; }
.rp-ev-free { background: #fff; border: 1px dashed var(--rp-blue-100); border-left: 4px solid var(--rp-blue-100); color: var(--rp-muted); }
.rp-ev-free:hover { border-color: var(--rp-blue); background: var(--rp-blue-50); }
.rp-ev-actions { display: flex; gap: .25rem; flex-wrap: wrap; opacity: 0; transition: opacity .1s; }
.rp-ev-free:hover .rp-ev-actions, .rp-ev-free:focus-within .rp-ev-actions { opacity: 1; }
.rp-ev-actions button { font-size: .68rem; font-weight: 600; padding: .05rem .4rem; border-radius: 6px; border: 1px solid var(--rp-blue); background: #fff; color: var(--rp-blue); cursor: pointer; }
.rp-ev-actions button + button { border-color: var(--rp-red); color: var(--rp-red-700); }
@media (hover: none) { .rp-ev-actions { opacity: 1; } }

/* ---------- Install the app ---------- */
.rp-install { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--rp-blue-100); border-left: 4px solid var(--rp-blue); border-radius: 12px; padding: .65rem .8rem; margin-bottom: 1rem; box-shadow: var(--rp-shadow); }
.rp-install[hidden] { display: none; }
.rp-install-icon { width: 2.5rem; height: 2.5rem; border-radius: 10px; flex: none; }
.rp-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.rp-install-text span { color: var(--rp-muted); }
.rp-install-btn { background: var(--rp-blue); color: #fff; border: 0; border-radius: 8px; padding: .45rem .9rem; font-weight: 600; cursor: pointer; }
.rp-install-btn[hidden] { display: none; }
.rp-install-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--rp-muted); cursor: pointer; padding: 0 .2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .rp-book, .rp-wallet { grid-template-columns: minmax(0, 1fr); }
    .rp-summary { position: static; }
}
@media (max-width: 720px) {
    .rp-subopt { grid-template-columns: 1fr; }
    .rp-subopt .rp-pitch { max-width: 16rem; }
    .rp-facilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-day { min-width: 0; flex: 1; padding: .6rem .4rem; }
    .rp-res { flex-wrap: wrap; }
    .rp-res-side { width: 100%; justify-content: space-between; }
    .rp-amounts { grid-template-columns: repeat(2, 1fr); }
    .rp-brand-sub { display: none; }
    .fi-topbar .rp-brand-name { font-size: .95rem; }
    .rp-date-nav span { min-width: 0; }
}
@media (max-width: 63.99rem) {
    /* Citizens get a bottom tab bar on phones/tablets instead of the drawer menu. */
    .fi-panel-app .rp-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--rp-border); padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom)); }
    .rp-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .7rem; font-weight: 600; color: var(--rp-muted); padding: .35rem 0; border-radius: 10px; text-decoration: none; }
    .rp-bottom-nav a.is-active { color: var(--rp-blue); background: var(--rp-blue-50); }
    .rp-bottom-nav-icon { width: 1.4rem; height: 1.4rem; }
    .fi-panel-app .fi-main-ctn { padding-bottom: 4.5rem; }
    .fi-panel-app .fi-topbar-open-sidebar-btn { display: none !important; }
}