/*!
 * Plinkly – Main Styles (Brand Identity) – v2.2
 * File: assets/style-main.css
 * Author: Plinkly Team (2025)
 * ----------------------------------------------------
 *  Light + Dark-mode ready.  Palette:
 *  • Primary Blue  – #2560ec
 *  • Accent Orange – #ff6600
 *  • Surfaces / Text colours are now tokenised so every
 *    component auto-switches when the user (or a JS
 *    toggle) requests dark-mode.
 */

/* ========== 1. VARIABLES & ROOT COLORS ========== */
:root {
  /* brand */
  --clr-primary:   #2560ec;
  --clr-primary-2: #1e48a6;
  --clr-accent:    #ff8200;   /* بديل أكثر نعومة من ff6600 */
  --clr-accent-2:  #ffc266;   /* بديل فاتح جدًا (Peach) */

  /* surfaces & neutrals */
  --clr-bg:        #f7faff;
  --clr-bg-light:  #eef2fa;
  --surface:       #ffffff;
  --border:        #e5e7eb;
  --clr-dark:      #191919;
  --clr-dim:       #555;

  /* shadows (light) */
  --shadow:        0 6px 20px rgba(37, 96, 236, .07);
  --shadow-hover:  0 12px 36px rgba(37, 96, 236, .14);
  --shadow-card:   0 8px 40px rgba(37, 96, 236, .11);
  
  --pl-blue: #2560ec;
  --pl-dark: #0b172a;
  --pl-light: #eef2fa;
  --pl-shadow: 0 8px 28px rgba(37,96,236,0.12);
  --pl-radius: 2.1rem;
  --pl-gap: 2.2rem;
  --pl-orange: #ffa037;
}


/* 🌙  DARK MODE OVERRIDES  (via prefers-color-scheme OR .dark class) */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  :root,
  .dark {
    --clr-primary-2: #1e48a6;
    --clr-bg:        #0d1117;
    --clr-bg-light:  #161b22;
    --surface:       #1e222b;
    --border:        #2c313c;
    --clr-dark:      #e6e9ef;
    --clr-dim:       #9ca3af;

    /* softer shadows on dark */
    --shadow:        0 4px 16px rgba(0,0,0,.4);
    --shadow-hover:  0 8px 28px rgba(0,0,0,.55);
    --shadow-card:   0 6px 32px rgba(0,0,0,.5);
  }
}

body {
    font-family: 'Rethink Sans' !important;
    display: block !important;
}

/* ========== 2. UTILITY CLASSES ========== */
.text-center {text-align:center!important;}
.mt-2        {margin-top:1.8rem!important;}


/* ========== 3. HERO SECTION ========== */
.hero.hero-home{
  min-height:100vh;
  padding:7rem 1.5rem 4rem;
  background:var(--bg);
  display:flex;
  align-items:center;
}

.hero-inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.2rem);
  align-items:center;
}

/* RTL دعم */
:root[dir="rtl"] .hero.hero-home{
  text-align:right;
}
:root[dir="rtl"] .hero-inner{
  direction:rtl;
}

/* -------- نص الهيرو (العمود الأيسر) -------- */
.hero-copy{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}

/* لم نعد نستخدم البادج لكن نُبقيها تحسبًا */
.hero-badge{
  display:none;
}

.hero-title{
  font-size: 4rem;
  font-weight:800;
  color:var(--clr-dark);
  letter-spacing:.01em;
  line-height:1.05;
  margin-bottom: none !important;
}

.hero-desc{
  color:var(--clr-dim);
  font-size:1.02rem;
  max-width:32rem;
  margin: auto;
}

/* أزرار الـ CTA */
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:.3rem;
}

.hero-btn-primary{
  background:var(--clr-dark);
  color: var(--clr-accent-2);
}
.hero-btn-primary:hover{
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.25);
}

.hero-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.6rem;
  border-radius:999px;
  border:1px solid var(--clr-dark);
  background:transparent;
  color:var(--clr-dark);
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.hero-btn-ghost:hover{
  background:var(--clr-dark);
  color:#fff;
}

/* النص تحت الأزرار (No credit card...) */
.hero-note{
  margin-top:.45rem;
  font-size:.9rem;
  color:var(--clr-dim);
}

/* -------- كارد الفورم (العمود الأيمن) -------- */
.hero-panel{
  background:var(--surface);
  border-radius:22px;
  padding:1.7rem 1.5rem 1.5rem;
  /*box-shadow:0 14px 40px rgba(10,25,61,.16);*/
  max-width:440px;
  width:100%;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.hero-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom:.4rem;
}

.hero-panel-title{
  font-size:1.02rem;
  font-weight:600;
  color:var(--clr-dark);
}

/* Switcher */
.hero-panel-switcher{
  background:var(--clr-bg-light);
  padding:.18rem;
  border-radius:999px;
  display:flex;
  gap:.18rem;
}
.switcher-btn{
  border:none !important;
  background:transparent !important;
  border-radius:999px !important;
  padding:.32rem .9rem !important;
  font-size:.85rem !important;
  font-weight:600 !important;
  color:var(--clr-dim) !important;
  cursor:pointer!important;
  transition:background .18s, color .18s, box-shadow .18s !important;
}
.switcher-btn.is-active{
  background:#fff;
  color:var(--clr-primary);
  box-shadow:0 6px 18px rgba(15,23,42,.18);
}

/* الحاويات لكل تبويب */
.hero-panel-body{
  display:block;
}
.hero-form-pane{
  display:none;
}
.hero-form-pane.is-active{
  display:block;
}

