.elementor-kit-1139{--e-global-color-primary:#122E5C;--e-global-color-secondary:#E63312;--e-global-color-text:#99A1AF;--e-global-color-accent:#111827;--e-global-color-background:#FFFFFF;--e-global-color-backgroundAccent:#F5F5F5;--e-global-color-transparent:#00000000;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.5em;--e-global-typography-heading-xl-font-family:"EB Garamond";--e-global-typography-heading-xl-font-size:56px;--e-global-typography-heading-xl-font-weight:600;--e-global-typography-heading-xl-line-height:1.2em;--e-global-typography-heading-l-font-family:"EB Garamond";--e-global-typography-heading-l-font-size:48px;--e-global-typography-heading-l-font-weight:600;--e-global-typography-heading-l-line-height:1.2em;--e-global-typography-heading-m-font-family:"EB Garamond";--e-global-typography-heading-m-font-size:40px;--e-global-typography-heading-m-font-weight:600;--e-global-typography-heading-m-line-height:1.2em;--e-global-typography-heading-s-font-family:"EB Garamond";--e-global-typography-heading-s-font-size:18px;--e-global-typography-heading-s-font-weight:500;--e-global-typography-body-s-font-family:"Montserrat";--e-global-typography-body-s-font-size:14px;--e-global-typography-body-s-font-weight:400;--e-global-typography-body-s-line-height:1.5em;--e-global-typography-heading_xl-font-family:"Merriweather";--e-global-typography-heading_xl-font-size:56px;--e-global-typography-heading_xl-font-weight:600;--e-global-typography-heading_xl-line-height:1.2em;--e-global-typography-heading_l-font-family:"Merriweather";--e-global-typography-heading_l-font-size:48px;--e-global-typography-heading_l-font-weight:600;--e-global-typography-heading_l-line-height:1.2em;--e-global-typography-heading_m-font-family:"Merriweather";--e-global-typography-heading_m-font-size:40px;--e-global-typography-heading_m-font-weight:600;--e-global-typography-heading_m-line-height:1.2em;--e-global-typography-heading_s-font-family:"Merriweather";--e-global-typography-heading_s-font-size:18px;--e-global-typography-heading_s-font-weight:500;--e-global-typography-body_s-font-family:"Montserrat";--e-global-typography-body_s-font-size:14px;--e-global-typography-body_s-font-weight:400;--e-global-typography-body_s-line-height:1.5em;background-color:var( --e-global-color-background );--e-preloader-animation-duration:0ms;--e-preloader-delay:500ms;--e-preloader-width:10%;--e-preloader-opacity:1;}.elementor-kit-1139 button:hover,.elementor-kit-1139 button:focus,.elementor-kit-1139 input[type="button"]:hover,.elementor-kit-1139 input[type="button"]:focus,.elementor-kit-1139 input[type="submit"]:hover,.elementor-kit-1139 input[type="submit"]:focus,.elementor-kit-1139 .elementor-button:hover,.elementor-kit-1139 .elementor-button:focus{background-color:var( --e-global-color-secondary );}.elementor-kit-1139 e-page-transition{background-color:var( --e-global-color-backgroundAccent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{--lightbox-header-icons-size:0px;--lightbox-navigation-icons-size:30px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-1139{--e-global-typography-primary-font-size:22px;--e-global-typography-secondary-font-size:18px;--e-global-typography-heading-xl-font-size:48px;--e-global-typography-heading-l-font-size:40px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:18px;--e-global-typography-heading_xl-font-size:48px;--e-global-typography-heading_l-font-size:40px;--e-global-typography-heading_m-font-size:32px;--e-global-typography-heading_s-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-1139{--e-global-typography-primary-font-size:18px;--e-global-typography-secondary-font-size:16px;--e-global-typography-heading-xl-font-size:40px;--e-global-typography-heading-l-font-size:32px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:16px;--e-global-typography-heading_xl-font-size:40px;--e-global-typography-heading_l-font-size:32px;--e-global-typography-heading_m-font-size:32px;--e-global-typography-heading_s-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   LODGEGATE WEB — Elementor Custom CSS
   ============================================================
   HOW TO USE:
   In Elementor, go to: Hamburger Menu → Site Settings → Custom CSS
   Paste this entire file there. It will apply globally to every page.
   
   WHAT THIS DOES:
   This CSS bridges the gap between your Next.js/Tailwind design and
   Elementor. Elementor lets you set colors, fonts, and spacing per widget,
   but it CANNOT do advanced effects like glassmorphism, custom animations,
   gradient text, hover shadow escalation, or dark-mode page overrides.
   This file handles all of that automatically.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ────────────────────────────────────────────────────────────
   PURPOSE: Defines your exact brand values as reusable variables.
   Elementor's "Global Colors" only gives you 4 slots. This gives
   you unlimited named colors you can reference in any custom CSS
   throughout the site. If you ever rebrand, change them here ONCE
   and everything updates.
   ──────────────────────────────────────────────────────────── */
:root {
  /* Brand Palette */
  --brand:         #122E5C;
  --brand-light:   #1e4585;
  --brand-dark:    #0a1936;
  --brand-200:     #8ba3cc;   /* Light brand for text on dark backgrounds */

  /* Accent (CTA Red) */
  --accent:        #E63312;
  --accent-hover:  #cc2b0e;

  /* Neutrals */
  --text-primary:  #111827;
  --text-body:     #4B5563;
  --text-muted:    #9CA3AF;
  --bg-page:       #fdfdfd;
  --bg-subtle:     #F9FAFB;
  --border-light:  #F3F4F6;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 10px 30px rgba(0,0,0,0.1);
  --shadow-xl:     0 25px 50px rgba(0,0,0,0.15);

  /* Spacing Scale (matches Tailwind 4 defaults) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}


/* ────────────────────────────────────────────────────────────
   2. GLOBAL TYPOGRAPHY REFINEMENTS
   ────────────────────────────────────────────────────────────
   PURPOSE: Elementor lets you pick "Inter" as a font, but doesn't
   expose fine-grained letter-spacing, font-smoothing, or the
   specific tracking values your Next.js site uses. This ensures
   headings look sharp and body text is crisp on all screens.
   ──────────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
}

/* Tight tracking on large headings (matches Tailwind tracking-tight) */
h1, h2, h3,
.elementor-heading-title {
  letter-spacing: -0.025em;
}

/* Extra-tight on hero-size headings */
.elementor-widget-heading .elementor-size-xxl .elementor-heading-title,
h1.elementor-heading-title {
  letter-spacing: -0.035em;
}

/* Relaxed line-height for body text (matches Tailwind leading-relaxed) */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  line-height: 1.75;
}


/* ────────────────────────────────────────────────────────────
   3. GLASSMORPHISM STICKY HEADER
   ────────────────────────────────────────────────────────────
   PURPOSE: Your Next.js navbar uses `bg-white/80 backdrop-blur-md`
   for a frosted-glass effect. Elementor's sticky header settings
   can't do this natively. Apply this CSS class to your header
   section's "CSS Classes" field (Advanced tab): `glass-header`
   ──────────────────────────────────────────────────────────── */
.glass-header,
.glass-header > .elementor-container {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}


/* ────────────────────────────────────────────────────────────
   4. GRADIENT TEXT EFFECT
   ────────────────────────────────────────────────────────────
   PURPOSE: The Booking Widget page has gradient text ("Converts")
   and the Bespoke page has gradient text ("custom tailored.").
   Elementor can't do gradient text natively. Add CSS class
   `gradient-text-accent` or `gradient-text-gray` to any Heading.
   ──────────────────────────────────────────────────────────── */
.gradient-text-accent .elementor-heading-title {
  background: linear-gradient(to right, var(--accent), #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gray .elementor-heading-title {
  background: linear-gradient(to right, #e5e7eb, #6b7280);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ────────────────────────────────────────────────────────────
   5. CARD HOVER EFFECTS
   ────────────────────────────────────────────────────────────
   PURPOSE: Your Next.js cards have smooth shadow escalation and
   subtle scale transforms on hover. Elementor widgets don't have
   this built in. Add CSS class `hover-card` to any Elementor
   column or container that acts as a card.
   ──────────────────────────────────────────────────────────── */
.hover-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 16px;
}
.hover-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* For integration-style cards with arrow slide */
.hover-card-arrow:hover .elementor-icon {
  transform: translateX(8px);
  transition: transform 0.3s ease;
}


/* ────────────────────────────────────────────────────────────
   6. IMAGE ZOOM ON HOVER
   ────────────────────────────────────────────────────────────
   PURPOSE: Template preview cards zoom the image slightly on
   hover. Add CSS class `img-zoom` to the Image widget or its
   parent column.
   ──────────────────────────────────────────────────────────── */
.img-zoom img {
  transition: transform 0.7s ease;
}
.img-zoom:hover img {
  transform: scale(1.05);
}


/* ────────────────────────────────────────────────────────────
   7. SCROLL-TRIGGERED FADE-IN ANIMATIONS
   ────────────────────────────────────────────────────────────
   PURPOSE: Replaces Framer Motion's <FadeIn> component. Elementor
   Pro has built-in "Entrance Animation" (Fade In Up) which covers
   most cases. But if you want more control, add CSS class
   `fade-in-up` to any widget's Advanced → CSS Classes.
   
   NOTE: You likely won't need this — Elementor Pro's built-in
   entrance animations (Advanced → Motion Effects) work great.
   This is here as a fallback if you want CSS-only animations.
   ──────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}
.fade-in-up-delay-1 { animation-delay: 0.1s; }
.fade-in-up-delay-2 { animation-delay: 0.2s; }
.fade-in-up-delay-3 { animation-delay: 0.3s; }
.fade-in-up-delay-4 { animation-delay: 0.4s; }


/* ────────────────────────────────────────────────────────────
   8. BUTTON ENHANCEMENTS
   ────────────────────────────────────────────────────────────
   PURPOSE: Your buttons have smooth hover transitions and the
   arrow icon slides right on hover. Elementor buttons transition
   abruptly by default. These smooth that out.
   ──────────────────────────────────────────────────────────── */
.elementor-button {
  transition: all 0.3s ease !important;
}

/* Arrow slide effect: add class `btn-arrow` to Button widget */
.btn-arrow .elementor-button-icon {
  transition: transform 0.3s ease;
}
.btn-arrow:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* Pulse animation for the WP Rebuild Tracker nav dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}


/* ────────────────────────────────────────────────────────────
   9. STATS SECTION COLUMN DIVIDERS
   ────────────────────────────────────────────────────────────
   PURPOSE: The homepage stats bar has vertical dividers between
   columns. Elementor doesn't have column dividers. Add CSS class
   `stats-dividers` to the Section/Container wrapping the 4 stats.
   ──────────────────────────────────────────────────────────── */
.stats-dividers > .elementor-container > .elementor-column:not(:first-child) {
  border-left: 1px solid var(--brand-light);
}
@media (max-width: 767px) {
  .stats-dividers > .elementor-container > .elementor-column:not(:first-child) {
    border-left: none;
  }
}


/* ────────────────────────────────────────────────────────────
   10. TESTIMONIAL STAR STYLING
   ────────────────────────────────────────────────────────────
   PURPOSE: The testimonial cards have filled yellow stars.
   If you use Elementor's Star Rating widget or Icon widgets,
   apply this class `gold-stars` to the parent container.
   ──────────────────────────────────────────────────────────── */
.gold-stars .elementor-star-rating__wrapper i,
.gold-stars .elementor-icon i,
.gold-stars svg {
  color: #facc15 !important;
  fill: #facc15 !important;
}


/* ────────────────────────────────────────────────────────────
   11. BESPOKE PAGE — FULL DARK THEME
   ────────────────────────────────────────────────────────────
   PURPOSE: The /bespoke page uses a completely dark design
   (#0A0A0A background). Since Elementor pages share the same
   theme, we use a body class to scope dark styling. In WordPress:
   
   Option A: Add CSS class `page-bespoke` to the page body via
   Elementor → Page Settings → Advanced → Body Class
   
   Option B: Use the "Custom Body Class" plugin
   ──────────────────────────────────────────────────────────── */
.page-bespoke {
  background-color: #0A0A0A !important;
}
.page-bespoke .elementor-section,
.page-bespoke .e-con {
  color: #e5e7eb;
}
.page-bespoke h1,
.page-bespoke h2,
.page-bespoke h3,
.page-bespoke .elementor-heading-title {
  color: #ffffff !important;
}

/* Bespoke page gradient blobs */
.bespoke-blob-brand {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(18, 46, 92, 0.3);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.bespoke-blob-accent {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(230, 51, 18, 0.2);
  filter: blur(150px);
  pointer-events: none;
  z-index: 0;
}

/* Dark process cards (bespoke page) */
.dark-card {
  background: #18181b !important;
  border: 1px solid #27272a !important;
  border-radius: 24px;
  transition: background 0.3s ease;
}
.dark-card:hover {
  background: #27272a !important;
}
.dark-card .elementor-icon-box-icon {
  transition: transform 0.3s ease;
}
.dark-card:hover .elementor-icon-box-icon {
  transform: translateY(-8px);
}


/* ────────────────────────────────────────────────────────────
   12. CODE BLOCK MOCKUPS
   ────────────────────────────────────────────────────────────
   PURPOSE: The Integrations page has a fake terminal/code block.
   Add CSS class `code-mockup` to an HTML widget container.
   ──────────────────────────────────────────────────────────── */
.code-mockup {
  background: #111827;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #1f2937;
  box-shadow: var(--shadow-xl);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}
.code-mockup pre,
.code-mockup code {
  color: #34d399;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}
/* Terminal dots (decorative) */
.terminal-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.terminal-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.terminal-dots span:nth-child(1) { background: #ef4444; }
.terminal-dots span:nth-child(2) { background: #eab308; }
.terminal-dots span:nth-child(3) { background: #22c55e; }


/* ────────────────────────────────────────────────────────────
   13. HERO DECORATIVE GRADIENTS
   ────────────────────────────────────────────────────────────
   PURPOSE: Several pages have subtle gradient blurs in the
   background (the diagonal gradient on the homepage hero). Add
   CSS class `hero-gradient` to the Section and position a
   background shape using Elementor's Shape Divider or this CSS.
   ──────────────────────────────────────────────────────────── */
.hero-gradient::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -200px;
  width: 72rem;
  height: 42rem;
  transform: translateX(-50%) rotate(30deg);
  background: linear-gradient(to top right, var(--brand), var(--accent));
  opacity: 0.04;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}


/* ────────────────────────────────────────────────────────────
   14. ROUNDED CONTAINER UTILITIES
   ────────────────────────────────────────────────────────────
   PURPOSE: Quick border-radius classes to add to Elementor
   sections/containers. Use in Advanced → CSS Classes.
   ──────────────────────────────────────────────────────────── */
.rounded-2xl { border-radius: 16px !important; }
.rounded-3xl { border-radius: 24px !important; }
.rounded-full { border-radius: 9999px !important; }

/* Image frame: the hero image has a subtle outer frame */
.img-frame {
  background: rgba(17, 24, 39, 0.05);
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
}
.img-frame img {
  border-radius: 8px;
  box-shadow: var(--shadow-xl);
}


/* ────────────────────────────────────────────────────────────
   15. PRICING TABLE ENHANCEMENTS
   ────────────────────────────────────────────────────────────
   PURPOSE: Makes the Elementor Pricing Table widget match the
   current site's premium card styling. Add CSS class
   `premium-pricing` to the Pricing Table widget.
   ──────────────────────────────────────────────────────────── */
.premium-pricing {
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--brand-light) !important;
}
.premium-pricing .elementor-price-table__header {
  background-color: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border-light);
}


/* ────────────────────────────────────────────────────────────
   16. CONTACT PAGE FORM CONTAINER
   ────────────────────────────────────────────────────────────
   PURPOSE: Adds the gradient top-bar to the form container.
   Add `form-container` class to the column/container wrapping
   the Google Form or contact form.
   ──────────────────────────────────────────────────────────── */
.form-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
}
.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--brand), var(--accent), var(--brand));
  z-index: 10;
}


