/*
Theme Name: Island Flo
Theme URI: https://islandflo.wpcomstaging.com/
Author: Island Flo Car Rental
Description: Navy & Brass block theme for Island Flo Car Rental in Curaçao. Page content, photos and reviews are managed in WordPress; the theme supplies templates, patterns and RentSyst styling.
Version: 2.0.4
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: island-flo
*/

:root {
  --if-sand: var(--wp--preset--color--sand);
  --if-white: var(--wp--preset--color--white);
  --if-stone: var(--wp--preset--color--stone);
  --if-navy: var(--wp--preset--color--navy);
  --if-charcoal: var(--wp--preset--color--charcoal);
  --if-slate: var(--wp--preset--color--slate);
  --if-teal: var(--wp--preset--color--teal);
  --if-brass: var(--wp--preset--color--brass);
  --if-brass-hover: color-mix(in srgb, var(--if-brass) 88%, #000);
  --if-heading: var(--wp--preset--font-family--heading);
  --if-body: var(--wp--preset--font-family--body);
  --if-radius: var(--wp--custom--radius--card);
  --if-radius-control: var(--wp--custom--radius--control);
  --if-hairline: var(--wp--custom--hairline);
  --if-shadow: var(--wp--preset--shadow--soft);
  --if-shadow-lifted: var(--wp--preset--shadow--lifted);
  --if-wrap: min(calc(100% - 2 * var(--wp--style--root--padding-left, 20px)), var(--wp--style--global--wide-size));

  /* Line icons (Lucide-style, 24px grid) used as CSS masks. */
  --if-icon-seat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
  --if-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='14' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3M9 20v1M15 20v1'/%3E%3C/svg%3E");
  --if-icon-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M6 7v10M12 7v10M18 7v5H6'/%3E%3C/svg%3E");
  --if-icon-door: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V9l6-6h10v18H4Z'/%3E%3Cpath d='M4 12h16M15 15h2'/%3E%3C/svg%3E");
  --if-icon-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9 4.9 19.1M9 3l3 3 3-3M9 21l3-3 3 3M3 9l3 3-3 3M21 9l-3 3 3 3'/%3E%3C/svg%3E");
  --if-icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E");
  --if-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  --if-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .2em; }
/* In-page links land below the sticky header. */
:where(.wp-site-blocks) [id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 104px); }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--if-teal); outline-offset: 3px; }

/* Empty placeholder paragraphs from patterns stay invisible until filled in. */
:where(.wp-site-blocks) p:empty { display: none; }

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group { margin-block-start: 0; }

/* ---------- Block styles ---------- */

/* Block style variations are defined in theme.json (Styles → Blocks); only what theme.json can't express lives here. */
:is(.wp-block-cover, .has-navy-background-color, .if-site-footer) .is-style-eyebrow { color: var(--if-stone); }

.wp-block-group.is-style-card > :first-child { margin-top: 0; }
.wp-block-group.is-style-card > .is-style-eyebrow + :is(h2, h3, h4) { margin-top: .35rem; }

.wp-block-cover.is-style-card { overflow: hidden; }
.wp-block-cover.is-style-card h3 { margin-block: .15rem .35rem; }
.wp-block-cover.is-style-card p { margin: 0; }

.wp-block-button.is-style-text-link .wp-block-button__link { text-underline-offset: .25em; }
.wp-block-button.is-style-text-link .wp-block-button__link:hover { color: var(--if-navy); }

.wp-block-list.is-style-checks { list-style: none; }
.wp-block-list.is-style-checks li { position: relative; margin-block: .55rem; padding-left: 1.9rem; }
.wp-block-list.is-style-checks li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--if-teal);
  -webkit-mask: var(--if-icon-check) center / contain no-repeat;
  mask: var(--if-icon-check) center / contain no-repeat;
}

.wp-block-button__link { min-height: 44px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.1); }

/* ---------- Tables ---------- */

