/* SriRide booking — colours follow the theme through these custom properties. */
:root {
	--srb-accent: var(--wp--preset--color--accent, #f05a28);
	--srb-accent-ink: #fff;
	--srb-ink: var(--wp--preset--color--ink, #0f172a);
	--srb-muted: var(--wp--preset--color--muted, #64748b);
	--srb-line: var(--wp--preset--color--line, #e5e7eb);
	--srb-surface: var(--wp--preset--color--surface, #f6f7f9);
	--srb-card: #fff;
	--srb-radius: 16px;
	--srb-field-h: 48px;
}

.srb-booking, .srb-booking * { box-sizing: border-box; }
.srb-booking { background: var(--srb-card); color: var(--srb-ink); border-radius: 24px; padding: 24px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 20px 50px -12px rgba(15, 23, 42, .25); width: 100%; max-width: 560px; font-size: 15px; line-height: 1.45; text-align: left; }
.srb-booking.srb-style-flat { box-shadow: none; border: 1px solid var(--srb-line); max-width: none; }
.srb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.srb-title { font-size: 1.25rem !important; line-height: 1.2; margin: 0 !important; font-weight: 700; color: var(--srb-ink); }
.srb-progress { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--srb-muted); }
.srb-progress li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--srb-surface); }
.srb-progress li.is-current { background: var(--srb-ink); color: #fff; }
.srb-progress li.is-done { color: var(--srb-ink); }
.srb-progress li.is-done::before { content: "✓"; color: var(--srb-accent); font-weight: 700; }

.srb-step[hidden], .srb-row[hidden], .srb-error[hidden], [data-pay-row][hidden], .srb-secure[hidden] { display: none !important; }
.srb-step > * + * { margin-top: 14px; }

.srb-toggle { display: inline-flex; padding: 4px; background: var(--srb-surface); border-radius: 999px; gap: 4px; }
.srb-toggle label { cursor: pointer; margin: 0; }
.srb-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.srb-toggle span { display: block; padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--srb-muted); transition: background .15s, color .15s; }
.srb-toggle input:checked + span { background: #fff; color: var(--srb-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.srb-toggle input:focus-visible + span { outline: 2px solid var(--srb-accent); outline-offset: 2px; }

.srb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.srb-field label { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--srb-muted); margin: 0; }
.srb-field label small { text-transform: none; font-weight: 400; letter-spacing: 0; }
.srb-booking input[type="text"], .srb-booking input[type="number"], .srb-booking input[type="email"], .srb-booking input[type="tel"], .srb-booking input[type="date"], .srb-booking input[type="time"], .srb-booking select, .srb-booking textarea {
	width: 100%; min-height: var(--srb-field-h); padding: 10px 14px; border: 1px solid var(--srb-line); border-radius: 12px; background: #fff; color: var(--srb-ink); font: inherit; font-size: 16px; line-height: 1.3; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; margin: 0;
}
.srb-booking select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%2364748b' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.srb-booking textarea { min-height: 72px; resize: vertical; }
.srb-booking input:focus, .srb-booking select:focus, .srb-booking textarea:focus { outline: none; border-color: var(--srb-ink); box-shadow: 0 0 0 3px rgba(15, 23, 42, .08); }

.srb-route { position: relative; display: grid; gap: 10px; }
.srb-place { position: relative; }
.srb-place input[type="text"] { padding-left: 38px; padding-right: 84px; }
.srb-dot { position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--srb-ink); z-index: 1; }
.srb-dot-b { border-radius: 2px; background: var(--srb-ink); }
.srb-chip { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--srb-surface); color: var(--srb-ink); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.srb-chip:hover { background: var(--srb-line); }
.srb-swap { position: absolute; right: -6px; top: 50%; transform: translate(0, -10%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--srb-line); background: #fff; color: var(--srb-ink); cursor: pointer; font-size: 14px; line-height: 1; z-index: 2; display: none; }
.srb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srb-row > .srb-field + .srb-field { margin-top: 0; }

.srb-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--srb-line); border-radius: 12px; box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .25); max-height: 260px; overflow: auto; }
.srb-suggest li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.srb-suggest li:hover, .srb-suggest li.is-active { background: var(--srb-surface); }
.pac-container { border-radius: 12px; border: 1px solid var(--srb-line); box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .25); margin-top: 4px; font-family: inherit; z-index: 100000; }
.pac-item { padding: 6px 10px; cursor: pointer; }