/* فورم الاختصار داخل الهيرو فقط */
.hero-panel .shorten-form{
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:0;
  width:100%;
  display:block;
}

.shorten-input-row{
  display:flex;
  gap:.5rem;
  align-items:stretch;
}

.hero-panel .shorten-form input[type="url"]{
  flex:1;
  width:100%;
  margin:0;
  border-radius:14px;
  border:1.5px solid var(--border);
  padding:.8rem .9rem;
  font-size:.98rem;
  background:var(--clr-bg-light);
  box-shadow:none;
  transition:border .16s, box-shadow .16s, background .16s;
}
.hero-panel .shorten-form input[type="url"]:focus{
  border-color:var(--clr-primary);
  outline:none;
  background:#fff;
  box-shadow:0 0 0 1px rgba(84,120,255,.12);
}

.hero-panel .shorten-form button{
  border-radius:14px;
  font-size:.98rem;
  font-weight:700;
  padding:.8rem 1.25rem;
  border:none;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-primary) 90%);
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(37,96,236,.2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}
.hero-panel .shorten-form button:hover{
  filter:brightness(1.04);
}

/* نتيجة الرابط */
.result{
  max-width:none;
  width:100%;
  margin:.7rem 0 .4rem;
  border-radius:16px;
  background:var(--clr-bg-light);
  box-shadow:0 3px 10px rgba(15,23,42,.12);
  padding:.7rem .85rem;
}

/* ملاحظة تحت الفورم */
.hero-form-note{
  font-size:.8rem;
  color:var(--clr-dim);
  margin-top:.15rem;
}

/* QR preview (مجرد placeholder بسيط) */
.qr-preview{
  margin-top:.6rem;
  min-height:120px;
  border-radius:14px;
  background:repeating-conic-gradient(from 45deg,#f0f0f0 0 10deg,#fafafa 10deg 20deg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:var(--clr-dim);
}

/* Footer note داخل الكارد */
.hero-panel-footer.signup-note{
  margin-top:.4rem;
  text-align:left;
}
:root[dir="rtl"] .hero-panel-footer.signup-note{
  text-align:right;
}

/* SR-only للـlabel */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* ===== Responsiveness ===== */
@media (max-width: 960px){
  .hero.hero-home{
    padding:4.2rem 1.25rem 3rem;
    margin-top: 3rem;
  }
  .hero-inner{
    grid-template-columns:1fr;
  }
  .hero-copy{
    order:1;
    text-align:center;
    align-items:center;
  }
  .hero-desc,
  .hero-note,
  .hero-panel-footer.signup-note{
    text-align:center;
    max-width: 70%;
  }
  .hero-panel{
    order:2;
  }
  .hero-ctas{
    justify-content:center;
  }
}

@media (max-width: 640px){
  .hero.hero-home{
    padding:3.4rem 1rem 2.6rem;
    margin-top: 3rem;
  }
  .shorten-input-row{
    flex-direction:column;
  }
  .hero-panel .shorten-form button{
    width:100%;
  }
}



/* ========== 4.1. QR CODE AND SHORT========== */

.short-link-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0 auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 4px 22px rgba(37,96,236,0.08);
  padding: 14px 24px 14px 14px;
  max-width: 460px;
  min-width: 220px;
  gap: 1em;
  position: relative;
}
.short-link-box .short-url {
  font-size: 1.09em;
  font-weight: 600;
  color: #2560ec;
  word-break: break-all;
  background: #f7f9ff;
  border-radius: 9px;
  padding: 7px 16px;
  flex: 1;
  transition: background .13s;
}
.short-link-box .copy-btn {
  background: linear-gradient(90deg,#2560ec,#2e7bff 80%);
  color: #fff;
  border: none;
  border-radius: 1.7em;
  font-weight: 500;
  font-size: .98em;
  padding: 6px 22px;
  cursor: pointer;
  transition: background .14s;
  margin-left: 8px;
  outline: none;
  position: relative;
}
.short-link-box .copy-btn.copied {
  background: #1ba055;
  color: #fff;
}
.short-link-box .copied-msg {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  font-size: .92em;
  color: #1ba055;
  background: #eafbee;
  border-radius: 7px;
  padding: 2px 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .23s;
  z-index: 3;
}
.short-link-box .copied-msg.show {
  opacity: 1;
}


/* ========== WHY / FEATURES SECTION ========== */
.why-section{/*
  padding:4rem 1.5rem 4.1rem;
  background:radial-gradient(circle at top right,
              rgba(84,120,255,.08),
              transparent 55%),
             linear-gradient(180deg,
              var(--clr-bg) 0%,
              var(--clr-bg-light) 90%);*/
}

.why-header{
  max-width:640px;
  margin:0 auto 2.8rem;
  text-align:center;
}
.why-title{
    color: var(--clr-primary-1) !important;
}

/* Eyebrow فوق العنوان */
.why-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.22rem .9rem;
  margin-bottom:.7rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:rgba(37,96,236,.06);
  border:1px solid rgba(37,96,236,.16);
}

.why-desc, .adv-desc, .how-desc, .stats-desc{
  color:var(--text-dim, var(--clr-dim));
  font-size:1.05rem;
  line-height: 1.3;
}

/* GRID */
.why-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2.1rem;
}

/* CARD */
.why-card{
  position:relative;
  padding:2.2rem 1.9rem 2.1rem;
  border-radius:24px;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e2e4f0);
  /*box-shadow:0 22px 60px rgba(17,24,39,.12);*/
  overflow:hidden;
  text-align:start;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:340px;
  transition:
    transform .22s cubic-bezier(.19,1,.22,1),
    box-shadow .22s cubic-bezier(.19,1,.22,1),
    border-color .18s ease-out;
}