.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; background: var(--if-white); font-size: .9375rem; }
.wp-block-table :is(th, td) { padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--if-stone); text-align: left; vertical-align: top; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table thead th { background: var(--if-navy); color: var(--if-white); font-weight: 700; }
.wp-block-table.is-style-stripes { border-bottom: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--if-sand); }
.wp-block-table.is-style-stripes tbody tr:nth-child(even) { background: var(--if-white); }
.wp-block-table table { overflow: hidden; border: 1px solid var(--if-stone); border-radius: var(--if-radius-control); border-collapse: separate; border-spacing: 0; }
.wp-block-table tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* ---------- Header ---------- */

header.wp-block-template-part:has(.if-site-header) {
  position: sticky;
  z-index: 50;
  top: var(--wp-admin--admin-bar--height, 0px);
  transition: box-shadow .2s ease;
}
body.if-scrolled header.wp-block-template-part:has(.if-site-header) { box-shadow: 0 6px 24px color-mix(in srgb, var(--if-navy) 22%, transparent); }
@media (max-width: 600px) {
  header.wp-block-template-part:has(.if-site-header) { top: 0; }
}

.if-site-header { border-bottom: var(--if-hairline) solid var(--if-brass); }
.if-header-row { min-height: 72px; gap: 1.25rem; }
.if-brand { gap: .7rem; }
.if-brand .wp-block-site-logo img { width: 48px; height: auto; }
.if-site-header .wp-block-site-title { margin: 0; line-height: 1.1; }
.if-site-header .wp-block-site-title a { color: var(--if-white); text-decoration: none; }
.if-header-nav { flex: 1 1 auto; }
.if-site-header .wp-block-navigation a { color: var(--if-white); text-decoration: none; }
.if-site-header .wp-block-navigation-item__content { padding-block: .5rem; border-bottom: 2px solid transparent; }
.if-site-header .wp-block-navigation-item__content:hover,
.if-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.if-site-header .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--if-brass); }
.if-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  padding-top: 2.5rem;
}
.if-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  gap: 1.25rem;
}
.if-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--if-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.if-header-actions { gap: .75rem; }
.if-header-cta .wp-block-button__link { padding: .7rem 1.15rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.if-whatsapp-link { margin: 0; }
.if-whatsapp-link .wp-social-link { font-size: 22px; }
.if-whatsapp-link .wp-social-link a { padding: .35rem; }
.if-whatsapp-link .wp-social-link:hover { color: var(--if-brass); transform: none; }

@media (max-width: 781px) {
  .if-header-row { min-height: 64px; gap: .75rem; }
  .if-brand:has(.wp-block-site-logo img) .wp-block-site-title { display: none; }
  .if-brand .wp-block-site-title { font-size: 1.05rem; }
  .if-header-nav { order: 3; flex: 0 0 auto; }
  .if-header-row > .if-header-actions { order: 2; margin-left: auto !important; }
  .if-header-cta .wp-block-button__link { padding: .6rem .9rem; }
}

/* ---------- Page banner (featured image + title + excerpt) ---------- */

/* Photo sections: the inner container's root padding sets the side gutter so text lines up with the header. */
.wp-block-cover:is(.if-page-banner, .if-hero) { padding-inline: 0; }
.wp-block-cover:is(.if-page-banner, .if-hero) > .wp-block-cover__inner-container {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}
.if-page-banner.wp-block-cover { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
/* Without a featured image the banner is solid navy. */
.if-page-banner:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background { opacity: 1; background-color: var(--if-navy); }
.if-page-banner .if-page-banner-inner { padding-inline: 0; }
.if-page-banner .if-page-title { margin: 0; font-size: var(--wp--preset--font-size--xx-large); }
.if-page-banner .if-page-intro { max-width: 36rem; margin-top: .75rem; font-size: 1.125rem; }
.if-page-banner .if-page-intro p { margin: 0; }
.if-page-banner .if-page-intro .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 781px) {
  .if-page-banner.wp-block-cover { min-height: 220px !important; }
}

/* ---------- Page shells ---------- */

.if-page-shell { padding-bottom: var(--wp--preset--spacing--60); }
.if-page-shell > .if-page-content { margin-top: var(--wp--preset--spacing--50); }
.if-front-shell > .if-page-content { margin-top: 0; }
/* Full-width home sections sit flush against each other. */
.if-page-content > .alignfull + .alignfull,
.if-front-shell > .if-page-content > .alignfull:first-child { margin-block-start: 0; }
.if-page-content > .alignfull:last-child { margin-block-end: 0; }
.if-reading-shell,
main.if-page-shell:not(:has(> .if-page-banner)) { padding-top: var(--wp--preset--spacing--50); }
.if-page-title { margin-block: .25rem 1.25rem; }
.if-page-content :is(h2, h3) { margin-top: 2rem; }

/* ---------- Home: hero ---------- */

.wp-block-cover.if-hero { padding-block: clamp(3.5rem, 8vw, 6rem); }
.if-hero h1 { margin-block: .5rem 1rem; max-width: 12em; }
.if-hero-copy { max-width: 34rem; font-size: 1.125rem; }
.if-hero-note { max-width: 34rem; color: color-mix(in srgb, var(--if-white) 82%, transparent); font-size: .9375rem; }
.if-hero .wp-block-buttons { margin-top: 1.5rem; }
.if-search-card { color: var(--if-charcoal); }
.if-search-card h2 { margin-bottom: .35rem; }
.if-search-card > p { margin-top: 0; }
@media (max-width: 781px) {
  .wp-block-cover.if-hero { min-height: 0 !important; padding-block: 3rem 2rem; }
  .if-hero-copy { font-size: 1rem; }
  .if-hero-columns { gap: 1.75rem; }
}

/* ---------- Home: USP strip ---------- */

.if-usp-strip { border-bottom: 1px solid var(--if-stone); }
.if-usp-strip > .wp-block-columns { gap: 0; margin-block: 0; }
.if-usp { display: flex; gap: .9rem; align-items: flex-start; padding: 1.4rem 1.25rem; border-right: 1px solid var(--if-stone); }
.if-usp:last-child { border-right: 0; }
.if-usp > * { margin: 0 !important; }
.if-usp-icon { flex: 0 0 32px; }
.if-usp p { color: var(--if-slate); font-size: .9375rem; line-height: 1.45; }
.if-usp strong { color: var(--if-navy); font-size: 1rem; }
@media (max-width: 781px) {
  .if-usp { border-right: 0; border-bottom: 1px solid var(--if-stone); padding-inline: 0; }
  .if-usp:last-child { border-bottom: 0; }
}
@media (min-width: 782px) and (max-width: 1100px) {
  .if-usp-strip > .wp-block-columns { flex-wrap: wrap !important; }
  .if-usp { flex-basis: 50% !important; }
  .if-usp:nth-child(2) { border-right: 0; }
}

/* ---------- Sections & card grids ---------- */

.if-section { padding-block: var(--wp--preset--spacing--60); }
.if-section > .alignwide:first-child h2 { margin-top: .35rem; }
.if-card-grid { align-items: stretch; margin-top: var(--wp--preset--spacing--40); }
.if-card-grid > .wp-block-column { display: flex; flex-direction: column; }
.if-card-grid > .wp-block-column > .wp-block-group.is-style-card,
.if-card-grid > .wp-block-column > .wp-block-cover { flex: 1 1 auto; }
@media (min-width: 782px) and (max-width: 1100px) {
  .if-card-grid { flex-wrap: wrap !important; }
  .if-card-grid > .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}

.if-stars { margin: 0; color: var(--if-teal); font-size: 1.1rem; letter-spacing: .15em; }
.if-review-author { margin-top: auto; color: var(--if-slate); font-size: .875rem; font-weight: 700; }
.if-review { display: flex; flex-direction: column; }

.if-cta.wp-block-group { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem); border-radius: var(--if-radius); box-shadow: var(--if-shadow-lifted); }

