/**
 * gocta plugin skin — Tokyo Trip Guide theme
 *
 * The gocta plugin ([box], [cta], [appstore(s)], [gplay]) ships theme-agnostic
 * markup whose look came from the old Kadence stylesheet. This file restyles
 * every shortcode output with the theme design system. It loads AFTER the
 * plugin's own stylesheet (declared as a dependency), and the per-brand rules
 * use !important because the plugin's own brand rules do.
 *
 * The plugin serves other sites with other themes, so all skinning lives here
 * at theme level — never in the plugin.
 */

/* ── Container card ([box] and [cta]) ───────────────────────────────────── */

.addon-container {
  background: var(--w, #faf7f2);
  border: 1px solid var(--p2, #e5ddcf);
  border-radius: var(--r2, 14px);
  box-shadow: var(--sh-sm, 0 1px 4px rgba(0, 0, 0, .06));
  padding: 1.5rem;
  margin: 2rem 0;
  clear: both;
}

.addon-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink, #1a1714);
  margin: 0 0 .4rem;
}

/* The divider becomes the theme's red dash motif (see .sec-label::before) */
.addon-divider {
  border: 0;
  width: 44px;
  height: 3px;
  background: var(--r, #e0322c);
  border-radius: 2px;
  margin: .75rem 0 1rem;
}

.addon-text {
  font-family: var(--sans, sans-serif);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink3, #6b6459);
  margin: 0 0 1.15rem;
  max-width: 68ch;
}

/* ── Button grid ──────────────────────────────────────────────────────────
   Compact card rows, sized for inline placement mid-article: brand-colour
   icon chip, "Book on" eyebrow over the name (built with grid placement,
   since the plugin's label is a bare text node), chevron on the right. */

.addon-list.gocta-single-item,
.addon-list.gocta-even-items,
.addon-list.gocta-odd-items {
  gap: .6rem !important;
}

/* An odd count's last row spans full width as a row card, instead of the
   plugin's centred 500px block */
.addon-list.gocta-odd-items .addon-item:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  max-width: none !important;
}

/* ── 3-column mode: 6+ items with room to breathe ─────────────────────────
   A 6-track grid with span-2 items, so leftovers balance cleanly:
   count % 3 == 1 → the last card goes full width; count % 3 == 2 → the
   last two split the final row. Container query + :has() — where either
   is unsupported the grid simply stays 2-column. The 720px threshold sits
   above the plugin's 767px viewport breakpoint so the two never fight. */

.addon-container { container-type: inline-size; }

@container (min-width: 720px) {
  .addon-list.gocta-even-items:has(> .addon-item:nth-child(6)),
  .addon-list.gocta-odd-items:has(> .addon-item:nth-child(6)) {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .addon-list.gocta-even-items:has(> .addon-item:nth-child(6)) .addon-item,
  .addon-list.gocta-odd-items:has(> .addon-item:nth-child(6)) .addon-item {
    grid-column: span 2 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* count % 3 == 1: the leftover card goes full width */
  .addon-list.gocta-even-items:has(> .addon-item:nth-child(6)) .addon-item:last-child:nth-child(3n+1),
  .addon-list.gocta-odd-items:has(> .addon-item:nth-child(6)) .addon-item:last-child:nth-child(3n+1) {
    grid-column: 1 / -1 !important;
  }

  /* count % 3 == 2: the last two cards split the final row evenly */
  .addon-list.gocta-even-items:has(> .addon-item:nth-child(6)) .addon-item:nth-last-child(2):nth-child(3n+1),
  .addon-list.gocta-odd-items:has(> .addon-item:nth-child(6)) .addon-item:nth-last-child(2):nth-child(3n+1),
  .addon-list.gocta-even-items:has(> .addon-item:nth-child(6)) .addon-item:last-child:nth-child(3n+2),
  .addon-list.gocta-odd-items:has(> .addon-item:nth-child(6)) .addon-item:last-child:nth-child(3n+2) {
    grid-column: span 3 !important;
  }
}

.addon-list .addon-item {
  display: block;
  padding: 0;
  text-decoration: none;
  background: var(--w, #faf7f2);
  border: 1px solid var(--p2, #e5ddcf);
  border-radius: var(--r1, 8px);
  box-shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 3px 10px rgba(26, 23, 20, .07);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.addon-list .addon-item:hover {
  border-color: var(--r, #e0322c);
  box-shadow: 0 2px 4px rgba(26, 23, 20, .06), 0 8px 20px rgba(26, 23, 20, .13);
  transform: translateY(-2px);
}

.addon-list .addon-item-flex {
  display: block;
}

/* The span becomes a transparent 3-column grid: [icon | texts | chevron].
   !important beats the plugin's own !important background/colour rules. */
.addon-list .addon-item .footer-partner-btn,
.addon-list .addon-item:hover .footer-partner-btn {
  background: transparent !important;
  color: var(--ink, #1a1714) !important;
}

/* The card (.addon-item) owns the hover lift; the plugin's span:hover
   transform/shadow would paint a floating rectangle on the transparent span */
.addon-list .footer-partner-btn:hover {
  transform: none;
  box-shadow: none;
}

.addon-list .footer-partner-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* The icon spans both rows and sets the height; eyebrow (align-self: end)
     and the name (start, via align-items) meet at the row boundary so the
     two text lines hug each other instead of drifting apart. */
  align-items: start;
  row-gap: 2px;
  column-gap: .65rem;
  width: 100%;
  padding: .55rem .8rem;
  border-radius: var(--r1, 8px);
  font-family: var(--sans, sans-serif);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-align: left;
  box-shadow: none;
}

/* Eyebrow label; the bare brand-name text node auto-places into the free
   cell directly below it (column 2, row 2) */
.addon-list .footer-partner-btn::before {
  content: "Book on";
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font: 700 .58rem/1.2 var(--cond, var(--sans, sans-serif));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3, #6b6459);
}

/* Brand-colour icon chip (set per brand below) */
.addon-list .footer-partner-btn img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 34px;
  height: 34px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--gocta-brand, var(--ink, #1a1714));
  object-fit: contain;
  margin-right: 0; /* column-gap handles spacing; kill the plugin's me-2 margin */
}

/* Chevron */
.addon-list .footer-partner-btn::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ink3, #6b6459);
  border-right: 2px solid var(--ink3, #6b6459);
  transform: rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}

.addon-list .addon-item:hover .footer-partner-btn::after {
  border-color: var(--r, #e0322c);
  transform: rotate(45deg) translate(2px, -2px);
}

/* Icons drawn in dark/coloured ink sit on a bordered white chip instead */
.addon-list .tripadvisor-btn img,
.addon-list .pelago-btn img,
.addon-list .rakuten-btn img {
  background: #fff !important;
  border: 1px solid var(--p2, #e5ddcf);
}

/* ── Brand colours ──────────────────────────────────────────────────────────
   Each brand paints only its icon chip (via --gocta-brand), matching the
   theme's booking-platform registry (ttg-booking-platforms.php); brands
   absent there use the plugin's palette. */

.addon-list .klook-btn            { --gocta-brand: #ff5722; }
.addon-list .viator-btn           { --gocta-brand: #176b6d; }
.addon-list .getyourguide-btn     { --gocta-brand: #ff6f00; }
.addon-list .bookingcom-btn       { --gocta-brand: #003580; }
.addon-list .tripcom-btn          { --gocta-brand: #2577e3; }
.addon-list .tripadvisor-btn      { --gocta-brand: #000000; }
.addon-list .traveloka-btn        { --gocta-brand: #4872f2; }
.addon-list .expedia-btn          { --gocta-brand: #FEBF4F; }
.addon-list .agoda-btn            { --gocta-brand: #d7163a; }
.addon-list .hostelworld-btn      { --gocta-brand: #f05a34; }
.addon-list .hotelscom-btn        { --gocta-brand: #EF3346; }
.addon-list .kkday-btn            { --gocta-brand: #26bec8; }
.addon-list .pelago-btn           { --gocta-brand: #212633; }
.addon-list .rakuten-btn          { --gocta-brand: #BF0000; }
.addon-list .ninjawifi-btn        { --gocta-brand: #191919; }
.addon-list .wegotrip-btn         { --gocta-brand: #1b8d8d; }
.addon-list .vrbo-btn             { --gocta-brand: #1d4ed8; }
.addon-list .gocity-btn           { --gocta-brand: #30898D; }
.addon-list .go12-btn             { --gocta-brand: #4DB84D; }
.addon-list .airalo-btn           { --gocta-brand: #FF8832; }
.addon-list .saily-btn            { --gocta-brand: #000000; }
.addon-list .yesim-btn            { --gocta-brand: #0B0B0E; }
.addon-list .discovercars-btn     { --gocta-brand: #007AC2; }
.addon-list .getrentacar-btn      { --gocta-brand: #BE0025; }
.addon-list .radicalstorage-btn   { --gocta-brand: #057E9F; }
.addon-list .visitorscoverage-btn { --gocta-brand: #2B3481; }
.addon-list .nordvpn-btn          { --gocta-brand: #3e5fff; }
.addon-list .compensair-btn       { --gocta-brand: #0a83ba; }
.addon-list .indrive-btn          { --gocta-brand: #a7e92f; }
.addon-list .rentalcars-btn       { --gocta-brand: #2e3192; }

/* ── App store badges ([gplay], [appstore], [appstores]) ────────────────────
   The plugin's black badges already fit the theme; only align type + radius. */

.gocta-button {
  font-family: var(--sans, sans-serif);
  border-radius: var(--r1, 8px);
}