/*
 * Site custom styles that must persist across Tailwind rebuilds.
 * Keep this file loaded after /dist/style.css.
 */

/* Global Table Unified Redesign v2026-02 (Hibiki Standard) */
.table-panel,
main .overflow-x-auto:has(> table) {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid #dbe6e2 !important;
  background: linear-gradient(165deg, #ffffff 0%, #f5faf8 100%) !important;
  box-shadow: 0 16px 34px rgba(15, 42, 35, 0.08);
}

.table-panel:before,
main .overflow-x-auto:has(> table):before {
  content: "";
  position: absolute;
  right: -72px;
  top: -72px;
  width: 220px;
  height: 220px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(179, 146, 83, 0.16) 0%, rgba(179, 146, 83, 0) 70%);
  pointer-events: none;
}

.table-scroll {
  position: relative;
  overflow: auto;
}

/*
  Desktop goal: no horizontal scrollbars for tables.

  Why this happens:
  - The unified table panel adds a decorative ::before bubble positioned partly
    outside the panel (right/top negative offsets).
  - When the panel is also set to overflow:auto, that decoration becomes part of
    the scrollable overflow box and forces a horizontal scrollbar even if the
    table itself fits.

  Fix:
  - Keep table panels clipped (overflow hidden) so decoration never triggers
    scrollbars.
  - Force table layout + wrapping so real content also stays within the panel.
*/

@media (min-width: 1024px) {
  main .overflow-x-auto:has(> table) {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  main .overflow-x-auto:has(> table) > table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  main .overflow-x-auto:has(> table) > table th,
  main .overflow-x-auto:has(> table) > table td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }

  main .overflow-x-auto:has(> table) img,
  main .overflow-x-auto:has(> table) svg {
    max-width: 100%;
    height: auto;
  }
}

.table-redesign,
main .overflow-x-auto:has(> table) > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  color: #2f3c38;
  background: transparent;
}

.table-redesign th,
.table-redesign td,
main .overflow-x-auto:has(> table) > table th,
main .overflow-x-auto:has(> table) > table td {
  padding: 0.92rem 1rem;
  vertical-align: top;
  text-align: left;
}

.table-redesign thead th,
main .overflow-x-auto:has(> table) > table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #163e35 !important;
  color: #f1f8f4 !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.table-redesign tbody tr,
main .overflow-x-auto:has(> table) > table tbody tr {
  border-top: 0 !important;
}

.table-redesign tbody td,
main .overflow-x-auto:has(> table) > table tbody td {
  border-bottom: 1px solid #e1ece7;
}

.table-redesign tbody tr:nth-child(odd),
main .overflow-x-auto:has(> table) > table tbody tr:nth-child(odd) {
  background: rgba(246, 250, 248, 0.9);
}

.table-redesign tbody tr:hover,
main .overflow-x-auto:has(> table) > table tbody tr:hover {
  background: #eef7f2;
}

.table-redesign tbody tr:last-child td,
main .overflow-x-auto:has(> table) > table tbody tr:last-child td {
  border-bottom: 0;
}

.table-redesign.is-sticky-first th:first-child,
.table-redesign.is-sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
}

.table-redesign.is-sticky-first thead th:first-child {
  z-index: 7;
  background: #12342d !important;
}

.table-redesign.is-sticky-first tbody td:first-child {
  background: inherit;
  box-shadow: 10px 0 16px -14px rgba(10, 30, 25, 0.25);
}

.table-redesign .cell-strong {
  font-weight: 700;
  color: #173229;
}

.table-redesign .price-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: #fff6df;
  color: #6e4f0b;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid #f0ddab;
}

.table-redesign .price-tag-neutral {
  background: #ebf3ff;
  color: #1e4f9e;
  border-color: #cde0ff;
}

