/*
 * cta-polish.css — Phase 8 Premium CTA Redesign (white button system)
 * Sitewide override layer targeting NAMED button classes only.
 * NO attribute selectors — those break plain inline affiliate text links.
 * NEVER modify affiliate links, hrefs, tracking params, or button destinations.
 */

/* ─── Shared white-button variables ───────────────────────────────────────── */
:root {
  --cta-bg:           #ffffff;
  --cta-text:         #073f3d;
  --cta-border:       rgba(7, 63, 61, 0.18);
  --cta-shadow:       0 2px 8px rgba(7,63,61,.10), 0 1px 3px rgba(0,0,0,.07);
  --cta-shadow-hover: 0 8px 22px rgba(7,63,61,.16), 0 2px 6px rgba(0,0,0,.09);
  --cta-transition:   background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  --cta-radius-pill:  100px;
  --cta-radius-md:    10px;
}

/* ─── MASTER WHITE BUTTON RESET ───────────────────────────────────────────── */
/* All named CTA/booking button classes — NO href attribute selectors.         */

.nav-stays-btn,
.mobile-stays-btn,
.verdict-book-btn,
.btn-book,
.cta-block-btn,
.cta-box-btn,
.cta-band-btn,
.hotel-card-cta,
.hotel-book-btn,
.hotel-btn,
.boutique-btn,
.hbtn,
.hc-btn,
.hft-btn,
.sidebar-cta-btn,
.sidebar-cta,
.booking-button,
.sc-book-btn,
.price-check-btn,
.mobile-cta-bar-btn,
.hero-cta-btn,
.hw-cta,
.dt-cta,
.ct-cta,
.rv-card-cta,
.tc-card-cta,
.hotel-price-cta,
.hotel-pick-btn,
.hotel-card-book,
.cmp-link-btn,
.aff-callout-btn,
.guide-link-btn,
.premium-cta-primary,
.premium-booking-btn,
.premium-cta-secondary,
.premium-hero-cta {
  background: var(--cta-bg, #ffffff) !important;
  color: var(--cta-text, #073f3d) !important;
  border: 1px solid var(--cta-border, rgba(7,63,61,.18)) !important;
  box-shadow: var(--cta-shadow) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: var(--cta-transition) !important;
  letter-spacing: .012em !important;
}

/* ─── SHARED HOVER ────────────────────────────────────────────────────────── */

.nav-stays-btn:hover,
.mobile-stays-btn:hover,
.verdict-book-btn:hover,
.btn-book:hover,
.cta-block-btn:hover,
.cta-box-btn:hover,
.cta-band-btn:hover,
.hotel-card-cta:hover,
.hotel-book-btn:hover,
.hotel-btn:hover,
.boutique-btn:hover,
.hbtn:hover,
.hc-btn:hover,
.hft-btn:hover,
.sidebar-cta-btn:hover,
.sidebar-cta:hover,
.booking-button:hover,
.sc-book-btn:hover,
.price-check-btn:hover,
.mobile-cta-bar-btn:hover,
.mobile-cta-bar-btn:active,
.hero-cta-btn:hover,
.hw-cta:hover,
.dt-cta:hover,
.ct-cta:hover,
.rv-card-cta:hover,
.tc-card-cta:hover,
.hotel-price-cta:hover,
.hotel-pick-btn:hover,
.hotel-card-book:hover,
.cmp-link-btn:hover,
.aff-callout-btn:hover,
.guide-link-btn:hover,
.premium-cta-primary:hover,
.premium-booking-btn:hover,
.premium-cta-secondary:hover,
.premium-hero-cta:hover {
  background: #f5fafa !important;
  color: var(--cta-text, #073f3d) !important;
  border-color: rgba(7,63,61,.32) !important;
  box-shadow: var(--cta-shadow-hover) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* ─── PER-CLASS SIZING & SHAPE ────────────────────────────────────────────── */

/* Nav / top-of-page pill */
.nav-stays-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 9px 18px !important;
  font-size: .8rem !important;
}

nav .nav-stays-btn,
.sticky-nav .nav-stays-btn {
  font-size: .8rem !important;
  padding: 9px 18px !important;
}

/* Mobile nav booking bar */
.mobile-stays-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 10px 20px !important;
  font-size: .82rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Verdict/comparison page — pill, slightly larger */
.verdict-book-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 13px 26px !important;
  font-size: .9rem !important;
}

.verdict-book-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
}

/* Standard inline book */
.btn-book {
  border-radius: var(--cta-radius-pill) !important;
  padding: 11px 24px !important;
  font-size: .87rem !important;
}

/* CTA section block */
.cta-block-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 13px 30px !important;
  font-size: .92rem !important;
}

.cta-box-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 12px 26px !important;
  font-size: .88rem !important;
}

/* Hotel card CTA */
.hotel-card-cta,
.hotel-card-book {
  border-radius: var(--cta-radius-pill) !important;
  padding: 10px 20px !important;
  font-size: .83rem !important;
}

/* Hotel book / secondary hotel buttons */
.hotel-book-btn,
.hotel-btn,
.boutique-btn,
.hbtn,
.hft-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 10px 18px !important;
  font-size: .82rem !important;
}

.hc-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 9px 18px !important;
  font-size: .8rem !important;
}

