/* PhoneHub — component styles that complement Tailwind */

[x-cloak] { display: none !important; }

/* Nav links */
.nav-link { padding: .4rem .7rem; border-radius: .5rem; font-weight: 600; }
.nav-link:hover { background: rgb(241 245 249); }
.dark .nav-link:hover { background: rgb(30 41 59); }

/* Theme menu options */
.theme-opt { display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .8rem; font-size: .875rem; text-align: start; }
.theme-opt:hover { background: rgb(239 246 255); }
.dark .theme-opt:hover { background: rgb(30 41 59); }

/* Filter selects */
.filter-sel { height: 2.5rem; padding: 0 .75rem; border-radius: .6rem; font-size: .875rem;
  background: rgb(241 245 249); border: 1px solid transparent; outline: none; width: 100%; }
.filter-sel:focus { border-color: rgb(59 130 246); }
.dark .filter-sel { background: rgb(30 41 59); color: rgb(226 232 240); }

/* Page buttons */
.page-btn { min-width: 2.2rem; height: 2.2rem; display: inline-grid; place-items: center;
  border-radius: .55rem; font-size: .85rem; font-weight: 700;
  border: 1px solid rgb(226 232 240); }
.page-btn:hover { border-color: rgb(59 130 246); color: rgb(37 99 235); }
.dark .page-btn { border-color: rgb(51 65 85); }
.page-btn-active { background: rgb(37 99 235); color: #fff; border-color: rgb(37 99 235); }

/* Tag chips */
.tag-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem;
  border-radius: 9999px; font-size: .8rem; font-weight: 600;
  background: rgb(241 245 249); border: 1px solid rgb(226 232 240); }
.tag-chip:hover { border-color: rgb(59 130 246); color: rgb(37 99 235); }
.dark .tag-chip { background: rgb(30 41 59); border-color: rgb(51 65 85); }