/* ────────────────────────────────────────────────────────────
   17. INTEGRATION CARD CATEGORY BADGES
   ────────────────────────────────────────────────────────────
   PURPOSE: Small uppercase badges like "Payments", "Marketing"
   on the integration cards. Add `badge` class to any Text widget
   that serves as a category tag.
   ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid #e5e7eb;
  padding: 4px 12px;
  border-radius: 9999px;
}


/* ────────────────────────────────────────────────────────────
   18. RESPONSIVE OVERRIDES
   ────────────────────────────────────────────────────────────
   PURPOSE: Fine-tunes mobile behavior that Elementor's responsive
   mode may not handle perfectly. These ensure proper stacking,
   text sizing, and spacing on smaller screens.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Reduce hero heading size on mobile */
  h1.elementor-heading-title {
    font-size: 2.5rem !important;
  }

  /* Full-width buttons on mobile */
  .elementor-button-wrapper {
    width: 100%;
  }
  .elementor-button {
    width: 100%;
    justify-content: center;
  }

  /* Reduce section padding on mobile */
  .elementor-section,
  .e-con {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  h1.elementor-heading-title {
    font-size: 3rem !important;
  }
}


/* ────────────────────────────────────────────────────────────
   19. SMOOTH SCROLL BEHAVIOR
   ────────────────────────────────────────────────────────────
   PURPOSE: Enables smooth scrolling when clicking anchor links
   (e.g., navigation to page sections).
   ──────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}


/* ────────────────────────────────────────────────────────────
   20. TECH BADGE PILLS (Bespoke Page)
   ────────────────────────────────────────────────────────────
   PURPOSE: The "Next.js 14 App Router", "Edge Middleware" etc.
   tech badges on the bespoke page. Add `tech-pill` class to
   Button widgets styled as non-clickable labels.
   ──────────────────────────────────────────────────────────── */
.tech-pill .elementor-button {
  background: #18181b !important;
  border: 1px solid #27272a !important;
  border-radius: 9999px !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  font-size: 14px !important;
  color: #d4d4d8 !important;
  pointer-events: none;
  cursor: default;
}/* End custom CSS */