/* =========================================================
   Elementor Extra — buttons
   Loaded on every front-end page, so the classes work anywhere:

     <a class="ee-media-btn ee-media-btn--primary" href="…">Book now</a>

   Variants: --primary --secondary --light --dark
   Sizes:    --sm --md (default) --lg      Full width: --block

   Values come from Elementor > Site Settings > Elementor Extra Buttons,
   which writes the --ee-btn-* variables. The fallbacks below match that
   tab's defaults, so buttons look right before it's ever saved.
   ========================================================= */

/* Font defaults at zero specificity, so the Typography set in
   Site Settings always wins over them. */
:where(.ee-media-btn) {
  font-weight: 700;
  line-height: 1.2;
}

/* Doubled class: beats Elementor's own global link / button colors
   (.elementor-kit-N a, .elementor-kit-N button) without !important. */
.ee-media-btn.ee-media-btn {
  --_scale: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ee-btn-gap, 8px);
  box-sizing: border-box;
  padding:
    calc(var(--ee-btn-py, 14px) * var(--_scale))
    calc(var(--ee-btn-px, 28px) * var(--_scale));
  border: var(--ee-btn-border-width, 2px) solid var(--_border);
  border-radius: var(--ee-btn-radius, 8px);
  background-color: var(--_bg);
  color: var(--_text);
  font-size: calc(var(--ee-btn-fs, 16px) * var(--_scale));
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: blur(var(--_blur));
          backdrop-filter: blur(var(--_blur));
  box-shadow: none;
  transition:
    color var(--ee-btn-speed, 250ms) ease,
    background-color var(--ee-btn-speed, 250ms) ease,
    border-color var(--ee-btn-speed, 250ms) ease,
    transform var(--ee-btn-speed, 250ms) ease,
    box-shadow var(--ee-btn-speed, 250ms) ease;
}

.ee-media-btn.ee-media-btn:hover,
.ee-media-btn.ee-media-btn:focus-visible {
  border-color: var(--_hborder);
  background-color: var(--_hbg);
  color: var(--_htext);
  text-decoration: none;
  transform: translateY(calc(var(--_lift) * -1)) scale(var(--_grow));
  box-shadow: 0 10px 26px -10px rgb(0 0 0 / calc(var(--_glow) * 0.55));
}

