/* PlayReview — components.css */

/* Age gate modal */
.age-gate-overlay{
  position:fixed;inset:0;background:rgba(9,20,22,.82);
  display:flex;align-items:center;justify-content:center;
  z-index:2000;padding:16px;
}
.age-gate-box{
  background:var(--bg-light);color:var(--text-light-bg);
  border-radius:12px;max-width:420px;width:100%;padding:28px 24px;
  text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.age-gate-box h2{padding-bottom:0}
.age-gate-box h2::after{margin-left:auto;margin-right:auto}
.age-gate-actions{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.age-gate-actions button{
  border:none;border-radius:8px;padding:.75em 1.6em;font-weight:600;cursor:pointer;
}
.btn-yes{background:var(--accent);color:#171200}
.btn-no{background:transparent;border:1px solid var(--text-light-bg)!important;color:var(--text-light-bg)}

/* Cookie banner */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1900;
  background:var(--bg-dark);color:var(--text-dark-bg);
  padding:14px 16px;
  display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--border-dark);
}
.cookie-banner p{margin:0;font-size:var(--fs-14);max-width:52ch;color:var(--text-dark-bg)}
.cookie-actions{display:flex;gap:10px}
.cookie-actions button{border-radius:6px;padding:.5em 1.1em;font-weight:600;cursor:pointer;border:1px solid var(--accent)}
.cookie-accept{background:var(--accent);color:#171200}
.cookie-reject{background:transparent;color:var(--text-dark-bg)}

/* Cards */
.card{
  background:#fff;border:1px solid var(--border-light);border-radius:10px;
  padding:18px 18px 16px;
}
.card h3{margin-bottom:.3em}
.card .meta{font-size:var(--fs-12);color:#5b6a68;margin-bottom:.6em}
.affiliate-note{font-size:var(--fs-12);color:#5b6a68;font-style:italic}

/* Fact row */
.fact-row{
  display:flex;align-items:center;gap:12px;border:1px solid var(--border-light);
  border-radius:8px;padding:10px 14px;background:#fff;margin-bottom:10px;
}
.fact-row .fact-num{font-family:'Fraunces',serif;font-size:var(--fs-22);font-variant-numeric:tabular-nums;color:var(--match-full)}
.fact-row .fact-label{font-size:var(--fs-14);color:#3d4a48}
.fact-row svg{flex:0 0 auto}

/* FAQ accordion */
.faq-item{border:1px solid var(--border-light);border-radius:8px;margin-bottom:10px;background:#fff}
.faq-item summary{
  cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3em;color:var(--accent)}
.faq-item[open] summary::after{content:"−"}
.faq-item .faq-answer{padding:0 16px 16px;font-size:var(--fs-14)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.35em;border-radius:999px;font-size:var(--fs-12);font-weight:700;padding:.3em .75em}
.badge-full{background:var(--match-full);color:#fff}
.badge-partial{background:var(--match-partial);color:#fff}
.badge-none{background:#8a938f;color:#fff}

/* Comparator */
.comparator-controls{
  background:var(--surface-dark);color:var(--text-dark-bg);border-radius:10px;
  padding:18px;margin-bottom:20px;
}
.comparator-controls legend{font-weight:600;padding:0 0 .5em}
.criteria-list{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:0;padding:0}
@media (min-width:600px){.criteria-list{grid-template-columns:1fr 1fr}}
.criteria-list label{display:flex;align-items:center;gap:.5em;font-size:var(--fs-14);cursor:pointer}
.criteria-list input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.comparator-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.comparator-actions button{
  background:var(--accent);color:#171200;border:none;border-radius:8px;
  padding:.6em 1.2em;font-weight:600;cursor:pointer;
}
.comparator-actions button.secondary{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.storage-note{font-size:var(--fs-12);color:#c3cfcc;margin-top:10px}

.comparator-table{width:100%;border-collapse:collapse;font-size:var(--fs-14);margin-bottom:20px}
.comparator-table caption{text-align:left;font-size:var(--fs-14);color:#5b6a68;margin-bottom:8px}
.comparator-table th,.comparator-table td{border:1px solid var(--border-light);padding:8px 10px;text-align:left;vertical-align:top}
.comparator-table thead th{background:var(--surface-dark);color:var(--text-dark-bg)}
.comparator-table tbody tr:nth-child(even){background:#faf7f0}

.restored-banner{
  background:#fff5e6;border:1px solid var(--accent);border-radius:8px;
  padding:10px 14px;margin-bottom:16px;font-size:var(--fs-14);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.restored-banner button{
  background:transparent;border:1px solid var(--accent);color:#7a4d13;
  border-radius:6px;padding:.4em .9em;cursor:pointer;font-weight:600;
}

/* Mobile card layout for comparator */
.hotel-cards{display:none;flex-direction:column;gap:14px}
.hotel-card{border:1px solid var(--border-light);border-radius:10px;padding:14px;background:#fff}
.hotel-card h3{margin-bottom:.3em}
.hotel-card dl{margin:0;font-size:var(--fs-14)}
.hotel-card dt{font-weight:600;margin-top:.5em}
.hotel-card dd{margin:0 0 .2em}
@media (max-width:600px){
  .comparator-table{display:none}
  .hotel-cards{display:flex}
}

@media (prefers-reduced-motion:no-preference){
  .comparator-table tbody tr{transition:background-color .2s ease}
}