/* ---------- Footer ---------- */

footer.wp-block-template-part { margin-block-start: 0; }
.if-site-footer { border-top: var(--if-hairline) solid var(--if-brass); color: rgba(255,255,255,.8); }
.if-site-footer a:not(.wp-block-button__link) { color: var(--if-white); }
.if-site-footer .if-footer-heading { color: var(--if-white); font-size: 1.25rem; }
.if-footer-main { padding-block: var(--wp--preset--spacing--50); gap: 2rem; }
.if-footer-mark { color: var(--if-white); font-family: var(--if-heading); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.1; }
.if-footer-whatsapp .wp-social-link { border-radius: var(--wp--custom--radius--pill); }
.if-footer-whatsapp .wp-social-link a { min-height: 44px; padding: .65rem 1.1rem !important; font-size: .9375rem; font-weight: 700; }
.if-footer-whatsapp.has-visible-labels .wp-block-social-link-label { font-size: .9375rem; }
.if-footer-whatsapp .wp-social-link svg { width: 1.2em; height: 1.2em; }
.if-footer-small { padding-block: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; }
.if-footer-small p { margin: 0; }

/* ---------- Posts ---------- */

.if-post-grid .wp-block-post-featured-image { margin: calc(-1 * clamp(1.25rem, 2.5vw, 1.75rem)) calc(-1 * clamp(1.25rem, 2.5vw, 1.75rem)) 1rem; overflow: hidden; border-radius: var(--if-radius) var(--if-radius) 0 0; }
.if-post-grid .wp-block-post-title a { color: var(--if-navy); text-decoration: none; }