/* Spec table */
.spec-box { border-radius: 1rem; border: 1px solid rgb(226 232 240);
  background: #fff; padding: 1rem; }
.dark .spec-box { border-color: rgb(30 41 59); background: rgb(15 23 42); }
.spec-row { display: flex; gap: 1rem; padding: .55rem .5rem; font-size: .875rem;
  border-bottom: 1px dashed rgb(226 232 240); }
.spec-row:last-child { border-bottom: 0; }
.dark .spec-row { border-color: rgb(30 41 59); }
.spec-label { width: 46%; flex-shrink: 0; color: rgb(100 116 139); }
.spec-value { font-weight: 600; }

/* Score tiles */
.score-tile { border-radius: .8rem; border: 1px solid rgb(226 232 240);
  background: #fff; padding: .6rem .5rem; text-align: center; }
.dark .score-tile { border-color: rgb(30 41 59); background: rgb(15 23 42); }

/* View buttons (phone gallery) */
.view-btn { padding: .35rem .9rem; border-radius: .5rem; font-size: .78rem; font-weight: 700;
  color: rgb(100 116 139); }
.view-btn:hover { color: rgb(37 99 235); }
.view-active { padding: .35rem .9rem; border-radius: .5rem; font-size: .78rem; font-weight: 700;
  background: rgb(37 99 235); color: #fff; }

/* FAQ */
.faq-item { border-radius: .9rem; border: 1px solid rgb(226 232 240);
  background: #fff; padding: .9rem 1.1rem; }
.dark .faq-item { border-color: rgb(30 41 59); background: rgb(15 23 42); }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: .925rem; list-style: none; }
.faq-item summary::before { content: '＋ '; color: rgb(37 99 235); font-weight: 900; }
.faq-item[open] summary::before { content: '－ '; }

/* Amazon CTA */
.amazon-btn { background: linear-gradient(180deg, #ffb14d, #f90); }
.amazon-btn:hover { filter: brightness(.95); }

/* Compare table */
.cmp-section { border-radius: 1rem; border: 1px solid rgb(226 232 240);
  background: #fff; overflow: hidden; margin-bottom: 1.25rem; }
.dark .cmp-section { border-color: rgb(30 41 59); background: rgb(15 23 42); }
.cmp-title { padding: .8rem 1rem; font-weight: 800; font-size: .95rem;
  background: rgb(248 250 252); border-bottom: 1px solid rgb(226 232 240); }
.dark .cmp-title { background: rgb(30 41 59); border-color: rgb(30 41 59); }
.cmp-row { display: grid; grid-template-columns: 1fr minmax(120px, 34%) 1fr;
  align-items: center; padding: .6rem .8rem; font-size: .85rem;
  border-bottom: 1px dashed rgb(241 245 249); }
.cmp-row:last-child { border-bottom: 0; }
.dark .cmp-row { border-color: rgb(30 41 59); }
.cmp-label { text-align: center; color: rgb(100 116 139); font-size: .75rem; padding: 0 .5rem; }
.cmp-val-a { text-align: end; font-weight: 600; }
.cmp-val-b { text-align: start; font-weight: 600; }
.cmp-diff { color: rgb(22 163 74); font-size: .72rem; font-weight: 800; }
.cmp-win-a { background: linear-gradient(90deg, rgba(16,185,129,.10), transparent 55%); }
.cmp-win-b { background: linear-gradient(270deg, rgba(16,185,129,.10), transparent 55%); }
.cmp-win-a .cmp-val-a, .cmp-win-b .cmp-val-b { color: rgb(5 150 105); font-weight: 800; }

/* Compare picker */
.comp-pick { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  border-radius: .9rem; border: 1px solid rgb(226 232 240); background: #fff; }
.comp-pick:hover { border-color: rgb(59 130 246); }
.dark .comp-pick { border-color: rgb(30 41 59); background: rgb(15 23 42); }

/* Visual size comparison */
.size-stage { position: relative; height: 380px; width: 260px; }
.size-phone { position: absolute; top: 50%; left: 50%; border-radius: 14px;
  transform: translate(-50%, -50%); transition: opacity .25s, box-shadow .25s; }
.size-a { border: 2px solid rgb(37 99 235); background: rgba(37,99,235,.10); }
.size-b { border: 2px solid rgb(225 29 72); background: rgba(225,29,72,.10); }
.size-front { z-index: 5; box-shadow: 0 10px 30px rgba(15,23,42,.18); opacity: 1; }
.size-back { z-index: 1; opacity: .55; }
.size-phone::after { content: attr(data-name); position: absolute; top: -1.4rem; left: 50%;
  transform: translateX(-50%); font-size: .62rem; font-weight: 800; white-space: nowrap; }

/* Best list rows */
.best-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem;
  border-radius: 1rem; border: 1px solid rgb(226 232 240); background: #fff;
  transition: border-color .15s; }
.best-row:hover { border-color: rgb(59 130 246); }
.dark .best-row { border-color: rgb(30 41 59); background: rgb(15 23 42); }
.rank { width: 2.2rem; height: 2.2rem; flex-shrink: 0; display: grid; place-items: center;
  border-radius: .7rem; background: rgb(241 245 249); font-weight: 900; }
.dark .rank { background: rgb(30 41 59); }
.rank-1 { background: #fef3c7; color: #b45309; }
.rank-2 { background: #e2e8f0; color: #475569; }
.rank-3 { background: #ffedd5; color: #c2410c; }

/* Rails (favorites / recent) */
.rail { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; }
.rail .rail-card { min-width: 150px; border-radius: 1rem; border: 1px solid rgb(226 232 240);
  background: #fff; padding: .7rem; text-align: center; position: relative; }
.dark .rail .rail-card { border-color: rgb(30 41 59); background: rgb(15 23 42); }

/* Ad slots */
.ad-slot { min-height: 90px; display: grid; place-items: center; border: 1px dashed
  rgb(203 213 225); border-radius: 1rem; margin: 1rem 0; color: rgb(148 163 184);
  font-size: .8rem; text-align: center; overflow: hidden; }
.dark .ad-slot { border-color: rgb(51 65 85); }

/* Post body */
.post-body h2 { font-size: 1.15rem; font-weight: 800; margin: 1.4rem 0 .6rem;
  color: rgb(15 23 42); }
.dark .post-body h2 { color: rgb(226 232 240); }
.post-body p { margin-bottom: .9rem; }

/* Favorite heart states */
.fav-btn[data-active="1"] { color: rgb(225 29 72); }
.fav-btn[data-active="1"] .fav-icon { content: "♥"; }

/* Toast */
#toast-root { display: flex; flex-direction: column; gap: .5rem; }
[dir="rtl"] #toast-root { right: auto; left: 1.25rem; }
.toast { padding: .7rem 1.1rem; border-radius: .8rem; font-size: .85rem; font-weight: 600;
  color: #fff; background: rgb(15 23 42); box-shadow: 0 10px 25px rgba(0,0,0,.25);
  animation: toast-in .25s ease; max-width: 320px; }
.toast-ok { background: rgb(5 150 105); }
.toast-err { background: rgb(225 29 72); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
.toast.hide { opacity: 0; transition: opacity .3s; }

/* line-clamp fallback (Tailwind CDN includes it, but be safe) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }