/* Global design tokens — Figma/Webflow variables */
/* Import this file once at the app entry point (index.css or index.js) */
/* All component CSS files can reference these variables freely */

:host {
  /* Colors */
  --text-color-primary: #252525;
  --text-color-secondary: #666666;
  --text-color-link1: #d5332a;
  --text-color-link2: #23327b;
  --text-color-white: #ffffff;
  --background-color-white: #ffffff;
  --background-color-gray-light: #f5f5f5;
  --background-color-red: #d5332a;
  --background-color-navy-dark: #16223b;
  --border-color-gray-light: #c4c4c4;
  --border-color-red: #d5332a;
  --border-color-brown: #847c79;
  --border-color-navy: #23327b;

  /* Typography — Families */
  --font-family-body-primary: 'Lato', sans-serif;
  --font-family-body-secondary: 'Merriweather', serif;
  --font-family-heading: 'Playfair Display', serif;

  /* Typography — Sizes */
  --text-size-tiny: 11px;
  --text-size-small: 12px;
  --text-size-normal: 14px;
  --text-size-large: 19px;
  --heading-style-h4: 25px;
  --heading-style-h6: 15px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-xbold: 800;

  /* Typography — Line heights */
  --line-height-tiny: 16px;
  --line-height-small: 18px;
  --line-height-normal: 21px;
  --line-height-large: 40px;
  --line-height-h4: 39px;

  /* Typography — Letter spacing */
  --letter-spacing-medium: 2px;

  /* Spacing */
  --space-tiny: 2px;
  --space-xxxsmall: 4px;
  --space-xxsmall: 8px;
  --space-xsmall: 16px;
  --space-small: 20px;
  --space-medium: 24px;
  --space-large: 32px;
  --padding-section-large: 96px;
  --padding-global: 144px;

  /* Container widths */
  --container-large: 1440px;
  --container-medium: 960px;
  --container-xxsmall: 273px;
}

/* Responsive token overrides */
@media (max-width: 767px) {
  :host {
    --padding-global: 16px;
    --padding-section-large: 48px;
  }
}

/* BookBuySection — book detail buy module */

.book-buy-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  font-family: var(--font-family-body-primary);
}

.book-buy-section.is-loading {
  opacity: 0.7;
}

/* ========================================
   Skeleton (variants fetch + country detect)
   ======================================== */
.book-buy-skeleton .book-buy-tab-panel {
  align-items: center;
}

.book-buy-skel {
  display: inline-block;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background-size: 200px 100%;
  animation: book-buy-skel-shimmer 1.2s infinite linear;
}

@keyframes book-buy-skel-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.book-buy-skel-tab {
  width: 84px;
  height: 22px;
}

.book-buy-skel-price {
  width: 80px;
  height: 36px;
}

.book-buy-skel-cart {
  width: 100%;
  max-width: 320px;
  height: 44px;
}

.book-buy-skel-button {
  width: 120px;
  height: 36px;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .book-buy-skel {
    animation: none;
  }
}

/* ========================================
   Tabs (Internal variants)
   ======================================== */
.book-buy-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
}

.book-buy-tabs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-medium);
}

.book-buy-tabs-info {
  margin-left: var(--space-xsmall);
}

.book-buy-tab {
  position: relative;
  padding: var(--space-xxsmall) 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.15s ease;
}

.book-buy-tab:hover {
  color: var(--text-color-primary);
}

.book-buy-tab.is-active {
  color: var(--text-color-primary);
  font-weight: var(--font-weight-xbold);
}

.book-buy-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--text-color-link1);
}

/* Tab panel: price, Add to Cart, Share slot — all inline (matches client design) */
.book-buy-tab-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-medium);
  flex-wrap: wrap;
}

.book-buy-share-slot {
  display: inline-flex;
  align-items: center;
}

.book-buy-share-row {
  display: flex;
  align-items: center;
}

.book-buy-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-tiny);
  font-family: var(--font-family-heading);
  color: var(--text-color-primary);
}

.book-buy-price-symbol {
  font-size: var(--text-size-large);
  line-height: 1;
}

.book-buy-price-amount {
  font-size: 32px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

/* Add to Cart button — solid red. Height matched to the Share slot (44px). */
.book-buy-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-medium);
  background-color: var(--background-color-red);
  border: 2px solid var(--border-color-red);
  color: var(--text-color-white);
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-xbold);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.book-buy-cart-button:hover {
  background-color: var(--background-color-white);
  color: var(--text-color-link1);
}

/* ========================================
   Platforms / retailer buttons (External)
   ======================================== */
.book-buy-platforms {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}

.book-buy-also-available {
  display: flex;
  align-items: center;
  gap: var(--space-xxsmall);
}

.book-buy-also-text {
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-xbold);
  line-height: var(--line-height-normal);
  color: var(--text-color-primary);
}

/* Tooltip */
.book-buy-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  z-index: 9999;
}

.book-buy-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-color-link1);
  width: 24px;
  height: 24px;
}

.book-buy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 280px;
  padding: var(--space-xsmall);
  background-color: var(--background-color-white);
  border: 1px solid var(--border-color-gray-light);
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-small);
  line-height: var(--line-height-small);
  color: var(--text-color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.book-buy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--background-color-white) transparent transparent transparent;
}

/* Retailer button list — buttons hug content, wrap naturally */
.book-buy-retailers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xsmall);
}

.book-buy-retailer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxsmall) var(--space-small);
  border: 2px solid var(--border-color-navy);
  background-color: transparent;
  color: var(--text-color-link2);
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-xbold);
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.book-buy-retailer-button:hover {
  background-color: var(--text-color-link2);
  color: var(--text-color-white);
}

/* Empty / fallback */
.book-buy-empty {
  padding: var(--space-medium);
  text-align: center;
  color: var(--text-color-secondary);
  font-style: italic;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 767px) {
  .book-buy-tooltip {
    width: 240px;
  }
}