/* ---------- RentSyst: fleet catalog ---------- */

.if-catalog-shell #rentsyst_page { width: 100%; margin-inline: auto; }
.if-catalog-shell #rentsyst_page > .flex { display: block; }
.if-catalog-shell .calculate__content { width: 100%; }

.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.results__title { margin: 0; color: var(--if-navy); font-family: var(--if-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.results__count {
  display: inline-grid;
  min-width: 1.8rem;
  height: 1.8rem;
  margin-left: .35rem;
  place-items: center;
  border-radius: 999px;
  background: var(--if-stone);
  color: var(--if-navy);
  font-size: .8125rem;
}

.rentsyst-container-catalog { display: block !important; width: 100%; }
.results__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 1280px) { .results__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 781px) { .results__items { grid-template-columns: 1fr; gap: 1.25rem; } }

.rentsyst-catalog-item {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--if-stone) !important;
  border-radius: var(--if-radius);
  background: var(--if-white);
  box-shadow: var(--if-shadow);
}
.rentsyst-catalog-item > p { display: none; }
.rentsyst-catalog-item-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr auto;
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.rentsyst-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--if-stone);
  background: var(--if-sand);
}
.rentsyst-image-box > p,
.rentsyst-image-box > p > a { display: block; width: 100%; height: 100%; margin: 0; }
.rentsyst-image-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rentsyst-image-box.if-no-fleet-image,
.rentsyst-image-box[hidden] { display: none !important; }

.if-badge {
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: var(--if-stone);
  color: var(--if-navy);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
}
.rentsyst-image-box .if-badge { position: absolute; z-index: 1; top: .85rem; left: .85rem; }
.rentsyst-options > .if-badge { justify-self: start; margin-bottom: .25rem; }

