/**
 * Reviews Hub CSS (/reviews/)
 * Source: Final HTML/Reviews/Review Hub Page/alagheza_review_hub_v11_mobile_feature_swipe.html
 * Template: archive-alagheza_review.php
 */

:root {
  --blue: #123a8c; --blue2: #0b2a67; --green: #0aa64f; --red: #d5053a; --orange: #ff9800;
  --text: #101b3d; --muted: #5b6680; --line: #e5ebf5; --bg: #f7f9fd;
  --card: #fff; --soft: #eef6ff; --radius: 16px; --shadow: 0 8px 22px rgba(17, 43, 92, .06);
}

* { box-sizing: border-box; }
body.reviews-hub { margin:0; background:var(--bg); color:var(--text); font-family:'Tajawal',Arial,sans-serif; line-height:1.55; }
body.reviews-hub #al-page { max-width:none; margin:0; padding:0; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

.reviews-hub .page { max-width:1560px; margin:auto; padding:0 18px; }

/* ===== Hero ===== */
.reviews-hub .hero { margin-top:18px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(110deg,#fff 0%,#f4f9ff 100%); box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; min-height:330px; align-items:center; }
.reviews-hub .hero-copy { padding:42px 46px; }
.reviews-hub .breadcrumb { font-size:13px; color:var(--muted); margin-bottom:20px; display:flex; gap:8px; }
.reviews-hub .breadcrumb b { color:var(--blue); }
.reviews-hub h1 { font-size:40px; line-height:1.25; margin:0 0 14px; font-weight:900; color:#0b1638; }
.reviews-hub .hero-copy p { font-size:18px; color:#263554; margin:0 0 24px; max-width:640px; }
.reviews-hub .trust { display:flex; gap:26px; flex-wrap:wrap; color:#1a2b55; font-weight:800; font-size:14px; }
.reviews-hub .trust span { display:flex; align-items:center; gap:8px; }
.reviews-hub .trust i { font-style:normal; color:var(--green); }
.reviews-hub .hero-art { height:100%; min-height:300px; position:relative; display:grid; place-items:center; padding:30px; background:radial-gradient(circle at 65% 45%,#eaf3ff 0,#f7fbff 45%,transparent 70%); }
.reviews-hub .appliances { width:min(560px,100%); height:230px; position:relative; }
.reviews-hub .tv { position:absolute; right:0; bottom:28px; width:180px; height:106px; background:linear-gradient(135deg,#01245b,#0077c8 55%,#31d5ff); border:10px solid #111827; border-radius:9px; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.reviews-hub .tv:after { content:""; position:absolute; bottom:-30px; right:55px; width:70px; height:8px; background:#111827; border-radius:8px; }
.reviews-hub .fridge { position:absolute; right:210px; bottom:16px; width:120px; height:205px; background:linear-gradient(90deg,#202632,#4b5563); border-radius:16px; box-shadow:0 18px 34px rgba(0,0,0,.2); }
.reviews-hub .fridge:before { content:""; position:absolute; top:0; bottom:0; right:58px; width:2px; background:#9099a8; }
.reviews-hub .washer { position:absolute; right:350px; bottom:22px; width:110px; height:138px; background:linear-gradient(#fff,#e9eef5); border-radius:13px; box-shadow:0 15px 28px rgba(0,0,0,.13); }
.reviews-hub .washer:after { content:""; position:absolute; width:62px; height:62px; border:9px solid #1f2c42; border-radius:50%; right:24px; top:45px; background:radial-gradient(circle,#50b5ff,#142033 70%); }
.reviews-hub .ac { position:absolute; right:300px; top:10px; width:180px; height:46px; background:#fff; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.1); }
.reviews-hub .coffee { position:absolute; left:0; bottom:25px; width:72px; height:108px; background:linear-gradient(#1f2937,#020617); border-radius:15px; box-shadow:0 12px 26px rgba(0,0,0,.15); }

/* ===== Stats ===== */
.reviews-hub .stats { margin:-30px auto 28px; position:relative; z-index:2; max-width:1040px; background:#fff; border:1px solid var(--line); border-radius:16px; display:grid; grid-template-columns:repeat(4,1fr); box-shadow:var(--shadow); overflow:hidden; }
.reviews-hub .stat { padding:17px 20px; display:flex; align-items:center; justify-content:center; gap:14px; border-left:1px solid var(--line); }
.reviews-hub .stat:last-child { border-left:0; }
.reviews-hub .stat strong { font-size:22px; display:block; }
.reviews-hub .stat span { font-size:13px; color:var(--muted); font-weight:800; }
.reviews-hub .stat .emoji { font-size:30px; color:var(--orange); }

/* ===== Section Title ===== */
.reviews-hub .section-title { text-align:center; margin:30px 0 16px; font-size:22px; font-weight:900; }

/* ===== Cat Grid ===== */
.reviews-hub .cat-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.reviews-hub .cat-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 10px; text-align:center; box-shadow:var(--shadow); transition:.18s; }
.reviews-hub .cat-card:hover { transform:translateY(-3px); border-color:#c8d8f2; }
.reviews-hub .cat-icon { height:64px; display:grid; place-items:center; font-size:42px; margin-bottom:8px; }
.reviews-hub .cat-card h3 { font-size:15px; margin:0 0 3px; }
.reviews-hub .cat-card p { margin:0; color:var(--muted); font-size:13px; font-weight:700; }
.reviews-hub .view-all { display:inline-flex; margin-top:14px; color:var(--blue); font-weight:900; }

/* ===== Content Grid ===== */
.reviews-hub .content-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.reviews-hub .panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); min-height:270px; }
.reviews-hub .panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.reviews-hub .panel h2 { font-size:17px; margin:0; }
.reviews-hub .panel-head a { font-size:13px; color:var(--blue); font-weight:900; }
.reviews-hub .panel-wide { grid-column:1 / -1; }
.reviews-hub .panel-wide .review-row { grid-template-columns:64px 1fr auto; }
.reviews-hub .panel-wide .thumb { width:64px; height:46px; }
.reviews-hub .panel-wide .review-title { font-size:14px; }

/* Desktop: fixed 3 columns, row-major — Load More appends new rows (5 per column at 15 items). */
.reviews-hub .panel-wide .hub-rows {
  display:grid;
  grid-auto-flow:row;
  grid-template-columns:repeat(3, 1fr);
  column-gap:28px;
}
@media (max-width:1200px) {
  /* Tablet: 2 columns, row-major. */
  .reviews-hub .panel-wide .hub-rows {
    grid-template-columns:repeat(2, 1fr);
    column-gap:20px;
  }
}
@media (max-width:900px) {
  /* Mobile: single column. */
  .reviews-hub .panel-wide .hub-rows { grid-template-columns:1fr; }
}

/* Hub Load More + Back to Categories buttons */
.reviews-hub .hub-load-more {
  display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--blue); font-family:inherit; font-size:14px; font-weight:900;
  cursor:pointer; transition:.18s;
}
.reviews-hub .hub-load-more:hover { border-color:#c8d8f2; background:var(--soft); }
.reviews-hub .hub-load-more:disabled { cursor:wait; opacity:.7; }
.reviews-hub .hub-load-more.loading::after {
  content:""; width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:al-hub-spin .7s linear infinite;
}
@keyframes al-hub-spin { to { transform:rotate(360deg); } }
.reviews-hub .hub-back-cats {
  display:flex; margin:22px auto 0; align-items:center; gap:8px; padding:11px 24px;
  border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--blue2);
  font-family:inherit; font-size:14px; font-weight:900; cursor:pointer; transition:.18s; box-shadow:var(--shadow);
}
.reviews-hub .hub-back-cats:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.reviews-hub .review-row { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid #eef2f8; }
.reviews-hub .review-row:last-child { border-bottom:0; }
.reviews-hub .thumb { width:58px; height:42px; border-radius:8px; background:#f0f4fb; display:grid; place-items:center; overflow:hidden; position:relative; }.reviews-hub .thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }.reviews-hub .thumb .tp { font-size:20px; }
.reviews-hub .review-title { font-weight:900; font-size:13px; line-height:1.25; }
.reviews-hub .review-meta { font-size:12px; color:var(--muted); font-weight:700; }
.reviews-hub .stars { color:#ffad00; font-size:14px; white-space:nowrap; }
.reviews-hub .rating-num { font-weight:900; margin-inline-end:5px; color:var(--blue2); }
.reviews-hub .date { font-size:12px; color:var(--muted); font-weight:800; }
.reviews-hub .compare-row { display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin-bottom:8px; font-size:12px; font-weight:900; }
.reviews-hub .vs { width:30px; height:30px; border-radius:999px; border:1px solid #cbd7ef; display:grid; place-items:center; color:var(--blue); font-size:12px; background:#fff; }

/* Used row in panel */
.reviews-hub .used-row { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #eef2f8; }
.reviews-hub .used-row:last-child { border-bottom:0; }
.reviews-hub .used-title { font-weight:900; font-size:13px; line-height:1.2; }
.reviews-hub .used-meta { font-size:11px; color:var(--muted); font-weight:700; }
.reviews-hub .used-badge { font-size:10px; background:#f0f9f0; color:var(--green); border-radius:999px; padding:2px 6px; font-weight:900; display:inline-block; margin-top:2px; }
.reviews-hub .used-price { color:var(--blue); font-weight:900; font-size:15px; white-space:nowrap; }

/* ===== Feature Grid ===== */
.reviews-hub .feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:22px 0; }
.reviews-hub .feature { border:1px solid var(--line); border-radius:18px; min-height:360px; overflow:hidden; background:#fff; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.reviews-hub .feature-copy { padding:22px; text-align:center; }
.reviews-hub .feature h2 { margin:0 0 8px; font-size:21px; }
.reviews-hub .feature p { font-size:14px; color:#243554; margin:0 0 16px; font-weight:700; }
.reviews-hub .feature a.btn { display:inline-flex; justify-content:center; border:1px solid currentColor; background:#fff; border-radius:10px; padding:10px 22px; font-weight:900; }
.reviews-hub .green { background:linear-gradient(#f5fff9,#eaf8f0); }
.reviews-hub .blue { background:linear-gradient(#f8fbff,#edf4ff); }
.reviews-hub .orange { background:linear-gradient(#fff9f4,#fff0e7); }
.reviews-hub .purple { background:linear-gradient(#fbfaff,#f1efff); }
.reviews-hub .feature-art { flex:1; display:grid; place-items:center; padding:0 20px 20px; }

/* Brand grid in feature */
.reviews-hub .brand-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.reviews-hub .brand-card { border:1px solid var(--line); border-radius:12px; min-height:42px; display:grid; place-items:center; background:#fff; font-weight:900; font-size:12px; padding:4px; }

/* ===== Responsive ===== */
@media (max-width:1200px) {
  .reviews-hub .content-grid { grid-template-columns:1fr 1fr; }
  .reviews-hub .feature-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-hub .cat-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:900px) {
  .reviews-hub .page { padding:0 12px; }
  .reviews-hub .hero { grid-template-columns:1fr; margin-top:12px; }
  .reviews-hub .hero-copy { padding:24px 20px; text-align:center; }
  .reviews-hub .breadcrumb { text-align:center; margin-bottom:14px; }
  .reviews-hub h1 { font-size:30px; }
  .reviews-hub .hero-copy p { font-size:15px; }
  .reviews-hub .trust { justify-content:center; gap:14px; }
  .reviews-hub .hero-art { min-height:220px; padding:14px; }
  .reviews-hub .appliances { transform:scale(.75); height:210px; }
  .reviews-hub .stats { margin:14px 0 22px; grid-template-columns:repeat(2,1fr); }
  .reviews-hub .stat { border-bottom:1px solid var(--line); }
  .reviews-hub .cat-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-hub .content-grid { grid-template-columns:1fr; }
  .reviews-hub .feature-grid { grid-template-columns:1fr; }
  .reviews-hub .feature { min-height:0; }
}
@media (max-width:560px) {
  .reviews-hub .hero-copy { padding:22px 16px; }
  .reviews-hub h1 { font-size:26px; }
  .reviews-hub .stats { grid-template-columns:1fr 1fr; }
  .reviews-hub .stat { padding:12px 8px; gap:8px; }
  .reviews-hub .stat strong { font-size:18px; }
  .reviews-hub .cat-card { padding:14px 6px; }
  .reviews-hub .panel { padding:14px; }
  .reviews-hub .review-row { grid-template-columns:46px 1fr auto; }
  .reviews-hub .thumb { width:46px; height:38px; }
  .reviews-hub .brand-grid { gap:6px; }
  .reviews-hub .feature-copy { padding:18px; }
  .reviews-hub .feature-art { padding:0 14px 16px; }
  .reviews-hub .appliances { transform:scale(.6); transform-origin:center; height:180px; }
}
