/* =========================================================================
   365 Van — Elementor Addons : shared frontend styles
   Ported 1:1 from the original standalone design (fonts, tokens, keyframes,
   reveal animation, hover effects + every responsive breakpoint).
   ========================================================================= */

/* Design tokens (scoped to our widgets so we never leak into the theme). */
.van365{
  --ink:#0F1B2D;
  --accent:#FFB400;
  --dark:#0E1726;
  --cream:#F5F3EF;
}

/* Base resets that the original relied on, scoped to our blocks. */
.van365, .van365 *{ box-sizing:border-box; }
.van365{
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:#0F1B2D;
  -webkit-font-smoothing:antialiased;
}
.van365 ::selection{ background:var(--accent); color:#0F1B2D; }
.van365 a{ color:inherit; }
.van365 img{ max-width:none; }            /* keep object-fit images crisp, ignore theme img rules */
.van365 input::placeholder,
.van365 textarea::placeholder{ color:#9AA3AE; }
.van365 .v365-imgslot{ display:block; }

/* ---- keyframes ---------------------------------------------------------- */
@keyframes van365-ping{ 75%,100%{ transform:scale(2.3); opacity:0; } }
@keyframes van365-floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes van365-revIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ---- scroll reveal ------------------------------------------------------ *
 * Elements keep their inline initial state (opacity:0;translateY) and the
 * shared JS adds .v365-in to fade them up. We force them visible inside the
 * Elementor editor so the client always sees their content while editing. */
.van365 [data-reveal].v365-in{ opacity:1 !important; transform:none !important; }

.elementor-editor-active .van365 [data-reveal],
body.elementor-editor-active .van365 [data-reveal]{
  opacity:1 !important; transform:none !important;
}

/* Respect reduced-motion + never leave content hidden if JS is disabled. */
@media (prefers-reduced-motion:reduce){
  .van365 *{ animation:none !important; transition:none !important; }
  .van365 [data-reveal]{ opacity:1 !important; transform:none !important; }
}
.no-js .van365 [data-reveal]{ opacity:1 !important; transform:none !important; }

/* ===== HEADER ============================================================ */
.van365 .sh *{ box-sizing:border-box; }
@media(max-width:1080px){
  .van365 .sh-nav{ display:none !important; }
  .van365 .sh-burger{ display:inline-flex !important; }
  .van365 .sh-book-btn{ display:none !important; }
}

/* ===== HERO + TRUST BAR (home) ========================================== */
@media(max-width:1080px){
  .van365 [data-hero-grid]{ grid-template-columns:1fr !important; }
  .van365 [data-hero-art]{ min-height:360px !important; order:-1; }
  .van365 [data-trust-bar]{ grid-template-columns:1fr 1fr !important; }
  .van365 [data-trust-bar] .tdiv{ display:none !important; }
}
@media(max-width:640px){
  .van365 [data-trust-bar]{ grid-template-columns:1fr !important; }
  .van365 [data-hero-btns]{ flex-direction:column !important; align-items:stretch !important; }
}

/* ===== BOOKING ========================================================== */
/* 4 equal fields on desktop; 2-up on small laptop; single column on phones/tablets. */
.van365 [data-book-row] label,
.van365 [data-book-row] input,
.van365 [data-book-row] select{ box-sizing:border-box; }

/* Safari fix: explicit width + flex fallback */
.van365 [data-book-row]{
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
}
.van365 [data-book-row] > *{
  -webkit-box-flex:1;
  -webkit-flex:1 1 200px;
  flex:1 1 200px;
  min-width:0;
}
/* Keep grid for modern browsers */
@supports(display:grid){
  .van365 [data-book-row]{
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }
  .van365 [data-book-row] > *{ flex:unset; }
}
@media(max-width:980px){
  .van365 [data-book-row]{ grid-template-columns:1fr 1fr !important; }
  .van365 [data-book-row] > *{ -webkit-flex:1 1 45%; flex:1 1 45%; }
}
@media(max-width:768px){
  .van365 [data-book-row]{ grid-template-columns:1fr !important; }
  .van365 [data-book-row] > *{ -webkit-flex:1 1 100%; flex:1 1 100%; }
}
/* Safari date input fix */
.van365 [data-book-row] input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
  min-height:44px;
  width:100%;
}
/* Safari select fix */
.van365 [data-book-row] select{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
}

/* ===== SERVICES / INTEGRATION =========================================== */
@media(max-width:1080px){
  .van365 [data-svc-grid]{ grid-template-columns:1fr !important; }
  .van365 [data-integ-grid]{ grid-template-columns:1fr !important; }
}
@media(max-width:640px){
  .van365 [data-integ-logos]{ grid-template-columns:1fr 1fr !important; }
}

/* ===== SERVICE / ABOUT page grids ====================================== */
@media(max-width:980px){
  .van365 [data-svc-hero]{ grid-template-columns:1fr !important; }
  .van365 [data-about-hero]{ grid-template-columns:1fr !important; }
  .van365 [data-vals-grid]{ grid-template-columns:1fr !important; }
  .van365 [data-stat-row]{ flex-wrap:wrap !important; }
  .van365 [data-spec-grid]{ grid-template-columns:1fr 1fr !important; }
  .van365 [data-incl-grid]{ grid-template-columns:1fr !important; }
  .van365 [data-cta-band]{ flex-direction:column !important; align-items:flex-start !important; }
}
@media(max-width:560px){
  .van365 [data-spec-grid]{ grid-template-columns:1fr !important; }
}

/* ===== CONTACT ========================================================== */
@media(max-width:980px){
  .van365 [data-contact-grid]{ grid-template-columns:1fr !important; }
}
@media(max-width:560px){
  .van365 [data-form-2]{ grid-template-columns:1fr !important; }
}

/* ===== FOOTER =========================================================== */
.van365 .ftr *{ box-sizing:border-box; }
.van365 .ftr a{ transition:color .2s ease; }
@media(max-width:820px){ .van365 .ftr-grid{ grid-template-columns:1fr 1fr !important; } }
@media(max-width:520px){ .van365 .ftr-grid{ grid-template-columns:1fr !important; } }

/* Stop Elementor's default widget wrapper padding from offsetting full-bleed sections. */
.elementor-widget-van365-header .elementor-widget-container,
.elementor-widget-van365-hero .elementor-widget-container,
.elementor-widget-van365-footer .elementor-widget-container{ padding:0; }

/* ============================================================
   Fluent Forms theming — make submitted forms match the design.
   .v365-ff           => dark card (Contact Form widget)
   .v365-ff-light     => white card (Booking widget)
   ============================================================ */
.van365 .v365-ff .fluentform .ff-el-group{ margin-bottom:14px; }
.van365 .v365-ff .fluentform .ff-el-input--label label,
.van365 .v365-ff .fluentform label{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px;
}
.van365 .v365-ff .fluentform input[type=text],
.van365 .v365-ff .fluentform input[type=email],
.van365 .v365-ff .fluentform input[type=tel],
.van365 .v365-ff .fluentform input[type=number],
.van365 .v365-ff .fluentform input[type=date],
.van365 .v365-ff .fluentform select,
.van365 .v365-ff .fluentform textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:13px 15px; color:#fff; font-size:15px;
  font-family:'Hanken Grotesk',system-ui,sans-serif; box-shadow:none; height:auto;
}
.van365 .v365-ff .fluentform input::placeholder,
.van365 .v365-ff .fluentform textarea::placeholder{ color:rgba(255,255,255,.4); }
.van365 .v365-ff .fluentform input:focus,
.van365 .v365-ff .fluentform select:focus,
.van365 .v365-ff .fluentform textarea:focus{ border-color:var(--accent); outline:none; }
.van365 .v365-ff .fluentform .ff-btn-submit,
.van365 .v365-ff .fluentform button[type=submit]{
  background:var(--accent); color:var(--ink); border:none; border-radius:13px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px; padding:15px 22px;
  width:100%; cursor:pointer; box-shadow:none;
}
.van365 .v365-ff .fluentform .ff-btn-submit:hover{ filter:brightness(.96); }
.van365 .v365-ff .fluentform .ff-message-success,
.van365 .v365-ff .fluentform .ff_submit_success{
  color:var(--accent); font-family:'Space Mono',monospace; font-size:13px;
  letter-spacing:.03em; background:transparent; border:none; padding:6px 0;
}