.rentsyst-options {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .6rem 1.1rem;
  min-width: 0;
  padding: 1.25rem 1.35rem 1.1rem;
}
.rentsyst-options > p { min-width: 0; margin: 0; }
.rentsyst-options > p:first-child,
.rentsyst-options > .if-vehicle-name {
  flex: 1 0 100%;
  margin-bottom: .35rem;
  color: var(--if-navy);
  font-family: var(--if-heading);
  font-size: 1.5rem !important;
  font-weight: 600;
  line-height: 1.15;
}
.rentsyst-options > p:first-child a { color: var(--if-navy) !important; text-decoration: none; }
.rentsyst-options > p:first-child strong { font-weight: 600; }
.rentsyst-options > p:not(:first-child) { padding: 0; border-radius: 0; background: none; color: var(--if-slate); font-size: .9375rem; line-height: 1.35; }
.rentsyst-options > p:not(:first-child) strong { color: var(--if-charcoal); font-weight: 400; }
.if-spec { display: inline-flex; align-items: center; gap: .45rem; }
.if-spec::before {
  content: "";
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--if-teal);
  -webkit-mask: var(--if-spec-icon) center / contain no-repeat;
  mask: var(--if-spec-icon) center / contain no-repeat;
}
.if-spec--passengers { --if-spec-icon: var(--if-icon-seat); }
.if-spec--luggage { --if-spec-icon: var(--if-icon-bag); }
.if-spec--transmission { --if-spec-icon: var(--if-icon-gear); }
.if-spec--doors { --if-spec-icon: var(--if-icon-door); }
.if-spec--air { --if-spec-icon: var(--if-icon-snow); }

.rentsyst-catalog-item-wrap > .wp-block-column:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label cta"
    "price cta"
    ". details";
  gap: .1rem 1rem;
  align-items: center;
  margin: 0 1.35rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--if-stone);
  width: auto;
}
.rentsyst-catalog-item-wrap > .wp-block-column:last-child > p { margin: 0; text-align: left !important; }
.rentsyst-catalog-item-wrap > .wp-block-column:last-child > p:first-of-type {
  grid-area: label;
  color: var(--if-slate) !important;
  font-size: .8125rem !important;
}
.rentsyst-catalog-item-wrap > .wp-block-column:last-child > p:nth-of-type(2) {
  grid-area: price;
  color: var(--if-navy);
  font-family: var(--if-heading);
  font-size: 2rem !important;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}
.rentsyst-catalog-item-wrap > .wp-block-column:last-child > p:nth-of-type(2) strong { color: var(--if-navy); font-weight: 600; }
.if-per-day { margin-left: .3rem; color: var(--if-slate); font-family: var(--if-body); font-size: .9375rem; font-weight: 400; }
.rentsyst-catalog-item-wrap > .wp-block-column:last-child .wp-block-spacer { display: none; }

.rentsyst-btn { float: none !important; width: auto; margin: 0 !important; }
.rentsyst-btn:not(.rentsyst-booking):not(.if-booking-action) { grid-area: details; justify-self: center; }
.rentsyst-booking,
.if-booking-action { grid-area: cta; }
.rentsyst-btn .wp-block-button__link {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: .7rem 1.35rem;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--if-brass) !important;
  color: var(--if-navy) !important;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.rentsyst-btn .wp-block-button__link:hover,
.rentsyst-btn .wp-block-button__link:focus-visible { background: var(--if-brass-hover) !important; }
.rentsyst-btn:not(.rentsyst-booking):not(.if-booking-action) .wp-block-button__link {
  min-height: 36px;
  padding: .35rem .25rem;
  background: transparent !important;
  color: var(--if-teal) !important;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.rentsyst-btn:not(.rentsyst-booking):not(.if-booking-action) .wp-block-button__link:hover { background: transparent !important; color: var(--if-navy) !important; }

/* Filters: pill toggle + slide-in drawer on mobile, inline bar on desktop. */
.if-filter-toggle,
.if-filter-close {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .6rem 1.15rem;
  border: 1.5px solid var(--if-teal);
  border-radius: 999px;
  background: var(--if-white);
  color: var(--if-teal);
  font-family: var(--if-body);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.if-filter-toggle::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  -webkit-mask: var(--if-icon-filter) center / contain no-repeat;
  mask: var(--if-icon-filter) center / contain no-repeat;
}
.if-filter-toggle:hover,
.if-filter-toggle[aria-expanded="true"] { border-color: var(--if-navy); background: var(--if-navy); color: var(--if-white); }
.if-filter-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--if-stone);
}
.if-filter-drawer-head strong { color: var(--if-navy); font-family: var(--if-heading); font-size: 1.25rem; font-weight: 600; }

