.templates-hero-simple{padding:148px 0 54px;background:linear-gradient(180deg,#fff 0%,#fbfaf7 100%);border-bottom:1px solid rgba(8,51,38,.05)}
.templates-kicker-simple{display:block;color:#b08a42;font-size:9px;font-weight:800;letter-spacing:.17em;margin-bottom:10px}.templates-hero-simple h1{margin:0;color:#10211b;font:700 clamp(46px,6vw,76px)/.98 var(--serif);letter-spacing:-.035em}.templates-hero-simple h1 span{color:#49645a}.templates-hero-simple p{max-width:650px;margin:16px auto 0;color:#6c7974;font-size:13px;line-height:1.7}.templates-package-link{display:inline-flex;align-items:center;gap:6px;margin-top:17px;color:var(--green);font-size:10px;font-weight:800}.template-gallery-section{padding:58px 0 90px;background:#fff}.template-gallery-heading-simple{text-align:center;max-width:720px;margin:0 auto 24px}.template-gallery-heading-simple h2{font:700 clamp(36px,4vw,52px)/1.04 var(--serif);color:var(--green);margin:5px 0 9px}.template-gallery-heading-simple p{margin:0;color:var(--ink-muted);font-size:12.5px;line-height:1.7}.template-filter-row-simple{justify-content:center;margin:26px 0 38px}.template-filter-row{display:flex;flex-wrap:wrap;gap:8px}.template-filter{border:1px solid rgba(8,51,38,.13);background:#fff;color:var(--green);border-radius:999px;padding:8px 16px;font:700 10px var(--sans);cursor:pointer;transition:.2s}.template-filter:hover,.template-filter.active{background:#101d18;border-color:#101d18;color:#fff}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.template-card{overflow:hidden;border:1px solid rgba(8,51,38,.09);border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(8,51,38,.055);transition:transform .25s ease,box-shadow .25s ease}.template-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(8,51,38,.09)}.template-visual{height:400px;position:relative;display:grid;place-items:center;padding:20px;overflow:hidden}.preview-serenity{background:linear-gradient(145deg,#edf5f6,#e1eef2)}.preview-lotus{background:linear-gradient(145deg,#f6e8e5,#edd4d2)}.preview-silver{background:linear-gradient(145deg,#f4eee6,#e9e1d9)}.phone-mockup{width:176px;height:348px;border:6px solid #121719;border-radius:30px;background:#0f1315;padding:5px;position:relative;box-shadow:0 15px 26px rgba(10,18,15,.18)}.phone-speaker{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:64px;height:17px;border-radius:0 0 12px 12px;background:#101416;z-index:5}.phone-screen{height:100%;border-radius:20px;overflow:hidden;background:#fff}.mini-invite{height:100%;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:39px 12px 16px;overflow:hidden}.mini-kicker{font-size:5.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}.mini-invite strong{font:600 22px/1 var(--serif);position:relative;z-index:2}.mini-invite strong em{font-size:.6em;font-weight:500}.mini-invite small{margin-top:10px;font-size:6px;letter-spacing:.06em;position:relative;z-index:2}.mini-date{margin-top:auto;padding:8px 11px;border-radius:999px;font-size:6px;font-weight:800;letter-spacing:.1em;position:relative;z-index:2}.mini-serenity{background:linear-gradient(rgba(242,250,251,.76),rgba(242,250,251,.83)),url('../../templates/serenity-nikah/standard/assets/images/watercolor-background.webp') center/cover;color:#203d55}.mini-serenity::before,.mini-serenity::after{content:'';position:absolute;background:url('../../templates/serenity-nikah/standard/assets/images/floral-spray.webp') center/contain no-repeat;width:145px;height:145px;opacity:.72}.mini-serenity::before{right:-53px;top:14px;transform:rotate(18deg)}.mini-serenity::after{left:-50px;bottom:22px;transform:rotate(198deg)}.mini-serenity .mini-kicker{font-family:var(--serif);font-style:italic;text-transform:none;font-size:8px}.mini-serenity .mini-date{background:rgba(255,255,255,.65);border:1px solid rgba(32,61,85,.12)}.mini-lotus{background:linear-gradient(rgba(255,247,241,.78),rgba(255,247,241,.9)),url('../../templates/lotus-courtyard/standard/assets/images/hero-courtyard.webp') center/cover;color:#671c29}.mini-lotus::after{content:'';position:absolute;inset:10px;border:1px solid rgba(116,37,54,.18);border-radius:90px 90px 18px 18px}.mini-lotus-arch{width:85px;height:112px;margin:20px 0 12px;border-radius:60px 60px 10px 10px;border:1px solid rgba(111,37,53,.22);display:grid;place-items:center;background:rgba(255,255,255,.35);font-size:22px;position:relative;z-index:2}.mini-lotus .mini-date{background:#741f30;color:#fff4ec}.mini-silver{background:linear-gradient(rgba(249,244,237,.52),rgba(249,244,237,.77)),url('../images/showcase/silver-grace-satin.webp') center/cover;color:#322d31}.mini-silver img{width:142px;max-height:160px;object-fit:contain;margin:-4px auto 4px;filter:drop-shadow(0 7px 9px rgba(42,35,39,.12))}.mini-silver strong{font-size:20px;white-space:nowrap}.mini-silver .mini-date{background:#342f35;color:#fff7ee}.template-card-body{padding:17px 17px 15px}.template-card-title-row h3{font:700 23px var(--serif);color:var(--green);margin:0}.template-category{display:block;margin-top:2px;color:#8a7560;font-size:7.5px;font-weight:800;letter-spacing:.13em}.template-short-description{min-height:48px;margin:10px 0 0;color:#687570;font-size:10.5px;line-height:1.55}.template-availability{margin:10px 0 13px;color:#537065;font-size:8.5px;font-weight:700}.template-availability i{color:#6d8f80;margin-right:3px}.template-card-actions{display:grid;grid-template-columns:.86fr 1.14fr;gap:8px}.template-action{min-height:39px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:8.5px;font-weight:800;transition:.2s}.template-action-secondary{background:#10211b;color:#fff}.template-action-primary{background:#b4914d;color:#fff}.template-action:hover{transform:translateY(-1px)}.template-empty-state{text-align:center;padding:50px 20px;color:#67736f}.template-empty-state i{display:block;font-size:28px;margin-bottom:8px}.template-empty-state strong,.template-empty-state span{display:block}.templates-faq-section{padding:84px 0;background:#f8f6f1}.faq-heading{margin-bottom:22px}.template-faq-list{max-width:860px}.template-faq-item{border-bottom:1px solid rgba(8,51,38,.10)}.template-faq-question{width:100%;border:0;background:none;padding:20px 0;display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--green);font:700 14px var(--sans)}.template-faq-answer{overflow:hidden;max-height:0;transition:max-height .3s ease}.template-faq-answer p{padding:0 0 20px;margin:0;color:#68746f;font-size:12px;line-height:1.7}.template-faq-item.active .template-faq-question i{transform:rotate(45deg)}.template-cta-section{padding:70px 0;background:#fff}.template-cta-card{max-width:940px;margin:auto;padding:44px;border-radius:24px;text-align:center;background:var(--green-deep);color:#fff}.template-cta-card h2{font:700 42px var(--serif);margin:6px 0 8px}.template-cta-card p{max-width:580px;margin:0 auto 22px;color:rgba(255,255,255,.68);font-size:12px;line-height:1.7}.template-cta-primary{background:#f6f0e2;color:var(--green-deep)!important}
@media(max-width:980px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-visual{height:380px}}@media(max-width:680px){.templates-hero-simple{padding:115px 0 45px}.templates-hero-simple h1{font-size:44px}.template-gallery-section{padding-top:45px}.template-filter-row-simple{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.template-filter-row-simple::-webkit-scrollbar{display:none}.template-filter{flex:0 0 auto}.template-grid{grid-template-columns:1fr}.template-card{max-width:390px;margin-inline:auto;width:100%}.template-visual{height:390px}.template-short-description{min-height:0}.template-cta-card{padding:34px 20px}.template-cta-card h2{font-size:34px}}

.template-gallery-heading h2{font:700 clamp(36px,4vw,48px)/1.05 var(--serif);color:var(--green);margin:5px 0 0}.faq-heading{display:block}.faq-heading>div{max-width:700px}.faq-heading .section-eyebrow{display:block}

/* ===== 2026-08-26 templates page refresh ===== */
.templates-page .z-navbar{background:rgba(8,51,38,.96);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(204,163,84,.15);padding:12px 0;box-shadow:0 4px 30px rgba(0,0,0,.18)}
.templates-hero-premium{padding:142px 0 74px;background:radial-gradient(circle at 16% 20%,rgba(57,124,92,.18),transparent 26%),radial-gradient(circle at 88% 18%,rgba(204,163,84,.09),transparent 24%),linear-gradient(110deg,#063223 0%,#0b4a35 100%);position:relative;overflow:hidden}
.templates-hero-premium::after{content:"";position:absolute;right:-12vw;bottom:-28vw;width:58vw;height:58vw;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.templates-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:46px;align-items:start}
.templates-hero-copy,.templates-hero-rule{opacity:0;animation:templateHeroIn .9s var(--ease) forwards}.templates-hero-rule{animation-delay:.12s}
@keyframes templateHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.templates-kicker-premium{display:block;color:var(--gold-light);font:800 12px var(--sans);letter-spacing:.16em;margin-bottom:18px}
.templates-hero-copy h1{margin:0;max-width:760px;color:#fff;font:700 clamp(48px,6vw,92px)/.94 var(--serif);letter-spacing:-.04em}
.templates-hero-copy p{max-width:780px;margin:22px 0 0;color:rgba(255,255,255,.82);font-size:18px;line-height:1.7}
.templates-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.templates-hero-primary{background:#f6f0e2;color:var(--green-deep)!important}.templates-hero-secondary{background:transparent;color:#fff!important;border:1.5px solid rgba(247,216,141,.45)}.templates-hero-secondary:hover{background:rgba(255,255,255,.06)}
.templates-hero-rule{padding:34px 30px;border-radius:28px;background:rgba(255,255,255,.10);border:1px solid rgba(247,216,141,.16);backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.templates-rule-label{display:block;color:var(--gold-light);font:800 12px var(--sans);letter-spacing:.14em;margin-bottom:18px}.templates-rule-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(247,216,141,.09);color:var(--gold-light);font-size:26px;margin-bottom:18px}.templates-hero-rule h2{margin:0;color:#fff;font:700 clamp(28px,3.2vw,52px)/1.02 var(--serif)}.templates-hero-rule p{margin:18px 0 0;color:rgba(255,255,255,.76);font-size:15px;line-height:1.75}
.template-gallery-section{padding:72px 0 90px;background:#fbfaf7}.template-gallery-heading-simple{margin:0 auto 28px}.template-gallery-heading-simple h2{font-size:clamp(38px,4.6vw,62px)}.template-filter-row-simple{justify-content:center;margin:30px 0 40px}.template-filter{padding:10px 18px;font-size:11px;border-radius:999px}.template-filter:hover,.template-filter.active{background:var(--green-deep);border-color:var(--green-deep)}
.template-grid{gap:22px}.template-card{border-radius:24px;background:#fffdf9}.template-visual{height:430px;background:#f3ede5!important}.phone-mockup{width:182px;height:356px;border:6px solid #101417;border-radius:32px;background:#101417;padding:5px;position:relative;box-shadow:0 16px 28px rgba(10,18,15,.18)}.phone-mockup::before,.phone-mockup::after{content:"";position:absolute;background:#101417;border-radius:999px}.phone-mockup::before{left:-4px;top:106px;width:4px;height:76px;box-shadow:0 -22px 0 #101417,0 22px 0 #101417}.phone-mockup::after{right:-4px;top:130px;width:4px;height:58px}.phone-speaker{width:72px;height:18px;background:#0c1012}
.preview-serenity,.preview-lotus,.preview-silver{background:#f3ede5}.template-action-secondary{background:var(--green-deep)}.template-action-primary{background:linear-gradient(120deg,#cca354,#b58d45)}
.template-card-title-row h3{font-size:22px}.template-category{font-size:8px;color:#907654}.template-short-description{font-size:10.6px}.template-availability{font-size:8.6px}
.templates-faq-section{padding:88px 0;background:#fff}.template-faq-list{max-width:900px;background:#fff;border:1px solid rgba(8,51,38,.08);border-radius:24px;overflow:hidden;box-shadow:0 10px 32px rgba(8,51,38,.05)}.template-faq-item{padding:0 24px}.template-faq-question{padding:22px 0;font-size:13px}.template-faq-answer p{font-size:12px;padding-bottom:22px}.template-cta-card{background:linear-gradient(145deg,#083326,#0d4d39);box-shadow:0 18px 50px rgba(8,51,38,.14)}
@media(max-width:980px){.templates-hero-grid{grid-template-columns:1fr}.templates-hero-rule{max-width:520px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.templates-hero-premium{padding:112px 0 54px}.templates-hero-copy h1{font-size:54px}.templates-hero-copy p{font-size:16px}.templates-hero-actions{flex-direction:column;align-items:flex-start}.templates-hero-rule{padding:28px 22px;border-radius:24px}.template-filter-row-simple{justify-content:flex-start}.template-grid{grid-template-columns:1fr}.template-visual{height:405px}.template-faq-list{border-radius:20px}.template-faq-item{padding:0 18px}}

/* ===== Final template-page refinement - 2026-08-26 ===== */
/* Keep the navbar visually connected to the hero, matching the other Zainur pages. */
.templates-page .z-navbar{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
  padding:22px 0;
  box-shadow:none;
}
.templates-page .z-navbar.scrolled{
  background:rgba(8,51,38,.96);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(204,163,84,.15);
  padding:12px 0;
  box-shadow:0 4px 30px rgba(0,0,0,.2);
}

/* Hero now follows the same green/gold language as How It Works and Packages. */
.templates-hero-premium{
  padding:154px 0 86px;
  background:
    radial-gradient(circle at 82% 24%,rgba(23,82,63,.42),transparent 44%),
    radial-gradient(circle at 15% 82%,rgba(204,163,84,.10),transparent 38%),
    linear-gradient(155deg,var(--green-deep) 0%,#051f17 100%);
}
.templates-hero-premium::after{
  right:-160px;
  bottom:-260px;
  width:430px;
  height:430px;
  border-color:rgba(247,216,141,.11);
}
.templates-hero-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:64px;
  align-items:center;
}
.templates-hero-copy h1{
  max-width:800px;
  font-size:clamp(46px,6vw,76px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.templates-hero-copy p{
  max-width:720px;
  margin-top:16px;
  color:rgba(250,249,246,.76);
  font-size:16px;
  line-height:1.75;
}
.templates-hero-actions{margin-top:28px;gap:12px}
.templates-hero-primary{
  background:linear-gradient(100deg,var(--gold-light),var(--gold));
  color:var(--green-deep)!important;
  box-shadow:0 9px 28px rgba(204,163,84,.24);
}
.templates-hero-primary:hover{
  color:var(--green-deep)!important;
  transform:translateY(-1px);
  box-shadow:0 13px 34px rgba(204,163,84,.34);
}
.templates-hero-secondary{
  background:transparent;
  border:1px solid rgba(247,216,141,.42);
  color:var(--cream)!important;
}
.templates-hero-secondary:hover{
  background:rgba(247,216,141,.08);
  border-color:var(--gold-light);
  color:var(--gold-light)!important;
}
.templates-hero-rule{
  padding:28px;
  border:1px solid rgba(247,216,141,.24);
  border-radius:22px;
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(12px);
  box-shadow:none;
}
.templates-rule-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:20px;
  background:rgba(247,216,141,.10);
}
.templates-hero-rule h2{font-size:clamp(30px,3.2vw,42px);line-height:1.05}
.templates-hero-rule p{font-size:12.5px;line-height:1.65;color:rgba(250,249,246,.67)}

/* Gallery/card palette: warm ivory like the printed-card reference and existing Zainur cards. */
.template-gallery-section{background:var(--cream)}
.template-card{
  border:1px solid rgba(8,51,38,.10);
  border-radius:26px;
  background:#fff;
  box-shadow:0 12px 35px rgba(8,51,38,.05);
}
.template-card:hover{box-shadow:0 18px 42px rgba(8,51,38,.09)}
.template-visual,
.preview-serenity,
.preview-lotus,
.preview-silver{
  height:452px;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.82),transparent 34%),
    linear-gradient(145deg,#f6f2eb,#eee8df)!important;
}


/* More realistic phone shell, inspired by the cleaner invitation.lk device treatment. */
.phone-mockup{
  width:198px;
  height:398px;
  padding:9px;
  border:0;
  border-radius:42px;
  background:linear-gradient(145deg,#0b0f10,#181d1e);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 18px 36px rgba(10,18,15,.18),
    0 4px 10px rgba(10,18,15,.12);
}
.phone-mockup::before{
  left:-4px;
  top:105px;
  width:4px;
  height:44px;
  background:#111617;
  box-shadow:0 57px 0 #111617;
}
.phone-mockup::after{
  right:-4px;
  top:128px;
  width:4px;
  height:70px;
  background:#111617;
  box-shadow:none;
}
.phone-speaker{
  top:9px;
  width:74px;
  height:19px;
  border-radius:0 0 13px 13px;
  background:#0b0f10;
}
.phone-screen{
  height:100%;
  border-radius:33px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}

/* Template cards now show the actual opening-screen idea, not a generic mini page. */
.opening-thumb{height:100%;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center}
.opening-thumb-card{position:relative;z-index:2;width:calc(100% - 18px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.opening-thumb-kicker{display:block;text-transform:uppercase;font-size:5.1px;font-weight:800;letter-spacing:.16em}
.opening-thumb-names{display:flex;align-items:baseline;justify-content:center;gap:3px;white-space:nowrap;font:600 22px/1 var(--serif)}
.opening-thumb-names em{font-size:.58em;font-weight:500}
.opening-thumb-card p{max-width:145px;margin:8px auto 0;font:500 6.3px/1.55 var(--sans)}
.opening-thumb-date{display:block;margin-top:10px;font-size:5.2px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.opening-thumb-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:13px;min-width:126px;padding:9px 12px;border-radius:999px;font:800 6.4px var(--sans)}
.opening-thumb-button i{font-size:7px}
.opening-thumb-card small{display:block;margin-top:7px;font:600 5px var(--sans)}

.opening-thumb-serenity{
  background:
    linear-gradient(135deg,rgba(23,52,82,.94),rgba(16,38,61,.96)),
    url('../../templates/serenity-nikah/standard/assets/images/watercolor-background.webp') center/cover;
}
.opening-thumb-serenity::before,
.opening-thumb-serenity::after{
  content:"";
  position:absolute;
  width:155px;
  height:155px;
  background:url('../../templates/serenity-nikah/standard/assets/images/floral-spray.webp') center/contain no-repeat;
  opacity:.12;
}
.opening-thumb-serenity::before{left:-70px;bottom:-42px;transform:rotate(12deg)}
.opening-thumb-serenity::after{right:-72px;top:-55px;transform:rotate(188deg)}
.serenity-thumb-card{
  width:calc(100% - 22px);
  min-height:338px;
  padding:32px 11px 19px;
  border-radius:24px;
  color:#173452;
  background:linear-gradient(180deg,rgba(253,252,248,.985),rgba(246,250,252,.985));
  border:1px solid rgba(223,207,173,.6);
  box-shadow:0 18px 38px rgba(0,0,0,.2);
}
.serenity-thumb-card::before,
.serenity-thumb-card::after{content:"";position:absolute;inset:8px;border:1px solid rgba(193,163,110,.48);border-radius:19px;pointer-events:none}
.serenity-thumb-card::after{inset:14px;border-color:rgba(23,52,82,.10);border-radius:15px}
.serenity-thumb-card::before{background:url('../../templates/serenity-nikah/standard/assets/images/floral-corner.webp') right -47px top -44px/130px no-repeat}
.serenity-thumb-ornament{display:flex;align-items:center;gap:5px;color:#c19c58;margin-bottom:8px}
.serenity-thumb-ornament span{display:block;width:28px;height:1px;background:linear-gradient(90deg,transparent,#c9a76d)}
.serenity-thumb-ornament span:last-child{background:linear-gradient(90deg,#c9a76d,transparent)}
.serenity-thumb-ornament b{font-size:5px}
.serenity-thumb-arabic{font-size:13px;line-height:1.35;margin-bottom:6px}
.serenity-thumb-card .opening-thumb-kicker{color:#173452}
.serenity-thumb-card .opening-thumb-names{font-size:24px;margin-top:8px}
.serenity-thumb-card .opening-thumb-names em{color:#b68f4c}
.serenity-thumb-card p{color:#59677a}
.serenity-thumb-card .opening-thumb-date{color:#b68f4c}
.serenity-thumb-button{background:linear-gradient(180deg,#244a6f,#173452);color:#fff;box-shadow:0 8px 17px rgba(23,52,82,.22)}
.serenity-thumb-card small{color:#8490a0}

.opening-thumb-lotus{
  background:radial-gradient(circle at 50% 45%,#9c4b42 0,#6f1e28 34%,#370b12 78%);
}
.opening-thumb-lotus::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at center,transparent 0 24px,rgba(255,255,255,.025) 25px 26px)}
.lotus-thumb-card{
  min-height:334px;
  padding:30px 14px 24px;
  color:#fff7e9;
  border:1px solid rgba(228,201,143,.52);
  border-radius:31px 31px 15px 15px;
  background:linear-gradient(180deg,rgba(70,10,18,.42),rgba(44,8,13,.72));
  box-shadow:0 16px 36px rgba(0,0,0,.25);
}
.lotus-thumb-card::after{content:"";position:absolute;inset:7px;border:1px solid rgba(228,201,143,.22);border-radius:25px 25px 11px 11px}
.lotus-thumb-mark{position:relative;width:54px;height:38px;margin-bottom:14px}
.lotus-thumb-mark i{position:absolute;left:50%;bottom:0;width:18px;height:32px;border:1.5px solid #efd9ac;border-radius:80% 20% 80% 20%;transform-origin:50% 100%}
.lotus-thumb-mark i:nth-child(1){transform:translateX(-50%) rotate(-54deg)}.lotus-thumb-mark i:nth-child(2){transform:translateX(-50%) rotate(-26deg)}.lotus-thumb-mark i:nth-child(3){transform:translateX(-50%)}.lotus-thumb-mark i:nth-child(4){transform:translateX(-50%) rotate(26deg)}.lotus-thumb-mark i:nth-child(5){transform:translateX(-50%) rotate(54deg)}
.lotus-thumb-card .opening-thumb-kicker{color:#efd9ac;margin-bottom:16px}
.lotus-thumb-card .opening-thumb-names{font-size:25px}.lotus-thumb-card .opening-thumb-names em{color:#efd9ac}
.lotus-thumb-card .opening-thumb-date{margin-top:18px;color:#f3e4c7}
.lotus-thumb-button{margin-top:21px;background:#fff7e9;color:#5b111b;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.lotus-thumb-card small{color:rgba(255,247,233,.62);margin-top:10px}

.opening-thumb-silver{
  background:linear-gradient(180deg,rgba(27,25,29,.91),rgba(27,25,29,.84)),url('../images/showcase/silver-grace-satin.webp') center/cover;
  color:#fffaf2;
}
.opening-thumb-silver::before,.opening-thumb-silver::after{content:"";position:absolute;top:0;bottom:0;width:52%;background:linear-gradient(90deg,#18171b,#2d2a30 50%,#17161a);opacity:.72}
.opening-thumb-silver::before{left:0}.opening-thumb-silver::after{right:0}
.silver-thumb-card{
  padding:23px 10px 20px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:27px;
  background:rgba(18,17,21,.34);
  box-shadow:0 18px 40px rgba(0,0,0,.26);
}
.silver-thumb-card .opening-thumb-kicker{color:#c6bfc0}
.silver-thumb-card img{width:132px;max-height:155px;object-fit:contain;margin:4px auto -4px;filter:drop-shadow(0 8px 9px rgba(0,0,0,.2))}
.silver-thumb-invite{font:italic 7px var(--serif);color:#ece6e0;margin-top:7px}
.silver-thumb-card .opening-thumb-names{font-size:19px;margin-top:4px;color:#fffaf2}
.silver-thumb-card .opening-thumb-names em{color:#d4cbc7}
.silver-thumb-card p{margin-top:5px;color:#c8c1c0}
.silver-thumb-button{background:#f7efe2;color:#242126;border:1px solid rgba(255,255,255,.25)}
.silver-thumb-card small{color:#a9a2a4;text-transform:uppercase;letter-spacing:.12em}

/* Card actions use the same light-section button language as Packages. */
.template-card-actions{grid-template-columns:.9fr 1.1fr;gap:9px}
.template-action{min-height:42px;border-radius:12px;font-size:9px}
.template-action-secondary{
  background:#fff;
  color:var(--green)!important;
  border:1px solid rgba(17,71,54,.20);
}
.template-action-secondary:hover{background:rgba(17,71,54,.055);color:var(--green-deep)!important}
.template-action-primary{
  background:linear-gradient(135deg,var(--green),var(--green-light));
  color:#fff!important;
  border:1px solid transparent;
  box-shadow:0 7px 18px rgba(8,51,38,.12);
}
.template-action-primary:hover{background:linear-gradient(135deg,var(--green-light),var(--green-deep));color:#fff!important}

/* FAQ matches the rounded, separate-card system used elsewhere. */
.templates-faq-section{padding:84px 0;background:var(--cream)}
.faq-heading{margin-bottom:34px;text-align:center}
.faq-heading>div{max-width:760px;margin:0 auto}
.faq-heading .section-eyebrow{margin-bottom:8px}
.template-faq-list{
  max-width:830px;
  margin:0 auto;
  display:grid;
  gap:10px;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}
.template-faq-item{
  padding:0 20px;
  background:#fff;
  border:1px solid rgba(8,51,38,.09);
  border-radius:16px;
  overflow:hidden;
}
.template-faq-question{padding:18px 0;font-size:12.5px}
.template-faq-answer p{padding-bottom:18px;font-size:11.8px}

/* Bright closing CTA, matching the light cards on Packages. */
.template-cta-section{padding:0 0 88px;background:var(--cream)}
.template-cta-card{
  max-width:980px;
  padding:42px;
  border-radius:28px;
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(204,163,84,.25);
  box-shadow:0 18px 48px rgba(8,51,38,.06);
}
.template-cta-card h2{color:var(--green);font-size:40px;margin:8px 0 11px}
.template-cta-card p{max-width:690px;color:var(--ink-muted);font-size:13px;line-height:1.7}
.template-cta-primary{
  background:linear-gradient(135deg,var(--green),var(--green-light));
  color:#fff!important;
  box-shadow:0 8px 22px rgba(8,51,38,.13);
}
.template-cta-primary:hover{background:linear-gradient(135deg,var(--green-light),var(--green-deep));color:#fff!important}

@media(max-width:980px){
  .templates-hero-grid{grid-template-columns:1fr;gap:34px}
  .templates-hero-rule{max-width:520px}
}
@media(max-width:680px){
  .templates-hero-premium{padding:124px 0 62px}
  .templates-hero-copy h1{font-size:44px;line-height:1.02}
  .templates-hero-copy p{margin-top:15px;font-size:14px;line-height:1.75}
  .templates-hero-actions{margin-top:25px}
  .templates-hero-rule{padding:26px 22px;border-radius:22px}
  .template-visual{height:430px}
  .phone-mockup{width:194px;height:390px}
  .template-faq-item{padding:0 18px}
  .template-cta-card{padding:32px 20px;border-radius:22px}
  .template-cta-card h2{font-size:34px}
}
@media(max-width:575px){
  .templates-hero-actions{width:100%}
  .templates-hero-actions .zbtn{width:100%;justify-content:center}
  .templates-hero-rule{max-width:none;width:100%}
}


/* ===== 2026-08-26 requested template-phone refinements ===== */
/* Use the same clean iPhone-style shell language as the homepage mockup. */
.template-visual,
.preview-serenity,
.preview-lotus,
.preview-silver{height:610px!important;padding:14px}
.phone-mockup{
  width:270px;
  height:540px;
  padding:6px;
  border:4px solid #111827;
  border-radius:48px;
  background:#f4f3f1;
  position:relative;
  box-shadow:
    0 0 0 2px #2b3441 inset,
    0 0 0 1px rgba(255,255,255,.82),
    0 20px 42px rgba(9,18,28,.20);
}
.phone-mockup::before,.phone-mockup::after{content:none!important}
.phone-speaker{display:none}
.phone-screen{
  height:100%;
  padding-top:31px;
  box-sizing:border-box;
  border-radius:38px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.08) inset;
}
.phone-statusbar{
  position:absolute;
  z-index:30;
  top:9px;
  left:12px;
  right:12px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#111827;
  pointer-events:none;
  font-family:Arial,sans-serif;
}
.phone-status-time{font-size:8.5px;font-weight:700;letter-spacing:-.02em;margin-left:4px}
.phone-dynamic-island{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:76px;
  height:21px;
  border-radius:999px;
  background:#090b0c;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.phone-dynamic-island i{
  position:absolute;
  right:9px;
  top:8px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#234e7b;
}
.phone-status-icons{display:flex;align-items:center;gap:3px;font-size:9px;margin-right:3px}
.phone-status-icons .bi-battery-full{font-size:13px;margin-left:-1px}
.phone-side{
  position:absolute;
  z-index:35;
  display:block;
  width:4px;
  background:#1b2430;
  border:1px solid #303b49;
  box-shadow:0 1px 1px rgba(255,255,255,.12) inset,0 1px 2px rgba(0,0,0,.18);
}
.phone-side-mute{left:-8px;top:82px;height:21px;border-radius:3px 0 0 3px}
.phone-side-volume-up{left:-8px;top:115px;height:42px;border-radius:3px 0 0 3px}
.phone-side-volume-down{left:-8px;top:165px;height:42px;border-radius:3px 0 0 3px}
.phone-side-power{right:-8px;top:124px;height:68px;border-radius:0 3px 3px 0}

/* Scale the opening previews up with the larger phone instead of leaving a tiny card inside it. */
.opening-thumb-card{width:calc(100% - 22px)}
.opening-thumb-kicker{font-size:6.2px}
.opening-thumb-names{font-size:28px;gap:4px}
.opening-thumb-card p{max-width:190px;font-size:7.6px;line-height:1.55}
.opening-thumb-date{font-size:6.3px;margin-top:12px}
.opening-thumb-button{min-width:150px;padding:11px 14px;font-size:7.7px}
.opening-thumb-button i{font-size:8px}
.opening-thumb-card small{font-size:5.8px;margin-top:9px}
.serenity-thumb-card{min-height:448px;padding:44px 15px 27px;border-radius:28px}
.serenity-thumb-card::before{background-size:165px}
.serenity-thumb-arabic{font-size:17px;margin-bottom:8px}
.serenity-thumb-card .opening-thumb-names{font-size:31px}
.lotus-thumb-card{min-height:444px;padding:40px 18px 31px;border-radius:36px 36px 17px 17px}
.lotus-thumb-mark{width:67px;height:47px;margin-bottom:19px}
.lotus-thumb-mark i{width:22px;height:40px}
.lotus-thumb-card .opening-thumb-kicker{margin-bottom:21px}
.lotus-thumb-card .opening-thumb-names{font-size:31px}
.lotus-thumb-card .opening-thumb-date{margin-top:22px}
.lotus-thumb-button{margin-top:25px}
.silver-thumb-card{padding:30px 13px 26px;border-radius:31px}
.silver-thumb-card img{width:184px;max-height:214px;margin:7px auto -2px;filter:saturate(.45) sepia(.05) drop-shadow(0 9px 11px rgba(0,0,0,.18))}
.silver-thumb-invite{font-size:8.5px;margin-top:9px}
.silver-thumb-card .opening-thumb-names{font-size:26px;margin-top:5px}

/* Make the three style families visually explicit: Traditional, Cultural, and Modern. */
.template-category{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:4px 8px;border-radius:999px;font-size:7.2px;letter-spacing:.12em;border:1px solid transparent}
.template-category-traditional{color:#31546a;background:#edf4f7;border-color:#d7e7ed}
.template-category-cultural{color:#7b432d;background:#fbefe8;border-color:#efd9cd}
.template-category-modern{color:#3d3b43;background:#f0eff2;border-color:#dedce2}

@media(max-width:980px){
  .template-visual,.preview-serenity,.preview-lotus,.preview-silver{height:600px!important}
  .phone-mockup{width:264px;height:528px}
}
@media(max-width:680px){
  .template-visual,.preview-serenity,.preview-lotus,.preview-silver{height:612px!important}
  .phone-mockup{width:270px;height:540px}
}
@media(max-width:360px){
  .template-visual,.preview-serenity,.preview-lotus,.preview-silver{height:565px!important;padding:12px}
  .phone-mockup{width:244px;height:488px;border-radius:44px}
  .phone-screen{border-radius:35px}
}


/* ==========================================================================
   FINAL 2026-08-26 - consistent Zainur phone shell + green Silver Grace thumb
   ========================================================================== */
.phone-mockup{
  background:#090d0c;
  border-color:#0b0f10;
  box-shadow:
    0 0 0 1px rgba(204,163,84,.36),
    0 0 0 2px rgba(255,255,255,.035) inset,
    0 20px 42px rgba(0,0,0,.26),
    0 0 22px rgba(204,163,84,.06);
}
.phone-side{
  background:#090d0c;
  border-color:#151b19;
  box-shadow:0 1px 1px rgba(255,255,255,.07) inset,0 1px 2px rgba(0,0,0,.34);
}
.phone-screen{box-shadow:0 0 0 1px rgba(204,163,84,.12) inset}

/* Modern Silver Grace preview: Zainur green + ivory, with no purple curtain effect. */
.opening-thumb-silver{
  background:
    linear-gradient(180deg,rgba(8,51,38,.95),rgba(6,40,31,.97)),
    url('../images/showcase/silver-grace-satin.webp') center/cover;
}
.opening-thumb-silver::before,
.opening-thumb-silver::after{
  background:linear-gradient(90deg,#062b21,#0d4937 50%,#062b21);
  opacity:.36;
}
.silver-thumb-card{background:rgba(8,51,38,.23);border-color:rgba(247,216,141,.22)}
.silver-thumb-card img{
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.20));
}
.silver-thumb-card .opening-thumb-kicker,
.silver-thumb-invite,
.silver-thumb-card p,
.silver-thumb-card small{color:rgba(255,255,255,.74)}
.silver-thumb-card .opening-thumb-names{color:#fff}
.silver-thumb-card .opening-thumb-names em{color:var(--gold-light)}
.silver-thumb-button{background:#f8f1e4;color:#083326;border-color:rgba(247,216,141,.45)}


/* ======================================================================
   2026-08-26 follow-up refinements
   - safer phone status spacing
   - remove gold ring from template phones
   - use the real Silver Grace opening colours
   ====================================================================== */
.phone-mockup{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.035) inset,
    0 20px 42px rgba(0,0,0,.26),
    0 10px 22px rgba(0,0,0,.14);
}
.phone-screen{
  padding-top:37px;
  box-shadow:0 0 0 1px rgba(15,23,42,.10) inset;
}
.phone-statusbar{
  top:12px;
  left:17px;
  right:17px;
  height:22px;
}
.phone-status-time{font-size:8px;margin-left:2px}
.phone-status-icons{gap:3px;font-size:8.5px;margin-right:1px}
.phone-status-icons .bi-battery-full{font-size:12px;margin-left:0}

.opening-thumb-silver{
  background:linear-gradient(180deg,rgba(27,25,29,.91),rgba(27,25,29,.84)),url('../images/showcase/silver-grace-satin.webp') center/cover;
  color:#fffaf2;
}
.opening-thumb-silver::before,
.opening-thumb-silver::after{
  background:linear-gradient(90deg,#18171b,#2d2a30 50%,#17161a);
  opacity:.72;
}
.silver-thumb-card{background:rgba(18,17,21,.34);border-color:rgba(255,255,255,.14)}
.silver-thumb-card img{filter:drop-shadow(0 8px 9px rgba(0,0,0,.20))}
.silver-thumb-card .opening-thumb-kicker{color:#c6bfc0}
.silver-thumb-invite{color:#ece6e0}
.silver-thumb-card p{color:#c8c1c0}
.silver-thumb-card small{color:#a9a2a4}
.silver-thumb-card .opening-thumb-names{color:#fffaf2}
.silver-thumb-card .opening-thumb-names em{color:#d4cbc7}
.silver-thumb-button{background:#f7efe2;color:#242126;border-color:rgba(255,255,255,.25)}


/* ======================================================================
   2026-08-26 follow-up refinements v2
   - safer status-bar spacing in template phones
   - reduce the white band so the opening preview shows more fully
   ====================================================================== */
.phone-screen{
  padding-top:28px;
}
.phone-statusbar{
  top:10px;
  left:20px;
  right:20px;
  height:19px;
}
.phone-status-time{font-size:7.8px;font-weight:700;margin-left:0}
.phone-dynamic-island{width:74px;height:20px}
.phone-dynamic-island i{top:7px;right:9px}
.phone-status-icons{gap:2.5px;font-size:8px;margin-right:0}
.phone-status-icons .bi-battery-full{font-size:11px}
.opening-thumb-card{width:calc(100% - 18px)}
.serenity-thumb-card{min-height:458px;padding-top:34px}
.lotus-thumb-card{min-height:454px;padding-top:32px}
.silver-thumb-card{padding-top:24px}


/* ======================================================================
   2026-08-26 final refinements v3
   - thinner template phone shell
   - safer status-bar spacing
   - smaller white top band so opening previews show more
   ====================================================================== */
.phone-mockup{
  padding:4px;
  border-radius:44px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 18px 38px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.12);
}
.phone-screen{
  padding-top:22px;
  border-radius:34px;
  box-shadow:0 0 0 1px rgba(15,23,42,.08) inset;
}
.phone-statusbar{
  top:8px;
  left:22px;
  right:22px;
  height:18px;
}
.phone-status-time{font-size:7.8px;letter-spacing:-.01em}
.phone-dynamic-island{width:72px;height:19px}
.phone-dynamic-island i{top:7px;right:9px}
.phone-status-icons{gap:2.4px;font-size:7.9px}
.phone-status-icons .bi-battery-full{font-size:10.8px}
.phone-side{width:3px}
.phone-side-mute{left:-6px;top:82px;height:20px}
.phone-side-volume-up{left:-6px;top:113px;height:40px}
.phone-side-volume-down{left:-6px;top:161px;height:40px}
.phone-side-power{right:-6px;top:122px;height:64px}
.serenity-thumb-card{padding-top:30px}
.lotus-thumb-card{padding-top:28px}
.silver-thumb-card{padding-top:22px}
@media(max-width:360px){
  .phone-mockup{padding:4px;border-radius:40px}
  .phone-screen{padding-top:21px;border-radius:31px}
  .phone-statusbar{left:20px;right:20px;top:8px}
}


/* ======================================================================
   2026-08-26 final refinements v4
   - remove the white strip above every template preview
   - opening artwork reaches the top behind the status bar
   - give READY-MADE DESIGNS and BEFORE YOU CHOOSE distinct section tones
   ====================================================================== */
.phone-screen{
  padding-top:0;
  background:transparent;
}
.phone-mockup .phone-statusbar{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.38);
}
.phone-mockup .phone-dynamic-island{
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 1px 0 rgba(255,255,255,.05) inset;
}

/* Clear visual separation between the gallery and FAQ sections. */
.template-gallery-section{
  background:var(--cream);
}
.templates-faq-section{
  background:#eef2ef;
  border-top:1px solid rgba(8,51,38,.06);
  border-bottom:1px solid rgba(8,51,38,.06);
}
.templates-faq-section .template-faq-list{
  background:rgba(255,255,255,.82);
}


/* ======================================================================
   2026-08-26 final refinements v5
   - remove the mismatched FAQ-list background panel
   - add breathing room above the NOT SURE YET card
   ====================================================================== */
.templates-faq-section .template-faq-list{
  background:transparent;
  border:0;
  box-shadow:none;
}
.template-cta-section{
  padding:72px 0 88px;
}
@media(max-width:680px){
  .template-cta-section{padding:52px 0 68px}
}


/* 2026-08-27 mobile hero alignment fix */
@media(max-width:680px){
  .templates-hero-copy{text-align:center}
  .templates-kicker-premium{display:block;text-align:center}
  .templates-hero-copy h1{margin-left:auto;margin-right:auto;text-align:center}
  .templates-hero-copy p{margin-left:auto!important;margin-right:auto!important;text-align:center}
  .templates-hero-actions{justify-content:center;align-items:center}
}


/* ======================================================================
   2026-08-28 - Template 04 + Template 05 public gallery previews
   ====================================================================== */
.preview-ivory-petal{background:linear-gradient(145deg,#eee7ec,#e1d7df)}
.preview-mandapam{background:linear-gradient(145deg,#f5e8df,#ead5c8)}

.opening-thumb-ivory-petal{
  background:
    linear-gradient(rgba(36,24,44,.72),rgba(58,43,70,.70)),
    url('../../templates/ivory-petal-nikah/standard/assets/images/plum-gold-background.webp') center/cover;
  color:#4b394f;
}
.ivory-petal-thumb-card{
  min-height:454px;
  padding:29px 14px 25px;
  border:1px solid rgba(184,146,77,.32);
  border-radius:30px;
  background:rgba(249,244,236,.95);
  box-shadow:0 18px 42px rgba(24,16,30,.24);
}
.ivory-petal-thumb-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(105,90,109,.14);border-radius:23px;pointer-events:none}
.ivory-thumb-arabic{font:500 11px/1.3 Georgia,serif;color:#65576a;margin-bottom:5px}
.ivory-petal-thumb-card img{width:156px;max-height:165px;object-fit:contain;margin:2px auto 3px;filter:drop-shadow(0 7px 10px rgba(75,63,80,.10))}
.ivory-petal-thumb-card .opening-thumb-kicker{color:#6f636f;margin-top:2px}
.ivory-petal-thumb-card .opening-thumb-names{font-size:19px;margin-top:5px;color:#5e5063}
.ivory-petal-thumb-card .opening-thumb-names em{color:#9a8654}
.ivory-petal-thumb-card p{margin-top:6px;color:#756a75}
.ivory-thumb-button{background:#65576a;color:#fffaf2;box-shadow:0 8px 18px rgba(75,63,80,.18)}
.ivory-petal-thumb-card small{color:#8a7f86;text-transform:uppercase;letter-spacing:.10em}

.opening-thumb-mandapam{
  background:radial-gradient(circle at center,#7a1029 0,#4f0717 54%,#260208 100%);
  color:#fff4da;
}
.mandapam-thumb-curtain{position:absolute;top:0;bottom:0;width:28%;z-index:1;background:repeating-linear-gradient(90deg,#3e0612 0 8%,#720b21 13%,#470712 22%);box-shadow:inset 0 0 55px #190107}
.mandapam-thumb-curtain::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,223,160,.10),transparent)}
.mandapam-thumb-curtain-left{left:0;border-right:1px solid rgba(228,191,108,.18)}
.mandapam-thumb-curtain-right{right:0;border-left:1px solid rgba(228,191,108,.18)}
.mandapam-thumb-card{z-index:2;width:68%;min-height:420px;padding:86px 5px 28px;background:transparent;color:#fff4da;text-shadow:0 5px 20px rgba(0,0,0,.45)}
.mandapam-thumb-card .opening-thumb-kicker{color:#e6c985;line-height:1.5}
.mandapam-thumb-card .opening-thumb-names{white-space:normal;flex-wrap:wrap;font-size:28px;line-height:.92;margin-top:13px}
.mandapam-thumb-card .opening-thumb-names em{width:100%;color:#d7b767;font-size:.48em}
.mandapam-thumb-card .opening-thumb-date{margin-top:15px;color:#ead9b9}
.mandapam-thumb-button{margin-top:20px;background:#ead7a1;color:#540a1a;text-shadow:none;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.mandapam-thumb-card small{color:#d8bd7f;text-transform:uppercase;letter-spacing:.10em}

@media(max-width:980px){
  .preview-ivory-petal,.preview-mandapam{height:600px!important}
  .ivory-petal-thumb-card{min-height:462px}
  .mandapam-thumb-card{min-height:430px}
}
@media(max-width:680px){
  .preview-ivory-petal,.preview-mandapam{height:612px!important}
}
@media(max-width:360px){
  .preview-ivory-petal,.preview-mandapam{height:565px!important;padding:12px}
  .mandapam-thumb-card .opening-thumb-names{font-size:24px}
}


/* 2026-08-28 - Mandapam phone preview refinement */
.opening-thumb-mandapam{
  background:radial-gradient(circle at center,#7c0f27 0,#57081a 54%,#2a020a 100%);
}
.mandapam-thumb-curtain{
  width:24%;
  background:repeating-linear-gradient(90deg,#400613 0 9%,#7a0c24 14%,#470813 24%);
}
.mandapam-thumb-card{
  width:74%;
  min-height:432px;
  padding:90px 10px 30px;
}
.mandapam-thumb-card .opening-thumb-kicker{font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.mandapam-thumb-card .opening-thumb-date{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.mandapam-thumb-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:150px;
  min-height:42px;
  padding:0 22px;
  margin-top:22px;
  border-radius:999px;
  border:1px solid rgba(236,208,145,.78);
  background:#ecd8a2;
  color:#5a0b1b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:none;
  box-shadow:0 10px 22px rgba(0,0,0,.20);
}
.mandapam-thumb-button i{font-size:12px}
.mandapam-thumb-card small{margin-top:12px}
@media(max-width:360px){
  .mandapam-thumb-card{width:76%;padding:84px 8px 26px}
  .mandapam-thumb-button{min-width:138px;min-height:39px;padding:0 18px;font-size:9px}
}

/* ======================================================================
   2026-08-29 - Template 06 / Pearl Seal public gallery preview
   ====================================================================== */
.preview-pearl-seal{background:linear-gradient(145deg,#f3f0eb,#ded9d2)}
.opening-thumb-pearl-seal{
  background:
    radial-gradient(circle at center,rgba(255,255,255,.26),rgba(255,255,255,0) 42%),
    linear-gradient(rgba(245,242,237,.94),rgba(235,231,225,.98)),
    url('../../templates/pearl-seal/standard/assets/background.webp') center/cover;
  color:#4f4c49;
}
.pearl-thumb-curtain{
  position:absolute;
  top:0;
  bottom:0;
  width:51%;
  z-index:1;
  background:linear-gradient(90deg,
    rgba(206,201,194,.74) 0%,
    rgba(248,246,242,.99) 9%,
    rgba(223,218,211,.97) 18%,
    rgba(251,249,245,.99) 28%,
    rgba(217,212,205,.96) 39%,
    rgba(250,248,244,.99) 50%,
    rgba(219,214,207,.96) 62%,
    rgba(249,247,243,.99) 73%,
    rgba(220,215,208,.95) 84%,
    rgba(247,245,241,.96) 93%,
    rgba(204,198,190,.72) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset -10px 0 24px rgba(125,119,112,.12);
}
.pearl-thumb-curtain::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 25%,rgba(137,130,122,.035) 58%,rgba(255,255,255,.12))}
.pearl-thumb-curtain-left{left:0;border-right:1px solid rgba(135,129,121,.10)}
.pearl-thumb-curtain-right{right:0;transform:scaleX(-1);border-left:1px solid rgba(135,129,121,.10)}
.pearl-seal-thumb-card{
  z-index:3;
  width:78%;
  min-height:430px;
  padding:76px 9px 26px;
  color:#56514d;
  text-shadow:0 1px rgba(255,255,255,.55);
}
.pearl-seal-thumb-card::before{
  content:"";
  position:absolute;
  inset:52px -10px 14px;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
  filter:blur(12px);
}
.pearl-seal-thumb-card .opening-thumb-kicker{color:#77716c;font-size:8px;letter-spacing:.22em}
.pearl-thumb-rule{width:62px;margin:12px auto 15px;display:flex;align-items:center;justify-content:center;color:#96918b;font:8px var(--serif)}
.pearl-thumb-rule::before,.pearl-thumb-rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(132,126,119,.45))}
.pearl-thumb-rule::after{background:linear-gradient(90deg,rgba(132,126,119,.45),transparent)}
.pearl-thumb-rule span{padding:0 6px}
.pearl-seal-thumb-card .opening-thumb-names{font-size:31px;font-weight:500;color:#4d4945;letter-spacing:-.03em}
.pearl-seal-thumb-card .opening-thumb-names em{font-family:var(--serif);font-size:.58em;color:#8b8782}
.pearl-seal-thumb-card p{max-width:176px;margin-top:12px;color:#76716c;font:500 8px/1.52 var(--serif)}
.pearl-thumb-seal{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:16px auto 0}
.pearl-thumb-seal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(57,54,51,.14))}
.pearl-thumb-seal b{position:relative;z-index:1;color:#514d49;font:600 10px/.95 var(--serif);text-shadow:0 1px rgba(255,255,255,.75)}
.pearl-seal-thumb-card small{margin-top:8px;color:#8c8884;text-transform:uppercase;letter-spacing:.14em;font-size:6px}
@media(max-width:980px){
  .preview-pearl-seal{height:600px!important}
  .pearl-seal-thumb-card{min-height:440px}
}
@media(max-width:680px){
  .preview-pearl-seal{height:612px!important}
}
@media(max-width:360px){
  .preview-pearl-seal{height:565px!important;padding:12px}
  .pearl-seal-thumb-card{padding-top:68px}
  .pearl-seal-thumb-card .opening-thumb-names{font-size:27px}
  .pearl-thumb-seal{width:94px;height:94px}
}



/* ======================================================================
   2026-08-31 - Template 07 Rose Lantern + Template 08 Burgundy & Gold
   ====================================================================== */
.preview-rose-lantern{background:linear-gradient(145deg,#f7e7e8,#eed1d7)}
.preview-burgundy-gold{background:linear-gradient(145deg,#eee2de,#e1ccc7)}

/* Rose Lantern intentionally has no opening screen; preview its hero identity. */
.opening-thumb-rose-lantern{
  background:
    linear-gradient(rgba(255,245,246,.82),rgba(247,225,230,.88)),
    url('../../templates/rose-lantern/standard/assets/background.webp') center/cover;
  color:#943d59;
}
.rose-thumb-stage{position:relative;z-index:2;width:94%;height:92%;display:grid;place-items:center}
.rose-thumb-arch{position:absolute;inset:3% 0 0;width:100%;height:96%;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(120,64,76,.10))}
.rose-thumb-copy{position:relative;z-index:2;width:64%;margin-top:3%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#8b3c57}
.rose-thumb-arabic{font:600 8.5px/1.35 Georgia,serif;color:#b33f5f;margin-bottom:7px}
.rose-thumb-copy .opening-thumb-kicker{font-size:5.8px;color:#9d6d70;letter-spacing:.10em}
.rose-thumb-copy .opening-thumb-names{margin-top:8px;white-space:normal;flex-direction:column;gap:0;font-size:27px;line-height:.82;color:#c23d62;font-weight:500}
.rose-thumb-copy .opening-thumb-names em{font-size:.46em;line-height:1.1;color:#c8897c}
.rose-thumb-copy p{max-width:128px;margin-top:9px;color:#8e6c6b;font:500 6.2px/1.5 var(--serif)}
.rose-thumb-copy .opening-thumb-date{margin-top:10px;color:#996a6c;font-size:5.2px}
.rose-thumb-button{min-width:122px;margin-top:12px;padding:8px 9px;border:1px solid rgba(180,91,112,.2);background:#fff8f6;color:#a84260;box-shadow:0 7px 16px rgba(133,70,83,.08)}
.rose-thumb-lantern{position:absolute;z-index:3;width:29px;height:auto;filter:drop-shadow(0 5px 8px rgba(122,62,74,.15))}
.rose-thumb-lantern-left{left:9px;top:103px}
.rose-thumb-lantern-right{right:8px;top:126px;transform:scale(.78)}
.rose-thumb-crescent{position:absolute;z-index:3;width:42px;right:14px;top:48px;opacity:.86}

.opening-thumb-burgundy-gold{
  background:
    linear-gradient(rgba(62,6,23,.76),rgba(53,4,18,.82)),
    url('../../templates/burgundy-gold/standard/assets/bg-shawl.webp') center/cover;
  color:#4c0a20;
}
.burgundy-thumb-card{
  width:82%;
  min-height:432px;
  padding:64px 13px 28px;
  border:1px solid rgba(184,135,70,.45);
  border-radius:4px;
  background:
    linear-gradient(rgba(255,249,239,.96),rgba(250,241,226,.97)),
    url('../../templates/burgundy-gold/standard/assets/paper-texture.webp') center/cover;
  box-shadow:0 18px 38px rgba(25,0,8,.32);
}
.burgundy-thumb-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(143,91,45,.18);pointer-events:none}
.burgundy-thumb-arabic{font:600 9px/1.3 Georgia,serif;color:#8d1234;margin-bottom:8px}
.burgundy-thumb-card .opening-thumb-kicker{color:#9d7653;font-size:5.8px;letter-spacing:.12em}
.burgundy-thumb-invite{max-width:148px!important;color:#806f65!important;font:500 6.2px/1.45 var(--serif)!important}
.burgundy-thumb-card .opening-thumb-names{margin-top:10px;font-size:29px;color:#8b1234;font-weight:500;white-space:normal;flex-wrap:wrap;line-height:.9}
.burgundy-thumb-card .opening-thumb-names em{width:100%;font-size:.46em;color:#b08a52}
.burgundy-thumb-rule{width:70px;margin:11px auto 0;display:flex;align-items:center;color:#b08a52;font-size:7px}
.burgundy-thumb-rule::before,.burgundy-thumb-rule::after{content:"";height:1px;flex:1;background:rgba(176,138,82,.55)}
.burgundy-thumb-rule span{padding:0 6px}
.burgundy-thumb-card .opening-thumb-date{margin-top:11px;color:#7c654f;font-size:5.4px}
.burgundy-thumb-button{margin-top:14px;min-width:128px;padding:9px 12px;border-radius:2px;background:#72112d;color:#fff3df;border:1px solid #b58a4e;box-shadow:0 8px 18px rgba(76,10,32,.18)}
.burgundy-thumb-card small{margin-top:10px;color:#9a8069;font:italic 5.5px/1.35 var(--serif);letter-spacing:0;text-transform:none}
.burgundy-thumb-flower{position:absolute;z-index:3;width:112px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(37,0,10,.12))}
.burgundy-thumb-flower-tl{left:-33px;top:-22px}
.burgundy-thumb-flower-br{right:-33px;bottom:-24px;transform:rotate(180deg)}

@media(max-width:980px){
  .preview-rose-lantern,.preview-burgundy-gold{height:600px!important}
  .burgundy-thumb-card{min-height:442px}
}
@media(max-width:680px){
  .preview-rose-lantern,.preview-burgundy-gold{height:612px!important}
}
@media(max-width:360px){
  .preview-rose-lantern,.preview-burgundy-gold{height:565px!important;padding:12px}
  .rose-thumb-copy .opening-thumb-names{font-size:24px}
  .burgundy-thumb-card{width:84%;padding-top:58px}
  .burgundy-thumb-card .opening-thumb-names{font-size:26px}
}

/* =========================================================
   2026-08-31 - Exact live phone previews for Template 07/08
   Use the real template viewport instead of an approximate
   CSS recreation. 400x844 scaled to the phone screen.
   ========================================================= */
.live-template-thumb{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
}
.live-template-thumb-rose{background:#f9eeee}
.live-template-thumb-burgundy{background:#3b0717}
.live-template-frame{
  position:absolute;
  top:0;
  left:0;
  /* Render the actual template at a true mobile viewport (~390 x 804),
     then scale it exactly to the phone-screen box. The phone screen and
     source viewport share the same aspect ratio, so no empty bands/cropping. */
  width:153.55%;
  height:153.55%;
  border:0;
  margin:0;
  display:block;
  transform:scale(.65125);
  transform-origin:top left;
  pointer-events:none;
  background:transparent;
}


/* ======================================================================
   2026-08-31 - Template 05 exact preview + mobile filter/FAQ fixes
   ====================================================================== */
.live-template-thumb-mandapam{background:#5b0719}

/* On small phones the four style filters must wrap instead of becoming a
   clipped horizontal strip. The final row stays visually centered. */
@media(max-width:680px){
  .template-filter-row-simple{
    width:min(100%,300px);
    margin-left:auto!important;
    margin-right:auto!important;
    justify-content:center!important;
    align-items:center;
    flex-wrap:wrap!important;
    overflow:visible!important;
    padding:0!important;
    row-gap:8px;
    column-gap:8px;
  }
  .template-filter-row-simple .template-filter{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* FAQ mobile width protection. */
  .templates-faq-section .z-container{min-width:0}
  .templates-faq-section .template-faq-list{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .templates-faq-section .template-faq-item{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .templates-faq-section .template-faq-question{
    width:100%;
    min-width:0;
    gap:12px;
    align-items:flex-start;
  }
  .templates-faq-section .template-faq-question span{
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .templates-faq-section .template-faq-question i{
    flex:0 0 auto;
    margin-top:2px;
  }
  .templates-faq-section .template-faq-answer p{
    overflow-wrap:anywhere;
  }
}


/* 2026-08-31 final live-preview fill correction */
.phone-screen > .live-template-thumb{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.live-template-frame{
  max-width:none!important;
  max-height:none!important;
}

.preview-champagne-bloom{background:linear-gradient(145deg,#f6f0e6,#e9dfcf)}
.preview-midnight-bloom{background:linear-gradient(145deg,#ece9e2,#d9d5ce)}
.phone-screen{position:relative!important;overflow:hidden!important;isolation:isolate}
.template-preview-shot{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;max-height:none!important;display:block;object-fit:cover;object-position:top center;border:0;border-radius:inherit;pointer-events:none}

/* ======================================================================
   2026-09-01 REAL PHONE QA FIX
   Screenshot previews are cropped to the phone-screen aspect ratio, so
   they can fill the mockup without cutting frames or spilling outside.
   ====================================================================== */
.template-preview-shot{
  object-fit:cover !important;
  object-position:top center !important;
}
.preview-mandapam .phone-screen{background:#5b0719}
.preview-rose-lantern .phone-screen{background:#faeeee}
.preview-burgundy-gold .phone-screen{background:#3b0717}
.preview-champagne-bloom .phone-screen{background:#f5efe5}
.preview-midnight-bloom .phone-screen{background:#05070b}

/* Silver Grace preview button must remain plain text on devices where
   the Bootstrap icon font is unavailable or cached incorrectly. */
.silver-thumb-button{white-space:nowrap}


/* Template 11 - Garnet Nikah */
.preview-garnet-nikah{background:linear-gradient(145deg,#eee1da,#dcc6bc)}
.preview-garnet-nikah .phone-screen{background:#570819}

/* Template 13–14 preview surroundings */
.preview-midnight-botanica{background:linear-gradient(145deg,#17252a,#091116)}
.preview-midnight-botanica .phone-screen{background:#071015}
.preview-ivory-etching{background:linear-gradient(145deg,#f1eadf,#ded3c3)}
.preview-ivory-etching .phone-screen{background:#f4efe6}