.why-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  opacity:0;
  background:radial-gradient(circle at top left,
             rgba(84,120,255,.16),
             transparent 55%);
  transform:translate3d(0,18px,0);
  transition:opacity .23s ease-out, transform .23s ease-out;
  pointer-events:none;
}

.why-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 26px 70px rgba(15,23,42,.22);
  border-color:var(--clr-accent);
}
.why-card:hover::before{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* CHIP */
.why-chip{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem .85rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(84,120,255,.09);
  color:var(--clr-primary);
  border:1px solid rgba(84,120,255,.28);
}

/* ICON */
.why-icon-wrap{
  margin-top:.6rem;
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(145deg,
             rgba(84,120,255,.14),
             rgba(84,120,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
}

.why-icon{
  font-size:1.7rem;
}

/* TEXT */
.why-card-title{
  margin:.7rem 0 .15rem;
  font-size:1.32rem;
  font-weight:700;
  color:var(--text,#0f172a);
}

.why-card-desc{
  margin:0;
  font-size:1rem;
  color:var(--text-dim,#6b7280);
}

/* LIST */
.why-card-list{
  margin:.8rem 0 0;
  padding:0;
  list-style:none;
  font-size:.96rem;
  color:var(--text-dim);
}
.why-card-list li{
  position:relative;
  padding-left:1.25rem;
  margin:.22rem 0;
}
.why-card-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.53em;
  width:.48rem;
  height:.48rem;
  border-radius:999px;
  background:var(--clr-accent,#4f46e5);
  box-shadow:0 0 0 4px rgba(79,70,229,.13);
}

/* FOOTER CTA */
.why-footer-cta{
  margin-top:2.7rem;
  text-align:center;
}

/* RTL */
:root[dir="rtl"] .why-card{
  text-align:right;
}
:root[dir="rtl"] .why-card-list li{
  padding-left:0;
  padding-right:1.25rem;
}
:root[dir="rtl"] .why-card-list li::before{
  inset-inline-start:auto;
  inset-inline-end:0;
}

/* RESPONSIVE */
@media (max-width: 960px){
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 680px){
  .why-section{ /*
    padding:3.1rem 1.1rem 3.2rem;*/
  }
  .why-grid{
    grid-template-columns:1fr;
    max-width:520px;
  }
  .why-card{
    min-height:auto; /* على الموبايل نرجع الارتفاع طبيعي */
  }
}


/* ========== HOW IT WORKS – TABBED STEPS ========== */
.how-section{
    /*
  padding:3.6rem 0 4rem;
  background:
    radial-gradient(circle at top left, rgba(37,96,236,.10), transparent 55%),
    linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-light) 100%);*/
}

.how-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* Header */
.how-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 2.4rem;
}

.how-eyebrow{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--text-dim);
  font-weight:600;
  margin-bottom:.4rem;
}

.how-title {
    color: var(--clr-accent)!important;
}

.how-desc{
  color:var(--text-dim,var(--clr-dim));
}

/* Layout: tabs + main card */
.how-layout{
  display:flex;
  flex-direction:column;
  gap:1.7rem;
  margin-top:2.2rem;
}

/* Tabs row */
.how-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  justify-content:center;
}

.how-tab{
  border:none;
  background: var(--bg);
  border-radius:999px;
  padding:.45rem 1.2rem .45rem .5rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  cursor:pointer;
 /* box-shadow:0 10px 26px rgba(15,23,42,.10);*/
  border:1px solid var(--border);
  font-size:.95rem;
  font-weight:600;
  color:var(--clr-dark);
  transition:
    background .18s ease-out,
    color .18s ease-out,
    box-shadow .18s ease-out,
    transform .18s ease-out,
    border-color .18s ease-out;
}

.how-tab-icon{
  width:38px;
  height:38px;
  border-radius:1.1rem;
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.1rem;
  font-weight:700;
  box-shadow:0 8px 20px rgba(37,96,236,.35);
  flex-shrink:0;
}

.how-tab-label{
  white-space:nowrap;
}

/* Active tab */
.how-tab.is-active{
  background:linear-gradient(90deg,rgba(37,96,236,.06),rgba(255,130,0,.10));
  border-color:rgba(37,96,236,.35);
  box-shadow:0 14px 32px rgba(37,96,236,.18);
  transform:translateY(-2px);
}

/* Main card wrapper */
.how-main-card{
  background:var(--bg);
  border-radius:24px;
  border:1px solid var(--border);
  /*box-shadow:0 16px 46px rgba(15,23,42,.12);*/
  padding:1.8rem 1.7rem;
}

/* Panels (one visible at a time) */
.how-panel{
  display:none;                /* مهم: إخفاء الافتراضي */
  align-items:center;
  gap:2rem;
}

.how-panel.is-active{
  display:flex;                /* يظهر فقط الـ active */
}

/* Content (left) */
.how-panel-content{
  flex:1 1 50%;
  min-width:0;
}

.how-panel-kicker{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--clr-primary-2);
  margin-bottom:.25rem;
}

.how-panel-kicker::before{
  content:"●";
  font-size:.7rem;
}

.how-panel-title{
  margin:.1rem 0 .25rem;
  font-size:2rem;
  font-weight:750;
  color:var(--text);
}

.how-panel-text{
  margin:0;
  font-size:.97rem;
  color:var(--text-dim);
  line-height:1.7;
}

/* Optional bullets داخل الكارد */
.how-panel-list{
  margin:.7rem 0 0;
  padding:0;
  list-style:none;
  font-size:.93rem;
  color:var(--clr-primary-2);
}
.how-panel-list li{
  position:relative;
  padding-inline-start:1.1rem;
  margin:.18rem 0;
}
.how-panel-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.55em;
  width:.42rem;
  height:.42rem;
  border-radius:999px;
  background:var(--clr-accent);
  box-shadow:0 0 0 4px rgba(255,130,0,.18);
}

