/* Dubai Storage Reviews — review-portal design system. Trust-green/teal. */
:root{
  --green:#0e9f6e;--teal:#0d8a8a;--gold:#f5b50a;--ink:#1a2b26;--muted:#5b6b66;
  --surface:#fff;--tint:#f3faf7;--border:#dce9e3;--lowbar:#9fc7bd;
  --maxw:960px;--radius:12px;--shadow:0 1px 3px rgba(26,43,38,.07),0 6px 18px rgba(26,43,38,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--surface);line-height:1.6;font-size:17px;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;color:var(--ink)}
h1{font-size:2rem;margin:.2em 0 .5em}
h2{font-size:1.4rem;margin:1.8em 0 .6em;border-bottom:2px solid var(--border);padding-bottom:.25em}
h3{font-size:1.12rem;margin:1.4em 0 .4em}
p{margin:.7em 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--green);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}

/* ---- header / nav ---- */
.site-head{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(26,43,38,.03)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;max-width:var(--maxw);margin:0 auto}
.brand{font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .star{color:var(--green)}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.main-nav a{color:var(--muted);font-weight:600;font-size:.95rem}
.main-nav a:hover{color:var(--green);text-decoration:none}

/* ---- breadcrumb ---- */
.crumb{font-size:.82rem;color:var(--muted);padding:14px 0 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumb li::after{content:"›";margin-left:6px;color:var(--border)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--teal)}

main{padding-bottom:40px}
.lede{font-size:1.12rem;color:var(--ink)}

/* ---- stars (pure CSS) ---- */
.stars{--p:100%;display:inline-block;position:relative;font-size:1.05em;line-height:1;white-space:nowrap;vertical-align:middle}
.stars::before{content:"★★★★★";color:var(--border)}
.stars i{position:absolute;left:0;top:0;width:var(--p);overflow:hidden;color:var(--gold)}
.stars i::before{content:"★★★★★"}
.rating-big{font-size:2.6rem;font-weight:800;color:var(--ink);line-height:1}
.rating-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.meta-line{color:var(--muted);font-size:.95rem}

/* ---- pills / chips ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em}
.pill-verified{background:#e3f6ee;color:#0a7a52;border:1px solid #b9e6d3}
.pill-verified::before{content:"✓";font-weight:900}
.pill-listed{background:#f1f5f4;color:var(--muted);border:1px solid var(--border)}
.pill-helpful{background:#fff7e0;color:#8a6400;border:1px solid #f1dca0}
.pill-helpful::before{content:"♥";font-size:.7em}
.trust-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:6px 8px;border-radius:10px;background:var(--tint);border:1px solid var(--border)}
.trust-chip b{font-size:1.3rem;font-weight:800;color:var(--teal);line-height:1}
.trust-chip span{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.trust-chip.top b{color:var(--green)}

/* ---- ribbon ---- */
.ribbon{display:inline-block;background:var(--green);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px}

/* ---- editor's pick hero ---- */
.pick{background:linear-gradient(180deg,#f3faf7,#fff);border:1px solid var(--border);border-left:5px solid var(--green);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin:18px 0}
.pick-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pick-logo{width:120px;height:60px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px}
.pick h2{border:0;margin:.3em 0 .1em;padding:0}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
@media(max-width:640px){.pick-grid{grid-template-columns:1fr}}

/* ---- leaderboard card ---- */
.board{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.sortlabel{font-size:.85rem;color:var(--muted);font-weight:600;background:var(--tint);border:1px solid var(--border);border-radius:8px;padding:7px 12px;display:inline-block}
.card{display:grid;grid-template-columns:auto 130px 1fr auto;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);position:relative}
.card.pickcard{border-left:5px solid var(--green);background:linear-gradient(180deg,#f6fcf9,#fff)}
.rank{font-size:1.5rem;font-weight:800;color:var(--muted);min-width:34px;text-align:center}
.pickcard .rank{color:var(--green)}
.card-logo{width:120px;height:60px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px}
.card-body h3{margin:.1em 0;font-size:1.18rem}
.card-body h3 a{color:var(--ink)}
.card-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.verdict{color:var(--muted);font-size:.95rem;margin:.4em 0}
.card-cta{display:inline-block;margin-top:4px;font-weight:700;font-size:.92rem;color:var(--green)}
.card-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.price-tag{font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap}
@media(max-width:760px){
  .card{grid-template-columns:auto 1fr;grid-template-areas:"rank logo" "rank body" "rank right"}
  .rank{grid-area:rank}.card-logo{grid-area:logo}.card-body{grid-area:body}
  .card-right{grid-area:right;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap}
}

/* ---- distribution bars ---- */
.dist{margin:10px 0;max-width:420px}
.dist .row{display:grid;grid-template-columns:34px 1fr 42px;align-items:center;gap:8px;margin:3px 0;font-size:.78rem;color:var(--muted)}
.dist .track{height:9px;background:var(--tint);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.dist .fill{height:100%;background:var(--teal);border-radius:99px}
.dist .row.low .fill{background:var(--lowbar)}
.dist .pct{text-align:right;font-variant-numeric:tabular-nums}
.dist.mini{max-width:300px}
.dist.mini .row{grid-template-columns:30px 1fr 36px;font-size:.7rem;margin:2px 0}
.dist.mini .track{height:7px}

/* ---- review cards ---- */
.reviews{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow)}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.review-head .who{font-weight:700}
.review-head .where{color:var(--muted);font-size:.86rem}
.review-head .when{color:var(--muted);font-size:.82rem;margin-left:auto}
.review p{margin:.3em 0 0}
@media(max-width:520px){.review-head .when{margin-left:0;width:100%}}

/* ---- tables ---- */
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:.95rem}
caption{caption-side:bottom;font-size:.8rem;color:var(--muted);text-align:left;padding-top:8px;font-style:italic}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
thead th{background:var(--tint);color:var(--ink);font-weight:700;border-bottom:2px solid var(--border)}
tbody tr:hover{background:var(--tint)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- generic blocks ---- */
.section-tint{background:var(--tint);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin:16px 0}
.factbox{background:var(--tint);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin:16px 0}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.factbox dt{font-weight:700;color:var(--muted)}
.factbox dd{margin:0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
@media(max-width:560px){.proscons{grid-template-columns:1fr}.factbox dl{grid-template-columns:1fr}.factbox dt{margin-top:6px}}
.proscons ul{margin:.3em 0;padding-left:1.2em}
.pros li::marker{content:"✓ ";color:var(--green);font-weight:800}
.cons li::marker{content:"– ";color:var(--teal);font-weight:800}
.pros h3,.cons h3{margin-top:0}

/* ---- CTA buttons ---- */
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;padding:11px 20px;border-radius:10px;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:#0c8a5f;text-decoration:none;color:#fff}
.btn-outline{background:#fff;color:var(--green);border:2px solid var(--green)}
.btn-outline:hover{background:var(--tint);color:var(--green)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}

/* ---- FAQ ---- */
.faq details{border:1px solid var(--border);border-radius:10px;margin:8px 0;background:var(--surface);overflow:hidden}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;position:relative;padding-right:42px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--green);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq .ans{padding:12px 16px 16px;color:var(--ink)}
.faq .ans p{margin:.2em 0}

/* ---- compare-with links ---- */
.compare-links{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.compare-links a{background:var(--tint);border:1px solid var(--border);border-radius:99px;padding:8px 14px;font-weight:600;font-size:.9rem}

/* ---- notes / callouts ---- */
.note{font-size:.85rem;color:var(--muted);background:var(--tint);border-left:3px solid var(--teal);padding:10px 14px;border-radius:0 8px 8px 0;margin:12px 0}
.backlink{display:inline-block;margin:18px 0 6px;font-weight:700}

/* ---- footer ---- */
.site-foot{background:var(--ink);color:#cdddd6;margin-top:30px;padding:28px 0 22px;font-size:.85rem}
.site-foot .wrap{display:flex;flex-direction:column;gap:14px}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-nav a{color:#fff;font-weight:600}
.foot-disc p{margin:.35em 0;color:#a9c2ba;font-size:.8rem;line-height:1.5}
.foot-copy{color:#86a097;font-size:.78rem;border-top:1px solid #2c463d;padding-top:12px}

/* ---- responsive nav ---- */
@media(max-width:720px){
  .nav-toggle{display:block}
  .main-nav{display:none;width:100%}
  .main-nav.open{display:block}
  .head-inner{flex-wrap:wrap}
  .main-nav ul{flex-direction:column;gap:2px;width:100%;padding-top:10px}
  .main-nav a{display:block;padding:9px 4px;border-bottom:1px solid var(--border)}
  h1{font-size:1.6rem}
}