/**
 * service-ui.css — تصميم قسم الخدمات السعودية 🇸🇦
 * Prefix: ssa-  (لا يتعارض مع dsu-/sau-/fau-)
 * ألوان مستوحاة من العلم السعودي: أخضر + أبيض + لمسة ذهبية
 */
.ssa-root{
  --ssa-bg:#f3f8f4;
  --ssa-card:#ffffff;
  --ssa-ink:#0f1f17;
  --ssa-muted:#5d7167;
  --ssa-line:#d7e7dc;
  --ssa-primary:#006C35;
  --ssa-primary2:#0a8f47;
  --ssa-dark:#054428;
  --ssa-gold:#c8a24a;
  --ssa-soft:#e7f4ec;
  --ssa-good:#edfdf3;
  --ssa-goodText:#0c6b3a;
  --ssa-warn:#fff7df;
  --ssa-warnText:#7a5700;
  --ssa-shadow:0 14px 34px rgba(6,78,43,.12);
  --ssa-radius:20px;

  max-width:700px;margin:0 auto;padding:0 0 60px;
  font-family:var(--font, Arial, Tahoma, sans-serif);
  font-size:inherit;font-weight:700;line-height:1.75;
  color:var(--ssa-ink);direction:rtl;
}
.ssa-root small{font-weight:600}