/* Visual (right) */
.how-panel-visual{
  flex:1 1 45%;
  min-height:230px;
  border-radius:22px;
  background:radial-gradient(circle at top left,
              rgba(37,96,236,.18),
              transparent 60%),
             linear-gradient(135deg,#ffffff, #eef2fa);
  /*box-shadow:0 18px 40px rgba(37,96,236,.18);*/
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/* يمكن تخصيص كل سtep لو حاب */
.how-panel-visual.step-1{
  background:radial-gradient(circle at top left,
              rgba(37,96,236,.22),
              transparent 60%),
             linear-gradient(135deg,#ffffff, #e0ebff);
}
.how-panel-visual.step-2{
  background:radial-gradient(circle at top right,
              rgba(255,130,0,.25),
              transparent 60%),
             linear-gradient(135deg,#ffffff, #ffe9cf);
}
.how-panel-visual.step-3{
  background:radial-gradient(circle at bottom,
              rgba(37,96,236,.18),
              transparent 60%),
             linear-gradient(135deg,#ffffff, #dfe6ff);
}

/* Placeholder نص داخل الصورة */
.how-visual-label{
  font-size:1.05rem;
  font-weight:600;
  color:var(--clr-dark);
  background:rgba(255,255,255,.84);
  padding:.55rem 1.1rem;
  border-radius:999px;
  box-shadow:0 10px 26px rgba(15,23,42,.16);
}

/* Responsive */
@media (max-width: 960px){
  .how-inner{padding:0 1.25rem;}
  .how-main-card{
    padding:1.5rem 1.4rem;
  }
  .how-panel{
    flex-direction:column;
  }
  .how-panel-visual{
    width:100%;
  }
}

@media (max-width: 640px){
  .how-section{padding:3.1rem 0 3.3rem;}
  .how-inner{padding:0 1rem;}
  .how-tabs{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:.2rem;
  }
  .how-tab-label{
    white-space:nowrap;
  }
  .how-tab{/*
      padding: .45rem .1rem .45rem .5rem;*/
  }
}

/* RTL support */
:root[dir="rtl"] .how-inner{
  direction:rtl;
}
:root[dir="rtl"] .how-header{
  text-align:center; /* أو right لو حاب */
}
:root[dir="rtl"] .how-panel-list li{
  padding-inline-start:0;
  padding-inline-end:1.1rem;
}
:root[dir="rtl"] .how-panel-list li::before{
  inset-inline-start:auto;
  inset-inline-end:0;
}
:root[dir="rtl"] .how-panel{
  flex-direction:row-reverse;
}
@media (max-width: 960px){
  :root[dir="rtl"] .how-panel{
    flex-direction:column;
  }
}



/* ========= Stats & AI Insights Section ========= */
.stats-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
  background: var(--clr-primary-2) !important;
}

/* Header */

.stats-title{
    color: var(--clr-accent) !important;
}
.stats-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 2.2rem;
}

.stats-eyebrow{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(226,232,240,.9);
  font-weight:600;
  margin-bottom:.4rem;
}

/* عنوان واضح (ليس أبيض) باستخدام لون الهوية */

/* وصف مثل باقي الأقسام (لون محايد وواضح) */
.stats-desc{
  color:rgba(241,245,249,.92);
}

/* صورة + بادجات */
.stats-visual{
  margin-top:2.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}

/* إطار الصورة في المنتصف */
.stats-image-frame{
  width:100%;
  max-width:980px;
  border-radius:26px;
  background:var(--surface,#fff);
  border:1px solid rgba(148,163,184,.55); /* ستروك خفيف */
  /* شادو خفيف كما طلبت */
  box-shadow:0 22px 55px rgba(15,23,42,.14);
  overflow:hidden;
}

/* يمكن لاحقاً استبدال هذا الـ div بصورة حقيقية <img> بنفس الكلاس */
.stats-image-frame img{
  display:block;
  width:100%;
  height:auto;
}


.how-panel-visual img{
  display:block;
  width:65%;
  height:auto;
}

.stats-image-placeholder{
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  color:#94a3b8;
  background:var(--clr-bg-light);
}

/* البادجات تحت الصورة – بدون شادو */
.stats-badges-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8rem;
}

.stats-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem 1.15rem;
  border-radius:999px;
  background:var(--clr-bg-light);
  border:1px solid var(--border,#e2e4f0);
  font-size:.9rem;
  color:var(--text-dim);
  box-shadow:none; /* بدون ظل */
}

.stats-badge-icon{
  font-size:1rem;
}

.stats-badge-text{
  white-space:nowrap;
}

/* Responsive */
@media (max-width: 960px){
  .stats-inner{padding:0 1.25rem;}
}

@media (max-width: 640px){
  .stats-section{padding:3.1rem 0 3.4rem;}
  .stats-inner{padding:0 1rem;}
  .stats-image-placeholder{min-height:230px;}
}

/* RTL */
:root[dir="rtl"] .stats-inner{
  direction:rtl;
}
:root[dir="rtl"] .stats-header{
  text-align:center;
}
:root[dir="rtl"] .stats-badge{
  flex-direction:row-reverse;
}



/* ========== Custom Ads – Interactive & Simple ========== */
.ads-custom-section{
  padding:3.4rem 0 3.7rem;
}

.ads-custom-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* Header */
.ads-custom-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 2.3rem;
}
.ads-custom-eyebrow{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--clr-primary-2,#4f46e5);
  font-weight:600;
  margin-bottom:.4rem;
}
.ads-custom-title{
  font-size:2.05rem;
  font-weight:800;
  color:var(--clr-primary);
  margin:0 0 .4rem;
  letter-spacing:.02em;
}
.ads-custom-desc{
  font-size:1.02rem;
  color:var(--text-dim,var(--clr-dim));
  line-height:1.7;
  margin:0;
}

/* ===== Simulator card ===== */
.ads-sim-card{
  margin:0 auto 2.3rem;
  max-width:880px;
  background:var(--surface,#fff);
  border-radius:20px;
  border:1px solid var(--border,#e2e4f0);
  box-shadow:0 16px 46px rgba(15,23,42,.08);
  padding:1.4rem 1.4rem 1.5rem;
}

.ads-sim-top{
  margin-bottom:1rem;
}

.ads-mode-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  justify-content:center;
  margin-bottom:.6rem;
}
.ads-mode-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(248,250,252,.9);
  padding:.38rem .85rem;
  font-size:.8rem;
  cursor:pointer;
  font-weight:500;
  color:#4b5563;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.ads-mode-btn.is-active{
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-primary));
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
}
.ads-mode-text{
  margin:0;
  font-size:.9rem;
  text-align:center;
  color:#4b5563;
}