.table-caption-note {
  margin-top: 0.8rem;
  color: #5b6b66;
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .table-panel,
  main .overflow-x-auto:has(> table) {
    border-radius: 1rem;
    overflow-x: hidden;
  }

  .table-redesign th,
  .table-redesign td,
  main .overflow-x-auto:has(> table) > table th,
  main .overflow-x-auto:has(> table) > table td {
    padding: 0.68rem 0.82rem;
    font-size: 0.86rem;
  }

  .table-redesign thead th,
  main .overflow-x-auto:has(> table) > table thead th {
    font-size: 0.76rem;
  }

  .table-redesign,
  main .overflow-x-auto:has(> table) > table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .table-redesign.responsive-stack {
    min-width: 100%;
    border-spacing: 0 0.72rem;
  }

  .table-redesign.responsive-stack thead {
    display: none;
  }

  .table-redesign.responsive-stack tbody,
  .table-redesign.responsive-stack tr,
  .table-redesign.responsive-stack td {
    display: block;
    width: 100%;
  }

  .table-redesign.responsive-stack tbody tr {
    background: #fff !important;
    border: 1px solid #dfebe5;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(15, 42, 35, 0.06);
    margin-bottom: 0.8rem;
  }

  .table-redesign.responsive-stack tbody td {
    display: grid;
    grid-template-columns: 7.4rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.68rem 0.82rem;
    border-bottom: 1px dashed #e4ede9;
  }

  .table-redesign.responsive-stack tbody td:last-child {
    border-bottom: 0;
  }

  .table-redesign.responsive-stack tbody td:before {
    content: attr(data-label);
    font-size: 0.76rem;
    font-weight: 800;
    color: #38524b;
    letter-spacing: 0.02em;
  }

  .table-redesign.responsive-stack .mobile-key {
    grid-template-columns: 1fr;
    padding: 0.8rem 0.82rem;
    background: linear-gradient(90deg, #163e35 0%, #1d5246 100%);
    color: #fff;
    font-weight: 800;
  }

  .table-redesign.responsive-stack .mobile-key:before {
    content: none;
  }

  .table-redesign.responsive-stack .mobile-key .cell-strong {
    color: #fff;
  }

  .table-redesign.responsive-stack.is-sticky-first td:first-child {
    position: static;
    left: auto;
    box-shadow: none;
  }
}

/* Valuation Insight Redesign v2026-02 */
.valuation-insight-redesign {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(75% 130% at 8% 6%, rgba(194, 163, 101, 0.14) 0%, rgba(194, 163, 101, 0) 58%),
    radial-gradient(70% 120% at 95% 86%, rgba(29, 90, 76, 0.08) 0%, rgba(29, 90, 76, 0) 62%),
    linear-gradient(180deg, #f7f4ed 0%, #fbf8f1 100%);
}

.valuation-insight-redesign::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(90deg, rgba(129, 112, 76, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(129, 112, 76, 0.09) 1px, transparent 1px);
  background-size: 38px 38px;
}

.valuation-insight-redesign > .container {
  position: relative;
  z-index: 1;
}

.valuation-insight-redesign h2 {
  color: #2f2f35;
  font-family: "Noto Serif TC", "PMingLiU", serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.22;
}

.valuation-insight-redesign .grid.lg\:grid-cols-2 {
  align-items: start;
  gap: 1.5rem;
}

.valuation-insight-redesign .mt-6.space-y-5 > div,
.valuation-insight-redesign .fade-in-up.delay-1.h-full > div,
.valuation-insight-redesign .fade-in-up.delay-1 > div,
.valuation-insight-redesign .grid.grid-cols-1.lg\:grid-cols-2 > div {
  border: 1px solid #ddd7c9 !important;
  border-radius: 1.2rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 248, 241, 0.98) 100%) !important;
  box-shadow: 0 14px 28px rgba(62, 55, 42, 0.09);
}

