/* v12 fixed.3 */
:root{
  --saf-grad: linear-gradient(135deg,#ff6b6b,#f06595,#845ef7);
  --saf-green:#27c93f;
  --saf-red:#ff2b2b;
  --saf-orange:#ff7a00;
}
*{box-sizing:border-box}
.saf7ati-landing{padding:20px 12px; position:relative; font-family:'Alexandria',sans-serif;}
.landing-row{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;}
.landing-title h2{margin:0; font-size:22px; font-weight:800;}
.slogan-box{position:relative; padding:10px 14px; border-radius:16px; background: var(--saf-grad); color:#fff; min-height:40px; overflow:hidden; max-width:720px}
.slogan-line{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s;}
.slogan-line.active{opacity:1; transform:translateY(0);}

.landing-decor .decor-row{display:flex; gap:6px; justify-content:center;}
.decor-pixel{width:10px; height:10px; background:#ececec; border-radius:2px; transition: box-shadow .2s, background .2s;}
.decor-pixel:hover{background:#c0ffc0; box-shadow: 0 0 6px #a8ffbf;}

.fab-cta{position:fixed; background: var(--saf-red); color:#fff; padding:12px 16px; border-radius:999px; font-weight:800; box-shadow:0 10px 25px rgba(0,0,0,.2); z-index:9999; text-decoration:none}
/* position from option */
body .fab-cta{right:14px; bottom:16px;}
body.fab-left .fab-cta{left:14px; right:auto; bottom:16px;}

.saf7ati-form-wrap{padding:24px 12px; max-width:900px; margin:0 auto;}
.saf7ati-form-wrap h3{font-size:20px; text-align:center; margin-bottom:10px;}
.saf7ati-success{background:#e8fff1; border:1px solid #b7f0cd; color:#1a7f42; padding:10px 12px; border-radius:10px; margin-bottom:12px; text-align:center;}
.saf7ati-form .row{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.saf7ati-form input, .saf7ati-form select{padding:10px 12px; border:1px solid #ddd; border-radius:10px; width:100%;}
.saf7ati-form input[name="s_link"]::placeholder{color:#bbb;}
.saf7ati-form .btn-primary{background:var(--saf-orange); color:#fff; border:none; padding:12px 16px; border-radius:12px; width:100%; font-weight:800; cursor:pointer;}
.saf7ati-form .checkbox label{display:flex; gap:8px; align-items:center;}

/* تصنيفات — وسطية + عدادات داخل الأيقونة */
.categories-wrapper{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:10px auto; text-align:center; width:100%; max-width:100%;}
.saf7ati-cat{background:#f7f7f9; border-radius:16px; padding:10px 12px; text-decoration:none; color:#333; border:1px solid #ececf1; display:flex; align-items:center; gap:10px; position:relative;}
.saf7ati-cat.active{outline:2px solid #b5e8ff;}
.saf7ati-cat .cat-name{font-weight:700; white-space:nowrap;}
.saf7ati-cat .cat-counter{display:flex; gap:6px; font-size:12px; background:#fff; border:1px solid #eee; border-radius:999px; padding:4px 8px;}
.cat-counter .cc{min-width:28px; text-align:center; border-radius:999px; padding:2px 6px;}
.cat-counter .booked{background:#e6f4ff;}
.cat-counter .left{background:#eaffea;}
.cat-counter .pct{background:#fff4e6;}

/* شبكة الصفحات المشتركة فقط */
.filled-grid{display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap:8px; max-width:720px; margin:12px auto;}
.filled-grid .card{position:relative; border-radius:8px; overflow:hidden; border:1px solid #e6eef7; background:#f9fbff; display:flex; align-items:flex-end; text-decoration:none; color:#111;}
.filled-grid .card img,.filled-grid .card .placeholder{width:100%; height:100%; position:absolute; inset:0; object-fit:cover;}
.filled-grid .card .placeholder{background:linear-gradient(135deg,#eef2f7,#f6f9ff);}
.filled-grid .card .title{position:relative; background:rgba(255,255,255,.9); width:100%; padding:4px 6px; font-size: clamp(10px, 2.2vw, 14px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* أحجام الباقات (بدون تكرار الصورة) */
.filled-grid .span-1{grid-column: span 1; grid-row: span 1;}
.filled-grid .span-2{grid-column: span 2; grid-row: span 2;}
.filled-grid .span-3{grid-column: span 3; grid-row: span 3;}

@media (min-width:720px){
  .filled-grid{grid-template-columns: repeat(10, minmax(0, 1fr)); max-width:920px;}
}