.ads-sim-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.3rem;
  margin-top:1rem;
}
.ads-sim-block{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.ads-sim-label{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#6b7280;
}
.ads-range-row{
  padding:.35rem .1rem 0;
}
.ads-range-row input[type="range"]{
  width:100%;
}
.ads-range-meta{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  color:#6b7280;
  margin-top:.15rem;
}
.ads-sim-hint{
  margin:.2rem 0 0;
  font-size:.82rem;
  color:#6b7280;
}

/* select + estimate */
.ads-select{
  width:100%;
  border-radius:999px;
  border:1px solid var(--border,#e2e4f0);
  padding:.5rem .7rem;
  font-size:.9rem;
  background:var(--clr-bg-light,#f9fafb);
  color:#111827;
}

.ads-estimate-box{
  margin-top:.45rem;
  border-radius:16px;
  background:rgba(248,250,252,.95);
  border:1px dashed rgba(148,163,184,.8);
  padding:.6rem .75rem;
}
.ads-est-label{
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:.1rem;
}
.ads-est-value{
  font-size:1.35rem;
  font-weight:800;
  color:#111827;
}
.ads-est-caption{
  font-size:.78rem;
  color:#6b7280;
  margin-top:.1rem;
}

/* ===== Feature list ===== */
.ads-feature-list{
  list-style:none;
  margin:0 0 1.8rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.3rem;
}
.ads-feature-item{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
}
.ads-feature-icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--clr-bg-light);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(37,96,236,.12);
}
.ads-feature-icon img{
  width:26px;
  height:26px;
  object-fit:contain;
}
.ads-feature-text h3{
  margin:0 0 .1rem;
  font-size:1.03rem;
  font-weight:700;
  color:var(--text,#0f172a);
}
.ads-feature-text p{
  margin:0;
  font-size:.94rem;
  color:var(--text-dim,#6b7280);
  line-height:1.6;
}

/* CTA */
.ads-custom-cta{
  text-align:center;
}
.ads-custom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.78rem 1.5rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-primary));
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 16px 40px rgba(59,130,246,.6);
}
.ads-custom-btn:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

/* Responsive */
@media (max-width: 960px){
  .ads-custom-inner{padding:0 1.25rem;}
  .ads-sim-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .ads-custom-inner{padding:0 1rem;}
  .ads-custom-section{
    padding:3.1rem 0 3.3rem;
  }
}

/* RTL */
:root[dir="rtl"] .ads-custom-inner{
  direction:rtl;
}
:root[dir="rtl"] .ads-custom-header{
  text-align:center;
}
:root[dir="rtl"] .ads-feature-item{
  flex-direction:row-reverse;
}
:root[dir="rtl"] .ads-feature-text{
  text-align:right;
}

/* ===== Advanced Features – Clean CTA + Preview ===== */
.adv-features{
  padding:3.8rem 0 4.1rem;
  background:
    radial-gradient(circle at top right, rgba(37,96,236,.10), transparent 55%),
    linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-light) 92%);
}

.adv-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* Layout */
.adv-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.7fr);
  gap:2.2rem;
  align-items:stretch;
}

/* LEFT: header + list */
.adv-left{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}

.adv-header{
  max-width:520px;
}

.adv-eyebrow{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--text-dim);
  font-weight:600;
  margin:0 0 .35rem;
}

.adv-desc{
  color:var(--clr-dim);
}

/* List of CTA items */
.adv-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.adv-item{
  border:none;
  background:var(--bg);
  border-radius:18px;
  padding:.95rem 1.3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  cursor:pointer;
  text-align:left;
  box-shadow:0 10px 26px rgba(37,96,236,0.06);
  border:1px solid var(--border);
  transition:
    background .18s ease-out,
    color .18s ease-out,
    box-shadow .2s ease-out,
    transform .2s ease-out,
    border-color .18s ease-out;
  font-size:.98rem;
  color:var(--text);
}

.adv-item-icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  background:var(--clr-bg-light);
}

.adv-item-text{
  flex:1 1 auto;
  font-weight:600;
}