.if-catalog-shell .rentsyst-wrap-filters .aside,
.rentsyst-wrap-filters .aside { border: 0; border-radius: 0; background: var(--if-white); }
.filter { border-bottom-color: var(--if-stone) !important; }
.filter__title { color: var(--if-navy) !important; font-weight: 700; text-decoration: none; }
.filter input[type="checkbox"] { accent-color: var(--if-teal); }
.rentsyst-filter-submit,
.rentsyst-wrap-filters button[type="submit"] {
  min-height: 44px;
  padding: .7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--if-brass) !important;
  color: var(--if-navy) !important;
  font-weight: 700;
}
.if-filter-backdrop {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: color-mix(in srgb, var(--if-navy) 50%, transparent);
  cursor: default;
}
body.if-filters-open { overflow: hidden; }
body.if-filters-open .if-filter-backdrop { display: block; }

@media (max-width: 1023px) {
  .if-catalog-shell .rentsyst-wrap-filters {
    position: fixed;
    z-index: 100001;
    top: 0;
    right: 0 !important;
    bottom: 0;
    left: auto !important;
    width: min(390px, 92vw) !important;
    max-width: none !important;
    margin: 0;
    overflow-y: auto;
    background: var(--if-white);
    box-shadow: -18px 0 50px color-mix(in srgb, var(--if-navy) 20%, transparent);
    transform: translateX(105%);
    transition: transform .24s ease;
  }
  .if-catalog-shell .rentsyst-wrap-filters.is-open { transform: translateX(0); }
  .if-catalog-shell .rentsyst-wrap-filters .aside { min-height: 100%; padding: 1.25rem; }
  .if-catalog-shell .rentsyst-wrap-filters .filter { padding-block: .85rem; border-bottom: 1px solid var(--if-stone); }
  .if-catalog-shell .rentsyst-wrap-filters .filter__item { display: flex; align-items: center; gap: .5rem; min-height: 32px; }
  .if-catalog-shell .rentsyst-wrap-filters #js_filter-form > :not(.rentsyst-wrap-filter-options) { margin-top: 1rem; }
}