.srb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform .1s, background .15s, box-shadow .15s; }
.srb-btn:active { transform: translateY(1px); }
.srb-btn:disabled { opacity: .6; cursor: progress; }
.srb-btn-primary { background: var(--srb-accent); color: var(--srb-accent-ink); box-shadow: 0 8px 20px -8px var(--srb-accent); }
.srb-btn-primary:hover { filter: brightness(1.05); color: var(--srb-accent-ink); }
.srb-btn-ghost { background: transparent; color: var(--srb-ink); border-color: var(--srb-line); }
.srb-btn-block { width: 100%; }
.srb-actions { display: flex; gap: 10px; justify-content: space-between; }
.srb-actions .srb-btn-primary { flex: 1; }
.srb-link { border: 0; background: none; color: var(--srb-accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.srb-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 14px; }

.srb-summary-route { padding: 12px 14px; border-radius: 14px; background: var(--srb-surface); }
.srb-summary-points { display: grid; gap: 4px; font-weight: 600; }
.srb-summary-points span { position: relative; padding-left: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srb-summary-points span::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2px solid var(--srb-ink); border-radius: 50%; }
.srb-summary-points span.is-stop { font-weight: 500; color: var(--srb-muted); }
.srb-summary-points span.is-stop::before { width: 6px; height: 6px; left: 3px; margin-top: -3px; border: 0; background: var(--srb-muted); }
.srb-summary-points span.is-end::before { border-radius: 2px; background: var(--srb-ink); }

.srb-stops { display: grid; gap: 10px; }
.srb-stops:empty { display: none; }
.srb-stop .srb-place input[type="text"] { padding-right: 46px; }
.srb-dot-stop { width: 8px; height: 8px; margin-top: -4px; left: 16px; border: 0; background: var(--srb-muted); }
.srb-stop-remove { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--srb-surface); color: var(--srb-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.srb-stop-remove:hover { background: var(--srb-line); }
.srb-add-stop { justify-self: start; border: 0; background: none; color: var(--srb-accent); font: inherit; font-size: 14px; font-weight: 600; padding: 2px 0; cursor: pointer; }
.srb-add-stop:hover { text-decoration: underline; text-underline-offset: 2px; }
.srb-summary-meta { margin-top: 6px; font-size: 13px; color: var(--srb-muted); }

.srb-vehicles { display: grid; gap: 8px; max-height: 420px; overflow: auto; padding: 2px; margin-left: -2px; margin-right: -2px; }
.srb-vehicle { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--srb-line); border-radius: 14px; background: #fff; color: var(--srb-ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.srb-vehicle:hover { border-color: #cbd5e1; }
.srb-vehicle.is-selected { border-color: var(--srb-ink); box-shadow: 0 0 0 2px var(--srb-ink) inset; }
.srb-vehicle.is-disabled { opacity: .5; cursor: not-allowed; }
.srb-vehicle-img { display: block; width: 84px; height: 56px; border-radius: 10px; background: var(--srb-surface); overflow: hidden; }
.srb-vehicle-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.srb-vehicle-info { display: flex; flex-direction: column; min-width: 0; }
.srb-vehicle-type { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--srb-muted); }
.srb-vehicle-title { font-weight: 700; line-height: 1.25; }
.srb-vehicle-cap { font-size: 13px; color: var(--srb-muted); }
.srb-vehicle-warn { font-size: 12px; color: #b45309; }
.srb-vehicle-price { text-align: right; font-size: 18px; white-space: nowrap; }

.srb-total { border: 1px solid var(--srb-line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.srb-total-row { display: flex; justify-content: space-between; gap: 12px; }
.srb-total-now strong { color: var(--srb-accent); font-size: 18px; }
.srb-total-later { color: var(--srb-muted); font-size: 14px; }
.srb-total-vehicle { font-size: 13px; color: var(--srb-muted); border-top: 1px dashed var(--srb-line); padding-top: 6px; }
.srb-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.srb-check input { margin-top: 3px; }
.srb-secure { font-size: 12px; color: var(--srb-muted); text-align: center; margin: 0; }
.srb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 520px) {
	.srb-booking { padding: 18px; border-radius: 20px; }
	.srb-progress { display: none; }
	.srb-row { grid-template-columns: 1fr 1fr; gap: 10px; }
	.srb-vehicle { grid-template-columns: 64px 1fr auto; padding: 8px 10px 8px 8px; }
	.srb-vehicle-img { width: 64px; height: 44px; }
	.srb-vehicle-price { font-size: 16px; }
}

/* Confirmation */
.srb-confirm { max-width: 720px; margin: 0 auto; color: var(--srb-ink); }
.srb-confirm-head { text-align: center; padding: 32px 24px; border-radius: 24px; background: var(--srb-surface); }
.srb-confirm-head h2 { margin: 12px 0 8px; font-size: 1.75rem; }
.srb-confirm-head p { margin: 0 auto 8px; max-width: 520px; color: var(--srb-muted); }
.srb-confirm-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; font-size: 28px; color: #fff; background: #16a34a; }
.srb-confirm-icon::before { content: "✓"; }
.srb-confirm.is-warning .srb-confirm-icon { background: #d97706; }
.srb-confirm.is-warning .srb-confirm-icon::before { content: "!"; }
.srb-confirm.is-muted .srb-confirm-icon { background: var(--srb-muted); }
.srb-confirm.is-muted .srb-confirm-icon::before { content: "–"; }
.srb-ref { font-size: 15px; color: var(--srb-ink) !important; }
.srb-ref strong { font-size: 18px; letter-spacing: .06em; }
.srb-confirm-list { margin: 20px 0 0; padding: 0; border: 1px solid var(--srb-line); border-radius: 18px; overflow: hidden; }
.srb-confirm-list div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--srb-line); }
.srb-confirm-list div:last-child { border-bottom: 0; }
.srb-confirm-list dt { color: var(--srb-muted); }
.srb-confirm-list dd { margin: 0; font-weight: 500; }
.srb-confirm-help { text-align: center; margin-top: 18px; color: var(--srb-muted); }

/* Fleet grid */
.srb-fleet-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.srb-fleet-filters button { border: 1px solid var(--srb-line); background: #fff; color: var(--srb-ink); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.srb-fleet-filters button.is-active { background: var(--srb-ink); color: #fff; border-color: var(--srb-ink); }
.srb-fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.srb-vcard { display: flex; flex-direction: column; border: 1px solid var(--srb-line); border-radius: var(--srb-radius); overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.srb-vcard[hidden] { display: none; }
.srb-vcard:hover { box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .35); transform: translateY(-2px); }
.srb-vcard-media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(180deg, #f8fafc, #eef2f7); }
.srb-vcard-media img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; padding: 14px 18px; mix-blend-mode: multiply; }
.srb-vcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.srb-badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--srb-muted); }
.srb-vcard-title { margin: 0 !important; font-size: 1.1rem !important; line-height: 1.3; }
.srb-vcard-title a { color: var(--srb-ink); text-decoration: none; }
.srb-vcard-title a:hover { color: var(--srb-accent); }
.srb-vcard-meta { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--srb-muted); }
.srb-vcard-price { margin: auto 0 0 !important; padding-top: 8px; font-size: 14px; color: var(--srb-muted); }
.srb-vcard-price strong { color: var(--srb-ink); font-size: 18px; }