/* حالة مفعّلة */
.adv-item.is-active{
  background: var(--clr-primary-2);
  color:#fff;
  box-shadow:var(--shadow-card);
  border-color:transparent;
  transform:translateY(-2px);
}

.adv-item.is-active .adv-item-icon{
  background:rgba(255,255,255,.16);
}

/* RIGHT: preview card */
.adv-preview{
  border-radius:26px;
  background:var(--bg);
  /*box-shadow:0 22px 60px rgba(37,96,236,.18);*/
  padding:1.9rem 1.8rem 1.8rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  min-height:320px;
}

.adv-preview-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.adv-preview-tag{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  padding:.28rem .8rem;
  border-radius:999px;
  background:var(--clr-bg-light);
  color:var(--text-dim);
  font-weight:600;
}

.adv-preview-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  background:rgba(37,96,236,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
}

.adv-preview-body{
  max-width:480px;
}

.adv-preview-title{
  margin:.1rem 0 .25rem;
  font-size:1.25rem;
  font-weight:750;
  color:var(--text);
}

.adv-preview-desc{
  margin:0;
  font-size:.99rem;
  line-height:1.7;
  color:var(--text-dim);
}

/* مكان الصورة / الـ visual */
.adv-preview-media{
  margin-top:auto;
  border-radius:20px;
  min-height:150px;
  background:
    radial-gradient(circle at top left, rgba(37,96,236,.16), transparent 55%),
    linear-gradient(135deg, #eef2fa, #ffffff);
  box-shadow:0 14px 40px rgba(15,23,42,.15);
  overflow:hidden;
}

.adv-preview-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Responsive */
@media (max-width: 960px){
  .adv-inner{padding:0 1.25rem;}
  .adv-layout{
    grid-template-columns:1fr;
    gap:1.9rem;
  }
  .adv-preview{
    min-height:0;
  }
}

@media (max-width: 640px){
  .adv-features{padding:3.2rem 0 3.4rem;}
  .adv-inner{padding:0 1rem;}
}

/* RTL */
:root[dir="rtl"] .adv-inner{direction:rtl;}
:root[dir="rtl"] .adv-header{text-align:right;}
:root[dir="rtl"] .adv-item{text-align:right;}
:root[dir="rtl"] .adv-layout{direction:rtl;}


/* ========== 7. TESTIMONIALS SECTION ========== */
.testimonials-section{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
  background:var(--clr-accent) !important;
  padding:4rem 0 5rem;text-align:center;color:var(--clr-dark);overflow-x:hidden;
}

.testimonials-slider{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;width:100%;}
.testimonial-arrows{
  display:flex;gap:1rem;justify-content:center;width:100%;max-width:650px;margin:0 auto 1.2rem;
}
.testimonials-arrow{
  background:var(--surface);border:2px solid #19191922;border-radius:13px;
  font-size:1.35rem;width:65px;height:38px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 8px rgba(255,102,0,.10);
  transition:background .13s,border .13s,color .15s;margin:0;color:var(--clr-accent);
}
.testimonials-arrow:hover{background:#fff4e3;border-color:var(--clr-accent);color:var(--clr-primary);}
.testimonials-cards{
  position:relative;width:100%;min-height:250px;display:flex;justify-content:center;align-items:center;
  height:310px;margin-top:.3rem;perspective:1300px;
}
.testimonial-card{
  position:absolute;left:50%;top:0;transform:translateX(-50%) scale(1);
  background:var(--surface);border-radius:30px;box-shadow:0 6px 40px rgba(255,102,0,.09);
  width:540px;min-width:250px;padding:2.5rem 2rem 2.2rem;text-align:left;min-height:220px;
  z-index:1;opacity:1;transition:transform .47s cubic-bezier(.68,0,.21,1),
  opacity .27s cubic-bezier(.68,0,.21,1),box-shadow .27s;
  display:flex;align-items:flex-start;pointer-events:none;will-change:transform,opacity;
}
.testimonial-card.active{
  z-index:5;box-shadow:0 10px 48px rgba(37,96,236,.18),0 2px 10px rgba(255,102,0,.08);
  opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1);
}
.testimonial-card.prev{transform:translateX(-110%) scale(.89) rotateZ(-7deg) skewY(1.6deg);z-index:2;opacity:.65;}
.testimonial-card.next{transform:translateX(110%) scale(.89) rotateZ(7deg) skewY(-1.6deg);z-index:2;opacity:.65;}
.testimonial-card.hide{opacity:0;pointer-events:none;}
.testimonial-quote{font-size:3.6rem;color:var(--clr-accent);font-weight:800;margin-right:1rem;margin-top:.5rem;}
.testimonial-content{flex:1;}
.testimonial-text{
  font-size:1.14rem;font-weight:600;margin-bottom:1.3rem;color:var(--clr-dark);line-height:1.6;
}
.testimonial-user{display:flex;align-items:center;gap:1rem;margin-top:1rem;}
.testimonial-avatar{
  width:52px;height:52px;border-radius:15px;object-fit:cover;background:var(--clr-bg-light);
}
.testimonial-role{font-size:.95em;color:#7e8597;}

/* ========== 8. CHAT USE-CASES SECTION ========== */
.chat-usecases-section{
  margin:4.2rem auto 0;max-width:470px;background:var(--surface);
  box-shadow:0 6px 36px #2560ec13;padding:2.1rem 1.3rem 1.6rem;
  text-align:center;display:flex;flex-direction:column;align-items:center;border-radius:22px;
}
.chat-header{margin-bottom:2.1rem;}
.chat-title{color:var(--clr-accent);font-size:2.15rem;font-weight:700;margin-bottom:.31rem;}
.chat-desc{color:#7385a8;font-size:1.08rem;margin-bottom:.6rem;}
.chat-conversation{
  width:100%;min-height:230px;display:flex;flex-direction:column;align-items:center;gap:1.15rem;
  margin:.8rem 0 .6rem;
}
.chat-msg{
  display:flex;align-items:flex-end;gap:.7rem;opacity:0;transform:translateY(16px) scale(.97);
  animation:fadeMsg .57s cubic-bezier(.38,1.18,.53,1.01) forwards;
  width:100%;max-width:380px;
}
@keyframes fadeMsg{to{opacity:1;transform:translateY(0) scale(1);}}
.chat-bubble{
  background:var(--clr-bg-light);
  border-radius:15px 15px 15px 6px;
  padding:.79rem 1.18rem .79rem .94rem;
  font-size:1.07rem;font-weight:500;
  box-shadow:0 2px 10px #2560ec13;color:#2e3554;
  max-width:315px;position:relative;text-align:left;transition:background .21s;
}
.chat-msg.plinkly .chat-bubble{
  background:linear-gradient(91deg,var(--clr-accent) 0%,var(--clr-primary) 97%);
  color:#fff;border-radius:15px 15px 6px 15px;align-self:flex-end;text-align:left;
}
.chat-avatar-ico{
  width:38px;height:38px;font-size:1.52rem;background:var(--clr-bg-light);
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 8px #2560ec16;flex-shrink:0;
}
.chat-msg.plinkly{flex-direction:row-reverse;align-self:flex-end;}
.chat-msg.plinkly .chat-avatar-ico img{
  width:38px;height:38px;border-radius:11px;background:var(--surface);object-fit:cover;
}

/* ========== 9. USE-CASES GRID ========== */
.usecases-section{margin:3.8rem auto 0; display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;}
.usecases-title, .testimonials-title, .adv-title, .stats-title, .how-title, .why-title, .metrics-headline{
  text-align:center;font-size:3rem;font-weight:800;color:var(--text);
  max-width: 800px;
  /*margin-bottom:2.3rem;letter-spacing:0;*/
}
.usecases-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem; width: 100%;
}
.usecase-card{
  background:var(--surface);border-radius:22px;border:1.5px solid var(--border);
  /*box-shadow:0 2px 20px rgba(37,96,236,.06);*/
  padding:1.7rem 1.1rem .5rem;display:flex;flex-direction:column;
  min-height:430px;position:relative;
  transition:box-shadow .18s,border-color .15s,transform .17s;
}
.usecase-card:hover{
  box-shadow:0 10px 34px rgba(255,102,0,.07);
  border-color:var(--clr-accent);transform:translateY(-6px) scale(1.015);
}
.usecase-type{
  color:#98a7bd;font-size:.94rem;font-weight:800;letter-spacing:.07em;margin-bottom:.65rem;
}
.usecase-headline{
  font-size:1.26rem;font-weight:900;
  margin-bottom:.7rem;line-height:1.3;
}
.usecase-desc{color:#58698d;font-size:1.02rem;margin-bottom:1.6rem;flex:1;}
.usecase-link{
  color:var(--clr-accent);font-weight:700;font-size:1.04rem;
  margin-bottom:1.2rem;text-decoration:none;transition:color .14s;display:inline-block;
}
.usecase-link:hover{color:var(--clr-primary-2);}
.usecase-img{width:100%;display:flex;justify-content:center;align-items:end;min-height:90px;margin-bottom:-.8rem;}
.usecase-img img{
  width:90%;max-width:280px;height:auto;border-radius:14px;
  object-fit:contain;background:var(--clr-bg-light);
}
@media (max-width:900px){
  .usecases-grid{gap:1.1rem;}
  .usecase-card{min-height:380px;}
}
@media (max-width:600px){
  .usecases-title, .testimonials-title, .adv-title, .stats-title, .how-title, .why-title, .metrics-headline{font-size:1.7rem; line-height: 1.05;letter-spacing: .01em;}
  .usecases-grid{grid-template-columns:1fr;}
  .how-panel-title{font-size:1.25rem; line-height: 1.05;letter-spacing: .01em;}
}


/* ========== 10. RESPONSIVE MEDIA QUERIES ========== */
@media (max-width:800px){
  .testimonial-card,.testimonials-cards{width:100%;max-width:98vw;}
  .testimonial-card{padding:1.2rem .5rem;}
}
@media (max-width:700px){
  .cta-main-title{font-size:1.2rem;}
  .cta-section-header{margin:0.7rem 0 1.1rem;}
  .cta-cards-row{grid-template-columns:1fr;gap:1.1rem;}
  .signup-features{gap:.5rem;font-size:.97rem;}
  .signup-features span{margin-bottom:.25em;}
  .use-cases-row{flex-direction:column;gap:1rem;}
}
@media (max-width:600px){
  .hero-title{font-size:2.4rem;}
  .shorten-form{flex-direction:column;padding:.7rem;}
  .shorten-form button{width:100%;}
  .chat-usecases-section{padding:1.1rem .3rem;max-width:99vw;}
  .chat-title{font-size:1.09rem;}
  .chat-conversation{min-height:120px;}
  .chat-bubble{font-size:.99rem;max-width:97vw;}
  .chat-msg{max-width:97vw;}
}













.plinkly-metrics {
  padding: 3.5rem 0 2.7rem 0;
  text-align: center;
  display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.metrics-row {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.metric-card {
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 4px 28px #23315811;
  padding: 2.3rem 2.1rem 2.1rem 2.1rem;
  min-width: 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.2rem;
  border: 1px solid var(--border);
}
.metric-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .37em;
}
.metric-label {
  font-size: 1.07em;
  color: var(--text-dim);
  font-weight: 500;
  margin-top: .2em;
}
@media (max-width: 900px) {
  .metrics-row { gap: 1.1rem; }
  .metric-card { min-width: 140px; padding: 1.5rem .6rem;}
  .usecases-title, .testimonials-title, .adv-title, .stats-title, .how-title, .why-title, .metrics-headline{font-size:1.7rem; line-height: 1.05;letter-spacing: .01em;}
}



/* === QR Modal – Modern Layout === */

/* Overlay */
#qrModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(8, 15, 28, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none; /* JS سيحولها flex عند الفتح */
  justify-content: center;
  align-items: center;
}

/* Box */
#qrModalBox.qr-modal {
  background: var(--surface, #fff);
  padding: 22px 22px 20px;
  border-radius: 18px;
  box-shadow: 0 20px 65px rgba(15, 23, 42, .26);
  border: 1px solid var(--border, #e5e7eb);
  max-width: 760px;
  width: min(94vw, 760px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Close button */
#qrModalClose {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--clr-muted, #64748b);
  cursor: pointer;
  padding: 3px;
  border-radius: 999px;
  transition: background .15s, color .15s, transform .12s;
}
#qrModalClose:hover {
  background: rgba(148, 163, 184, .16);
  color: var(--clr-dark, #020617);
  transform: translateY(-1px);
}

/* Header */
.qr-header {
  margin-bottom: 14px;
}
.qr-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qr-eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--clr-muted, #64748b);
  font-weight: 600;
}
.qr-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-dark, #020617);
}
.qr-sub {
  margin: 2px 0 0;
  font-size: .9rem;
  color: var(--clr-soft, #6b7280);
}

/* Main layout */
.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1.4fr);
  gap: 20px;
  align-items: flex-start;
}

/* Preview column */
.qr-preview-col {
  display: flex;
  justify-content: center;
}
.qr-preview-card {
  background: linear-gradient(150deg, #f9fafb, #eef3ff);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .16);
  min-width: 230px;
  text-align: center;
}
#qr-preview {
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
}
.qr-box {
     position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 12px 12px 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
}
.qr-box .qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 3px;
  background: #ffffff;
  border: 3px solid #ffffff; /* 👈 البوردر الأبيض حول اللوجو */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
  z-index: 2;
  object-fit: contain;
  max-width: 20%;
  max-height: 20%;
}


.qr-box img {
  width: 164px !important;
  height: 164px !important;
  border-radius: 10px;
  display: block;
}

/* Download button + hint */
.qr-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 6px;
  padding-inline: 18px;
  font-size: .92rem;
  border-radius: 999px;
}
.qr-hint {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--clr-muted, #6b7280);
}