/* Light variant (booking white card) */
.van365 .v365-ff-light .fluentform .ff-el-input--label label,
.van365 .v365-ff-light .fluentform label{ color:#7A8290; }
.van365 .v365-ff-light .fluentform input[type=text],
.van365 .v365-ff-light .fluentform input[type=email],
.van365 .v365-ff-light .fluentform input[type=tel],
.van365 .v365-ff-light .fluentform input[type=number],
.van365 .v365-ff-light .fluentform input[type=date],
.van365 .v365-ff-light .fluentform select,
.van365 .v365-ff-light .fluentform textarea{
  background:#F5F3EF; border:1px solid rgba(15,27,45,.08); color:var(--ink);
}
.van365 .v365-ff-light .fluentform input::placeholder,
.van365 .v365-ff-light .fluentform textarea::placeholder{ color:#9aa3ad; }
.van365 .v365-ff-light .fluentform .ff-message-success,
.van365 .v365-ff-light .fluentform .ff_submit_success{ color:#16A34A; }

/* ============================================================
   Mobile polish — phone-specific tuning (≤640 / ≤480).
   Grids already collapse above; this fixes image heights,
   booking tabs overflow, CTA buttons, and tap targets.
   ============================================================ */
@media(max-width:768px){
  /* Service / About hero images are too tall on phones */
  .van365 [data-svc-hero] .v365-imgslot,
  .van365 [data-about-hero] .v365-imgslot{ height:300px !important; }
  /* Booking tabs: let them fit, smaller padding */
  .van365 [data-v365-tabs]{ width:100% !important; justify-content:space-between !important; }
  .van365 [data-v365-tab]{ flex:1; padding:9px 10px !important; font-size:12.5px !important; }
}
@media(max-width:480px){
  .van365 [data-svc-hero] .v365-imgslot,
  .van365 [data-about-hero] .v365-imgslot{ height:240px !important; }
  /* CTA buttons stack full-width so they're easy to tap */
  .van365 [data-cta-actions]{ width:100%; flex-direction:column; align-items:stretch; }
  .van365 [data-cta-actions] a{ justify-content:center; width:100%; }
  /* About-hero stat row: give each stat room */
  .van365 [data-stat-row]{ gap:22px !important; }
  /* Service-hero action buttons full width */
  .van365 [data-svc-hero] a[style*="border-radius:12px"]{ flex:1 1 100%; justify-content:center; }
  /* Slightly tighten very large section vertical padding on tiny screens */
  .van365 section{ }
}
/* Make booking tab labels never overflow the pill on any width */
.van365 [data-v365-tab]{ white-space:nowrap; }

/* ============================================================
   Reviews / Pricing / Fleet — responsive grids
   ============================================================ */
@media(max-width:980px){
  .van365 [data-reviews-grid]{ grid-template-columns:1fr 1fr !important; }
  .van365 [data-pricing-grid]{ grid-template-columns:1fr !important; }
  .van365 [data-fleet-grid]{ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:640px){
  .van365 [data-reviews-grid]{ grid-template-columns:1fr !important; }
  .van365 [data-fleet-grid]{ grid-template-columns:1fr !important; }
}

/* Hide phone number in header on mobile (too cramped) */
@media(max-width:1080px){
  .van365 .sh-phone-link{ display:none !important; }
}

/* ============================================================
   Contrast improvements — sharper text on all backgrounds
   ============================================================ */
/* Ensure body/paragraph text is dark enough on cream backgrounds */
.van365 section p,
.van365 section li,
.van365 section span{ color:inherit; }

/* Pricing card featured: ensure full contrast on dark bg */
.van365 [data-pricing-grid] p,
.van365 [data-pricing-grid] li{ color:inherit; }

/* Footer: increase contrast on dark bg */
.van365 .ftr-grid p{
  color:rgba(255,255,255,.72);
}
.van365 footer a:hover{
  color:#FFB400 !important;
}

/* Trust bar text contrast */
.van365 [data-trust-bar] [data-reveal]{
  color:#fff;
}

/* Photo gallery responsive */
@media(max-width:980px){
  .van365 [data-gallery-grid]{ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:560px){
  .van365 [data-gallery-grid]{ grid-template-columns:1fr 1fr !important; }
}

/* Carousel: hide overflow cleanly + prevent text select while dragging */
.van365 .v365-carousel{ overflow:hidden; }
.van365 .v365-carousel-track{ user-select:none; }

/* ============================================================
   Universal carousel — reviews + photo gallery
   ============================================================ */
.van365 .v365-carousel{
  overflow:hidden;
  position:relative;
}
.van365 .v365-carousel-track{
  display:flex;
  gap:18px;
  transition:transform .42s cubic-bezier(.25,.8,.25,1);
  will-change:transform;
}
/* Desktop: 3 per view */
.van365 .v365-carousel-slide{
  flex:0 0 calc((100% - 36px) / 3);
  min-width:0;
  box-sizing:border-box;
}
/* Tablet: 2 per view */
@media(max-width:900px){
  .van365 .v365-carousel-slide{
    flex:0 0 calc((100% - 18px) / 2);
  }
}
/* Mobile: 1 per view */
@media(max-width:580px){
  .van365 .v365-carousel-slide{
    flex:0 0 100%;
  }
}
/* Photo gallery carousel slide */
.van365 .v365-gal-slide{
  flex:0 0 calc((100% - 28px) / 3);
  min-width:0;
  box-sizing:border-box;
}
@media(max-width:900px){
  .van365 .v365-gal-slide{
    flex:0 0 calc((100% - 14px) / 2);
  }
}
@media(max-width:580px){
  .van365 .v365-gal-slide{
    flex:0 0 100%;
  }
}
.van365 .v365-gal-slide img{
  display:block;
  width:100%;
  object-fit:cover;
  border-radius:16px;
  transition:transform .4s ease;
}
.van365 .v365-gal-slide:hover img{
  transform:scale(1.04);
}
/* Nav buttons */
.van365 .v365-nav-btn{
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid rgba(15,27,45,.13);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(15,27,45,.1);
  transition:background .18s,box-shadow .18s;
  flex:none;
}
.van365 .v365-nav-btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 6px 18px rgba(255,180,0,.35);
}