@media (min-width: 1024px) {
  .if-catalog-shell .rentsyst-wrap-filters {
    position: static;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.5rem;
    transform: none;
  }
  .if-catalog-shell .rentsyst-wrap-filters .aside {
    position: static !important;
    width: auto !important;
    padding: .75rem 1rem;
    border: 1px solid var(--if-stone);
    border-radius: var(--if-radius);
    box-shadow: var(--if-shadow);
  }
  .if-catalog-shell .rentsyst-wrap-filter-options,
  .if-catalog-shell #js_filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
  }
  .if-catalog-shell .rentsyst-wrap-filter-options {
    flex: 1 1 auto;
    flex-direction: row !important;
  }
  .if-catalog-shell .rentsyst-wrap-filters :is(.aside, .filters, #js_filter-form, .rentsyst-wrap-filter-options) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .if-catalog-shell #js_filter-form > :not(.rentsyst-wrap-filter-options) { flex: 0 0 auto; }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter {
    width: auto !important;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0 !important;
  }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter__title {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .5rem .95rem;
    border: 1.5px solid var(--if-teal);
    border-radius: 999px;
    color: var(--if-teal) !important;
    font-size: .875rem;
    white-space: nowrap;
  }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter__title .fico { display: none; }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter__title::after {
    content: "";
    width: .9rem;
    height: .9rem;
    background: currentColor;
    -webkit-mask: var(--if-icon-chevron) center / contain no-repeat;
    mask: var(--if-icon-chevron) center / contain no-repeat;
  }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter.is-open > .filter__title,
  .if-catalog-shell .rentsyst-wrap-filter-options .filter:has(input:checked) > .filter__title {
    border-color: var(--if-navy);
    background: var(--if-navy);
    color: var(--if-white) !important;
  }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter__dropdown {
    position: absolute;
    z-index: 20;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 15rem;
    padding: 1rem;
    border: 1px solid var(--if-stone);
    border-radius: var(--if-radius-control);
    background: var(--if-white);
    box-shadow: var(--if-shadow-lifted);
  }
  .if-catalog-shell .rentsyst-wrap-filter-options .filter:not(.is-open) > .filter__dropdown { display: none !important; }
  .if-catalog-shell .rentsyst-wrap-filters:not(.is-open) .filter:not(.if-key-filter) { display: none; }
  .if-filter-drawer-head { display: none; }
  body.if-filters-open { overflow: visible; }
  body.if-filters-open .if-filter-backdrop { display: none; }
}
.filter__list { margin: 0; padding: 0; list-style: none; }
.rentsyst-wrap-filters .ui-slider-range { background: var(--if-teal) !important; }
.rentsyst-wrap-filters .ui-slider-handle { border-color: var(--if-teal) !important; background: var(--if-white) !important; }
.rentsyst-wrap-filters .range-out { color: var(--if-navy); font-weight: 700; }

/* ---------- RentSyst: vehicle detail ---------- */

.if-vehicle-shell { padding-top: var(--wp--preset--spacing--50); }
.if-vehicle-title { margin-block: .25rem 1.5rem; }
body.single-vehicle .rentsyst-catalog-item {
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.single-vehicle .rentsyst-catalog-item > .wp-block-columns:first-of-type {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin: 0;
}
body.single-vehicle .rentsyst-catalog-item-wrap,
body.single-vehicle .rentsyst-paragraph { width: auto; min-width: 0; margin: 0 !important; padding: 0 !important; }
body.single-vehicle .rentsyst-catalog-item-wrap { display: block !important; }
body.single-vehicle .gallery__main {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--if-stone);
  border-radius: var(--if-radius);
  background: var(--if-white);
}
body.single-vehicle .gallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.single-vehicle .gallery { height: auto !important; }
body.single-vehicle .gallery__thumbnails { position: static !important; max-width: 100%; margin-top: .75rem; overflow: hidden; }
body.single-vehicle .gallery__main img,
body.single-vehicle .gallery__thumbnails img { max-width: 100%; }
body.single-vehicle .gallery__thumbnails img { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--if-stone); border-radius: var(--if-radius-control); }
body.single-vehicle .gallery__thumbnails:not(.slick-initialized) { display: flex; flex-wrap: wrap; gap: .5rem; }
body.single-vehicle .gallery__thumbnails:empty,
body.single-vehicle .gallery__thumbnails .slick-track:empty { display: none; }
body.single-vehicle :is(.gallery__main, .gallery__thumbnails):is(.if-no-fleet-image, [hidden]) { display: none !important; }
body.single-vehicle .rentsyst-catalog-item-wrap > p.has-large-font-size { display: none; }