/* Protect badge (نفس القديمة تقريبا) */
.plinkly-protect-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  margin: .7em auto 0;
  font-size: .8rem;
  color: var(--clr-primary-1,#2560ec);
  background: #f4f8ff;
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  box-shadow: 0 2px 10px #eaf1ff66;
  font-weight: 500;
  letter-spacing: .01em;
  user-select: none;
}

/* Controls column */
.qr-controls-col {
  display: flex;
  flex-direction: column;
}
.qr-options {
  background: var(--clr-bg-soft, #f8fafc);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.04);
  position: relative;
}

/* Groups */
.qr-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 12px;
  margin-bottom: 12px;
}
.qr-group-label {
  grid-column: 1 / -1;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--clr-muted, #6b7280);
  font-weight: 600;
}

/* Fields */
.qr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .87rem;
  color: var(--clr-dark, #111827);
  font-weight: 500;
}
.qr-field span {
  font-size: .8rem;
  color: var(--clr-soft, #4b5563);
}
#qr-options input[type="file"] {
  background: #fff;
  border-radius: 9px;
  border: 1px dashed rgba(148, 163, 184, .7);
  padding: 6px 8px;
  font-size: .82rem;
  cursor: pointer;
}
#qr-options input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .8);
  background: #fff;
  font-size: .85rem;
  color: var(--clr-dark, #111827);
}
#qr-options input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .6);
  background: #fff;
  cursor: pointer;
}

