/* ==========================================================
   Competitor Analyzer — EaseFy Futuristic Glass UI (fixed)
   - CTA text stays white on hover
   - Card no longer tilts on hover
   ========================================================== */

/* ---------- Brand tokens ---------- */
:root{
  --brand:#663d29;        /* EaseFy brown */
  --accent:#da926e;       /* Coral neon */
  --muted:#b59d55;        /* Gold */
  --bg:#f8f4f0;           /* Canvas */
  --ink:#3a2a22;

  --glass:rgba(255,250,243,.42);
  --glass-border:rgba(255,255,255,.38);
  --radius:18px;
  --pad:20px;
}

/* ---------- Canvas: soft digital grid ---------- */
body{
  background:
    radial-gradient(1200px 700px at 80% -10%, #da926e12, transparent 60%),
    radial-gradient(900px 600px at -10% 20%, #b59d5510, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 59px, #00000006 60px 60.5px),
    repeating-linear-gradient(0deg,  transparent 0 59px, #00000006 60px 60.5px),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Page title (gradient ink) ---------- */
.easefy-card > h1{
  font-weight:900;
  letter-spacing:.2px;
  margin: .5rem 0 1.25rem;
  background:linear-gradient(180deg,#3d281d 0%,#7b4b37 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* ---------- Outer card wrapper ---------- */
.easefy-card{
  width:min(980px, 100% - 48px);
  margin-inline:auto;
  margin-block: 22px 48px;
  padding: clamp(18px, 3vw, 28px);
  position:relative;
  isolation:isolate;

  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:
    0 10px 30px rgba(102,61,41,.18),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 0 1px rgba(218,146,110,.16);
  backdrop-filter: blur(14px) saturate(130%);
}
/* Holographic micro-border + grain */
.easefy-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:
    linear-gradient(140deg,#fff0,#da926e33 20%,#b59d5522 55%,#fff0 85%),
    linear-gradient(0deg,#ffffffb3,#ffffff66);
}
.easefy-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.02'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay; opacity:.55;
}

/* ---------- Form panel ---------- */
.competitor-form{
  width:100%;
  margin-inline:auto;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,250,243,.45));
  border:1px solid var(--glass-border);
  border-radius:calc(var(--radius) - 4px);
  padding: clamp(16px, 2.6vw, 26px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* Fieldsets & legends */
.easefy-fieldset{
  border:none;
  margin:0 0 clamp(12px, 2vw, 18px);
  padding:0;
}
.easefy-fieldset > legend{
  font-weight:800;
  color:#7b4b37;
  margin-bottom:.45rem;
}

/* Grid for competitor inputs */
.grid-competitors{
  display:grid;
  gap: clamp(10px, 2vw, 14px);
  grid-template-columns: 1fr;
}
@media (min-width: 660px){
  .grid-competitors{ grid-template-columns: 1fr; }
}

/* Inputs — glass + neon focus */
.easefy-input{
  width:100%;
  padding:.8rem .95rem;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background:linear-gradient(180deg, #ffffffb5, #ffffff7a);
  color:var(--ink);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition:.2s ease;
}
.easefy-input::placeholder{ color:#a48778; }
.easefy-input:focus{
  outline:0;
  border-color:#e4c2b3;
  box-shadow:0 0 0 3px rgba(218,146,110,.22);
}

/* ---------- Actions row ---------- */
.actions{
  display:flex; align-items:center; gap:.8rem;
  margin-top: .35rem;
  position:sticky; bottom: -1px; /* sticks within card on long pages */
  padding-top:.5rem;
  background: linear-gradient(180deg, #fff0, #fffaf380);
  backdrop-filter: blur(4px);
  border-top:1px solid rgba(255,255,255,.35);
}

/* CTA button — brand gradient glass */
.easefy-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,#7a4a35 0%, #633924 55%, #da926e 120%);
  box-shadow:0 10px 22px rgba(102,61,41,.24), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  width:100%;
}
/* Keep text white across all states (fix) */
.easefy-btn,
.easefy-btn:hover,
.easefy-btn:focus,
.easefy-btn:active{ color:#fff !important; }
.easefy-btn *{ color:#fff !important; }

/* Hover animation (no color change) */
.easefy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(102,61,41,.28);
  filter:saturate(1.02);
}

/* Loading chip */
.loading{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .7rem;
  background:linear-gradient(180deg,#e6c1b1,#d39a84);
  color:#5a3728; border-radius:999px;
  font-weight:700; font-size:.95rem;
  box-shadow:0 6px 12px rgba(102,61,41,.12);
}
.hidden{ display:none !important; }

/* ---------- Results: glass sections ---------- */
.results-container,
.results-section{
  margin-top: 18px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 26px rgba(102,61,41,.12);
  backdrop-filter: blur(10px) saturate(120%);
}

/* Tables */
.results-container table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,250,243,.55));
  border:1px solid var(--glass-border);
  border-radius:12px;
  overflow:hidden;
}
.results-container th,
.results-container td{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:left;
}
.results-container thead th{
  background:linear-gradient(180deg,#ffe9c8,#ffd296);
  color:#5e3a15; font-weight:800;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.results-container tbody tr:nth-child(even){
  background:linear-gradient(180deg, #ffffff66, #ffffff38);
}
.results-container tbody tr:hover{
  background:linear-gradient(180deg, rgba(122,74,53,.10), rgba(99,57,36,.10));
}

/* ---------- Remove tilt-on-hover (fix) ---------- */
@media (hover:hover){
  .easefy-card{ transition: box-shadow .25s ease; } /* keep subtle response */
  .easefy-card:hover{ transform:none; }             /* no tilt */
}

/* ---------- Responsive polish ---------- */
@media (max-width: 600px){
  .actions{ flex-direction:column; align-items:stretch; gap:.6rem; position:static; border-top:none; }
  .easefy-btn{ width:100%; }
}
/* ==========================================================
   FAQ — Futuristic Glass v4 (matches cards/buttons/tokens)
   Targets:
   <section ... aria-labelledby="faq-title"><div class="faq-list"><details>...</details></div></section>
   ========================================================== */


/* Center the FAQ section heading and keep consistent gutters */
section[aria-labelledby="faq-title"] h2{
  width: min(var(--maxw), 100% - 2*var(--gutter));
  margin: 28px auto 12px;
  text-align:center;
}

/* Layout the list like stacked glass cards */
.faq-list{
  width: min(var(--maxw), 100% - 2*var(--gutter));
  margin-inline:auto;
  display:grid;
  gap: clamp(12px, 2.4vw, 20px);
}

/* Glass card base for each Q/A */
.faq-list details{
  position:relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(130%);
  padding: var(--pad);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform, box-shadow;
}

/* Subtle neon edge like other cards */
.faq-list details::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(218,146,110,.28), 0 0 24px rgba(218,146,110,.18);
}

/* Micro-lift on hover (NO text color change) */
.faq-list details:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(102,61,41,.22), inset 0 1px 0 rgba(255,255,255,.55);
  /* slightly richer glass without darkening text contrast */
  background: linear-gradient(180deg, rgba(255,250,243,.92), rgba(255,250,243,.66));
}

/* Open state = keep stronger surface + glow */
.faq-list details[open]{
  background: linear-gradient(180deg, rgba(255,250,243,.90), rgba(255,250,243,.65));
  box-shadow: var(--glass-shadow), 0 0 36px rgba(218,146,110,.22);
}

/* Summary (question row) */
.faq-list summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; gap:.75rem;
  margin:-.2rem 0 0;
  padding-right: 2.2rem; /* room for chevron */
  color:var(--brand);
  font-weight:800;
  letter-spacing:.2px;
  user-select:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }

/* Chevron icon (rotates when open) */
.faq-list summary::after{
  content:"";
  position:absolute; right:16px; top: calc(var(--pad) - 2px);
  width: 18px; height: 18px; opacity:.9;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
  transition: transform .18s ease, opacity .18s ease;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
}
.faq-list details[open] summary::after{ transform: rotate(180deg); }

/* Focus ring (keyboard + a11y) */
.faq-list summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(218,146,110,.35), 0 0 0 6px rgba(218,146,110,.18);
  border-radius: 12px;
}

/* Answer body */
.faq-list details > p{
  margin: .85rem 0 0;
  color: var(--ink);
  line-height:1.6;
  background: linear-gradient(180deg, rgba(255,250,243,.78), rgba(255,250,243,.52));
  border-radius: calc(var(--radius) - 6px);
  padding: clamp(10px, 1.6vw, 14px);
  animation: faqOpen .22s ease both;
}

/* Dark theme answer background */
[data-theme="dark"] .faq-list details{
  background: linear-gradient(180deg, rgba(31,28,26,.50), rgba(31,28,26,.32));
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .faq-list details > p{
  background: linear-gradient(180deg, rgba(31,28,26,.55), rgba(31,28,26,.38));
  color: rgba(255,255,255,.92);
}

/* Open/close content motion */
@keyframes faqOpen{
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Compact on small screens */
@media (max-width: 576px){
  .faq-list{ gap: 12px; }
  .faq-list summary{ padding-right: 1.9rem; }
}

/* Keep text readable on hover for this card (parity with homepage cards) */
#easefy-offers .seo-metric-card:hover{
  background: var(--glass);
  color: var(--ink);
}