/* /assets/css/theme.sss.css — v2.0 (Instagram-styled, single file)
   - یکپارچه با ظاهر sssinstagram + پالت گرادیان اینستاگرام
   - سازگار با ادیتور cPanel (بدون CSS variables و بدون fr)
*/

/* ---------- Base ---------- */
html, body {
  background:#ffffff; color:#0f172a;
  font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
}
a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1080px; margin:0 auto; padding:16px; }
.muted { color:#64748b; }
.hidden { display:none !important; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:#ffffff; border-bottom:1px solid #e5e7eb;
}
.site-header .row { display:flex; align-items:center; gap:12px; padding:10px 0; }
.brand {
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px; font-size:18px; color:#0f172a;
}
.brand .logo{
  width:26px; height:26px; border-radius:8px; display:inline-block;
  background:
    radial-gradient(circle at 30% 30%, #ffdc80 0%, #fcb045 18%, #fd1d1d 40%, transparent 41%),
    linear-gradient(135deg, #833ab4, #e1306c 55%, #f56040 85%, #fcb045);
  box-shadow:0 4px 14px rgba(241,70,104,.35);
}
.nav-actions { margin-left:auto; display:flex; gap:10px; }
.btn, .btn-ghost {
  height:42px; padding:0 16px; border-radius:12px; border:1px solid #e5e7eb; background:#ffffff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#0f172a;
}
.btn:hover { background:#f8fafc; }
.btn-primary {
  background:linear-gradient(135deg,#6a2db8, #e1306c 55%, #f56040);
  color:#fff; border:0; box-shadow:0 10px 24px rgba(225,48,108,.35);
}
.btn-primary:hover { filter:brightness(1.05); }

/* ---------- Hero (Instagram gradient band) ---------- */
.hero{
  padding:52px 0 30px;
  border-bottom:1px solid #f1f3f8;
  background:
    linear-gradient(135deg, rgba(131,58,180,.92), rgba(225,48,108,.92) 55%, rgba(245,96,64,.9) 85%, rgba(252,176,69,.9)),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  color:#fff;
}
.hero .container { text-align:center; }
.hero h1{
  font-size:clamp(24px, 4.2vw, 40px); line-height:1.15; margin:0 0 10px;
  font-weight:800; letter-spacing:-.3px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.08);
}
.hero p{ color:#f8fafc; opacity:.95; }
.hero .input{
  background:#fff; border:1px solid #e6e8ef; color:#0f172a;
}
.hero .btn-primary{ height:54px; min-width:150px; border-radius:14px; }

/* ---------- Badges (chips under input) ---------- */
.badge, .chip{
  display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:999px;
  background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.35);
  font-weight:700; font-size:12.5px; letter-spacing:.2px;
}

/* ---------- Tool Card / Form (unified) ---------- */
.card, .story-form, .dl-form {
  background:#ffffff; border:1px solid #e5e7eb; border-radius:18px;
  box-shadow:0 20px 50px rgba(2,6,23,.06);
}
.dl-form, .story-form { padding:18px; }
.dl-form .form-row, .story-form .row { display:flex; gap:10px; align-items:stretch; }

.input,
.story-form input,
.dl-form input[type="text"],
.dl-form input[type="url"]{
  flex:1 1 auto; height:54px; border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  padding:0 16px; font-size:16px; outline:none;
}
.input:focus,
.story-form input:focus,
.dl-form input:focus{
  border-color:#e1306c; box-shadow:0 0 0 3px rgba(225,48,108,.18);
}

#submitBtn, .dl-form .btn, .story-form .btn { height:54px; min-width:150px; border-radius:14px; font-weight:800; }

/* Mobile stacking */
@media (max-width:560px){
  .dl-form .form-row, .story-form .row { flex-direction:column; }
  #submitBtn, .dl-form .btn, .story-form .btn { width:100%; }
}

/* ---------- Results wrapper ---------- */
.result, #story-result { margin-top:18px; }
.result-head {
  padding:14px 16px; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between;
}
.result-title { margin:0; font-size:16px; font-weight:800; }
#status { color:#64748b; }

/* ---------- Cards (reels/story/video unified) ---------- */
.reels-grid, .video-grid, .story-grid {
  display:flex; flex-wrap:wrap; gap:16px;
}

/* one column mobile; 2/3 columns at wider screens (Flex-only) */
.media-card, .story-card {
  flex:1 1 100%;
  background:#fff; border:1px solid #e5e7eb; border-radius:18px;
  box-shadow:0 18px 40px rgba(2,6,23,.06);
  overflow:hidden; display:flex; flex-direction:column;
}
@media (min-width:720px){ .media-card, .story-card { flex-basis:calc(50% - 8px); } }
@media (min-width:1100px){ .media-card, .story-card { flex-basis:calc(33.333% - 10.66px); } }

.media-head, .story-head {
  padding:12px 14px; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; gap:10px;
}
.media-head .avatar, .story-head .avatar {
  width:36px; height:36px; border-radius:50%; background:#ffffff; position:relative;
}
.media-head .avatar::before, .story-head .avatar::before{
  content:""; position:absolute; left:-3px; top:-3px; right:-3px; bottom:-3px; border-radius:999px;
  background:conic-gradient(from 0deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4, #f58529);
  z-index:-1;
}
.media-head .title, .story-head .user { font-weight:800; font-size:15px; }
.media-head .meta, .story-head .time { color:#64748b; font-size:12.8px; }

/* media area with 9:16 fallback */
.media-box, .story-media { position:relative; background:#000; width:100%; overflow:hidden; }
.media-box::before, .story-media::before { content:""; display:block; padding-top:177.78%; }
.media-box img, .media-box video, .story-media img, .story-media video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
}

/* actions */
.media-actions, .story-actions {
  display:flex; flex-direction:column; gap:10px; padding:14px; border-top:1px solid #e5e7eb;
}
.media-actions .btn, .story-actions .btn {
  height:46px; border-radius:14px; font-weight:800; border:1px solid #e5e7eb;
  background:linear-gradient(135deg,#6a2db8, #e1306c 55%, #f56040);
  color:#fff;
}
.media-actions .btn:hover, .story-actions .btn:hover { filter:brightness(1.05); }
.media-actions .btn-ghost, .story-actions .btn-ghost {
  background:#f8fafc; color:#0f172a; border:1px solid #e6e8ef;
}
@media (min-width:520px){
  .media-actions, .story-actions { flex-direction:row; flex-wrap:wrap; }
  .media-actions .btn, .story-actions .btn { flex:1 1 0; }
}

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid #e5e7eb; padding:20px 0; background:#ffffff; }
.site-footer .muted { color:#64748b; }


/* === Tool Tabs (centered on hero, sss/Instagram style) === */
.tool-tabs {
  display:flex; justify-content:center; align-items:center;
  gap:10px; flex-wrap:wrap; margin-top:18px;
}

/* حالت روی گرادیان هیرو (شفاف + بور) */
.tool-tabs .tab {
  height:40px; padding:0 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color:#ffffff; font-weight:800; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 8px 18px rgba(0,0,0,.10);
  transition:transform .04s ease, filter .15s ease, background .15s ease;
}
.tool-tabs .tab:hover { background:rgba(255,255,255,.22); filter:brightness(1.03); }
.tool-tabs .tab:active { transform:translateY(1px); }

/* تب فعال (سفید، نوشته تیره) */
.tool-tabs .tab.active {
  background:#ffffff; color:#0f172a; border-color:#ffffff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* آیکن کوچیک (اختیاری) */
.tab .ico { font-size:15px; margin-right:8px; line-height:1; }

/* ریسپانسیو: فشرده‌تر روی موبایل */
@media (max-width:480px){
  .tool-tabs .tab { height:38px; padding:0 12px; border-radius:10px; }
}

/* اگر همین تب‌ها را روی صفحات ابزار (پس‌زمینه سفید) خواستی: کلاس light */
.tool-tabs.light .tab {
  border-color:#e6e8ef; background:#f8fafc; color:#0f172a; box-shadow:none;
}
.tool-tabs.light .tab:hover { background:#eef4ff; }
.tool-tabs.light .tab.active {
  background:linear-gradient(135deg,#6a2db8, #e1306c 55%, #f56040);
  color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(225,48,108,.28);
}