.ee-media-btn.ee-media-btn:focus-visible {
  outline: 3px solid var(--ee-btn-focus, #1d2a3a);
  outline-offset: 3px;
}

/* "Shine": a band of light sweeps across on hover */
.ee-media-btn.ee-media-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  opacity: var(--_shine);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.ee-media-btn.ee-media-btn:hover::after,
.ee-media-btn.ee-media-btn:focus-visible::after { transform: translateX(120%); }

/* ---------- variants ---------- */
.ee-media-btn--primary {
  --_text:    var(--ee-btn-primary-text, #ffffff);
  --_bg:      var(--ee-btn-primary-bg, #df241b);
  --_border:  var(--ee-btn-primary-border, #df241b);
  --_htext:   var(--ee-btn-primary-hover-text, #ffffff);
  --_hbg:     var(--ee-btn-primary-hover-bg, #a81b14);
  --_hborder: var(--ee-btn-primary-hover-border, #a81b14);
  --_blur:    var(--ee-btn-primary-blur, 0px);
  --_lift:    var(--ee-btn-primary-lift, 2px);
  --_grow:    var(--ee-btn-primary-grow, 1);
  --_glow:    var(--ee-btn-primary-glow, 0.6);
  --_shine:   var(--ee-btn-primary-shine, 0);
}
.ee-media-btn--secondary {
  --_text:    var(--ee-btn-secondary-text, #ffffff);
  --_bg:      var(--ee-btn-secondary-bg, #24314d);
  --_border:  var(--ee-btn-secondary-border, #24314d);
  --_htext:   var(--ee-btn-secondary-hover-text, #ffffff);
  --_hbg:     var(--ee-btn-secondary-hover-bg, #161f33);
  --_hborder: var(--ee-btn-secondary-hover-border, #161f33);
  --_blur:    var(--ee-btn-secondary-blur, 0px);
  --_lift:    var(--ee-btn-secondary-lift, 2px);
  --_grow:    var(--ee-btn-secondary-grow, 1);
  --_glow:    var(--ee-btn-secondary-glow, 0.6);
  --_shine:   var(--ee-btn-secondary-shine, 0);
}
.ee-media-btn--light {
  --_text:    var(--ee-btn-light-text, #1d2a3a);
  --_bg:      var(--ee-btn-light-bg, #ffffff);
  --_border:  var(--ee-btn-light-border, #ffffff);
  --_htext:   var(--ee-btn-light-hover-text, #1d2a3a);
  --_hbg:     var(--ee-btn-light-hover-bg, #f1ece8);
  --_hborder: var(--ee-btn-light-hover-border, #f1ece8);
  --_blur:    var(--ee-btn-light-blur, 0px);
  --_lift:    var(--ee-btn-light-lift, 2px);
  --_grow:    var(--ee-btn-light-grow, 1);
  --_glow:    var(--ee-btn-light-glow, 0.6);
  --_shine:   var(--ee-btn-light-shine, 0);
}
.ee-media-btn--dark {
  --_text:    var(--ee-btn-dark-text, #ffffff);
  --_bg:      var(--ee-btn-dark-bg, #010101);
  --_border:  var(--ee-btn-dark-border, #010101);
  --_htext:   var(--ee-btn-dark-hover-text, #010101);
  --_hbg:     var(--ee-btn-dark-hover-bg, #ffffff);
  --_hborder: var(--ee-btn-dark-hover-border, #010101);
  --_blur:    var(--ee-btn-dark-blur, 0px);
  --_lift:    var(--ee-btn-dark-lift, 2px);
  --_grow:    var(--ee-btn-dark-grow, 1);
  --_glow:    var(--ee-btn-dark-glow, 0.6);
  --_shine:   var(--ee-btn-dark-shine, 0);
}
/* a button with no variant class looks like Primary */
.ee-media-btn:not(.ee-media-btn--secondary):not(.ee-media-btn--light):not(.ee-media-btn--dark) {
  --_text:    var(--ee-btn-primary-text, #ffffff);
  --_bg:      var(--ee-btn-primary-bg, #df241b);
  --_border:  var(--ee-btn-primary-border, #df241b);
  --_htext:   var(--ee-btn-primary-hover-text, #ffffff);
  --_hbg:     var(--ee-btn-primary-hover-bg, #a81b14);
  --_hborder: var(--ee-btn-primary-hover-border, #a81b14);
  --_blur:    var(--ee-btn-primary-blur, 0px);
  --_lift:    var(--ee-btn-primary-lift, 2px);
  --_grow:    var(--ee-btn-primary-grow, 1);
  --_glow:    var(--ee-btn-primary-glow, 0.6);
  --_shine:   var(--ee-btn-primary-shine, 0);
}

/* ---------- sizes ---------- */
.ee-media-btn.ee-media-btn--sm { --_scale: 0.8; }
.ee-media-btn.ee-media-btn--lg { --_scale: 1.2; }
.ee-media-btn.ee-media-btn--block { display: flex; width: 100%; }

/* ---------- icon ---------- */
.ee-media-btn__icon { display: inline-flex; line-height: 0; }
.ee-media-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }
.ee-media-btn__icon i { font-size: 1em; }

/* ---------- widget wrapper (alignment; "Full Width" switches the button to flex) ---------- */
.ee-media-btn-wrap { text-align: left; }
.ee-media-btn-wrap > .ee-media-btn.ee-media-btn { display: var(--ee-btn-wrap-display, inline-flex); }

@media (prefers-reduced-motion: reduce) {
  .ee-media-btn.ee-media-btn,
  .ee-media-btn.ee-media-btn::after { transition: none; }
  .ee-media-btn.ee-media-btn:hover,
  .ee-media-btn.ee-media-btn:focus-visible { transform: none; }
  .ee-media-btn.ee-media-btn::after { display: none; }
}