.valuation-insight-redesign .mt-6.space-y-5 > div:hover,
.valuation-insight-redesign .fade-in-up.delay-1.h-full > div:hover,
.valuation-insight-redesign .fade-in-up.delay-1 > div:hover,
.valuation-insight-redesign .grid.grid-cols-1.lg\:grid-cols-2 > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(62, 55, 42, 0.14);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.valuation-insight-redesign h3 {
  color: #2f3b50;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.valuation-insight-redesign .grid.sm\:grid-cols-2 > div,
.valuation-insight-redesign .space-y-3 > li {
  border-radius: 0.8rem;
}

.valuation-insight-redesign .grid.sm\:grid-cols-2 > div {
  padding: 0.1rem 0.25rem;
}

.valuation-insight-redesign .grid.sm\:grid-cols-2 > div i,
.valuation-insight-redesign .space-y-3 > li i {
  color: #7f6330 !important;
}

.valuation-insight-redesign .flex.flex-wrap.gap-2 > span {
  border: 1px solid #d8cfbc;
  background: #f0ece3 !important;
  color: #3c3f49 !important;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.36rem 0.82rem !important;
  font-size: 0.88rem;
}

.valuation-insight-redesign .inline-flex.items-center.justify-center.bg-brand-gold,
.valuation-insight-redesign .inline-flex.items-center.justify-center.bg-white.border.border-gray-200,
.valuation-insight-redesign .bg-green-500.text-white.px-7.py-3.rounded-full,
.valuation-insight-redesign .bg-green-500.text-white.px-6.py-3.rounded-full,
.valuation-insight-redesign .rounded-xl.border.border-gray-100.p-4 {
  border-radius: 9999px !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.valuation-insight-redesign .inline-flex.items-center.justify-center.bg-brand-gold,
.valuation-insight-redesign .rounded-xl.border.border-gray-100.p-4:hover {
  box-shadow: 0 10px 20px rgba(141, 120, 74, 0.2);
}

.valuation-insight-redesign .font-bold.brand-dark.mb-2 i.fab.fa-whatsapp {
  color: #1f8f4f !important;
}

.valuation-insight-redesign .mt-6.p-5.rounded-2xl,
.valuation-insight-redesign .mt-6.p-4.rounded-xl,
.valuation-insight-redesign .mt-5.text-xs.text-gray-500 {
  background: linear-gradient(140deg, #f3f0e9 0%, #ece6d9 100%) !important;
  border: 1px solid #dad1bf;
  border-radius: 1rem !important;
}

@media (max-width: 1024px) {
  .valuation-insight-redesign .grid.lg\:grid-cols-2 {
    gap: 1.1rem;
  }
}

@media (max-width: 768px) {
  .valuation-insight-redesign {
    background:
      radial-gradient(85% 130% at 8% 8%, rgba(194, 163, 101, 0.14) 0%, rgba(194, 163, 101, 0) 58%),
      linear-gradient(180deg, #f8f5ee 0%, #fcf8f1 100%);
  }

  .valuation-insight-redesign::before {
    background-size: 28px 28px;
    opacity: 0.35;
  }

  .valuation-insight-redesign h2 {
    line-height: 1.3;
  }

  .valuation-insight-redesign .mt-6.space-y-5 > div,
  .valuation-insight-redesign .fade-in-up.delay-1.h-full > div,
  .valuation-insight-redesign .fade-in-up.delay-1 > div,
  .valuation-insight-redesign .grid.grid-cols-1.lg\:grid-cols-2 > div {
    border-radius: 1rem !important;
  }

  .valuation-insight-redesign .flex.flex-wrap.gap-2 > span {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem !important;
  }
}

/* Contrast fixes for CTA and valuation action buttons */
.global-bottom-cta h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

.global-bottom-cta p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.valuation-insight-redesign a.bg-gray-900 {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

.valuation-insight-redesign a.bg-gray-100 {
  background-color: #eef2f7 !important;
  color: #1f3448 !important;
  border: 1px solid #d9e1ea;
}

.valuation-insight-redesign a.bg-white.border.border-gray-200 {
  background-color: #ffffff !important;
  color: #1f3448 !important;
  border-color: #d2dae4 !important;
}

/* whisky-recovery specific color hardening */
.whisky-recovery-page .valuation-insight-redesign .valuation-link-dark {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

.whisky-recovery-page .valuation-insight-redesign .valuation-link-light {
  background-color: #eef2f7 !important;
  color: #1f3448 !important;
  border: 1px solid #d9e1ea !important;
}

.whisky-recovery-page .valuation-insight-redesign .valuation-call-btn {
  background-color: #1f2937 !important;
  color: #ffffff !important;
  border: 1px solid #1f2937 !important;
}

.whisky-recovery-page .global-bottom-cta #get-quote {
  color: #ffffff !important;
}

.whisky-recovery-page .global-bottom-cta p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* --------------------------------------------------
   Unified Primary CTA Buttons v2026-02
   Goal: make WhatsApp / Phone CTAs visually consistent across all pages
   (without changing per-page Tailwind class strings).
   -------------------------------------------------- */

/* WhatsApp main CTA (exclude floating round button by width/height utility classes) */
a[href^="https://wa.me/85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]) {
  background-color: #22c55e !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 1rem 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 16px 32px rgba(34, 197, 94, 0.25) !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

a[href^="https://wa.me/85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]):hover {
  background-color: #16a34a !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3) !important;
}

a[href^="https://wa.me/85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]):active {
  transform: translateY(0) scale(0.99) !important;
}

/* Phone main CTA (exclude plain footer links) */
a[href^="tel:+85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]) {
  background-color: rgb(142, 120, 74) !important; /* brand-gold */
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 1rem 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 16px 32px rgba(142, 120, 74, 0.22) !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

a[href^="tel:+85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]):hover {
  background-color: #5c4a2e !important; /* brand-dark */
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 20px 40px rgba(92, 74, 46, 0.25) !important;
}

/* Make icon spacing consistent (covers pages that forgot mr-2 etc.) */
a[href^="https://wa.me/85265061479"] i.fab.fa-whatsapp,
a[href^="tel:+85265061479"] i.fas.fa-phone-alt {
  margin-right: 0.25rem !important;
}

/* Safety: avoid unexpected underline on CTAs */
a[href^="https://wa.me/85265061479"][class*="rounded"],
a[href^="tel:+85265061479"][class*="rounded"] {
  text-decoration: none !important;
}