/* ── Cards ── */
.ssa-card{background:var(--ssa-card);border:1px solid var(--ssa-line);border-radius:var(--ssa-radius);box-shadow:var(--ssa-shadow);padding:16px;margin-top:14px}
.ssa-section-title{margin:0 0 12px;font-size:17px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#0a3b22}
.ssa-section-title small{font-size:12px;color:var(--ssa-muted)}

/* ── Notices ── */
.ssa-notice{border-radius:14px;padding:12px 14px;margin-top:14px;font-size:13.5px;line-height:1.7}
.ssa-notice strong{display:block;margin-bottom:3px}
.ssa-notice--good{background:var(--ssa-good);color:var(--ssa-goodText);border:1px solid #c8edd5}
.ssa-notice--warn{background:var(--ssa-warn);color:var(--ssa-warnText);border:1px solid #f3df9f}

/* ── Verdict box (للأسئلة هل...؟) ── */
.ssa-verdict{background:linear-gradient(160deg,#054428,#006C35);color:#fff;border-radius:16px;padding:16px;margin-top:14px}
.ssa-verdict small{display:block;font-size:12px;opacity:.85;margin-bottom:4px}
.ssa-verdict b{font-size:15px;line-height:1.7;font-weight:800}

/* ── Tabs ── */
.ssa-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ssa-chip{border:1px solid var(--ssa-line);background:#fff;color:var(--ssa-ink);border-radius:999px;padding:8px 15px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ssa-chip:hover{background:var(--ssa-soft)}
.ssa-chip.active{background:var(--ssa-primary);color:#fff;border-color:var(--ssa-primary)}
.ssa-tab-panel{display:none}
.ssa-tab-panel.active{display:block}
.ssa-tab-panel ul{margin:0;padding:0 20px 0 0}
.ssa-tab-panel li{font-size:14px;color:#3b4a42;line-height:1.9;margin-bottom:4px}
.ssa-tab-official{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--ssa-soft);color:var(--ssa-primary);font-weight:800;font-size:13px;padding:9px 14px;border-radius:12px;text-decoration:none;border:1px solid #bfe6cd}
.ssa-tab-official:hover{background:#dcefe2}

/* ── AI ASSISTANT BOX ── */
.ssa-ai-tool{background:radial-gradient(circle at top left,rgba(255,255,255,.16),transparent 35%),linear-gradient(160deg,#054428,#006C35 58%,#0a8f47);color:#fff;border-radius:26px;padding:22px 18px 18px;margin-top:14px;box-shadow:0 18px 42px rgba(0,108,53,.26);position:relative;overflow:hidden}
.ssa-ai-tool__badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;margin-bottom:8px;position:relative;z-index:1}
.ssa-ai-tool__title{margin:0 0 6px;font-size:20px;letter-spacing:-.4px;line-height:1.35;position:relative;z-index:1}
.ssa-ai-tool__desc{margin:0 0 14px;font-size:13px;color:rgba(255,255,255,.82);position:relative;z-index:1}
.ssa-ai-tool textarea{width:100%;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:11px 13px;outline:0;background:rgba(255,255,255,.95);color:var(--ssa-ink);font:inherit;font-size:14px;min-height:84px;resize:vertical;box-sizing:border-box;margin-bottom:10px;position:relative;z-index:1}

.ssa-char-counter{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;position:relative;z-index:1}
.ssa-char-bar-wrap{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.20);overflow:hidden}
.ssa-char-bar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#fff,#bfe8cd);transition:width .2s}
.ssa-char-text{font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap}

.ssa-picker-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);margin:4px 0 8px;position:relative;z-index:1}
.ssa-select{width:100%;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:11px 13px;outline:0;background:rgba(255,255,255,.95);color:var(--ssa-ink);font:inherit;font-weight:700;font-size:14px;box-sizing:border-box;margin-bottom:14px;cursor:pointer;position:relative;z-index:1;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23055f2f' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center}
.ssa-select:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}

.ssa-remaining-note{font-size:12px;color:rgba(255,255,255,.62);text-align:center;margin:4px 0 12px;position:relative;z-index:1}

.ssa-security-row{margin-bottom:14px;position:relative;z-index:1}
.ssa-field-label{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:8px}
.ssa-text-input{width:100%;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:11px 13px;outline:0;background:rgba(255,255,255,.95);color:var(--ssa-ink);font:inherit;font-size:14px;box-sizing:border-box}
.ssa-text-input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}

.ssa-ai-tool__btn{width:100%;border:0;border-radius:16px;background:linear-gradient(135deg,#fff,#e6f6ec);color:#055f2f;font-weight:900;font:inherit;padding:13px;cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.15);font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:1}
.ssa-ai-tool__btn:hover{transform:translateY(-1px)}
.ssa-ai-tool__btn:disabled{opacity:.75;cursor:wait}
.ssa-ai-tool__spinner{width:18px;height:18px;border:3px solid rgba(5,95,47,.2);border-top-color:#055f2f;border-radius:50%;animation:ssa-spin .7s linear infinite}
@keyframes ssa-spin{to{transform:rotate(360deg)}}

.ssa-ai-tool__result{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);border-radius:16px;padding:14px;margin-top:12px;font-size:14px;color:#fff;line-height:1.7;position:relative;z-index:1}
.ssa-result-warn{color:#ffe08a;font-weight:600}
.ssa-result-sec{display:flex;gap:10px;align-items:flex-start}
.ssa-result-sec__icon{font-size:22px}
.ssa-result-link{display:inline-block;margin-top:8px;margin-left:6px;background:#fff;color:#055f2f;font-weight:800;padding:9px 14px;border-radius:12px;text-decoration:none}
.ssa-result-link--gold{background:linear-gradient(135deg,#d9b860,#c8a24a);color:#3a2c06}
.ssa-result-remaining{display:block;margin-top:8px;font-size:11px;color:rgba(255,255,255,.7)}
.ssa-ai-tool__note{margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.72);text-align:center;position:relative;z-index:1}
.ssa-ai-tool__disabled{text-align:center;padding:20px 10px;color:rgba(255,255,255,.85);position:relative;z-index:1}

/* ── Detail cards ── */
.ssa-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ssa-detail-card{display:block;background:#f6faf7;border:1px solid var(--ssa-line);border-radius:14px;padding:12px;text-decoration:none;color:var(--ssa-ink);transition:transform .15s}
.ssa-detail-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(6,78,43,.1)}
.ssa-detail-card b{display:block;font-size:14px;color:#0a3b22}
.ssa-detail-card span{font-size:12px;color:var(--ssa-muted);font-weight:600}

/* ── Featured image (نفس مكان الأحلام) ── */
.ssa-feat-img{margin-top:14px;border-radius:var(--ssa-radius);overflow:hidden;border:1px solid var(--ssa-line)}
.ssa-feat-img img{width:100%;display:block;height:auto}

/* ── Article ── */
.ssa-article-block{background:#fff;border:1px solid var(--ssa-line);border-radius:var(--ssa-radius);padding:16px;margin-top:12px;scroll-margin-top:80px;max-width:100%;overflow-x:clip}
.ssa-article-block ins.adsbygoogle,.ssa-article-block iframe,.ssa-article-block .ad-slot,.ssa-article-block .ad-wrap{max-width:100%!important;display:block;margin:14px auto}
.ssa-article-block h2{font-size:18px;margin:18px 0 10px;color:#0a3b22;scroll-margin-top:80px}
.ssa-article-block h2:first-child{margin-top:0}
.ssa-article-block p,.ssa-article-block li{font-size:14px;color:#3b4a42;line-height:1.8}
.ssa-article-block ol,.ssa-article-block ul{padding:0 20px 0 0;margin:8px 0}
.ssa-article-block table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;border-radius:14px;overflow:hidden;border:1px solid var(--ssa-line)}
.ssa-article-block th,.ssa-article-block td{padding:9px 10px;border-bottom:1px solid var(--ssa-line);font-size:13px;text-align:center}
.ssa-article-block th{background:var(--ssa-soft);color:#0a3b22;font-weight:800}
.ssa-article-block tr:last-child td{border-bottom:0}

/* ── FAQ ── */
.ssa-faq-item{border:1px solid var(--ssa-line);border-radius:14px;margin-top:10px;overflow:hidden;background:#fff}
.ssa-faq-item.open .ssa-faq-a{display:block}
.ssa-faq-a{display:none}
.ssa-faq-q{width:100%;text-align:right;background:#fff;border:0;padding:13px 15px;font:inherit;font-weight:700;font-size:14px;color:#0a3b22;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.ssa-faq-a{padding:0 15px 13px;font-size:13.5px;color:#3b4a42;line-height:1.8}

/* ── Feedback ── */
.ssa-feedback{display:flex;gap:10px;justify-content:center}
.ssa-feedback-btn{background:#f6faf7;border:1px solid var(--ssa-line);border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}
.ssa-feedback-btn:hover{background:var(--ssa-soft)}
.ssa-mini-note{font-size:12px;color:var(--ssa-muted);text-align:center;margin-top:10px}

/* ── Related ── */
.ssa-related-list{display:grid;gap:9px}
.ssa-related-item{display:flex;gap:10px;align-items:center;background:#f6faf7;border:1px solid var(--ssa-line);border-radius:14px;padding:11px;text-decoration:none;color:var(--ssa-ink)}
.ssa-related-item:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(6,78,43,.1)}
.ssa-thumb{width:38px;height:38px;border-radius:10px;background:var(--ssa-soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ssa-related-item b{font-size:13.5px;display:block}
.ssa-related-item small{font-size:12px;color:var(--ssa-muted)}

/* ── End-of-article CTA (غير ثابت) ── */
.ssa-end-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ssa-end-btn{flex:1;min-width:150px;border:0;border-radius:14px;padding:14px;font:inherit;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.ssa-end-btn--primary{background:var(--ssa-primary);color:#fff;box-shadow:0 8px 20px rgba(0,108,53,.25)}
.ssa-end-btn--soft{background:var(--ssa-soft);color:var(--ssa-primary)}

/* ── إعلانات ── */
.ssa-ad-wrap{margin:14px 0;text-align:center}

/* ── حواف الجوال (نفس سلوك الأحلام @600px) ── */
@media (max-width:600px){
  .ssa-root{margin-inline:-8px;width:calc(100% + 16px);box-sizing:border-box;overflow-x:hidden}
  .ssa-card,.ssa-article-block{border-radius:16px;padding:12px 11px}
  .ssa-details-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .ssa-ai-tool__title{font-size:18px}
}

/* ── روابط <a> — تأثيرات حركية لكل الأقسام ── */
@keyframes ssa-link-glow {
  0%,100% { text-shadow: 0 0 6px rgba(0,108,53,.0); }
  50%      { text-shadow: 0 0 10px rgba(0,108,53,.45); }
}

.ssa-tab-panel li a,
.ssa-faq-a a,
.ssa-article-block a {
  color: var(--ssa-primary);
  font-weight: 800;
  text-decoration: none;
  background-image: linear-gradient(var(--ssa-primary2), var(--ssa-primary2));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding-bottom: 1px;
  transition: background-size .35s ease, color .22s, transform .18s;
  display: inline;
}
.ssa-tab-panel li a:hover,
.ssa-faq-a a:hover,
.ssa-article-block a:hover {
  color: var(--ssa-dark);
  background-size: 100% 2px;
  background-position: left bottom;
  transform: translateY(-1px);
  animation: ssa-link-glow 1.2s ease infinite;
}


/* ══════════════════════════════════════════════════════
   LIMIT REACHED CARD — كارت الحد اليومي (الخدمات)
══════════════════════════════════════════════════════ */
.ssa-limit-card{
    text-align:center;
    padding:14px 12px 12px;
    background:linear-gradient(135deg,var(--ssa-soft) 0%,#fff 100%);
    border:1px solid var(--ssa-line);
    border-radius:18px;
    direction:rtl;
    line-height:1.7;
    box-shadow:0 10px 26px rgba(5,68,40,.08);
}
.ssa-limit-icon{ font-size:40px;line-height:1;margin-bottom:6px; }
.ssa-limit-title{
    font-size:17px;font-weight:800;color:var(--ssa-dark);
    margin:0 0 8px;letter-spacing:-.2px;
}
.ssa-limit-text{
    font-size:14px;color:var(--ssa-muted);
    margin:0 0 12px;line-height:1.85;
}
.ssa-limit-countdown{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    background:#fff;border:1px solid var(--ssa-line);
    border-radius:14px;padding:11px 13px;
    margin:0 auto;max-width:320px;
    box-shadow:0 6px 16px rgba(5,68,40,.06);
}
.ssa-limit-countdown-label{ font-size:13px;color:var(--ssa-muted); }
.ssa-limit-countdown-value{
    font-size:27px;font-weight:900;
    color:var(--ssa-primary);
    font-variant-numeric:tabular-nums;letter-spacing:1px;
    text-shadow:0 2px 12px rgba(0,108,53,.18);
}
@media(max-width:540px){
    .ssa-limit-title{font-size:15.5px;}
    .ssa-limit-text{font-size:13px;}
    .ssa-limit-countdown-value{font-size:23px;}
}