/* Generate button */
.qr-generate-btn {
  width: 100%;
  margin-top: 4px;
  padding-block: 9px;
  font-size: .95rem;
  border-radius: 999px;
}

/* Overlay (non logged-in) */
.qr-options-overlay {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  text-align: center;
  color: var(--clr-dark, #0f172a);
  padding: 14px;
}
.qr-options-overlay .btn-primary,
.qr-options-overlay a.btn-primary {
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 768px) {
  #qrModalBox.qr-modal {
    width: 96vw;
    padding: 18px 14px 14px;
  }
  .qr-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qr-preview-col {
    order: -1;
  }
}

@media (max-width: 480px) {
  .qr-header {
    margin-bottom: 10px;
  }
  .qr-title {
    font-size: 1.05rem;
  }
  .qr-sub {
    font-size: .82rem;
  }
}

/* أيقونات SVG موحّدة للهوم (Why / Advanced / Stats badges) */
.icon-svg{
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}

/* تأكد إن الحاويات ما تضغط الأيقونة */
.why-icon,
.adv-item-icon,
.adv-preview-icon,
.stats-badge-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* لو حاب تمنع تمددها أو تصغر في الفليكس */
.why-icon .icon-svg,
.adv-item-icon .icon-svg,
.adv-preview-icon .icon-svg,
.stats-badge-icon .icon-svg{
  flex-shrink: 0;
}