/*
Theme Name: StatusFine
Theme URI: https://statusfine.com/
Author: StatusFine
Author URI: https://statusfine.com/
Description: Ultra-light custom theme for StatusFine — free Sindhi & Urdu status maker with ready-made statuses, a canvas status maker, daily-fresh personalised homepage and a floating notification bell.
Version: 1.0.28
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: statusfine
Tags: light, custom-logo, featured-images
*/

/* ============ Base ============ */
:root{
  --bg:#f7f5f0; --card:#ffffff; --ink:#0d1426; --ink2:#232c44;
  --mute:#5e6476; --faint:#848a9c;
  --gold:#b27e1c; --gold2:#c68e2a; --goldsoft:#f3e3bd;
  --maroon:#a3202c; --green:#12b270; --green-d:#0a8050; --blue:#1877f2; --blue-d:#1060c8;
  --hair:rgba(20,24,40,.10); --rad:18px;
  --shadow:0 10px 30px rgba(13,20,38,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.sf-sindhi{font-family:'Lateef','Noto Nastaliq Urdu',serif}
.sf-urdu{font-family:'Noto Nastaliq Urdu',serif;line-height:2}
[dir="rtl"]{text-align:right}

/* ============ Header ============ */
.sf-header{position:sticky;top:0;z-index:60;background:#0b0b0d;
  border-bottom:1px solid rgba(217,164,65,.22)}
.sf-header-in{display:flex;align-items:center;gap:22px;padding:12px 0}
.sf-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.sf-logo:hover{text-decoration:none}
.sf-logo-badge{width:46px;height:46px;border-radius:13px;flex:0 0 auto;position:relative;
  background:linear-gradient(135deg,#f0c874,#c68e2a);display:flex;align-items:center;justify-content:center;
  color:#241a04;font-weight:700;font-size:27px;box-shadow:0 4px 12px rgba(198,142,42,.35)}
.sf-logo-badge::after{content:"";position:absolute;top:-4px;right:-4px;width:11px;height:11px;
  background:var(--maroon);transform:rotate(45deg);border-radius:2px;border:2px solid #0b0b0d}
.sf-logo-word{font-size:25px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.sf-logo-word b{color:#d9a441;font-weight:700}
.sf-logo-word small{color:#d9a441}
.sf-logo-tag{display:block;font-size:9.5px;font-weight:600;letter-spacing:.34em;color:#9aa0ae;margin-top:3px}
.sf-nav{margin-left:auto}
.sf-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.sf-nav a{color:#f2f2f2;font-weight:500;font-size:15px}
.sf-nav a:hover{color:#d9a441;text-decoration:none}
.sf-nav .current-menu-item a{color:#d9a441}
.sf-cta-btn{margin-left:8px;background:linear-gradient(135deg,#f0c874,#c68e2a);color:#241a04;
  font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(198,142,42,.35)}
.sf-cta-btn:hover{text-decoration:none;filter:brightness(1.05)}
.sf-burger{display:none;margin-left:auto;background:none;border:0;font-size:26px;color:#fff;cursor:pointer;padding:4px 8px}
@media(max-width:860px){
  .sf-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0b0b0d;border-bottom:1px solid #26262b;padding:10px 18px 16px}
  .sf-nav.open{display:block}
  .sf-nav ul{flex-direction:column;gap:12px}
  .sf-burger{display:block}
  .sf-cta-btn{display:none}
}

/* ============ Hero ============ */
.sf-hero{padding:46px 0 2px;text-align:left}
.sf-kicker{font-size:12.5px;font-weight:600;letter-spacing:.30em;color:var(--gold);margin:0 0 14px}
.sf-hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.sf-hero h1 .gold{background:linear-gradient(92deg,#d09a2e,#a8741a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-hero .sub{font-size:clamp(16px,2vw,19px);color:var(--mute);max-width:620px;margin:0 0 26px}
.sf-search{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--gold2);
  border-radius:999px;padding:6px 6px 6px 20px;max-width:640px;box-shadow:0 8px 24px rgba(178,126,28,.14)}
.sf-search svg{flex:0 0 auto}
.sf-search input{flex:1;border:0;outline:0;font:inherit;font-size:15.5px;color:var(--ink);background:transparent;min-width:0}
.sf-search input::placeholder{color:var(--faint)}
.sf-search button{background:linear-gradient(135deg,#f0c874,#c68e2a);border:0;color:#241a04;font:inherit;
  font-weight:600;font-size:14.5px;padding:11px 24px;border-radius:999px;cursor:pointer}
.sf-search button:hover{filter:brightness(1.05)}
.sf-popular{margin:14px 0 0;font-size:13.5px;color:var(--mute)}
.sf-popular b{color:var(--ink2);font-weight:600}
.sf-popular a{color:var(--gold);font-weight:500;margin:0 2px}

/* ============ Language toggle ============ */
.sf-lang-toggle{display:inline-flex;background:#fff;border:2px solid rgba(178,126,28,.45);
  border-radius:999px;padding:5px;margin:30px 0 22px;box-shadow:var(--shadow)}
.sf-lang-toggle a{padding:10px 30px;border-radius:999px;color:var(--ink2);font-weight:600;font-size:16px}
.sf-lang-toggle a:hover{text-decoration:none}
.sf-lang-toggle a.on{background:linear-gradient(135deg,#f0c874,#c68e2a);color:#241a04}
.sf-lang-toggle a .nat{font-size:19px;margin-right:7px;vertical-align:-2px}

/* ============ Big make buttons ============ */
.sf-make-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:0 0 26px}
.sf-make-btn{border-radius:var(--rad);padding:20px 22px;color:#fff;box-shadow:var(--shadow)}
.sf-make-btn:hover{text-decoration:none;filter:brightness(1.05)}
.sf-make-btn h3{color:#fff;font-size:21px;margin:0 0 4px}
.sf-make-btn p{margin:0;font-size:13.5px;opacity:.92}
.sf-make-btn .dim{font-size:11.5px;font-weight:600;letter-spacing:.06em;opacity:.85;text-transform:uppercase}
.sf-make-green{background:linear-gradient(160deg,#17c37f,#0a8050)}
.sf-make-blue{background:linear-gradient(160deg,#2b8bf6,#1060c8)}
@media(max-width:560px){.sf-make-row{grid-template-columns:1fr}}

/* ============ Section heads ============ */
.sf-sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:38px 0 6px}
/* v1.0.18: homepage section rhythm tightened (28px heads) so the
   hero → slider → ticker → grid → categories flow feels connected;
   other pages keep the roomier 38px (e.g. single-status Related). */
body.home .sf-sec-head{margin-top:28px}
.sf-sec-head .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);align-self:center}
.sf-sec-head small{font-size:12px;font-weight:600;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.sf-sec-head h2{font-size:clamp(24px,3.4vw,32px);margin:0}
.sf-sec-sub{color:var(--mute);margin:0 0 18px;max-width:640px}
.sf-only-chip{margin-left:auto;border:1.5px solid var(--gold);color:var(--gold);border-radius:999px;
  font-size:11.5px;font-weight:600;padding:5px 13px}

/* ============ Slideshow ============
   v1.0.15: slides show the COMPLETE 4:5 status image (the old fixed
   height:440px strip zoomed/cropped it via object-fit:cover, so the
   baked-in text looked oversized — Urdu worst). Slider capped at
   card-like width; image keeps its own 4:5 ratio, like the cards.
   v1.0.16 — "stylish slider": a slide is now a framed card. The full
   4:5 image sits in .sf-slide-media with NOTHING content-like over
   its bottom (the old dark overlay strip hid the baked-in
   StatusFine.com watermark); title, stats and Share moved into a
   white footer BELOW the image. Only glass chips (category top-left,
   "1 / 5" counter top-right) and round glass arrows overlay the
   image. The whole card gets a gold-tinted border + soft glow,
   the dots become progress pills below the slider, and the incoming
   slide's image settles with a gentle Ken Burns zoom. */
.sf-slider{position:relative;max-width:430px;margin:0 auto;border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid rgba(178,126,28,.38);
  box-shadow:0 18px 42px rgba(13,20,38,.15),0 6px 22px rgba(178,126,28,.18)}
.sf-slides{display:flex;align-items:flex-start;transition:transform .55s ease}
.sf-slide{min-width:100%;position:relative;display:flex;flex-direction:column}
.sf-slide-media{position:relative;overflow:hidden;line-height:0}
.sf-slide-media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.sf-slide.is-active .sf-slide-media img{animation:sfKenBurns 1.2s ease-out}
@keyframes sfKenBurns{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.sf-slide.is-active .sf-slide-media img{animation:none}}
.sf-slide-tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(10,14,26,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(240,200,116,.45);color:#f0d48a;
  font-size:11px;font-weight:600;letter-spacing:.12em;padding:6px 13px;border-radius:999px;text-transform:uppercase}
.sf-slide-count{position:absolute;top:14px;right:14px;z-index:3;background:rgba(10,14,26,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(240,200,116,.45);color:#f6e3ae;
  font-size:11px;font-weight:600;letter-spacing:.08em;padding:6px 11px;border-radius:999px}
.sf-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;
  border-radius:50%;background:rgba(10,14,26,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(240,200,116,.5);color:#f0c874;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .2s ease}
.sf-slide-arrow:hover{background:rgba(10,14,26,.68)}
.sf-slide-prev{left:10px}
.sf-slide-next{right:10px}
@media(max-width:560px){.sf-slide-arrow{width:32px;height:32px;opacity:.88}}
.sf-slide-foot{background:var(--card);padding:12px 16px 14px;min-height:84px;box-sizing:border-box}
.sf-slide-title{color:var(--ink);font-size:14px;font-weight:600;line-height:1.35;margin:0 0 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-slide-row{display:flex;align-items:center;gap:12px}
.sf-dots{display:flex;gap:7px;justify-content:center;margin-top:10px}
.sf-dots button{width:8px;height:8px;border-radius:999px;border:0;background:#d9c48f;cursor:pointer;padding:0;
  transition:width .35s ease,background .35s ease}
.sf-dots button.on{width:26px;background:linear-gradient(135deg,#f0c874,#c68e2a)}

/* ============ Line ticker (v1.0.18) ============
   Slim navy strip between the slideshow and the ready-made
   section: the latest status lines of the current language
   scroll in an endless CSS marquee (the item list is printed
   twice in the markup, so translateX(-50%) loops seamlessly).
   Pauses on hover/touch; static under reduced motion. */
.sf-ticker{background:#0d1426;border-top:1px solid rgba(217,164,65,.5);
  border-bottom:1px solid rgba(217,164,65,.5);overflow:hidden;margin:24px 0 4px;padding:7px 0}
.sf-ticker-track{display:flex;align-items:center;width:max-content;
  animation:sfTickerMove 40s linear infinite}
.sf-ticker:hover .sf-ticker-track{animation-play-state:paused}
@keyframes sfTickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sf-ticker-item{color:#f3ead2;font-size:18px;line-height:2;white-space:nowrap;padding:0 6px}
.sf-ticker-item:hover{text-decoration:none;color:#ffe9a8}
.sf-ticker-sep{color:#d9a441;font-size:12px;padding:0 10px}
@media (prefers-reduced-motion: reduce){.sf-ticker-track{animation:none}}

/* ============ Tabs ============ */
.sf-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 20px}
.sf-tab{border:1px solid rgba(178,126,28,.5);background:linear-gradient(135deg,#f8ead0,#f3dc9f 55%,#ecd28a);color:var(--ink);font:inherit;font-size:13px;
  font-weight:500;padding:9px 17px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgba(178,126,28,.18)}
.sf-tab:hover{border-color:var(--gold2);color:var(--gold);background:linear-gradient(135deg,#f3dc9f,#ecd28a 55%,#e0bd63)}
.sf-tab.on{background:linear-gradient(135deg,#f0c874,#c68e2a);color:#241a04;border-color:transparent;font-weight:600}

/* ============ Status cards / grid ============ */
.sf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1020px){.sf-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.sf-grid{grid-template-columns:1fr 1fr;gap:12px}}
.sf-card{background:var(--card);border-radius:16px;box-shadow:0 6px 20px rgba(13,20,38,.09);
  display:flex;flex-direction:column}
.sf-card-media{position:relative;display:block;overflow:hidden;border-radius:16px 16px 0 0}
.sf-card-link{display:block}
.sf-card-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sf-card-tag{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#f0d48a;font-size:10px;
  font-weight:600;letter-spacing:.1em;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.sf-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.sf-card-title{font-size:13.5px;font-weight:500;color:var(--ink2);line-height:1.45;margin:0;flex:1}
/* v1.0.13: card actions = the Share button alone, centred (the old
   "View" link was removed — visitors open the status via the image). */
.sf-card-actions{display:flex;justify-content:center;gap:10px}
.sf-card-actions .sf-share{padding-left:22px;padding-right:22px}
.sf-share{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-size:13px;
  font-weight:600;padding:9px 16px;border-radius:999px;border:0;cursor:pointer;font-family:inherit}
.sf-share:hover{background:var(--green-d);text-decoration:none}
.sf-share-fb{background:var(--blue)} .sf-share-fb:hover{background:var(--blue-d)}
.sf-share-copy{background:#eef0f4;color:var(--ink2)} .sf-share-copy:hover{background:#e2e5ec}
/* v1.0.21: full-screen WhatsApp Status share (shares the status IMAGE
   file, not just the link) — WhatsApp green pill + fixed guide card. */
.sf-share-fs{background:#25d366;color:#06331c}
.sf-share-fs:hover{background:#1eb856;text-decoration:none}
.sf-fs-guide{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1200;
  width:min(430px,calc(100vw - 24px));margin:0}
.sf-fs-guide[hidden]{display:none}
.sf-fs-guide-text{margin-top:9px;font-size:12.5px;color:var(--mute);background:#fff;
  border:1px dashed var(--gold2);border-radius:8px;padding:7px 10px;word-break:break-word}
.sf-fs-guide-x{position:absolute;top:4px;right:10px;background:none;border:0;padding:4px;
  font-size:21px;line-height:1;cursor:pointer;color:var(--mute);font-family:inherit}

/* ============ Post stats: views / shares / likes ============
   (.sf-post-stats — the per-status counters row: v1.0.7 views/shares,
   v1.0.8 likes + the homepage "Show More" button below.
   v1.0.11: the row wraps and the card's overflow clip moved to the
   media wrapper only, so the like pill is never cut on its right.
   v1.0.12: on cards the like pill leaves the row and overlays the
   card image's bottom-left corner (.sf-like-overlay); the card body
   row shows views + shares only. Slides/single keep the full row.) */
.sf-post-stats{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px;column-gap:8px;
  max-width:100%;box-sizing:border-box;min-width:0;
  font-size:12.5px;color:var(--faint);line-height:1}
.sf-pstat{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sf-pstat svg{color:var(--gold);flex:none}
.sf-pstat b{color:var(--ink2);font-weight:600}
.sf-post-stats-lg{font-size:14px;column-gap:22px;row-gap:8px;margin:16px 0 0}
.sf-post-stats-lg .sf-pstat b{font-size:15px}
.sf-post-stats.sf-on-dark{color:rgba(255,255,255,.78)}
.sf-post-stats.sf-on-dark b{color:#fff}
.sf-post-stats.sf-on-dark svg{color:#f0c874}
.sf-slide-row .sf-post-stats{margin-right:auto;min-width:0}
.sf-like-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:inherit;line-height:1;
  flex:0 1 auto;min-width:0;
  color:#6d5510;background:linear-gradient(135deg,#fdf3d8,#f6dd9a);border:1px solid #d9a441;border-radius:999px;
  padding:6px 12px;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 8px rgba(178,126,28,.35);
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,filter .18s}
.sf-like-btn svg{color:#a8741a;flex:none;width:19px;height:19px}
.sf-like-btn b{color:var(--ink2);font-weight:600}
.sf-like-btn:hover{border-color:#b27e1c;filter:brightness(1.04)}
.sf-like-btn.liked{background:#fdf0f3;border-color:rgba(163,32,44,.45);color:var(--maroon);
  box-shadow:0 2px 8px rgba(163,32,44,.18)}
.sf-like-btn.liked svg{color:var(--maroon);fill:var(--maroon)}
.sf-like-btn.liked b{color:var(--maroon)}
.sf-like-btn.pop svg{animation:sf-pop .35s ease}
@keyframes sf-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.sf-post-stats-lg .sf-like-btn{padding:8px 16px}
.sf-post-stats-lg .sf-like-btn svg{width:20px;height:20px}
.sf-post-stats.sf-on-dark .sf-like-btn{background:linear-gradient(135deg,#fdf3d8,#f6dd9a);border-color:#d9a441;color:#6d5510}
.sf-post-stats.sf-on-dark .sf-like-btn b{color:var(--ink2)}
.sf-post-stats.sf-on-dark .sf-like-btn svg{color:#a8741a}
.sf-post-stats.sf-on-dark .sf-like-btn.liked{background:#fdf0f3;border-color:rgba(163,32,44,.45);color:var(--maroon)}
.sf-post-stats.sf-on-dark .sf-like-btn.liked svg{color:var(--maroon);fill:var(--maroon)}
.sf-post-stats.sf-on-dark .sf-like-btn.liked b{color:var(--maroon)}
/* v1.0.12: card-image overlay variant — same gold pill, floated over
   the photo's bottom-left corner inside .sf-card-media (which clips
   it safely); the explicit font-size keeps it at the old in-row
   scale now that it no longer inherits .sf-post-stats' 12.5px. */
.sf-like-overlay{position:absolute;left:10px;bottom:10px;z-index:3;font-size:12.5px;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.sf-like-overlay.liked{box-shadow:0 4px 14px rgba(0,0,0,.35)}
@media(max-width:380px){.sf-like-btn .sf-like-word{display:none}}
.sf-more{text-align:center;margin:22px 0 2px}
.sf-more-btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:600;font-size:15px;
  color:#241a04;background:linear-gradient(135deg,#f0c874,#c68e2a);border:0;border-radius:999px;
  padding:14px 36px;cursor:pointer;box-shadow:0 8px 22px rgba(198,142,42,.35);
  transition:transform .18s,box-shadow .18s,filter .18s,opacity .18s}
.sf-more-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(198,142,42,.42);filter:brightness(1.04)}
.sf-more-btn:disabled{opacity:.65;cursor:wait;transform:none}
.sf-more-btn[hidden]{display:none}
.sf-more-btn .sf-more-arrow{transition:transform .18s}
.sf-more-btn:hover .sf-more-arrow{transform:translateY(2px)}
.sf-more-end{color:var(--faint);font-size:13.5px;margin:6px 0 0}
.sf-more-end[hidden]{display:none}
.sf-fade-in{animation:sfFadeUp .45s ease both}
@keyframes sfFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sf-loadmore{display:block;margin:26px auto 6px;background:transparent;border:1.5px solid var(--gold);
  color:var(--gold);font:inherit;font-weight:600;font-size:15px;padding:13px 34px;border-radius:999px;cursor:pointer}
.sf-loadmore:hover{background:var(--goldsoft)}
.sf-empty{color:var(--mute);padding:26px 0}

/* ============ Phones: bigger ready-made cards (v1.0.25) ============
   On small screens the grid breaks out of the page's side padding
   (negative margins cancel 10px of the .wrap inset, leaving ~8px)
   and the gap tightens to 8px, so the two cards per row are as wide
   as the phone allows and the Sindhi/Urdu lines baked into the card
   images read clearly. Same look, still 2 per row; the desktop grid
   is untouched. (Placed after the other grid rules so the 8px gap
   wins over the ≤430px rule above.) */
@media(max-width:640px){
  .sf-grid{margin-left:-10px;margin-right:-10px;gap:8px}
  .sf-card-body{padding:10px 11px 12px}
}

/* ============ Steps / CTA ============ */
.sf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border:1px solid var(--hair);
  border-radius:16px;margin:34px 0 24px;overflow:hidden;box-shadow:0 6px 20px rgba(13,20,38,.06)}
.sf-step{display:flex;gap:15px;align-items:flex-start;padding:22px 24px;border-right:1px solid var(--hair)}
.sf-step:last-child{border-right:0}
.sf-steps .sf-step .sf-step-num{flex:none;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#f0c874,#c68e2a);color:var(--ink);font-weight:700;font-size:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center;
  box-shadow:0 4px 12px rgba(198,142,42,.35)}
.sf-step .sf-step-txt>span{display:block;font-weight:600;font-size:15.5px;color:var(--ink)}
.sf-step p{margin:3px 0 0;font-size:13px;color:var(--mute)}
@media(max-width:640px){.sf-steps{grid-template-columns:1fr}.sf-step{border-right:0;border-bottom:1px solid var(--hair)}.sf-step:last-child{border-bottom:0}}
.sf-cta{background:linear-gradient(92deg,#c6932a,#e8ba5c);border-radius:16px;text-align:center;padding:34px 20px;margin:0 0 52px}
.sf-cta h2{color:#241a04;font-size:clamp(21px,3vw,27px);margin:0 0 6px}
.sf-cta p{color:#4a3a10;margin:0;font-size:14.5px}

/* ============ Archive / single ============
   v1.0.25 polish pass (presentation only): the hero sits in a
   gold-framed card like the homepage slider, the title gets its own
   class, the counters live in one clean stat strip, the share row
   uses uniform buttons, and sections share one spacing rhythm. */
.sf-archive-head{padding:40px 0 4px}
.sf-archive-head h1{font-size:clamp(28px,4.4vw,42px)}
.sf-term-intro{color:var(--mute);max-width:680px;margin:0 0 10px}
.sf-pagination{display:flex;gap:8px;justify-content:center;margin:34px 0 50px;flex-wrap:wrap}
.sf-pagination a,.sf-pagination span{padding:9px 16px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink2);font-size:14px}
.sf-pagination .current{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600}
.sf-single{padding:36px 0 10px}
.sf-single-grid{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:34px;align-items:start}
@media(max-width:820px){.sf-single-grid{grid-template-columns:1fr}}
.sf-single-media{position:relative;border-radius:20px;overflow:hidden;background:var(--card);
  border:1px solid rgba(178,126,28,.38);
  box-shadow:0 18px 42px rgba(13,20,38,.15),0 6px 22px rgba(178,126,28,.18)}
.sf-single-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sf-single-title{font-size:clamp(24px,3.4vw,34px);margin:2px 0 12px}
.sf-single-line-big{font-size:clamp(26px,3.6vw,36px);color:var(--ink);margin:8px 0 14px;line-height:1.9}
.sf-single-line-big.sf-urdu{line-height:2.2}
.sf-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.sf-chip{background:#fff;border:1px solid var(--hair);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--gold)}
.sf-chip.alt{color:var(--maroon)}
.sf-stat-strip{background:#fff;border:1px solid var(--hair);border-radius:14px;
  padding:12px 18px;margin:18px 0 4px;box-shadow:0 4px 14px rgba(13,20,38,.05)}
.sf-stat-strip .sf-post-stats{margin:0;width:100%;justify-content:space-between}
.sf-share-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.sf-single .sf-share-row .sf-share{flex:1 1 auto;justify-content:center;text-align:center;
  padding:12px 14px;font-size:13.5px;min-height:46px}
@media(max-width:560px){.sf-single .sf-share-row .sf-share{flex-basis:42%}}
.sf-about{background:#fff;border:1px solid rgba(178,126,28,.25);border-radius:16px;padding:22px 24px;margin:26px 0 8px;
  box-shadow:0 6px 20px rgba(13,20,38,.06)}
.sf-about h2{font-size:19px}
.sf-about p{color:var(--ink2);margin:0 0 10px}
.sf-related{margin:44px 0 54px}
.sf-related .sf-sec-head{margin-top:0}
.sf-crumb{font-size:13px;color:var(--faint);margin:0 0 14px}
.sf-crumb a{color:var(--mute)}

/* ============ Name personalisation (v1.0.25) ============
   The single-status page's highlighted feature card: a light gold
   wash with a gold border. The visitor types a name (the status line
   itself is never editable); main.js composites it live onto a
   canvas copy of the WATERMARKED image — gold ornament divider at
   68% of the height, the name in shining gold at 76% — and the
   Share / Download buttons export that canvas. */
.sf-namebox{margin:22px 0 8px;background:linear-gradient(160deg,#fffaf0,#fdf3da);
  border:1.5px solid rgba(178,126,28,.55);border-radius:18px;padding:20px 20px 18px;
  box-shadow:0 10px 26px rgba(178,126,28,.16)}
.sf-namebox h2{font-size:19px;margin:0 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sf-namebox h2 span{font-size:12.5px;font-weight:600;color:var(--gold)}
.sf-namebox .sf-note{margin:0 0 12px}
.sf-name-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.sf-name-chip{font-size:19px;line-height:1.15;background:#fff;border:1px solid rgba(178,126,28,.4);
  border-radius:10px;padding:5px 9px;cursor:pointer;
  font-family:'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif}
.sf-name-chip:hover{border-color:var(--gold2);background:#fdf3da;transform:translateY(-1px)}
.sf-name-input{width:100%;border:2px solid var(--gold2);border-radius:12px;padding:12px 14px;
  font:inherit;font-size:17px;background:#fff;color:var(--ink);
  font-family:'Poppins','Lateef','Noto Nastaliq Urdu',sans-serif;
  box-shadow:inset 0 2px 6px rgba(178,126,28,.10)}
.sf-name-input::placeholder{color:var(--faint);opacity:1}
.sf-name-input:focus{outline:none;border-color:var(--gold);
  box-shadow:inset 0 2px 6px rgba(178,126,28,.10),0 0 0 4px rgba(198,142,42,.22)}
.sf-name-preview{margin:14px 0 0;text-align:center}
.sf-name-preview canvas{width:100%;max-width:330px;height:auto;border-radius:14px;
  box-shadow:var(--shadow);background:#10182e}
.sf-name-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.sf-name-actions .sf-bigbtn{flex:1 1 auto;padding:13px 18px;font-size:15px}
.sf-name-actions .sf-bigbtn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){.sf-namebox{padding:16px 14px 14px}}

/* ============ Maker ============
   v1.0.23 — app-style layout (owner-approved mockup): the preview is
   pinned at the top — sticky left column on desktop, sticky under
   the header on phones with the canvas capped at ~45vh while the
   controls scroll beneath it; Pick a Line lives in a fixed-height
   scroll box; backgrounds are a horizontal strip; on phones the
   share/download actions sit in a bar fixed to the viewport bottom
   (rules at the end of this section). */
.sf-maker{padding:34px 0 60px}
.sf-maker-grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:30px;align-items:start}
.sf-maker-controls{min-width:0}
.sf-maker-preview{position:sticky;top:92px;z-index:40;background:var(--bg);padding-bottom:8px}
.sf-maker-preview canvas{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;
  max-height:calc(100vh - 196px);border-radius:20px;box-shadow:var(--shadow);background:#10182e}
.sf-mode-switch{display:flex;gap:8px;margin:0 0 12px}
.sf-mode-switch a{flex:1;text-align:center;padding:9px 8px;border-radius:999px;
  border:1.5px solid rgba(178,126,28,.5);background:#fff;color:var(--ink2);font-weight:600;font-size:13.5px}
.sf-mode-switch a:hover{text-decoration:none;border-color:var(--gold)}
.sf-mode-switch a.on{background:linear-gradient(135deg,#f0c874,#c68e2a);color:#241a04;border-color:transparent}
.sf-mstep{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:20px 22px;margin:0 0 16px}
.sf-mstep h3{font-size:17px;display:flex;align-items:center;gap:8px;margin:0 0 14px;
  padding-bottom:9px;position:relative}
.sf-mstep h3::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#f0c874,#c68e2a)}
.sf-mstep h3 .n{color:var(--gold);font-size:17px;font-weight:700;flex:0 0 auto}
.sf-mstep h3 .n::after{content:"·";margin-left:8px}
.sf-chiprow{display:flex;gap:8px;flex-wrap:wrap}
.sf-mchip{border:1px solid var(--hair);background:#fff;color:var(--ink2);font:inherit;font-size:13.5px;font-weight:500;
  padding:9px 16px;border-radius:999px;cursor:pointer}
.sf-mchip.on{background:#fdf3da;border-color:var(--gold);color:var(--gold);font-weight:600}
.sf-lines-wrap{position:relative;margin-top:12px}
.sf-lines{display:flex;flex-direction:column;gap:9px;max-height:250px;overflow-y:auto;
  background:#fffcf4;border:1px solid var(--hair);border-radius:14px;padding:10px 10px 16px;
  scrollbar-width:thin;scrollbar-color:var(--gold2) #f3e3bd}
.sf-lines::-webkit-scrollbar{width:8px}
.sf-lines::-webkit-scrollbar-track{background:#f7ecd2;border-radius:8px}
.sf-lines::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f0c874,#c68e2a);border-radius:8px}
.sf-lines-wrap::after{content:"";position:absolute;left:1px;right:11px;bottom:1px;height:34px;
  border-radius:0 0 13px 13px;background:linear-gradient(rgba(255,252,244,0),#fffcf4);pointer-events:none}
.sf-line-item{border:1px solid var(--hair);border-radius:12px;padding:12px 15px;cursor:pointer;background:#fff;
  font-size:19px;color:var(--ink);text-align:center}
.sf-line-item.on{border-color:var(--green);box-shadow:0 0 0 2px rgba(18,178,112,.25)}
.sf-maker textarea{width:100%;border:2px solid var(--gold2);border-radius:14px;padding:13px 15px;font:inherit;
  font-size:16px;line-height:1.7;resize:vertical;min-height:76px;background:#fffdf6;color:var(--ink);
  box-shadow:inset 0 2px 6px rgba(178,126,28,.10),0 1px 0 rgba(255,255,255,.6)}
.sf-maker textarea::placeholder{color:var(--faint);opacity:1}
.sf-maker textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:inset 0 2px 6px rgba(178,126,28,.10),0 0 0 4px rgba(198,142,42,.22)}
.sf-emoji-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.sf-emoji-label{font-size:13px;font-weight:600;color:var(--mute);margin-right:2px}
.sf-emoji-btn{font-size:21px;line-height:1.15;background:#fff;border:1px solid var(--hair);border-radius:10px;
  padding:5px 8px;cursor:pointer;font-family:'Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif}
.sf-emoji-btn:hover{border-color:var(--gold2);background:#fdf3da;transform:translateY(-1px)}
.sf-bgrow{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--gold2) #f3e3bd}
.sf-bgrow::-webkit-scrollbar{height:8px}
.sf-bgrow::-webkit-scrollbar-track{background:#f7ecd2;border-radius:8px}
.sf-bgrow::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#f0c874,#c68e2a);border-radius:8px}
.sf-bgthumb{width:70px;height:88px;flex:0 0 auto;border-radius:12px;overflow:hidden;border:3px solid transparent;cursor:pointer;padding:0;background:#ddd}
.sf-bgthumb img{width:100%;height:100%;object-fit:cover}
.sf-bgthumb.on{border-color:var(--gold)}
.sf-gradthumb{width:70px;height:88px;flex:0 0 auto;border-radius:12px;border:3px solid transparent;cursor:pointer}
.sf-gradthumb.on{border-color:var(--gold)}
.sf-upload{display:inline-block;border:1.5px dashed var(--gold2);color:var(--gold);border-radius:12px;
  padding:12px 18px;font-weight:600;font-size:14px;cursor:pointer;background:#fffdf6}
.sf-upload input{display:none}
.sf-upload.sf-photo-tile{flex:0 0 auto;width:70px;height:88px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:6px;font-size:11px;line-height:1.25;text-align:center}
.sf-photo-tile .sf-photo-ic{font-size:22px;line-height:1}
.sf-note{font-size:12.5px;color:var(--faint);margin:8px 0 0}
.sf-maker-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.sf-lbl-short{display:none}
.sf-maker-more{display:none}
.sf-bigbtn{font:inherit;font-weight:600;font-size:15.5px;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;color:#fff}
.sf-bigbtn.green{background:var(--green)} .sf-bigbtn.green:hover{background:var(--green-d)}
.sf-bigbtn.wa{background:#25d366;color:#06331c} .sf-bigbtn.wa:hover{background:#1eb856}
.sf-bigbtn.blue{background:var(--blue)} .sf-bigbtn.blue:hover{background:var(--blue-d)}
.sf-bigbtn.gold{background:linear-gradient(135deg,#f0c874,#c68e2a);color:#241a04}
.sf-bigbtn.navy{background:#26355c} .sf-bigbtn.navy:hover{background:#1b2745}
.sf-guide{border:1.5px solid var(--gold2);background:#fffdf6;border-radius:14px;padding:14px 16px;margin-top:12px;
  font-size:14px;color:var(--ink2);box-shadow:var(--shadow)}
.sf-guide p{margin:0}
.sf-guide-btn{display:inline-block;margin-top:10px;color:#fff;font-weight:600;font-size:14px;
  padding:9px 20px;border-radius:999px}
.sf-guide-btn:hover{text-decoration:none;filter:brightness(1.07)}
.sf-guide-btn.green{background:var(--green)} .sf-guide-btn.blue{background:var(--blue)}
@media(max-width:900px){
  /* Phones: the preview pins under the sticky header while the
     controls scroll beneath it, and the share/download actions pin
     to the bottom of the viewport. The grid becomes a plain block
     so the sticky preview can travel the maker's full height (in a
     one-column grid its row would be only as tall as itself). */
  .sf-maker-grid{display:block}
  .sf-maker-controls{margin-top:24px}
  .sf-maker{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .sf-maker-preview{top:70px;box-shadow:0 18px 22px -20px rgba(13,20,38,.45)}
  .sf-maker-preview canvas{max-height:45vh;transition:max-height .25s ease}
  /* v1.0.25 keyboard fix: while the Write Your Own box has focus,
     main.js adds .sf-kb to the maker root and the pinned preview
     shrinks to a slim strip, so the text box is never hidden behind
     it; the scroll margin (header + shrunken preview) lets the
     browser scroll the focused box into the clear area. On blur the
     class goes away and the preview grows back. */
  .sf-maker.sf-kb .sf-maker-preview canvas{max-height:20vh}
  .sf-mstep{scroll-margin-top:calc(84px + 20vh)}
  /* v1.0.26: the fixed bar is ONE slim row of just 3 buttons, each
     a white brand icon (inline SVG) + a short word — WhatsApp
     "Share", Facebook "Share", "Download" — so the middle editing
     area stays as tall as possible (the v1.0.25 wrapped 5-button
     bar ate ~190px). The two link-share buttons are hidden in the
     bar; they live in the "More sharing options" row at the end of
     the controls instead (styled in this same query; desktop keeps
     all five in the static row with full labels and hides the More
     row). The right padding still clears the floating bell —
     trimmed 76px → 64px (the bell is ~56px wide) to buy one-line
     fit width — and .sf-maker's bottom padding above matches the
     slim bar (~56px + safe area + ~24px breathing room). */
  .sf-maker-actions{position:fixed;left:0;right:0;bottom:0;z-index:80;margin:0;
    background:#fff;border-top:2px solid var(--gold2);box-shadow:0 -8px 24px rgba(13,20,38,.14);
    padding:8px 64px calc(8px + env(safe-area-inset-bottom)) 8px;
    flex-wrap:nowrap;gap:8px}
  .sf-maker-actions .sf-bigbtn{flex:1 1 0;min-width:0;white-space:nowrap;text-align:center;
    padding:11px 5px;font-size:13px;line-height:1.25;border-radius:999px}
  .sf-maker-actions #sfShareWa,.sf-maker-actions #sfShareFbPost{display:none}
  .sf-maker-actions .sf-lbl-full{display:none}
  .sf-maker-actions .sf-lbl-short{display:inline-flex;align-items:center;gap:5px}
  .sf-maker-actions .sf-lbl-short svg{width:18px;height:18px;flex:0 0 auto;display:block}
  .sf-maker-more{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:16px}
  .sf-more-label{font-size:12.5px;color:var(--faint)}
  .sf-more-link{font:inherit;font-size:13px;font-weight:600;color:var(--gold);
    background:none;border:0;padding:4px 2px;cursor:pointer;text-decoration:underline;
    text-underline-offset:3px}
}

/* ============ Footer ============ */
.sf-footer{background:#0b0b0d;border-top:1px solid rgba(217,164,65,.22);margin-top:20px}
.sf-footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding:42px 0 30px}
@media(max-width:820px){.sf-footer-in{grid-template-columns:1fr 1fr}}
.sf-footer h4{margin:0 0 12px;font-size:13.5px;color:#d9a441;letter-spacing:.05em}
.sf-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sf-footer ul a{color:#c9c9ce;font-size:13.5px}
.sf-footer ul a:hover{color:#d9a441;text-decoration:none}
.sf-footer .brandline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sf-footer .tagline{color:#a7a7ad;font-size:13px;max-width:280px;margin:0}
.sf-copy{border-top:1px solid #26262b;padding:16px 0 22px;color:#8e8e96;font-size:12.5px;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

/* ============ Bell ============ */
.sf-bell-wrap{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;align-items:center;gap:12px}
.sf-bell-label{background:rgba(10,13,24,.88);color:#fff;font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.25);white-space:nowrap}
.sf-bell{position:relative;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
  background:linear-gradient(135deg,#f3cb76,#c69432);box-shadow:0 10px 26px rgba(178,126,28,.45);
  display:flex;align-items:center;justify-content:center;
  animation:sf-glow 2.6s ease-in-out infinite}
.sf-bell svg{animation:sf-swing 4.8s ease-in-out infinite;transform-origin:50% 12%}
.sf-bell .dot{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;
  background:#e0242c;border:2.5px solid #fff;animation:sf-blink 1.8s ease-in-out infinite}
.sf-bell.calm svg{animation:none}
.sf-bell.calm .dot{display:none}
@keyframes sf-swing{
  0%,55%,100%{transform:rotate(0deg)}
  58%{transform:rotate(13deg)} 62%{transform:rotate(-11deg)}
  66%{transform:rotate(8deg)} 70%{transform:rotate(-6deg)}
  74%{transform:rotate(3deg)} 78%{transform:rotate(0deg)}
}
@keyframes sf-glow{
  0%,100%{box-shadow:0 10px 26px rgba(178,126,28,.40),0 0 0 0 rgba(240,200,116,.45)}
  50%{box-shadow:0 10px 26px rgba(178,126,28,.55),0 0 0 14px rgba(240,200,116,0)}
}
@keyframes sf-blink{0%,100%{opacity:1}50%{opacity:.45}}
.sf-bell-card{position:fixed;right:20px;bottom:96px;z-index:201;width:300px;max-width:calc(100vw - 40px);
  background:#fff;border-radius:18px;box-shadow:0 22px 50px rgba(13,20,38,.28);padding:22px;display:none;
  border:1px solid var(--hair)}
.sf-bell-card.open{display:block}
.sf-bell-card h3{font-size:17px;margin:0 0 6px}
.sf-bell-card p{color:var(--mute);font-size:13.5px;margin:0 0 14px}
.sf-bell-card .ok{width:100%;background:linear-gradient(135deg,#f0c874,#c68e2a);border:0;color:#241a04;
  font:inherit;font-weight:600;padding:12px;border-radius:999px;cursor:pointer}
.sf-bell-card .no{width:100%;background:none;border:0;color:var(--faint);font:inherit;font-size:13px;
  padding:9px;cursor:pointer;margin-top:4px}
@media(max-width:480px){.sf-bell-label{display:none}}

/* Generic page */
.sf-page{padding:38px 0 56px;max-width:820px}
.sf-page h1{font-size:clamp(28px,4vw,38px)}
.sf-page p{color:var(--ink2)}