/* ============================================================
   _buttons.css — BUTTON COMPONENT (site-wide)

   Usage:
     <a class="btn btn-primary">Book a Dive</a>
     <button class="btn btn-outline">Cancel</button>
     Elementor Button widget → CSS Classes: "btn btn-primary"

   Variants:
     .btn-primary       gold filled, for CTAs
     .btn-outline       ghost over dark backgrounds
     .btn-outline-dark  ghost over light backgrounds
     .btn-sm / .btn-lg  size modifiers

   Architecture note:
     We target both `.btn .elementor-button` (V3 wrapper structure)
     AND `a.btn`, `button.btn` (raw HTML or V4 Atomic).
     This makes the component work everywhere without rewrites.
   ============================================================ */

/* ============================================
   BASE BUTTON
   ============================================ */
.btn .elementor-button,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bee-space-2xs);
  padding: 1.25rem 1.75rem;
  border-radius: var(--bee-radius-pill);
  font-family: inherit;
  font-size: var(--bee-text-base);
  font-weight: 600;
  letter-spacing: var(--bee-tracking-wide);
  line-height: 1;
  /* border: 2px solid transparent; */
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--bee-duration-base) var(--bee-ease-out),
    background var(--bee-duration-base) var(--bee-ease-out),
    color var(--bee-duration-base) var(--bee-ease-out),
    border-color var(--bee-duration-base) var(--bee-ease-out),
    box-shadow var(--bee-duration-base) var(--bee-ease-out);
}

/* Elementor button reset — neutralize widget defaults so our styles win */
.btn .elementor-button {
  background: transparent;
}

.btn .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--bee-space-2xs);
}

/* Focus ring — keyboard accessibility */
.btn .elementor-button:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
  outline: 2px solid var(--bee-gold);
  outline-offset: 3px;
}

/* ============================================
   PRIMARY — gold filled
   ============================================ */
.btn-primary .elementor-button,
a.btn-primary,
button.btn-primary {
  background: var(--bee-gradient-gold);
  color: var(--bee-dark) !important;
  box-shadow:
    var(--bee-shadow-gold),
    var(--bee-shadow-inset-light);
}

.btn-primary .elementor-button:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-2px);
  color: var(--bee-dark);
  box-shadow:
    var(--bee-shadow-gold-strong),
    var(--bee-shadow-inset-light);
}

/* Primary button icon color */
.btn-primary .elementor-button-icon svg,
.btn-primary .elementor-button-icon i,
.btn-primary svg,
.btn-primary i {
  color: var(--bee-dark);
  fill: var(--bee-dark);
}

/* ============================================
   OUTLINE — ghost over dark backgrounds
   ============================================ */
.btn-outline .elementor-button,
a.btn-outline,
button.btn-outline {
  background: var(--bee-surface-glass) !important;
  color: #fff;
  border: 2px solid var(--bee-surface-border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-outline .elementor-button:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  background: var(--bee-surface-glass-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* ============================================
   OUTLINE DARK — ghost over light backgrounds
   ============================================ */
.btn-outline-dark .elementor-button,
a.btn-outline-dark,
button.btn-outline-dark {
  background: transparent;
  color: var(--bee-dark);
  border-color: rgba(2, 16, 31, 0.25);
}

.btn-outline-dark .elementor-button:hover,
a.btn-outline-dark:hover,
button.btn-outline-dark:hover {
  background: rgba(2, 16, 31, 0.05);
  color: var(--bee-dark);
  border-color: rgba(2, 16, 31, 0.5);
  transform: translateY(-2px);
}

/* ============================================
   ICONS INSIDE BUTTONS
   ============================================ */
.btn .elementor-button-icon svg,
.btn .elementor-button-icon i,
.btn svg,
.btn i {
  width: 16px;
  height: 16px;
  transition: transform var(--bee-duration-base) var(--bee-ease-out);
}

/* Arrow nudge on primary button hover */
.btn-primary:hover .elementor-button-icon svg,
.btn-primary:hover .elementor-button-icon i,
.btn-primary:hover svg,
.btn-primary:hover i {
  transform: translateX(4px);
}

/* ============================================
   SIZE VARIANTS
   ============================================ */
.btn-sm .elementor-button,
a.btn-sm,
button.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--bee-text-sm);
}

.btn-lg .elementor-button,
a.btn-lg,
button.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: var(--bee-text-lg);
}