/* ==========================================================================
   تجارب — site-wide v2 look (2026-11). Loaded after app.css when html.v2.
   Same technique as the /business page and the ScarabPay Business site:
   floating glass header, soft glowing buttons, roomy rounded cards with a
   hover lift, calm reveal-on-scroll, dark rounded footer.
   Colours stay تجارب's (yellow #FFC400 + ink).
   ========================================================================== */
html.v2{--bg:#FAF9F5;--line:#ECE9DF;--line-2:#F2EFE6;--radius:18px;--radius-lg:24px;
  --shadow:0 1px 2px rgba(17,19,24,.04),0 10px 30px -18px rgba(17,19,24,.22);
  --shadow-lg:0 2px 6px rgba(17,19,24,.05),0 26px 50px -24px rgba(17,19,24,.32);
  --glow:0 10px 30px -10px rgba(255,196,0,.75);--black:#0B0C10}
.v2 body{background:var(--bg)}
.v2 ::selection{background:var(--y);color:var(--ink)}

/* ---------- floating glass header ---------- */
.v2 .site-header{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 10px 0;pointer-events:none;transition:transform .35s ease}
.v2 .site-header>.header-inner{pointer-events:auto;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(17,19,24,.08);border-radius:18px;box-shadow:0 10px 30px -14px rgba(17,19,24,.18);padding-inline:12px;min-height:62px;transition:background .35s,border-color .35s,box-shadow .35s,color .35s}
@media (min-width:960px){.v2 .site-header>.header-inner{padding-inline:16px}}
.v2 .site-header.is-hidden{transform:translateY(-120%)}
.v2 .nav-links a{border-radius:10px;transition:background .2s,color .2s}
.v2 .header-search input{background:rgba(17,19,24,.04);border-color:transparent;transition:background .2s,box-shadow .2s}
.v2 .header-search input:focus{background:#fff;box-shadow:0 0 0 2px var(--y)}
.v2 .user-menu summary{border-color:rgba(17,19,24,.1);background:rgba(255,255,255,.7)}
.v2 .user-menu ul{border-radius:14px;box-shadow:var(--shadow-lg)}
/* dark variant while over a dark hero */
.v2 .site-header.is-dark>.header-inner{background:rgba(12,12,16,.55);border-color:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.v2 .site-header.is-dark .brand,.v2 .site-header.is-dark .brand-name{color:#fff}
.v2 .site-header.is-dark .nav-links a{color:rgba(255,255,255,.78)}
.v2 .site-header.is-dark .nav-links a:hover,.v2 .site-header.is-dark .nav-links a.is-active{background:rgba(255,255,255,.1);color:#fff}
.v2 .site-header.is-dark .header-search input{background:rgba(255,255,255,.08);color:#fff}
.v2 .site-header.is-dark .header-search input::placeholder{color:rgba(255,255,255,.5)}
.v2 .site-header.is-dark .header-search button{color:rgba(255,255,255,.7)}
.v2 .site-header.is-dark .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.v2 .site-header.is-dark .user-menu summary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.v2 .site-header.is-dark .nav-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.v2 .site-header.is-dark .nav-toggle .burger,.v2 .site-header.is-dark .nav-toggle .burger::before,.v2 .site-header.is-dark .nav-toggle .burger::after{background:#fff}
.v2 .site-header.is-dark .site-nav.is-open{border-top-color:rgba(255,255,255,.1)}

/* ---------- buttons ---------- */
.v2 .btn{border-radius:12px;transition:background-color .25s,color .25s,border-color .25s,transform .2s,box-shadow .25s;position:relative;overflow:hidden}
.v2 .btn-primary{box-shadow:var(--glow);background:linear-gradient(180deg,#FFD02E,#FFC400)}
.v2 .btn-primary:hover{background:linear-gradient(180deg,#FFD84D,#FFC400);transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,196,0,.9)}
.v2 .btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.v2 .btn-primary:hover::after{transform:translateX(120%)}
.v2 .btn-dark{background:var(--black)}
.v2 .btn-dark:hover{background:#26272d;transform:translateY(-1px)}
.v2 .biz-band .btn-dark{background:var(--y);color:var(--ink)}
.v2 .biz-band .btn-dark:hover{background:#FFD033;color:var(--ink)}
.v2 .btn-ghost{background:rgba(255,255,255,.8)}
.v2 .btn-outline{border-radius:12px}

/* ---------- cards ---------- */
.v2 .card{border-radius:var(--radius);border-color:rgba(17,19,24,.07);box-shadow:var(--shadow)}
.v2 .cat-tile,.v2 .country-tile,.v2 .company-card,.v2 .post-card,.v2 .cat-row,.v2 .rv-mini{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.v2 .cat-tile:hover,.v2 .country-tile:hover,.v2 .company-card:hover,.v2 .post-card:hover,.v2 .cat-row:hover{transform:translateY(-4px);border-color:rgba(255,196,0,.6);box-shadow:0 0 0 4px rgba(255,196,0,.14),var(--shadow-lg)}
.v2 .cat-icon{border-radius:14px}

/* ---------- sections ---------- */
.v2 .section-head{margin-bottom:26px}
.v2 .section-head h2{font-size:26px;letter-spacing:-.01em}
@media (min-width:960px){.v2 .section-head h2{font-size:32px}.v2 .section{padding-block:72px}}
.v2 .section-head h2::before{background:linear-gradient(180deg,#FFC400,#E0A800);width:6px;border-radius:6px}
.v2 .section-alt{background:linear-gradient(180deg,#FFF7DA 0%,var(--bg) 100%);border:0}
.v2 .section-more{border-radius:999px;padding:6px 14px;background:rgba(17,19,24,.04);transition:background .2s}
.v2 .section-more:hover{background:var(--y-soft)}
.v2 .stats-strip{background:var(--black)}
.v2 .search-field{border-radius:18px;border-width:2px;box-shadow:0 18px 40px -22px rgba(17,19,24,.35)}

/* ---------- footer ---------- */
.v2 .site-footer{background:var(--black);color:rgba(255,255,255,.72);border:0;border-start-start-radius:28px;border-start-end-radius:28px;margin-top:48px;position:relative;overflow:hidden}
.v2 .site-footer::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 85% 0%,rgba(255,196,0,.14),transparent 70%),radial-gradient(35% 45% at 10% 100%,rgba(255,140,0,.12),transparent 70%)}
.v2 .site-footer .container{position:relative}
.v2 .site-footer .brand,.v2 .site-footer .brand-name{color:#fff}
.v2 .footer-brand p{color:rgba(255,255,255,.6)}
.v2 .site-footer h2{color:#fff;font-size:14.5px;text-transform:none;letter-spacing:0}
.v2 .site-footer nav a{color:rgba(255,255,255,.68);transition:color .2s}
.v2 .site-footer nav a:hover{color:var(--y);text-decoration:none}
.v2 .footer-bottom{border-top-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.v2 .footer-bottom .muted{color:rgba(255,255,255,.4)}

/* ---------- reveal on scroll ---------- */
.v2-js .v2-r{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.v2-js .v2-r.is-in{opacity:1;transform:none}

/* ---------- preview pill ---------- */
.v2-preview-pill{position:fixed;bottom:14px;inset-inline-start:14px;z-index:90;background:var(--black);color:#fff;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);border:1px solid rgba(255,196,0,.4)}
.v2-preview-pill:hover{color:var(--y)}

@media (prefers-reduced-motion:reduce){
  .v2-js .v2-r{opacity:1;transform:none;transition:none}
  .v2 .btn-primary::after{display:none}
}

/* ==========================================================================
   Phase 2–3 · inner pages
   ========================================================================== */
/* breadcrumbs → soft pills */
.v2 .breadcrumbs{padding-block:16px 8px}
.v2 .breadcrumbs a{color:var(--ink-2)}
/* page heads (categories, category, country, search, pages, contact) → dark glowing hero card */
.v2 .page-head{position:relative;overflow:hidden;isolation:isolate;margin:6px 0 28px;padding:30px 22px;border-radius:24px;color:#fff;
  background:radial-gradient(60% 80% at 85% 0%,rgba(255,196,0,.26),transparent 70%),radial-gradient(40% 70% at 5% 100%,rgba(255,140,0,.14),transparent 70%),var(--black);box-shadow:0 30px 60px -36px rgba(17,19,24,.55)}
.v2 .page-head::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.3;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 90% at 80% 10%,#000 20%,transparent 75%);mask-image:radial-gradient(80% 90% at 80% 10%,#000 20%,transparent 75%)}
@media (min-width:960px){.v2 .page-head{padding:42px 40px}}
.v2 .page-head h1{color:#fff;font-size:clamp(26px,4vw,40px);line-height:1.3}
.v2 .page-head h1 mark{background:none;color:var(--y);padding:0}
.v2 .page-head .lead,.v2 .page-head p{color:rgba(255,255,255,.68)}
.v2 .page-head a:not(.btn){color:var(--y)}
.v2 .page-head .cat-icon,.v2 .page-head-icon .cat-icon{background:var(--y);color:var(--ink);box-shadow:0 12px 30px -10px rgba(255,196,0,.75)}
.v2 .page-head img{border-radius:12px}
.v2 .page-head .search-field{border-color:transparent;box-shadow:0 0 0 5px rgba(255,255,255,.06),0 20px 50px -20px rgba(255,196,0,.4)}
.v2 .page-head .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.v2 .page-head .muted,.v2 .page-head small{color:rgba(255,255,255,.55)}

/* yellow heroes on inner pages (e.g. «هل هذا الموقع موثوق؟») → dark glow */
.v2 .hero{color:#fff;border-end-start-radius:28px;border-end-end-radius:28px;
  background:radial-gradient(55% 70% at 50% 0%,rgba(255,196,0,.28),transparent 70%),radial-gradient(35% 60% at 95% 40%,rgba(255,140,0,.16),transparent 70%),var(--black)}
.v2 .hero::before,.v2 .hero::after{display:none}
.v2 .hero h1{color:#fff}
.v2 .hero h1 mark{background:none;color:var(--y);text-shadow:0 0 40px rgba(255,196,0,.45)}
.v2 .hero-sub{color:rgba(255,255,255,.7)}
.v2 .hero-kicker{background:rgba(255,255,255,.08);color:#f1e7c4;border:1px solid rgba(255,255,255,.14)}
.v2 .hero .search-field{border-color:transparent;box-shadow:0 0 0 6px rgba(255,255,255,.06),0 30px 70px -20px rgba(255,196,0,.35)}
.v2 .hero a:not(.btn){color:var(--y)}
.v2 .hero-alt{color:rgba(255,255,255,.6)}

/* company page */
.v2 .company-head{border-top:0;border-radius:26px;padding:26px;background:linear-gradient(135deg,#FFF6D2 0%,#fff 48%);box-shadow:0 30px 60px -40px rgba(17,19,24,.45),0 0 0 1px rgba(17,19,24,.06)}
.v2 .company-head-logo{border-radius:22px;box-shadow:0 14px 30px -18px rgba(17,19,24,.4)}
.v2 .company-head-cta .btn-primary{padding-block:14px}
.v2 .summary-card,.v2 .dist-card,.v2 .side-card{border-radius:20px}
.v2 .review-card{border-radius:20px;transition:box-shadow .25s,border-color .25s}
.v2 .review-card:hover{border-color:rgba(255,196,0,.45);box-shadow:var(--shadow-lg)}
.v2 .company-reply{border-radius:14px}
@media (min-width:960px){.v2 .col-side{top:90px}}

/* profile */
.v2 .profile-head{border-top:0;border-radius:26px;padding:26px;background:linear-gradient(135deg,#FFF6D2 0%,#fff 50%);box-shadow:0 30px 60px -40px rgba(17,19,24,.45),0 0 0 1px rgba(17,19,24,.06)}

/* focused flows: login, register, start / write a review */
.v2 .rv-wrap{position:relative;isolation:isolate;overflow-x:clip}
.v2 .rv-wrap::before{content:'';position:absolute;z-index:-1;inset:-30px -10% auto;height:360px;pointer-events:none;background:radial-gradient(45% 60% at 50% 0%,rgba(255,196,0,.28),transparent 70%)}
.v2 .rv-head h1{font-size:clamp(26px,4vw,38px)}
.v2 .rv-card{border-radius:24px!important;border-color:rgba(17,19,24,.07)!important;box-shadow:0 1px 2px rgba(17,19,24,.04),0 30px 60px -34px rgba(17,19,24,.35)!important}

/* contact */
.v2 .ct-card{border-radius:22px}

/* business landing: float the header over its dark hero too */
.v2 .page-business .bl-hero{margin-top:-82px;padding-top:30px}
.v2 .bl{--bl-top:12px}