/* Sidebar — block, full width, rounded rect */
.sidebar-cta-btn,
.sidebar-cta {
  border-radius: var(--cta-radius-md) !important;
  padding: 12px 16px !important;
  font-size: .85rem !important;
  display: block !important;
  text-align: center !important;
}

/* Scorecard full-width */
.sc-book-btn {
  border-radius: var(--cta-radius-md) !important;
  padding: 14px 16px !important;
  font-size: .9rem !important;
}

/* Price check */
.price-check-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 12px 24px !important;
  font-size: .85rem !important;
}

/* Mobile CTA bar */
.mobile-cta-bar-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 12px 20px !important;
  font-size: .85rem !important;
}

/* Hero CTA */
.hero-cta-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 13px 28px !important;
  font-size: .9rem !important;
}

/* Table check-prices link — compact, fits table cell */
.dt-cta,
.ct-cta {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: .78rem !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Hotel widget / within-content CTA */
.hw-cta {
  border-radius: var(--cta-radius-pill) !important;
  padding: 9px 18px !important;
  font-size: .82rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Review card / vibe card CTAs */
.rv-card-cta,
.tc-card-cta {
  border-radius: var(--cta-radius-pill) !important;
  padding: 10px 18px !important;
  font-size: .82rem !important;
}

/* Hotel price CTA, pick button */
.hotel-price-cta,
.hotel-pick-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 10px 20px !important;
  font-size: .83rem !important;
}

/* Comparison link buttons */
.cmp-link-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 11px 22px !important;
  font-size: .86rem !important;
}

/* Affiliate callout, guide link */
.aff-callout-btn,
.guide-link-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 10px 20px !important;
  font-size: .84rem !important;
}

/* Premium utility */
.premium-cta-primary,
.premium-booking-btn {
  border-radius: var(--cta-radius-pill) !important;
  padding: 13px 28px !important;
  font-size: .9rem !important;
}

.premium-cta-secondary {
  border-radius: var(--cta-radius-pill) !important;
  padding: 12px 26px !important;
  font-size: .88rem !important;
}

.premium-hero-cta {
  border-radius: var(--cta-radius-pill) !important;
  padding: 16px 36px !important;
  font-size: 1rem !important;
}

/* ─── HOTEL SCORE BUTTON — inline text link, not a box ───────────────────── */

.hs-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cta-text, #073f3d) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: rgba(7,63,61,.4) !important;
  transition: color .18s ease, text-decoration-color .18s ease !important;
  letter-spacing: .01em !important;
  padding: 0 !important;
  transform: none !important;
}

.hs-btn:hover {
  background: transparent !important;
  color: #0a5452 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(7,63,61,.7) !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ─── DECISION BUTTONS ────────────────────────────────────────────────────── */

.decision-btn {
  font-weight: 800 !important;
  letter-spacing: .012em !important;
  transition: var(--cta-transition) !important;
}

.decision-btn.primary,
.decision-btn.coral,
.decision-btn.outline {
  background: var(--cta-bg, #ffffff) !important;
  color: var(--cta-text, #073f3d) !important;
  border: 1px solid var(--cta-border, rgba(7,63,61,.18)) !important;
  box-shadow: var(--cta-shadow) !important;
}

.decision-btn.primary:hover,
.decision-btn.coral:hover,
.decision-btn.outline:hover {
  background: #f5fafa !important;
  border-color: rgba(7,63,61,.32) !important;
  box-shadow: var(--cta-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* ─── PREMIUM REUSABLE CLASSES ────────────────────────────────────────────── */

.premium-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .012em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--cta-transition);
  white-space: nowrap;
}

.premium-inline-cta {
  background: transparent !important;
  color: var(--cta-text, #073f3d) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  border-radius: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
  transform: none !important;
}

.premium-inline-cta:hover {
  background: transparent !important;
  color: #0a5452 !important;
  text-decoration: underline !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── FOCUS / ACCESSIBILITY ───────────────────────────────────────────────── */

.nav-stays-btn:focus-visible,
.verdict-book-btn:focus-visible,
.btn-book:focus-visible,
.sc-book-btn:focus-visible,
.hotel-book-btn:focus-visible,
.hc-btn:focus-visible,
.sidebar-cta-btn:focus-visible,
.booking-button:focus-visible,
.cta-block-btn:focus-visible,
.hotel-card-cta:focus-visible,
.premium-cta-primary:focus-visible,
.premium-booking-btn:focus-visible {
  outline: 3px solid rgba(7,63,61,.45) !important;
  outline-offset: 3px !important;
}

/* ─── MOBILE TOUCH TARGETS ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .verdict-book-btn {
    padding: 14px 24px !important;
    font-size: .88rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .sc-book-btn {
    padding: 15px 16px !important;
    font-size: .9rem !important;
  }

  .sidebar-cta-btn,
  .sidebar-cta {
    padding: 13px 16px !important;
    font-size: .88rem !important;
  }

  .btn-book {
    padding: 12px 22px !important;
    min-height: 44px !important;
  }

  .hotel-card-cta,
  .hotel-card-book {
    padding: 11px 18px !important;
    min-height: 42px !important;
  }

  .premium-hero-cta {
    padding: 15px 28px !important;
    font-size: .95rem !important;
  }
}