/* Page "Elements" builder — shared styles for all section templates.
   Scoped under .pgel-* classes so it never collides with the existing
   strip/theme CSS on pages still using the old builder. */

/* Faithful port of bubbles-2's "* { font-family: 'Roboto' }" reset — scoped
   to our new bubbles-2-matching sections (not a bare `*`/`body` selector)
   so it reliably wins against legacy rules elsewhere on this site (an old
   admin Custom-CSS block sets `body{font-family:Roboto,serif}`, and the old
   theme forces `h1-h6{font-family:Oswald}`) without touching any old
   Strip-built page content. */
.custom-navbar, .custom-navbar *,
.footer-section, .footer-section *,
.pgel-section, .pgel-section *,
.pickup-section, .pickup-section * {
  font-family: 'Roboto', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE-WIDE HEADER (navbar) + FOOTER — loaded on every page (faithful
   port of bubbles-2's .custom-navbar / .footer-section).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Navbar ── */
.custom-navbar {
  background-color: #006fd6;
  background-image: url("../../../images/homepage/navbar-bg.png");
  background-size: cover;
  background-position: center;
  padding: 14px 0;
}
.navbar-brand img { height: 68px; }
.navbar-nav .nav-link { color: #fff; font-size: 14px; font-weight: 500; margin: 0 10px; transition: 0.3s; }
.navbar-nav .nav-link:hover { color: #d9ecff; }
.call-btn {
  background: linear-gradient(180deg, #1EA4FF, #006FD6);
  color: white; border: none; padding: 10px 24px; border-radius: 10px;
  font-size: 14px; font-weight: 600; transition: 0.3s; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.call-btn:hover { transform: translateY(-2px); }
.mobile-menu-btn { display: none; }

@media (max-width: 991.98px) {
  .mobile-menu-btn {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 44px; height: 44px; border-radius: 50%; background: #d9ecff !important;
    border: none; padding: 0; gap: 5px; box-shadow: none;
  }
  .mobile-menu-btn span { width: 18px; height: 2px; background: #006FD6; border-radius: 20px; display: block; }
  .custom-navbar { position: relative; z-index: 10000; }
  .navbar-collapse {
    position: fixed; top: 0; right: 0; width: min(320px, 88vw); height: 100vh; height: 100dvh;
    background: linear-gradient(150deg, #284aa4 0%, #003365 100%);
    border-radius: 24px 0 0 24px; padding: 56px 16px 24px; z-index: 10001; overflow-y: auto;
  }
  .mobile-nav-close {
    display: flex; align-items: center; justify-content: center; position: absolute;
    top: 14px; right: 16px; width: 32px; height: 32px; background: #006FD6; color: #fff;
    border: none; border-radius: 50%; font-size: 24px; line-height: 1; font-weight: 300;
    cursor: pointer; z-index: 2; padding: 0;
  }
  .mobile-nav-close span { display: block; margin-top: -2px; }
  .navbar-nav { width: 100%; margin-left: 0 !important; background: transparent !important; }
  .navbar-nav .nav-item { width: 100%; }
  .navbar-nav .nav-link {
    color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
    padding: 12px 14px; margin: 0 0 10px; font-size: 14px; background: rgba(255,255,255,.08);
  }
  .call-btn { width: 100%; min-height: 44px; }
}

/* ── Footer ── */
.footer-section {
  position: relative; background-color: #0a1628;
  background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url("../../../images/homepage/footer-bg.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding-top: 70px; padding-bottom: 0; color: #fff;
}
.footer-section h2, .footer-section h4, .footer-section p, .footer-section span, .footer-section .footer-badge { color: #fff; }
.footer-section .footer-about, .footer-section .footer-links a, .footer-section .footer-contact span, .footer-section .footer-bottom p { color: rgba(255,255,255,.88); }

.footer-cta {
  border: 1px solid rgba(255,255,255,.4); border-radius: 20px; padding: 32px 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 70px;
  background: rgba(255,255,255,.05); backdrop-filter: blur(8px);
}
.footer-badge {
  display: inline-block; border: 1px solid rgba(255,255,255,.5); border-radius: 50px;
  padding: 6px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; color: #fff;
}
.footer-cta h2 { font-size: 42px; font-weight: 800; margin-bottom: 14px; color: #fff; }
.footer-cta p { font-size: 18px; line-height: 1.7; max-width: 700px; margin-bottom: 0; color: rgba(255,255,255,.9); }
.footer-cta-buttons { display: flex; flex-direction: column; gap: 18px; }
.footer-primary-btn, .footer-outline-btn {
  width: 100%; max-width: 280px; min-height: 58px; height: auto; border-radius: 12px;
  font-size: 16px; font-weight: 700; transition: .3s; padding: 12px 20px;
  display: flex; align-items: center; justify-content: center; line-height: 1.3;
  text-align: center; white-space: normal; text-decoration: none;
}
.footer-primary-btn { border: none; background: linear-gradient(90deg, #1EA4FF, #006FD6); color: #fff; }
.footer-outline-btn { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }

.footer-content { padding-bottom: 45px; align-items: flex-start; }
.footer-content > [class*="col-"] { display: flex; flex-direction: column; }
.footer-logo { width: 180px; max-width: 100%; height: auto; display: block; object-fit: contain; margin-bottom: 24px; }
.footer-about { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.9; margin-bottom: 28px; }

.footer-socials { display: flex; gap: 14px; }
.footer-socials a, .footer-socials .footer-social-icon {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;
  text-decoration: none; transition: .3s;
}
.footer-socials a:hover { background: #006FD6; }
.footer-socials a.footer-social-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 6px 18px rgba(220,39,67,.28);
}
.footer-socials a img, .footer-socials .footer-social-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }

.footer-title { font-size: 28px; font-weight: 800; margin-bottom: 28px; color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 16px; }
.footer-links a { text-decoration: none; color: rgba(255,255,255,.85); font-size: 15px; transition: .3s; }
.footer-links a:hover { color: #fff; padding-left: 5px; }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.footer-contact-icon {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.footer-contact-icon .footer-icon, .footer-contact-icon .footer-mini-logo { width: 22px; height: 22px; object-fit: contain; margin: 0; }
.footer-contact-icon--whatsapp { background: rgba(37,211,102,.18); }
.footer-contact-icon--website { background: rgba(0,174,239,.18); }
.footer-contact i { color: #fff; font-size: 18px; margin-top: 4px; }
.footer-contact span, .footer-contact a { color: rgba(255,255,255,.9); line-height: 1.7; font-size: 15px; text-decoration: none; }
.footer-contact a:hover { color: #fff; }
.footer-mini-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.footer-contact li.footer-website { align-items: center; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding: 22px 0; text-align: center; }
.footer-bottom p { margin-bottom: 0; color: rgba(255,255,255,.85); font-size: 14px; }

@media(max-width: 767px){
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-cta-buttons { width: 100%; }
}

.pgel-section { padding: 60px 0; }

/* Bootstrap's real .container (1140/1320 max-width breakpoints) is used for
   Page Elements sections — matches bubbles-2 exactly instead of a flat cap.
   Only the padding is customized, same override bubbles-2 applies. */
.container { padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); }

.pgel-badge {
  display: inline-block; background: #d9ecff; color: #006FD6; border: 1px solid #006FD6;
  padding: 5px 35px; border-radius: 50px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; max-width: 100%; white-space: normal; line-height: 1.45; text-align: center;
  margin-bottom: 14px;
}
.pgel-heading { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #000; margin: 14px 0 12px; line-height: 1.2; overflow-wrap: anywhere; }
.pgel-heading span { color: #006FD6; }
.pgel-subheading { font-size: 15px; color: #777; max-width: 620px; margin: 12px auto 24px; }
.pgel-center { text-align: center; }

.pgel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: none; cursor: pointer;
}
.pgel-btn-primary { background: linear-gradient(90deg,#1EA4FF,#006FD6); color: #fff; }
.pgel-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.6); color: inherit; }
.pgel-btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Hero (faithful port of bubbles-2's .hero-section) ── */
.pgel-hero {
  min-height: 100vh; display: flex; align-items: center; color: #fff;
  background-color: #5a6a7a;
  background-repeat: no-repeat; background-size: cover; background-position: center center;
  position: relative; padding: 80px 0;
}
.pgel-hero .container { position: relative; z-index: 1; }
.pgel-hero-grid { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.pgel-hero-content { flex: 1 1 58%; min-width: 300px; color: #fff; }

.pgel-hero .pgel-badge {
  display: inline-block; border: 1px solid rgba(255,255,255,.4); border-radius: 50px;
  padding: 8px 18px; font-size: 13px; margin-bottom: 20px; backdrop-filter: blur(8px);
  max-width: 100%; white-space: normal; line-height: 1.4; background: transparent; color: #fff;
  text-transform: none; font-weight: 400;
}
.pgel-hero h1 { font-size: 58px; font-weight: 800; line-height: 1.1; margin-bottom: 25px; color: #fff; }
.pgel-hero h1 span { color: #006FD6; }
.pgel-hero p { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.92); max-width: 700px; margin-bottom: 35px; }

.pgel-hero .pgel-btn-row { display: flex; gap: 15px; flex-wrap: wrap; }
.pgel-hero .pgel-btn {
  padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: 15px;
  min-height: 48px; line-height: 1.3;
}
.pgel-hero .pgel-btn-primary { background: #006FD6; }

.pgel-hero-features { margin-top: 45px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pgel-hero-feature {
  background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9); border-radius: 14px;
  padding: 18px 15px; color: #1f2937; backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left;
}
@media(max-width:767px){ .pgel-hero-features { grid-template-columns: repeat(2, 1fr); } }
.pgel-hero-feature i { display: block; font-size: 22px; color: #006FD6; margin-bottom: 10px; }

/* ── Booking card (faithful port of bubbles-2's .booking-card, re-skinning
     renderLocationFields()'s own br-* markup to match) ── */
.pgel-hero-booking { flex: 1 1 38%; min-width: 300px; }
.pgel-hero-booking .booking-form-hp {
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-radius: 18px;
  padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,.25); text-align: left;
  max-width: none;
}
/* .br-search-card is normally a horizontal 72/28 bar (site-wide CSS in
   templates/boot-material/afterheader.php) — force it to stack vertically
   here since the hero card is narrow, not a full-width bar. */
.pgel-hero-booking .br-search-card { display: block; max-width: none; padding: 0; background: transparent; box-shadow: none; }
.pgel-hero-booking .search-fields-wrapper { display:flex; flex-direction:column; gap:16px; width:100%; padding-right:0; }
.pgel-hero-booking .br-search-grid2,
.pgel-hero-booking .br-search-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pgel-hero-booking .br-field { display:flex; flex-direction:column; }
.pgel-hero-booking .br-label { font-size:13px; font-weight:600; margin-bottom:8px; color:#111; text-transform:none; letter-spacing:normal; display:flex; align-items:center; gap:6px; }
.pgel-hero-booking .br-label .pgel-field-icon { color:#006FD6; font-size:14px; }
.pgel-hero-booking .br-input {
  height:48px; border-radius:10px; border:1px solid #dcdcdc; padding:0 14px; font-size:14px; color:#111; background:#fff;
}
.pgel-hero-booking .search-buttons-wrapper { width:100%; display:block; margin-top: 18px; }
.pgel-hero-booking .br-btn {
  width:100%; min-height:52px; height:auto; border:none; border-radius:10px; background:#006FD6;
  color:#fff; font-weight:600; font-size:16px; padding:12px 16px; box-shadow:none;
}
/* Default afterpay/shuttle blurb baked into renderLocationFields() is replaced
   by our own .pgel-booking-note (matches bubbles-2's single-line note). */
.pgel-hero-booking .br-side-info { display:none; }

.pgel-booking-age-note { display:flex; align-items:flex-start; gap:6px; font-size:12px; color:#444; margin:14px 0 10px; }
.pgel-booking-age-note i { flex:0 0 auto; color:#006FD6; font-size:14px; margin-top:1px; }

.pgel-booking-subtitle { color:#006FD6; font-size:14px; font-weight:700; text-transform:uppercase; margin-bottom:6px; }
.pgel-booking-title { font-size:30px; font-weight:700; margin-bottom:6px; color:#111; }
.pgel-booking-small { color:#006FD6; font-size:12px; font-weight:700; margin-bottom:25px; }
.pgel-booking-note { font-size:11px; color:#666; text-align:center; margin-top:12px; }

.pgel-hero-secondary-btn { background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); }

@media(max-width:991px){
  .pgel-hero { text-align: center; }
  .pgel-hero-grid { flex-direction: column; }
  .pgel-hero .pgel-btn-row { justify-content: center; }
  .pgel-hero-booking { margin-top: 30px; }
  .pgel-hero-booking .br-search-grid2 { grid-template-columns:1fr; }
  /* Keep date + time paired on the same row even on mobile/tablet. */
  .pgel-hero-booking .br-search-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .pgel-hero-booking .br-search-grid .br-input { padding:0 8px; font-size:13px; }
}
@media(max-width:576px){
  .pgel-hero h1 { font-size: 34px; }
  .pgel-hero p { font-size: 15px; }
}

/* ── Trusted customers slider (faithful port of bubbles-2's .customerSwiper) ── */
.customerSwiper { overflow:hidden; height:clamp(230px,32vw,370px) !important; max-height:clamp(230px,32vw,370px); padding-bottom:0; margin:26px 0 0; }
.customerSwiper .swiper-slide { border-radius:22px; overflow:hidden; height:100%; }
.customerSwiper .swiper-slide img { display:block; width:100%; height:100%; object-fit:cover; border-radius:22px; }
.customerSwiper .swiper-wrapper { align-items:stretch; height:100% !important; }
@media(max-width:991px){ .customerSwiper { height:300px !important; max-height:300px; } }
@media(max-width:576px){ .customerSwiper { height:240px !important; max-height:240px; } }

/* ── Vehicle showcase (faithful port of bubbles-2's .vehicle-card system) ── */
.pgel-vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 24px; margin-top: 30px; }

.vehicle-card {
  background:#ffffff; border-radius:18px; overflow:visible; box-shadow:0 6px 20px rgba(0,0,0,.12);
  border:1px solid #e5e5e5; position:relative; display:flex; flex-direction:column; height:100%; width:100%;
}
.vehicle-card-unavailable { pointer-events:none; user-select:none; }
.vehicle-card-overlay { position:absolute; inset:0; background:rgba(255,255,255,.08); pointer-events:none; z-index:1; }

.vehicle-img-wrap { position:relative; overflow:hidden; border-radius:18px 18px 0 0; }
.vehicle-gallery { min-height:220px; }
.vehicle-gallery-image { display:none; width:100%; height:220px; object-fit:cover; }
.vehicle-gallery-image.is-active { display:block; }
.vehicle-gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:#006fd6; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:2; cursor:pointer;
}
.vehicle-gallery-nav.hide { display:none; }
.vehicle-gallery-prev { left:8px; }
.vehicle-gallery-next { right:8px; }

.vehicle-body { padding:18px; position:relative; z-index:2; display:flex; flex-direction:column; flex:1 1 auto; overflow:visible; }
.vehicle-body h5 { font-size:17px; font-weight:800; margin-bottom:8px; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.vehicle-body .d-flex { display:flex; gap:8px; justify-content:space-between; align-items:flex-start; }
.info-badge {
  border:1px solid #006FD6; color:#006FD6; border-radius:50px; padding:3px 13px; font-size:11px; font-weight:600;
  flex:0 0 auto; white-space:nowrap; text-decoration:none;
}
.info-badge:hover, .info-badge:focus { color:#006FD6; background:#eaf4ff; }
.vehicle-body p { font-size:13px; color:#666; margin-bottom:14px; }

.fuel-box { display:flex; justify-content:flex-end; align-items:center; gap:8px; color:#70b62c; font-size:12px; font-weight:700; margin-bottom:15px; min-height:22px; }
.fuel-box-badge { display:inline-flex; align-items:center; gap:8px; }
.fuel-efficiency-icon { display:block; width:auto !important; height:22px !important; max-height:22px; object-fit:contain; flex-shrink:0; }

.vehicle-features { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.vehicle-features div { background:#f8fbff; border:1px solid #d9ecff; border-radius:12px; padding:12px 8px; text-align:center; }
.vehicle-features i { color:#006FD6; font-size:18px; display:block; margin-bottom:5px; }
.vehicle-feature-icon { display:block; margin:0 auto 5px; color:#006FD6; }
.vehicle-feature-icon svg { width:18px; height:18px; display:block; margin:0 auto; }
.vehicle-features span { font-size:12px; color:#333; font-weight:600; }

.vehicle-price-panel { position:relative; z-index:4; margin-bottom:14px; }
.vehicle-price-total-row { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.vehicle-price-total-amount { font-size:32px; font-weight:800; line-height:1; color:#111827; font-variant-numeric:tabular-nums; letter-spacing:-0.03em; }
.vehicle-price-total-label { font-size:11px; font-weight:800; letter-spacing:.05em; color:#111827; text-transform:uppercase; position:relative; top:-2px; }
.vehicle-price-daily-row { display:flex; align-items:center; gap:10px; position:relative; }
.vehicle-price-info-wrap { position:relative; flex:0 0 auto; }
.vehicle-price-daily-rate { font-size:15px; font-weight:700; letter-spacing:.01em; color:#006FD6; text-transform:uppercase; line-height:1.2; }

.vehicle-price-info-btn {
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0;
  border:1px solid #b8c0cc; border-radius:50%; background:transparent; color:#9ca3af; cursor:pointer; line-height:1; flex:0 0 22px;
}
.vehicle-price-info-btn:hover, .vehicle-price-info-btn[aria-expanded="true"] { border-color:#006FD6; color:#006FD6; }
.vehicle-price-info-icon {
  display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:12px; font-weight:400; font-style:normal; font-family:Georgia,"Times New Roman",serif; line-height:1; text-transform:lowercase;
}
.vehicle-price-popover {
  position:absolute; top:calc(100% + 10px); right:0; width:300px; max-width:min(300px, calc(100vw - 32px));
  z-index:40; display:none; background:#fff; border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.18); padding:16px 16px 14px;
}
.vehicle-price-popover.is-open { display:block; }
.vehicle-price-popover.is-flip-left { right:auto; left:0; }
.vehicle-card.vehicle-card-price-open { position:relative; z-index:30; }
.vehicle-price-summary-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.vehicle-price-summary-header strong { font-size:14px; font-weight:800; letter-spacing:.05em; color:#111827; }
.vehicle-price-summary-close { border:0; background:transparent; color:#6b7280; font-size:26px; line-height:1; padding:0; cursor:pointer; }
.vehicle-price-summary-lines { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.vehicle-price-summary-line { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; font-size:13px; color:#374151; line-height:1.4; }
.vehicle-price-summary-line-label { flex:1 1 auto; min-width:0; font-weight:500; }
.vehicle-price-summary-line-amount { flex-shrink:0; font-weight:700; color:#111827; font-variant-numeric:tabular-nums; }
.vehicle-price-summary-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; border-top:1px solid #e5e7eb; font-size:14px; color:#111827; }
.vehicle-price-summary-footer strong { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }

.vehicle-btn-row { display:flex; flex-wrap:wrap; gap:10px; width:100%; margin-top:auto; align-items:stretch; }
.vehicle-btn-row > .availability-btn, .vehicle-btn-row > .details-btn { flex:1 1 calc(50% - 5px); min-width:0; max-width:100%; }
.availability-btn, .details-btn {
  text-decoration:none; display:flex; align-items:center; justify-content:center; box-sizing:border-box; text-align:center;
  min-height:48px; height:auto; border-radius:10px; font-size:13px; font-weight:700; padding:12px 10px;
  white-space:normal; line-height:1.3; overflow-wrap:anywhere; word-break:break-word;
}
.availability-btn { background:linear-gradient(90deg,#16a8f5,#006FD6); color:#fff; border:none; }
.availability-btn:hover, .availability-btn:focus, .availability-btn:active { color:#fff; }
.availability-btn.disabled { background:#9aa3ad; color:#fff; pointer-events:none; cursor:not-allowed; }
.details-btn { background:#ffffff; color:#006fd6; border:1px solid #006fd6; }
.details-btn:hover, .details-btn:focus, .details-btn:active { color:#006fd6; background:#eaf4ff; }
.vehicle-available-from { margin-top:12px; color:#1f6fd1; font-size:13px; font-weight:500; line-height:1.45; text-align:center; }

/* ── Why choose us / Explore cards ── */
.pgel-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; margin-top: 30px; }
.pgel-icon-card { background:#fff; border:1px solid #e5e5e5; border-radius:14px; padding:26px 22px; box-shadow:0 5px 15px rgba(0,0,0,.06); }
.pgel-icon-card .pgel-icon { width:46px; height:46px; border-radius:12px; background:#d9ecff; color:#006FD6; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.pgel-icon-card h5 { font-size:17px; font-weight:800; margin-bottom:8px; }
.pgel-icon-card p { color:#666; font-size:14px; line-height:1.6; margin:0; }

/* ── FAQ ── */
.pgel-faq { max-width: 900px; margin: 30px auto 0; }
.pgel-faq-item { border:1px solid #e5e5e5; border-radius:12px; margin-bottom:14px; overflow:hidden; }
.pgel-faq-q { width:100%; text-align:left; background:#fff; border:none; padding:18px 22px; font-size:16px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.pgel-faq-q i { transition: transform .2s ease; flex-shrink:0; }
.pgel-faq-item.open .pgel-faq-q i { transform: rotate(180deg); }
.pgel-faq-a { display:none; padding:0 22px 18px; color:#666; font-size:14px; line-height:1.7; }
.pgel-faq-item.open .pgel-faq-a { display:block; }

/* ── CTA banner ── */
.pgel-cta {
  border-radius:22px; padding:44px; color:#fff; background:linear-gradient(135deg,#0a1628,#0d2a4a); background-size:cover; background-position:center;
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.pgel-cta h2 { font-size:32px; font-weight:800; margin:0 0 10px; color:#fff; }
.pgel-cta p { color:rgba(255,255,255,.88); font-size:16px; margin:0 0 18px; max-width:560px; }

/* ── Explore cards bottom CTA (faithful port of bubbles-2's .explore-cta / .explore-btn) ── */
.explore-cta {
  margin-top: 45px; background: #ffffff; border: 1px solid #dce3eb; border-radius: 18px;
  padding: 30px 34px; box-shadow: 0 5px 15px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: space-between; gap: 25px;
}
.explore-cta h3 { font-size: 40px; font-weight: 900; margin-bottom: 10px; color: #000; }
.explore-cta p { margin: 0; color: #444; font-size: 18px; }
.explore-btn {
  min-width: 0; min-height: 56px; height: auto; border: none; border-radius: 12px;
  background: linear-gradient(90deg, #1EA4FF, #006FD6); color: #ffffff; font-size: clamp(14px,2.5vw,16px);
  font-weight: 700; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.3; text-align: center; white-space: normal; max-width: 100%; text-decoration: none; flex-shrink: 0;
}
@media (max-width: 991px) {
  .explore-cta { flex-direction: column; align-items: stretch; }
  .explore-cta .explore-btn { width: 100%; align-self: stretch; }
  .explore-cta h3 { font-size: 32px; }
}

/* ── Trusted / slider ── */
.pgel-slider-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin-top:26px; }
.pgel-slider-track img { scroll-snap-align:start; width:260px; height:180px; object-fit:cover; border-radius:16px; flex-shrink:0; }

/* ── Pickup info (verbatim bubbles-2 .pickup-section) ── */
.pickup-section { background: #f5f8fc; }

.pickup-card, .map-box, .accordion-box, .terminal-card, .airport-shuttle-card {
  background: #ffffff; border: 1px solid #dce3eb; border-radius: 14px; box-shadow: 0 5px 16px rgba(0,0,0,.06);
}
.pickup-card { padding: 24px; }
.pickup-card h5, .terminal-card h5 { font-size: 17px; font-weight: 800; }
.pickup-card p, .terminal-card p, .pickup-instructions p, .airport-text p { color: #666; font-size: 14px; line-height: 1.7; }

.info-box { padding: 16px; border-radius: 12px; background: #f8fbff; border: 1px solid #dce3eb; min-height: 95px; }
.info-box.active { background: #006FD6; color: #fff; }
.info-box small { display: block; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.info-box strong { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

.map-box { min-height: 260px; background: #e9f1fb; border-radius: 14px; overflow: hidden; }
.map-box iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

.accordion-box { padding: 0; overflow: hidden; overflow-wrap: anywhere; }
.instruction-toggle {
  width: 100%; border: 0; background: transparent; color: #000; padding: 20px; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; cursor: pointer;
  max-width: 100%; white-space: normal; line-height: 1.3;
}
.instruction-toggle:focus-visible { outline: 2px solid #006FD6; outline-offset: -4px; }
.instruction-toggle i { flex: 0 0 auto; font-size: 20px; transition: transform .2s ease; }
.accordion-box.open .instruction-toggle i { transform: rotate(180deg); }
.instruction-content { display: none; padding: 0 20px 20px; }
.accordion-box.open .instruction-content { display: block; }
.instruction-content p { color: #666; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.accordion-box ul { margin-bottom: 0; padding-left: 18px; color: #666; font-size: 14px; }

.pickup-instructions h3 { font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.terminal-card { padding: 22px; }
.terminal-map { width: 100%; height: auto; display: block; margin-top: 18px; border-radius: 14px; object-fit: contain; background: #e9f1fb; }

.airport-shuttle-card { overflow: hidden; }
.airport-shuttle-card img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.airport-text { padding: 30px; }
.airport-text h4 { font-size: 24px; font-weight: 800; }

@media (max-width: 767.98px) {
  .pickup-instructions h3 { font-size: 24px; line-height: 1.25; }
  .airport-shuttle-card img { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .airport-text { padding: 24px; }
}
@media (max-width: 575.98px) {
  .pickup-card, .terminal-card { padding: 18px; }
  .info-box { min-height: auto; }
}

/* ── Reviews ── */
.pgel-reviews-embed { min-height:120px; }

@media(max-width:768px){
  .pgel-heading { font-size:26px; }
  .pgel-hero h1 { font-size:32px; }
  .pgel-pickup-grid { grid-template-columns:1fr; }
  .pgel-splitgrid { grid-template-columns:1fr !important; direction:ltr !important; }
  .pgel-splitgrid > div { order:initial !important; direction:ltr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Vehicle detail page (verbatim bubbles-2 new-ui/components/styles-vehicle-detail.php)
   ═══════════════════════════════════════════════════════════════════ */
.car-detail-section { padding: 80px 0; background: linear-gradient(135deg, #fff3f8 0%, #fff8df 45%, #eef5ff 100%); }
.car-detail-wrapper { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 35px; align-items: stretch; }
.car-gallery { background: rgba(255,255,255,.75); padding: 18px; border-radius: 28px; box-shadow: 0 20px 55px rgba(0,64,160,.12); backdrop-filter: blur(12px); }
.main-car-img { position: relative; overflow: hidden; border-radius: 24px; height: 330px; }
.main-car-img img, .thumb-grid img { width: 100%; height: 100%; object-fit: cover; }
.thumb-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 14px; }
.thumb-grid img { height: 165px; border-radius: 20px; transition: .35s ease; cursor: pointer; }
.thumb-grid img.is-active { outline: 3px solid #0066c9; outline-offset: -3px; }
.thumb-grid img:hover { transform: scale(1.04); }

.car-info-card { background: rgba(255,255,255,.82); border-radius: 30px; padding: 32px; box-shadow: 0 25px 60px rgba(123,44,255,.14); border: 1px solid rgba(255,255,255,.8); }
.vehicle-detail-badge { display: inline-block; background: linear-gradient(135deg,#ff3d91,#ffb703); color: #fff; padding: 9px 18px; border-radius: 50px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.vehicle-detail-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vehicle-detail-badge-row .vehicle-detail-badge { margin-bottom: 0; }
.vehicle-detail-badge-link { text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.vehicle-detail-badge-link:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,61,145,.35); }
.car-info-card h2 { font-size: 34px; line-height: 1.2; color: #003b76; margin-bottom: 12px; font-weight: 800; }
.car-desc { color: #596579; font-size: 15px; line-height: 1.7; margin-bottom: 24px; }

.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.feature-box { background: linear-gradient(135deg,#eef5ff,#ffffff); color: #064f92; padding: 13px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0,102,201,.06); display: flex; align-items: center; gap: 9px; transition: .3s ease; }
.feature-box .feature-icon-wrap { width: 26px; height: 26px; background: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,102,201,.12); flex: 0 0 auto; }
.feature-box .feature-icon-wrap svg { width: 18px; height: 18px; display: block; }
.feature-box:hover { background: linear-gradient(135deg,#0066c9,#7b2cff); color: #fff; transform: translateY(-3px); }

.detail-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.vehicle-detail-book-btn, .vehicle-detail-outline-btn {
  text-decoration: none; padding: 13px 24px; border-radius: 12px; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; min-height: 48px; line-height: 1.3; text-align: center; white-space: normal;
}
.vehicle-detail-book-btn { background: linear-gradient(135deg,#0066c9,#7b2cff); color: #fff; box-shadow: 0 12px 28px rgba(0,102,201,.28); border: 0; }
.vehicle-detail-book-btn.disabled { background: #9aa3ad; box-shadow: none; cursor: not-allowed; }
.vehicle-detail-outline-btn { color: #0066c9; border: 2px solid #0066c9; background: #fff; }

.shuttle-section { padding: 70px 0; background: #f4f7fb; }
.shuttle-box { background: linear-gradient(135deg,#0057c8 0%,#004aa8 100%); border-radius: 28px; padding: 32px 42px; display: grid; grid-template-columns: 1.1fr 1.2fr auto; align-items: center; gap: 34px; position: relative; overflow: hidden; }
.shuttle-box::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; background: rgba(255,255,255,.08); border-radius: 50%; }
.shuttle-image img { width: 100%; height: 260px; object-fit: cover; border-radius: 18px; position: relative; z-index: 2; }
.shuttle-content { position: relative; z-index: 2; }
.shuttle-content span { color: #ffb000; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
.shuttle-content h2 { color: #fff; font-size: 40px; font-weight: 900; margin: 10px 0 12px; }
.shuttle-content p { color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.8; margin: 0; }
.shuttle-action { position: relative; z-index: 2; }
.shuttle-btn { display: inline-block; padding: 15px 34px; border: 3px solid #fff; border-radius: 50px; color: #fff; font-weight: 900; text-decoration: none; white-space: nowrap; transition: .3s ease; }
.shuttle-btn:hover { background: #fff; color: #0057c8; }
.shuttle-btn.disabled { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.75); cursor: not-allowed; }

.esquire-info-section { padding: 80px 0; background: linear-gradient(135deg,#f3f8ff 0%,#fff5fb 45%,#fff8df 100%); }
.info-heading { text-align: center; max-width: 820px; margin: 0 auto 35px; }
.info-heading h2 { color: #005db8; font-size: 34px; font-weight: 800; margin-bottom: 14px; }
.info-heading p, .vehicle-detail-description { color: #536274; font-size: 15px; line-height: 1.8; }
.vehicle-detail-description { max-width: 820px; margin: 0 auto 34px; text-align: center; }

.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-bottom: 34px; }
.benefit-card { background: rgba(255,255,255,.9); padding: 24px 22px; border-radius: 22px; box-shadow: 0 18px 45px rgba(0,93,184,.11); border: 1px solid rgba(255,255,255,.9); transition: .35s ease; }
.benefit-card span { width: 46px; height: 46px; background: linear-gradient(135deg,#0066c9,#7b2cff); color: #fff; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; box-shadow: 0 12px 25px rgba(0,102,201,.22); }
.benefit-card h4 { color: #005db8; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.benefit-card p { color: #5c6878; font-size: 14px; line-height: 1.6; margin: 0; }
.benefit-card:hover { transform: translateY(-7px); background: linear-gradient(135deg,#ffffff,#eef5ff); }

.primary-btn {
  display: flex; align-items: center; justify-content: center; min-height: 48px; height: auto; padding: 12px 20px; border-radius: 14px;
  background: linear-gradient(135deg,#0066c9,#7b2cff); color: #fff; text-decoration: none; font-size: 14px; font-weight: 800;
  box-shadow: 0 14px 30px rgba(0,102,201,.28); line-height: 1.3; text-align: center; white-space: normal; max-width: 100%;
}
.primary-btn.disabled { background: #9aa3ad; box-shadow: none; cursor: not-allowed; }

.availability-box { margin-top: 55px; background: linear-gradient(135deg,#0066c9,#034a98); border-radius: 30px; padding: 24px; display: grid; grid-template-columns: 1.35fr .9fr; gap: 26px; align-items: center; overflow: hidden; box-shadow: 0 25px 60px rgba(0,93,184,.25); }
.availability-img img { width: 100%; height: 310px; object-fit: cover; border-radius: 22px; }
.availability-content { color: #fff; padding: 20px; }
.white-badge { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.availability-content h3 { font-size: 36px; font-weight: 900; margin-bottom: 10px; }
.availability-content p { font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
.white-btn { display: inline-block; color: #fff; border: 2px solid #fff; padding: 12px 26px; border-radius: 50px; text-decoration: none; font-weight: 800; transition: .3s ease; }
.white-btn:hover { background: #fff; color: #0066c9; }
.white-btn.disabled { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.5); cursor: not-allowed; }

.reviews-section-title { font-size: 34px; font-weight: 800; color: #111; }

@media (max-width: 992px) {
  .car-detail-wrapper { grid-template-columns: 1fr; }
  .detail-actions { flex-direction: column; }
  .vehicle-detail-book-btn, .vehicle-detail-outline-btn, .primary-btn, .white-btn { width: 100%; }
  .car-info-card h2 { font-size: 28px; }
  .shuttle-box { grid-template-columns: 1fr; text-align: center; padding: 28px; }
  .shuttle-content h2 { font-size: 34px; }
  .shuttle-image img { height: 240px; }
  .benefit-grid { grid-template-columns: repeat(2,1fr); }
  .availability-box { grid-template-columns: 1fr; }
  .availability-content { text-align: center; }
}

@media (max-width: 576px) {
  .car-detail-section, .esquire-info-section { padding: 50px 0; }
  .main-car-img { height: 240px; }
  .thumb-grid { grid-template-columns: 1fr; }
  .thumb-grid img { height: 190px; }
  .feature-grid, .benefit-grid { grid-template-columns: 1fr; }
  .detail-actions { flex-direction: column; }
  .vehicle-detail-book-btn, .vehicle-detail-outline-btn { width: 100%; }
  .car-info-card { padding: 24px; }
  .info-heading h2 { font-size: 26px; }
  .availability-box { padding: 16px; border-radius: 24px; }
  .availability-img img { height: 230px; }
  .availability-content h3 { font-size: 28px; }
  .shuttle-section { padding: 45px 0; }
  .shuttle-box { border-radius: 22px; padding: 18px; }
  .shuttle-content h2 { font-size: 28px; }
  .shuttle-content p { font-size: 15px; }
  .shuttle-image img { height: 190px; border-radius: 16px; }
  .shuttle-btn { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   About Us page (verbatim bubbles-2 new-ui/components/styles-about.php)
   ═══════════════════════════════════════════════════════════════════ */
.about-section { padding: 90px 0; background: linear-gradient(135deg, #fff8ec 0%, #fff 45%, #f3f7ff 100%); overflow: hidden; }
.about-content { max-width: 620px; }
.about-badge { display: inline-block; margin-bottom: 14px; color: #0057c8; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; }
.about-title { font-size: 46px; line-height: 1.15; font-weight: 900; color: #171717; margin-bottom: 20px; position: relative; }
.about-title::after { content: ""; display: block; width: 75px; height: 4px; background: linear-gradient(90deg,#0057c8,#ffb000); border-radius: 20px; margin-top: 18px; }
.about-lead { font-size: 21px; font-weight: 700; color: #1d1d1d; margin-bottom: 14px; }
.about-text { font-size: 17px; line-height: 1.9; color: #555; margin-bottom: 30px; }
.about-points { display: grid; gap: 16px; margin-bottom: 32px; }
.about-point { display: flex; align-items: flex-start; gap: 16px; padding: 18px; background: #fff; border-radius: 20px; box-shadow: 0 14px 35px rgba(0,0,0,.07); border: 1px solid rgba(0,87,200,.08); }
.about-point span { min-width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg,#0057c8,#003b8f); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.about-point h5 { margin: 0 0 5px; font-size: 18px; font-weight: 800; color: #1b1b1b; }
.about-point p { margin: 0; color: #666; font-size: 15px; }
.about-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 50px;
  background: linear-gradient(135deg,#ffb000,#ff7a00); color: #111; font-weight: 800; text-decoration: none;
  box-shadow: 0 14px 30px rgba(255,176,0,.35); transition: .3s ease; min-height: 48px; line-height: 1.3; text-align: center;
}
.about-btn:hover { transform: translateY(-3px); color: #111; }

.about-image-wrapper { position: relative; padding: 28px 28px 52px; }
.about-shape { position: absolute; inset: 0; background: linear-gradient(135deg,#0057c8,#ffb000); border-radius: 38px; transform: rotate(-3deg); opacity: .14; }
.about-image-frame { position: relative; z-index: 1; }
.about-img { display: block; width: 100%; height: 430px; object-fit: cover; border-radius: 34px; box-shadow: 0 25px 60px rgba(0,0,0,.14); }
.about-experience {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%); width: 190px; min-height: 110px; padding: 22px;
  background: #fff; border-radius: 24px; box-shadow: 0 18px 45px rgba(0,0,0,.15); display: flex; align-items: center;
  justify-content: center; text-align: center; z-index: 2;
}
.about-experience p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: #333; }

@media (max-width: 991px) {
  .about-section { padding: 70px 0; }
  .about-title { font-size: 36px; }
  .about-image-wrapper { padding: 24px 24px 50px; }
  .about-img { height: 360px; }
}
@media (max-width: 575px) {
  .about-section { padding: 55px 0; }
  .about-title { font-size: 31px; }
  .about-lead { font-size: 18px; }
  .about-text { font-size: 15px; }
  .about-image-wrapper { padding: 16px 16px 56px; }
  .about-img { height: 300px; border-radius: 24px; }
  .about-experience { width: min(190px, calc(100% - 40px)); min-height: 100px; padding: 18px 20px; border-radius: 20px; }
  .about-experience p { font-size: 13px; line-height: 1.45; }
  .about-btn, .shuttle-btn { display: block; width: 100%; text-align: center; }
}

/* ── Auckland Rental Section (content card + image card) ── */
.auckland-rental-section { background: #f8fbff; }
.auckland-rental-section .row { align-items: stretch; }
.auckland-content-card, .auckland-image-card { height: 100%; }
.auckland-content-card {
  background: #ffffff; border: 1px solid #edf1f5; border-radius: 14px; padding: 22px; box-shadow: 0 6px 18px rgba(16,24,40,.06);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.auckland-content-card .pgel-badge { display: inline-flex; width: fit-content; min-width: 155px; height: 22px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; font-size: 11px; line-height: 1; margin-bottom: 0; }
.auckland-content-card h2 { font-size: 30px; font-weight: 900; line-height: 1.28; color: #000; margin: 24px 0 18px; }
.auckland-content-card p { font-size: 16px; line-height: 1.33; color: #111; margin-bottom: 22px; }
.explore-btn {
  width: 240px; height: 58px; border: none; border-radius: 14px; background: linear-gradient(90deg,#1EA4FF,#006FD6);
  color: #ffffff; font-size: 17px; font-weight: 700; margin-top: 10px; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; line-height: 1.3; text-align: center; white-space: normal; max-width: 100%;
}
.auckland-content-card .explore-btn { width: auto; min-width: 154px; height: 30px; padding: 0 20px; border-radius: 7px; font-size: 11px; margin-top: 16px; }
.auckland-image-card { border-radius: 22px; overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,.10); }
.auckland-image-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media(max-width: 991px) {
  .auckland-content-card { padding: 22px; }
  .auckland-content-card h2 { font-size: 30px; }
  .auckland-content-card p { font-size: 16px; line-height: 1.33; }
  .auckland-image-card { min-height: 500px; }
}
@media(max-width: 576px) {
  .auckland-content-card { padding: 22px; }
  .auckland-content-card h2 { font-size: 30px; }
  .auckland-content-card p { font-size: 16px; line-height: 1.33; }
  .explore-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Contact page (verbatim bubbles-2 new-ui/components/styles-contact.php)
   ═══════════════════════════════════════════════════════════════════ */
.contact-section { padding: 90px 0; background: linear-gradient(135deg,#f3f7ff 0%,#ffffff 45%,#eef5ff 100%); }
.contact-heading { margin-bottom: 45px; }
.contact-heading span { color: #0057c8; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; }
.contact-heading h2 { font-size: 46px; font-weight: 900; color: #111; margin: 8px 0 12px; }
.contact-heading h3 { font-size: 22px; font-weight: 700; color: #222; margin: 0 0 12px; }
.contact-heading p { color: #555; font-size: 17px; }

.contact-info-card, .contact-form-card { background: #fff; border-radius: 28px; padding: 34px; box-shadow: 0 18px 45px rgba(0,0,0,.08); border: 1px solid rgba(0,87,200,.08); }
.contact-info-card { background: linear-gradient(135deg,#0057c8,#00469f); color: #fff; position: relative; overflow: hidden; }
.contact-info-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -90px; background: rgba(255,255,255,.08); border-radius: 50%; }
.contact-info-card h3, .contact-form-card h3 { font-size: 30px; font-weight: 900; margin-bottom: 10px; }
.contact-intro { color: rgba(255,255,255,.88); margin-bottom: 25px; }

.contact-item { display: flex; gap: 15px; align-items: center; padding: 16px; margin-bottom: 14px; border-radius: 18px; background: rgba(255,255,255,.12); position: relative; z-index: 2; }
.contact-item.active { background: #fff; color: #0057c8; }
.contact-icon { width: 45px; height: 45px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.contact-item.active .contact-icon { background: #eef5ff; }
.contact-icon img { width: 22px; height: 22px; object-fit: contain; }
.contact-item h5 { margin: 0 0 3px; font-size: 16px; font-weight: 900; }
.contact-item p { margin: 0; font-size: 14px; }

.contact-location { margin-top: 20px; padding: 20px; border-radius: 20px; background: #fff; color: #111; position: relative; z-index: 2; }
.contact-location h5 { color: #0057c8; font-weight: 900; margin-bottom: 8px; }
.contact-location p { margin: 0; color: #444; line-height: 1.7; }

.contact-form-card p { color: #666; margin-bottom: 24px; }
.contact-form-card .form-control { height: 54px; border-radius: 14px; border: 1px solid #dce6f5; padding: 12px 16px; font-size: 15px; }
.contact-form-card textarea.form-control { height: auto; resize: none; }
.contact-form-card .form-control:focus { border-color: #0057c8; box-shadow: 0 0 0 4px rgba(0,87,200,.1); }

.contact-btn {
  padding: 15px 34px; border: none; border-radius: 50px; background: linear-gradient(135deg,#0057c8,#00469f); color: #fff;
  font-weight: 900; transition: .3s ease; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; line-height: 1.3; text-align: center;
}
.contact-btn:hover { transform: translateY(-3px); }
.contact-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.contact-image-box, .contact-map-box { height: 360px; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 45px rgba(0,0,0,.1); }
.contact-image-box img, .contact-map-box iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }

.contact-form-alert { display: none; margin-bottom: 1rem; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
.contact-form-alert.show { display: block; }
.contact-form-alert.success { background: #e8f8ee; color: #137333; border: 1px solid #b7e4c7; }
.contact-form-alert.error { background: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; }

@media (max-width: 991px) {
  .contact-section { padding: 70px 0; }
  .contact-heading h2 { font-size: 38px; }
  .contact-image-box, .contact-map-box { height: 300px; }
}
@media (max-width: 575px) {
  .contact-section { padding: 55px 0; }
  .contact-heading h2 { font-size: 32px; }
  .contact-info-card, .contact-form-card { padding: 24px; border-radius: 22px; }
  .contact-info-card h3, .contact-form-card h3 { font-size: 25px; }
  .contact-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Blog listing page (verbatim bubbles-2 new-ui/components/styles-blogs.php)
   ═══════════════════════════════════════════════════════════════════ */
.blog-section {
  padding: 80px 0;
  background: radial-gradient(circle at top left, rgba(255,78,216,.12), transparent 35%),
              radial-gradient(circle at bottom right, rgba(71,96,255,.14), transparent 35%),
              #f4f7fc;
  min-height: 100vh;
}
.blog-heading { max-width: 720px; margin: 0 auto 45px; }
.blog-heading span { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; padding: 8px 18px; border-radius: 50px; background: linear-gradient(90deg,#0067d8,#7a5cff); margin-bottom: 12px; }
.blog-heading h2 { font-size: 42px; font-weight: 900; color: #005bbb; margin-bottom: 10px; letter-spacing: -1px; }
.blog-heading p { font-size: 15px; color: #5f6f89; margin-bottom: 0; }

.blog-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.blog-card { background: rgba(255,255,255,.85); border-radius: 24px; overflow: hidden; box-shadow: 0 14px 35px rgba(15,23,42,.11); border: 1px solid rgba(255,255,255,.7); transition: all .35s ease; }
.blog-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(0,91,187,.22); }
.blog-img { height: 210px; overflow: hidden; display: block; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: .45s ease; }
.blog-card:hover .blog-img img { transform: scale(1.08); }
.blog-content { padding: 22px; }
.blog-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; padding: 6px 14px; border-radius: 30px; background: linear-gradient(90deg,#ff4fd8,#ffc400); margin-bottom: 14px; }
.blog-content h4 { font-size: 21px; line-height: 1.25; font-weight: 900; color: #0f172a; margin-bottom: 14px; }
.blog-content h4 a { color: inherit; text-decoration: none; }
.blog-content h4 a:hover { color: #005bbb; }
.blog-content a.read-more { display: inline-block; color: #005bbb; font-weight: 800; text-decoration: none; margin-bottom: 12px; }
.blog-content a.read-more:hover { color: #ff4fd8; }
.blog-content p { font-size: 13px; color: #6b7280; margin: 0; font-weight: 600; }

.blog-pagination { max-width: 1120px; margin: 45px auto 0; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.blog-pagination a, .blog-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px;
  border-radius: 50px; font-size: 14px; font-weight: 800; text-decoration: none; transition: .3s ease;
}
.blog-pagination a { color: #005bbb; background: #fff; border: 1px solid #dbeafe; box-shadow: 0 8px 20px rgba(15,23,42,.06); }
.blog-pagination a:hover { color: #fff; background: linear-gradient(90deg,#0067d8,#7a5cff); border-color: transparent; }
.blog-pagination span.current { color: #fff; background: linear-gradient(90deg,#0067d8,#7a5cff); }

@media (max-width: 991px) {
  .blog-grid { grid-template-columns: repeat(2,1fr); }
  .blog-heading h2 { font-size: 34px; }
}
@media (max-width: 576px) {
  .blog-section { padding: 55px 0; }
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
  .blog-heading h2 { font-size: 30px; }
  .blog-img { height: 230px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ page (verbatim bubbles-2 new-ui/components/styles-faq.php)
   ═══════════════════════════════════════════════════════════════════ */
.faq-section {
  padding: 85px 0;
  background: radial-gradient(circle at top left, rgba(255,78,216,.12), transparent 35%),
              radial-gradient(circle at bottom right, rgba(71,96,255,.15), transparent 35%),
              #f4f7fc;
  min-height: 100vh;
}
.faq-heading { max-width: 760px; margin: 0 auto 50px; }
.faq-heading span, .faq-small-title {
  display: inline-block; font-size: 13px; font-weight: 800; color: #fff; padding: 8px 18px; border-radius: 50px;
  background: linear-gradient(90deg,#0067d8,#7a5cff); margin-bottom: 14px;
}
.faq-heading h2 { font-size: 42px; font-weight: 900; color: #005bbb; margin-bottom: 10px; letter-spacing: -1px; }
.faq-heading p { font-size: 15px; color: #5f6f89; margin-bottom: 0; }

.faq-wrapper { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.4fr; gap: 30px; align-items: start; }
.faq-left { background: linear-gradient(135deg,#005bbb,#7a5cff); border-radius: 28px; padding: 34px; color: #fff; box-shadow: 0 20px 45px rgba(0,91,187,.25); position: sticky; top: 20px; }
.faq-left .faq-small-title { background: rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.faq-left h3 { font-size: 32px; font-weight: 900; line-height: 1.2; margin-bottom: 16px; }
.faq-left p { color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 0; }

.faq-contact-box { margin-top: 30px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.faq-contact-box h4 { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.faq-contact-box p { font-size: 14px; margin-bottom: 18px; }
.faq-contact-box a { display: inline-block; padding: 11px 22px; border-radius: 50px; background: #fff; color: #005bbb; font-weight: 800; text-decoration: none; transition: .3s ease; }
.faq-contact-box a:hover { background: #ff4fd8; color: #fff; transform: translateY(-3px); }

.faq-right { background: rgba(255,255,255,.85); border-radius: 28px; padding: 18px; box-shadow: 0 18px 45px rgba(15,23,42,.1); border: 1px solid rgba(255,255,255,.75); }
.faq-right .accordion-item { border: none; margin-bottom: 14px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.faq-right .accordion-item:last-child { margin-bottom: 0; }
.faq-right .accordion-button { padding: 20px 22px; font-size: 16px; font-weight: 900; color: #0f172a; background: #fff; box-shadow: none; }
.faq-right .accordion-button:not(.collapsed) { color: #005bbb; background: linear-gradient(90deg, rgba(0,103,216,.08), rgba(255,79,216,.07)); }
.faq-right .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-right .accordion-button::after { width: 34px; height: 34px; border-radius: 50%; background-color: #eef4ff; background-position: center; background-size: 14px; }
.faq-right .accordion-body { padding: 0 22px 22px; color: #5f6f89; font-size: 15px; line-height: 1.75; }
.faq-empty { padding: 30px 22px; text-align: center; color: #5f6f89; font-weight: 600; }

@media (max-width: 991px) {
  .faq-wrapper { grid-template-columns: 1fr; }
  .faq-left { position: relative; top: 0; }
  .faq-heading h2 { font-size: 34px; }
}
@media (max-width: 576px) {
  .faq-section { padding: 55px 0; }
  .faq-heading h2 { font-size: 30px; }
  .faq-left { padding: 26px; border-radius: 22px; }
  .faq-left h3 { font-size: 26px; }
  .faq-right { padding: 12px; border-radius: 22px; }
  .faq-right .accordion-button { font-size: 15px; padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Terms & Conditions page (verbatim bubbles-2 styles-terms.php,
   sidebar/secondary-hero omitted — content comes straight from the
   site's own admin-editable terms_and_conditions setting)
   ═══════════════════════════════════════════════════════════════════ */
.terms-section { padding: 90px 0; background: linear-gradient(135deg,#f4f8ff 0%,#ffffff 45%,#eef5ff 100%); }
.terms-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.terms-sidebar {
  position: sticky; top: 20px; background: #fff; border-radius: 24px; padding: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08); border: 1px solid rgba(0,87,200,.08);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.terms-sidebar h4 { color: #111; font-size: 20px; font-weight: 900; margin-bottom: 18px; }
.terms-sidebar a {
  display: block; padding: 13px 16px; margin-bottom: 10px; border-radius: 14px;
  background: #f2f7ff; color: #0057c8; font-weight: 800; text-decoration: none; transition: .3s ease;
}
.terms-sidebar a:hover, .terms-sidebar a.is-active { background: #0057c8; color: #fff; }
.terms-content { display: grid; gap: 24px; }
.terms-card, .terms-table-card { background: #fff; border-radius: 26px; padding: 32px; box-shadow: 0 16px 40px rgba(0,0,0,.07); border-left: 6px solid #0057c8; }
.terms-card h2, .terms-card h3, .terms-table-card h3 { color: #0057c8; font-size: 30px; font-weight: 900; text-transform: uppercase; margin-bottom: 16px; }
.terms-card p { color: #444; font-size: 16px; line-height: 1.8; margin-bottom: 0; }
.terms-card ul { margin: 0; padding-left: 20px; }
.terms-card li { color: #333; font-size: 16px; line-height: 1.9; }

.terms-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 18px; }
.terms-table thead { background: #0057c8; color: #fff; }
.terms-table th, .terms-table td { padding: 17px 20px; border: 1px solid #dce6f5; font-size: 16px; }
.terms-table th { font-weight: 900; }
.terms-table tbody tr:nth-child(even) { background: #f7faff; }
.terms-table tbody tr:hover { background: #eef5ff; }

.terms-cms-content { border-left: none; }
.terms-cms-content h2 { color: #0057c8; font-size: 30px; font-weight: 900; text-transform: uppercase; margin-bottom: 16px; border-bottom: 2px solid #0057c8; padding-bottom: 8px; }
.terms-cms-content h3, .terms-cms-content .terms-block-title { color: #0057c8; font-size: 24px; font-weight: 900; text-transform: uppercase; margin: 28px 0 16px; scroll-margin-top: 100px; }
.terms-cms-content h3:first-of-type, .terms-cms-content .terms-block-title:first-of-type { margin-top: 0; }
.terms-cms-content p, .terms-cms-content li { color: #333; font-size: 16px; line-height: 1.8; }
.terms-cms-content ul { margin: 0 0 16px; padding-left: 20px; }
.terms-cms-content table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 18px; margin: 16px 0 24px; }
.terms-cms-content table thead { background: #0057c8; color: #fff; }
.terms-cms-content table th, .terms-cms-content table td { padding: 17px 20px; border: 1px solid #dce6f5; font-size: 16px; }
.terms-cms-content table th { font-weight: 900; }
.terms-cms-content table tbody tr:nth-child(even) { background: #f7faff; }

@media (max-width: 991px) {
  .terms-layout { grid-template-columns: 1fr; }
  .terms-sidebar { position: relative; top: auto; max-height: none; }
}

@media (max-width: 575px) {
  .terms-section { padding: 55px 0; }
  .terms-card, .terms-table-card { padding: 24px; border-radius: 20px; }
  .terms-card h2, .terms-card h3, .terms-table-card h3 { font-size: 24px; }
  .terms-table th, .terms-table td { padding: 13px; font-size: 14px; white-space: nowrap; }
}

/* ── Status message (e.g. booking canceled/failed) ── */
.status-message-section { min-height: 55vh; display: flex; align-items: center; }
.status-message-wrap { max-width: 620px; }
.status-icon-circle {
  width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; font-size: 38px; color: #fff;
}
.status-icon-error   { background: linear-gradient(135deg,#ff6b6b,#c0392b); }
.status-icon-success { background: linear-gradient(135deg,#2ecc71,#1e8449); }
.status-icon-info     { background: linear-gradient(135deg,#1EA4FF,#006FD6); }
.status-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 26px; border-radius: 10px;
  font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid #006FD6; color: #006FD6; background: #fff;
}
.status-btn-outline:hover { background: #f0f7ff; }
@media (max-width: 576px) {
  .status-message-section { min-height: 45vh; padding: 60px 0; }
  .pgel-btn-row.justify-content-center, .status-message-wrap .pgel-btn-row { flex-direction: column; align-items: stretch; }
}

/* ── Insurance plans ── */
.insurance-plan-section { padding: 90px 0; background: linear-gradient(135deg, #f4f8ff 0%, #ffffff 45%, #eef5ff 100%); }
.insurance-heading { max-width: 760px; margin: 0 auto 50px; }
.insurance-heading span { color: #0057c8; font-size: 14px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; }
.insurance-heading h2 { font-size: 42px; line-height: 1.2; font-weight: 900; color: #0057c8; text-transform: uppercase; margin: 10px 0 14px; }
.insurance-heading p { color: #555; font-size: 17px; line-height: 1.7; }
.insurance-card {
  position: relative; height: 100%; padding: 38px 30px; background: #fff; border-radius: 26px; text-align: center;
  border-top: 6px solid #0057c8; box-shadow: 0 18px 45px rgba(0,0,0,.08); transition: .3s ease; overflow: hidden;
}
.insurance-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(0,87,200,.18); }
.premium-plan { background: linear-gradient(135deg, #0057c8, #00469f); color: #fff; transform: scale(1.04); }
.premium-plan:hover { transform: scale(1.04) translateY(-10px); }
.plan-tag { position: absolute; top: 18px; right: -38px; background: #ffb000; color: #111; padding: 8px 42px; font-size: 12px; font-weight: 900; transform: rotate(35deg); }
.insurance-card h3 { font-size: 28px; font-weight: 900; color: #0057c8; margin-bottom: 16px; }
.premium-plan h3 { color: #fff; }
.insurance-card h4 { font-size: 36px; font-weight: 900; color: #e54444; margin-bottom: 26px; }
.premium-plan h4 { color: #ffb000; }
.insurance-card h4 span { display: block; font-size: 15px; color: #555; text-transform: uppercase; margin-top: 4px; }
.premium-plan h4 span { color: rgba(255,255,255,.85); }
.insurance-card ul { list-style: none; padding: 0; margin: 0; }
.insurance-card li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 0; border-bottom: 1px solid #e6eef8; font-size: 15px; font-weight: 600; color: #333; }
.premium-plan li { color: #fff; border-bottom-color: rgba(255,255,255,.2); }
.insurance-card li i { color: #0057c8; font-size: 18px; flex: 0 0 auto; }
.insurance-card li .bi-x-circle-fill { color: #e54444; }
.premium-plan li i { color: #ffb000; }
.premium-plan li .bi-x-circle-fill { color: #ffd2d2; }
@media (max-width: 991px) {
  .premium-plan { transform: none; }
  .premium-plan:hover { transform: translateY(-10px); }
  .insurance-heading h2 { font-size: 34px; }
}
@media (max-width: 575px) {
  .insurance-plan-section { padding: 55px 0; }
  .insurance-heading h2 { font-size: 28px; }
  .insurance-card { padding: 32px 24px; border-radius: 22px; }
  .insurance-card h3 { font-size: 24px; }
  .insurance-card h4 { overflow-wrap: anywhere; }
}