body.single-vehicle .rentsyst-catalog-item-wrap > .wp-block-columns.rentsyst-info-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem !important;
  border: 1px solid var(--if-stone) !important;
  border-radius: var(--if-radius) !important;
  background: var(--if-white) !important;
  box-shadow: none !important;
}
body.single-vehicle .rentsyst-info-box > .wp-block-column { display: grid; gap: 0; width: auto; padding: 0; border: 0 !important; }
body.single-vehicle .rentsyst-info-box .wp-block-group__inner-container { padding: 0 !important; border: 0 !important; background: transparent !important; }
body.single-vehicle .rentsyst-info-box p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .7rem 0 !important;
  border-bottom: 1px solid var(--if-stone);
  color: var(--if-slate);
  font-size: .9375rem;
  line-height: 1.45;
}
body.single-vehicle .rentsyst-info-box p strong { color: var(--if-navy); text-align: right; }
body.single-vehicle .rentsyst-catalog-item-wrap > .wp-block-group.rentsyst-info-box {
  margin: .75rem 0 0;
  padding: 0 1.5rem;
  border: 1px solid var(--if-stone);
  border-radius: var(--if-radius);
  background: var(--if-white);
}
body.single-vehicle .rentsyst-catalog-item-wrap > .wp-block-group.rentsyst-info-box p { border-bottom: 0; }
.rentsyst-color-badge {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--if-stone);
  border-radius: 50%;
  vertical-align: middle;
}

body.single-vehicle .rentsyst-paragraph {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
  align-self: start !important;
  height: auto !important;
  padding: 1.5rem !important;
  border: 1px solid var(--if-stone);
  border-radius: var(--if-radius);
  background: var(--if-white);
  box-shadow: var(--if-shadow-lifted);
}
body.single-vehicle .rentsyst-paragraph > p:first-child { margin: 0 0 .75rem; color: var(--if-navy); font-size: 1rem !important; text-align: left !important; }
body.single-vehicle .rentsyst-price-per-day { margin: 0; padding: 1.25rem !important; border-radius: var(--if-radius-control); background: var(--if-sand); color: var(--if-slate); }
body.single-vehicle .rentsyst-price-per-day p { margin: 0; text-align: left !important; }
body.single-vehicle .rentsyst-price-per-day p:first-child { color: var(--if-slate) !important; font-size: .8125rem !important; }
body.single-vehicle .rentsyst-price-per-day p + p { margin-top: .25rem; font-family: var(--if-heading); font-size: 2rem !important; }
body.single-vehicle .rentsyst-price-per-day :is(strong, h2, h3) { color: var(--if-navy); font-weight: 600; }
body.single-vehicle .rentsyst-paragraph .rentsyst-booking { float: none !important; width: 100%; margin: 1rem 0 0 !important; }
body.single-vehicle .rentsyst-paragraph .rentsyst-booking .wp-block-button__link {
  display: grid;
  width: 100%;
  min-height: 48px;
  place-items: center;
  border-radius: 999px !important;
  background: var(--if-brass) !important;
  color: var(--if-navy) !important;
  font-weight: 700;
}
body.single-vehicle .rentsyst-catalog-item > .wp-block-columns:nth-of-type(2) { margin: 2rem 0 0; }
body.single-vehicle .rentsyst-catalog-item > .wp-block-columns:nth-of-type(2).if-empty-description { display: none; }
.if-vehicle-content > .if-included,
.if-vehicle-shell .if-included { margin-top: 2rem; }

@media (max-width: 781px) {
  body.single-vehicle .rentsyst-catalog-item > .wp-block-columns:first-of-type { grid-template-columns: 1fr; }
  body.single-vehicle .rentsyst-paragraph { position: static; }
  body.single-vehicle .rentsyst-catalog-item-wrap > .wp-block-columns.rentsyst-info-box { grid-template-columns: 1fr; padding: .5rem 1.1rem !important; }
  body.single-vehicle .rentsyst-catalog-item-wrap > .wp-block-group.rentsyst-info-box { padding: 0 1.1rem; }
}

/* ---------- RentSyst: booking app ---------- */

.if-page-content:has(#rentsyst_frame) { max-width: 820px; margin-inline: auto; }
#rentsyst_frame {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--if-stone);
  border-radius: var(--if-radius);
  background: var(--if-white);
  box-shadow: var(--if-shadow);
}