/* Vehicle specs */
.srb-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.srb-spec { padding: 14px 16px; border-radius: 14px; background: var(--srb-surface); display: flex; flex-direction: column; gap: 2px; }
.srb-spec-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--srb-muted); font-weight: 600; }
.srb-spec-value { font-size: 1.35rem; font-weight: 700; }
.srb-spec-value small { font-size: 13px; font-weight: 500; color: var(--srb-muted); }
.srb-features { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.srb-features li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--srb-line); font-size: 14px; }

/* With driver / Self-drive */
.srb-service { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: -4px 0 16px; background: var(--srb-surface); border-radius: 14px; }
.srb-service button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--srb-muted); padding: 10px 12px; border-radius: 11px; cursor: pointer; }
.srb-service button[aria-selected="true"] { background: #fff; color: var(--srb-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.srb-booking[data-service="transfer"] [data-panel="self_drive"],
.srb-booking[data-service="self_drive"] [data-panel="transfer"] { display: none !important; }
[data-panel] > * + * { margin-top: 14px; }
[data-sd-address][hidden] { display: none !important; }
.srb-note { margin: 0; font-size: 13px; color: var(--srb-muted); }
.srb-success { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f0fdf4; color: #166534; font-size: 14px; }
.srb-success[hidden] { display: none; }
.srb-car-icon { width: 70%; height: 100%; display: block; margin: 0 auto; color: #94a3b8; }
.srb-vcard-media .srb-car-icon { position: absolute; inset: 0; width: 46%; }
.srb-vcard-price + .srb-vcard-price { margin-top: 0 !important; padding-top: 0; }

/* Destination pages */
.srb-dest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.srb-dest-side { position: sticky; top: 90px; }
.srb-dest-lead { font-size: 1.2rem; line-height: 1.55; color: var(--srb-ink); margin-top: 0; }
.srb-dest .srb-spec small { color: var(--srb-muted); font-size: 13px; }
.srb-dest h2 { font-size: 1.4rem; margin: 32px 0 12px; }
.srb-faq details { border-bottom: 1px solid var(--srb-line); padding: 14px 0; }
.srb-faq summary { cursor: pointer; font-weight: 600; }
.srb-faq p { color: var(--srb-muted); margin: 8px 0 0; }
@media (max-width: 900px) { .srb-dest { grid-template-columns: 1fr; } .srb-dest-side { position: static; } }
.srb-dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.srb-dest-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--srb-line); border-radius: 16px; background: #fff; color: var(--srb-ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.srb-dest-card:hover { box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .4); transform: translateY(-2px); color: var(--srb-ink); }
.srb-dest-card-region { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--srb-muted); }
.srb-dest-card-name { font-size: 1.15rem; }
.srb-dest-card-meta { font-size: 13px; color: var(--srb-muted); }
.srb-dest-card-price { margin-top: 6px; font-size: 13px; color: var(--srb-muted); }
.srb-dest-card-price strong { color: var(--srb-accent); font-size: 16px; }

/* Route map on the price step */
.srb-map { position: relative; height: 230px; margin: 12px 0 4px; border-radius: 14px; overflow: hidden; background: var(--srb-surface); border: 1px solid var(--srb-line); }
.srb-map svg { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .srb-map { height: 190px; } }

/* Live map under the address fields: appears once the first place is chosen */
.srb-live { margin: 2px 0 14px; }
.srb-live .srb-map-live { height: 210px; margin: 0; }
.srb-live-meta { margin: 6px 2px 0; font-size: .85rem; color: var(--srb-muted, #64748b); min-height: 1.2em; }
@media (max-width: 600px) { .srb-live .srb-map-live { height: 170px; } }

/* Fleet as search results (Kayak-style rows on wide screens, Turo-style photo cards on phones) */
.srb-results { min-width: 0; }
.srb-results-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 0 16px; margin-bottom: 18px; border-bottom: 1px solid var(--srb-line); background: var(--wp--preset--color--base, #fff); }
@media (min-width: 900px) { .srb-results-bar { position: sticky; top: var(--srb-bar-top, 70px); z-index: 20; } .admin-bar .srb-results-bar { top: calc(var(--srb-bar-top, 70px) + 32px); } }
.srb-seg { display: inline-flex; justify-self: start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--srb-surface); }
.srb-seg button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px; color: var(--srb-muted); padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.srb-seg button.is-on { background: var(--srb-ink); color: #fff; }
.srb-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.srb-chips::-webkit-scrollbar { display: none; }
.srb-chip-f { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--srb-line); background: #fff; color: var(--srb-ink); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.srb-chip-f:hover { border-color: var(--srb-ink); }
.srb-chip-f[aria-pressed="true"], .srb-chip-select.is-on { background: var(--srb-ink); border-color: var(--srb-ink); color: #fff; }
.srb-chip-f svg { width: 16px; height: 16px; }
.srb-chip-fav[aria-pressed="true"] svg { fill: #f43f5e; stroke: #f43f5e; }
.srb-chip-select { padding: 0 6px 0 4px; }
.srb-chip-select select { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 8px 4px; cursor: pointer; }
.srb-chip-select.is-on select option { color: var(--srb-ink); }
.srb-results-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srb-results-count { margin: 0 !important; font-size: 15px; color: var(--srb-muted); }
.srb-results-count strong { color: var(--srb-ink); font-size: 17px; }
.srb-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--srb-muted); }
.srb-sort select { border: 1px solid var(--srb-line); border-radius: 10px; background: #fff; font: inherit; font-weight: 600; color: var(--srb-ink); padding: 7px 10px; }

.srb-results-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.srb-rcard { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 210px; border: 1px solid var(--srb-line); border-radius: 18px; background: #fff; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.srb-rcard[hidden] { display: none; }
.srb-rcard:hover { box-shadow: 0 18px 36px -22px rgba(15, 23, 42, .45); border-color: #d6dbe3; }
.srb-rcard-media { position: relative; background: linear-gradient(180deg, #f8fafc, #eef2f7); min-height: 190px; }
.srb-rcard-media > a { position: absolute; inset: 0; display: block; }
.srb-rcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px 12px; box-sizing: border-box; mix-blend-mode: multiply; }
.srb-rcard-media .srb-car-icon { position: absolute; inset: 0; width: 50%; }
.srb-fav { position: absolute; top: 10px; left: 10px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--srb-line); border-radius: 12px; background: #fff; color: var(--srb-ink); cursor: pointer; box-shadow: 0 2px 6px rgba(15, 23, 42, .08); }
.srb-fav:hover { border-color: var(--srb-ink); }
.srb-fav[aria-pressed="true"] svg { fill: #f43f5e; stroke: #f43f5e; }
.srb-rcard-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.srb-rcard-kicker { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--srb-muted); }
.srb-tag-best { padding: 3px 8px; border-radius: 999px; background: #dcfce7; color: #166534; letter-spacing: .02em; }
.srb-rcard-title { margin: 0 !important; font-size: 1.25rem !important; line-height: 1.25; }
.srb-rcard-title a { color: var(--srb-ink); text-decoration: none; }
.srb-rcard-title a:hover { color: var(--srb-accent); }
.srb-rcard-sub { margin: 0 !important; font-size: 14px; color: var(--srb-muted); }
.srb-rcard-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 2px; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--srb-ink); }
.srb-rcard-specs li { display: inline-flex; align-items: center; gap: 6px; }
.srb-rcard-specs svg { color: var(--srb-muted); }
.srb-rcard-perks { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: #166534; }
.srb-rcard-perks li { display: flex; align-items: flex-start; gap: 6px; }
.srb-rcard-perks svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.srb-rcard-price { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px 20px; border-left: 1px solid var(--srb-line); background: #fcfcfd; }
.srb-price { margin: 0 !important; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 2px; }
.srb-price[hidden] { display: none; }
.srb-price-label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--srb-muted); }
.srb-price strong { font-size: 1.6rem; line-height: 1.1; color: var(--srb-ink); }
.srb-price-unit { font-size: 14px; color: var(--srb-muted); }
.srb-price small { grid-column: 1 / -1; font-size: 12.5px; color: var(--srb-muted); }
.srb-book { display: block; text-align: center; padding: 12px 16px; border-radius: 12px; background: var(--srb-accent); color: #fff !important; font-weight: 700; text-decoration: none; transition: filter .15s; }
.srb-book:hover { filter: brightness(.95); }
.srb-details { text-align: center; font-size: 14px; font-weight: 600; color: var(--srb-ink); text-decoration: underline; text-underline-offset: 3px; }
.srb-results-empty { padding: 40px 16px; text-align: center; color: var(--srb-muted); border: 1px dashed var(--srb-line); border-radius: 18px; }
.srb-results-empty[hidden] { display: none; }
@media (max-width: 1000px) and (min-width: 721px) {
	.srb-rcard { grid-template-columns: 240px minmax(0, 1fr); }
	.srb-rcard-price { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; border-left: 0; border-top: 1px solid var(--srb-line); }
	.srb-rcard-price .srb-price { margin-right: 18px !important; }
	.srb-book { margin-left: auto; min-width: 140px; }
}
@media (max-width: 720px) {
	.srb-rcard { grid-template-columns: 1fr; border-radius: 16px; }
	.srb-rcard-media { min-height: 0; aspect-ratio: 16 / 9; }
	.srb-rcard-main { padding: 14px 16px 6px; }
	.srb-rcard-title { font-size: 1.15rem !important; }
	.srb-rcard-price { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px 16px; border-left: 0; background: #fff; }
	.srb-rcard-price .srb-price { flex: 1 1 auto; }
	.srb-book { flex: 1 1 100%; }
	.srb-details { display: none; }
	.srb-seg { justify-self: stretch; }
	.srb-seg button { flex: 1; padding: 9px 10px; }
}

/* Add stop / Add stay / night */
.srb-add-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.srb-stay .srb-place input[type="text"] { padding-right: 150px; }
.srb-stay .srb-dot-stop { background: #6366f1; }
.srb-booking .srb-stay select.srb-nights { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); width: auto; height: 32px; min-height: 0; border: 1px solid var(--srb-line); border-radius: 999px; background-color: var(--srb-surface); background-position: right 9px center; color: var(--srb-ink); font-size: 13px; font-weight: 600; line-height: 1; padding: 0 26px 0 10px; box-shadow: none; cursor: pointer; }
.srb-return-note { margin-top: -4px !important; }
@media (max-width: 420px) { .srb-stay .srb-place input[type="text"] { padding-right: 136px; } .srb-booking .srb-stay select.srb-nights { font-size: 12px; padding: 0 22px 0 8px; } }

/* Required / optional fields */
.srb-req { color: var(--srb-accent); font-weight: 700; margin-left: 3px; }
.srb-opt { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--srb-surface); color: var(--srb-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; vertical-align: 1px; }
.srb-booking .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.srb-booking .is-invalid, .srb-booking .is-invalid:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14) !important; }
.srb-time-hint { margin-top: -6px !important; }


/* How to pay: card, bank transfer, cash */
.srb-paymethods { display: grid; gap: 8px; margin: 4px 0 14px; }
.srb-pay { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head price" "sub sub"; align-items: center; gap: 2px 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--srb-line); border-radius: 14px; background: #fff; color: var(--srb-ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.srb-pay:hover { border-color: #cbd5e1; }
.srb-pay.is-selected { border-color: var(--srb-accent); box-shadow: 0 0 0 3px rgba(240, 90, 40, .12); }
.srb-pay-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.srb-pay-badge { white-space: nowrap; }
.srb-pay-name { font-weight: 700; }
.srb-pay-badge { padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700; }
.srb-pay-sub { grid-area: sub; font-size: 13px; color: var(--srb-muted); }
.srb-pay-price { grid-area: price; text-align: right; white-space: nowrap; }
.srb-pay-price s { color: var(--srb-muted); font-size: 12px; margin-right: 4px; }
.srb-pay-price strong { font-size: 16px; }
.srb-pay-offer { margin: 2px 2px 0 !important; font-size: 12px; font-weight: 600; color: #166534; }
.srb-total-save span:last-child { color: #166534; font-weight: 600; }

/* Bank details and receipt upload on the booking page */
.srb-bank { margin: 18px 0; padding: 18px; border: 1px solid var(--srb-line); border-radius: 16px; background: #fff; }
.srb-bank-amount { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: var(--srb-surface); text-align: center; }
.srb-bank-amount span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--srb-muted); }
.srb-bank-amount strong { font-size: 1.8rem; }
.srb-bank-amount small { color: var(--srb-muted); }
.srb-bank-list { margin: 0 0 14px; }
.srb-bank-list div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--srb-line); }
.srb-bank-list dt { color: var(--srb-muted); font-size: 14px; }
.srb-bank-list dd { margin: 0; font-weight: 600; text-align: right; display: flex; align-items: center; gap: 8px; }
.srb-copy { border: 1px solid var(--srb-line); background: #fff; border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.srb-receipt { display: grid; gap: 10px; }
.srb-receipt[hidden] { display: none; }
.srb-receipt-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border: 2px dashed #cbd5e1; border-radius: 14px; background: var(--srb-surface); text-align: center; cursor: pointer; }
.srb-receipt-drop:hover { border-color: var(--srb-accent); }
.srb-receipt-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.srb-receipt-icon { font-size: 22px; color: var(--srb-accent); }
.srb-receipt-drop small { color: var(--srb-muted); }

.srb-total-row > span:last-child, .srb-total-row > strong { white-space: nowrap; }
@media (max-width: 600px) {
	.srb-bank-list div { flex-direction: column; align-items: stretch; gap: 2px; }
	.srb-bank-list dd { justify-content: space-between; text-align: left; }
}