/* ==========================================================================
   Somerset West Taxi Tours — Accordion Component
   Shared by [swtt_payment_policy] and [swtt_faq_accordion]. Self-contained
   (declares its own color variables rather than assuming the active theme's)
   so it renders consistently regardless of which theme the plugin runs on.
   Palette matches the plugin's existing "Pass Road" identity in
   assets/css/swtt-app.css.
   ========================================================================== */

.swtt-accordion-wrap {
  --swa-ink: #14181A;
  --swa-fynbos: #33493B;
  --swa-gold: #C99A3E;
  --swa-paper: #F7F4EC;
  --swa-border: rgba(20, 24, 26, 0.1);

  max-width: 800px;
  margin: 30px auto;
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #eee;
  font-size: 14px;
  color: var(--swa-ink);
}

.swtt-accordion-wrap h2,
.swtt-accordion-wrap h3 {
  font-family: 'Fraunces', Georgia, serif;
  margin: 0 0 6px;
}

.swtt-accordion-intro {
  color: #555;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.swtt-accordion-intro a {
  color: var(--swa-fynbos);
}

.swtt-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.swtt-accordion-item {
  border: 1px solid var(--swa-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.swtt-accordion-item:hover {
  border-color: rgba(201, 154, 62, 0.45);
  box-shadow: 0 4px 16px rgba(20, 24, 26, 0.06);
}

.swtt-accordion-item.is-open {
  border-color: rgba(201, 154, 62, 0.55);
  box-shadow: 0 6px 20px rgba(20, 24, 26, 0.08);
}

.swtt-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 16px 18px;
  font: inherit;
  color: var(--swa-ink);
}

.swtt-accordion-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.swtt-accordion-item.is-open .swtt-accordion-title {
  color: var(--swa-fynbos);
}

.swtt-accordion-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swa-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.swtt-accordion-icon svg {
  width: 11px;
  height: 11px;
  color: var(--swa-fynbos);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.swtt-accordion-item.is-open .swtt-accordion-icon {
  background: var(--swa-gold);
  transform: rotate(180deg);
}

.swtt-accordion-item.is-open .swtt-accordion-icon svg {
  color: #fff;
}

/* The animated part: a CSS-grid row that tweens from 0fr to 1fr. Cleaner
   and more reliable than animating max-height (no need to know the content's
   real height in advance, and it still handles reflow if content wraps
   differently at another viewport width). */
.swtt-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.swtt-accordion-item.is-open .swtt-accordion-panel {
  grid-template-rows: 1fr;
}

.swtt-accordion-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.swtt-accordion-panel-body {
  padding: 0 18px 18px;
  color: #555;
  font-size: 13px;
  line-height: 1.7;
}

.swtt-accordion-panel-body p {
  margin: 0 0 10px;
}

.swtt-accordion-panel-body p:last-child {
  margin-bottom: 0;
}

/* Bank details block inside the policy accordion's last item */
.swtt-accordion-bank-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}

.swtt-accordion-bank-table td {
  padding: 5px 0;
  font-size: 13px;
}

.swtt-accordion-bank-table td:first-child {
  color: #777;
}

.swtt-accordion-bank-table td:last-child {
  font-weight: 700;
  text-align: right;
}

.swtt-accordion-bank-note {
  font-size: 12px;
  color: #888;
  margin: 10px 0 0;
}

/* Gentle staggered entrance the first time the block scrolls into view.
   scroll-reveal.js (theme) or the plugin's own accordion.js adds
   .is-inview to the wrapper; each item's transition-delay is set inline
   per index so they cascade rather than all arriving at once. */
.swtt-accordion-item {
  opacity: 0;
  transform: translateY(10px);
}

.swtt-accordion-wrap.is-inview .swtt-accordion-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .swtt-accordion-panel,
  .swtt-accordion-icon,
  .swtt-accordion-icon svg,
  .swtt-accordion-item {
    transition: none !important;
  }

  .swtt-accordion-item {
    opacity: 1;
    transform: none;
  }
}