/*************************************************
 * FORMAVIS COMPONENTS · UI-Elemente & Komponenten
 *************************************************/

/* ============================================
   1) FV CARDS – Kontakt-Karten, Info-Karten
   ============================================ */

.fv-card {
  background: rgba(12, 13, 14, 0.96);
  border: 1px solid var(--fv-border);
  border-radius: 1rem;
  padding: 1.6rem 1.4rem;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  transition: 0.25s ease;
}

.fv-card:hover {
  border-color: rgba(44, 156, 124, 0.7);
  box-shadow:
    0 26px 55px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(44, 156, 124, 0.45);
  transform: translateY(-3px);
}

.fv-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 25%, #38c49a, #2C9C7C 45%, #0A4536 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 1rem;
}

.fv-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--fv-text);
}

.fv-card p {
  color: var(--fv-text-soft);
  font-size: 0.95rem;
}


/* ============================================
   2) FV CONTACT CARDS & LAYOUT
   ============================================ */

.formavis-contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-bottom: 2rem;
}

@media (min-width: 780px) {
  .formavis-contact-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.formavis-contact-info {
  background: var(--fv-bg-elevated);
  border-radius: 18px;
  border: 1px solid var(--fv-border);
  padding: 1.7rem 1.5rem;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.8);
}

.formavis-contact-heading {
  margin-bottom: 0.8rem;
  font-size: 1.25rem;
  color: #F9FAFB;
}

.formavis-contact-block {
  font-size: 0.95rem;
  color: var(--fv-text-soft);
  margin-bottom: 0.9rem;
}

.formavis-contact-info a {
  color: var(--fv-primary-strong);
}
.formavis-contact-info a:hover {
  color: var(--fv-accent);
}


/* ============================================
   3) FV BUTTONS
   ============================================ */

.fv-button,
.fv-button-primary,
.formavis-form button[type="submit"] {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: 0.96rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, var(--fv-primary), var(--fv-primary-strong));
  color: #020617;
  border: none;
  transition: 0.12s ease;
  box-shadow: 0 18px 30px rgba(16, 185, 129, 0.4);
}

.fv-button:hover,
.fv-button-primary:hover,
.formavis-form button[type="submit"]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 24px 40px rgba(16, 185, 129, 0.5);
}


/* ============================================
   4) FV BADGES
   ============================================ */

.thankyou-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.22rem 0.9rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #BBF7D0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.95rem;
}

.fv-product-detected__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.75);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--fv-muted);
}


/* ============================================
   5) FV INFO & STATUS BOXEN
   ============================================ */

.formavis-pickup-status-box {
  margin: 1.5rem 0;
}

.formavis-pickup-ready {
  background: rgba(44, 156, 124, 0.15);
  border: 1px solid #2C9C7C;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  color: #E5F6EF;
}

.formavis-pickup-preparing {
  background: rgba(180, 111, 66, 0.15);
  border: 1px solid #B46F42;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  color: #F5E5D8;
}

.formavis-tracking-box {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--fv-border-soft);
  background: var(--fv-bg-soft);
}


/* ============================================
   6) FV THANK YOU PAGES
   ============================================ */

.thankyou-wrapper {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: radial-gradient(circle at top, #020617 0, #020617 45%, #000 100%);
}

.thankyou-card {
  max-width: 640px;
  background: var(--fv-bg-elevated);
  padding: 2.4rem 2.1rem;
  border-radius: 18px;
  border: 1px solid rgba(55, 65, 81, 0.95);
  color: var(--fv-text-soft);
  box-shadow:
    0 28px 52px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}

.thankyou-title {
  font-size: 1.6rem;
  color: #E5E7EB;
  margin-bottom: 0.6rem;
}

.thankyou-lead,
.thankyou-text {
  margin-bottom: 0.8rem;
}


/* ============================================
   7) FV DOWNLOAD BUTTON
   ============================================ */

.formavis-download-btn {
  display: inline-block;
  background: linear-gradient(135deg, #2C9C7C 0%, #0A4536 100%);
  color: #fff;
  padding: 0.9rem 1.6rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  transition: 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.formavis-download-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #35B58E, #0F5E48);
}


/* ============================================
   8) FV MY ACCOUNT (Navigation, Tabellen)
   ============================================ */

.woocommerce-MyAccount-navigation li a::before {
  margin-right: 0.4rem;
  display: inline-block;
  width: 1.2rem;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "🏠"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "🧾"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "⬇️"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "🏠"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "👤"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "🚪"; }

.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--fv-bg-elevated);
  border-radius: 18px;
  border: 1px solid var(--fv-border);
  padding: 1.8rem;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(5, 6, 7, 0.85);
}

.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  table-layout: fixed;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
  padding: 10px 8px;
}


/* ============================================
   9) FV ACCORDIONS (Erweitert)
   ============================================ */

.rr-accordion-header {
  background: rgba(12, 13, 14, 0.92);
  padding: 1rem 1.2rem;
  cursor: pointer;
}

.rr-accordion-content {
  padding: 1.1rem 1.2rem 1.4rem;
  border-top: 1px solid rgba(55, 65, 81, 0.74);
  background: var(--fv-bg-soft);
}


/* ============================================
   Ende Components
   ============================================ */