/* =========================================================
   Saatpheree (Saving Mantra banner) — Elegant Wedding Theme
   File: /assets/css/saatpheree.css
   Tip: Include AFTER your main site.css so this can override.
   <link rel="stylesheet" href="/assets/css/site.css">
   <link rel="stylesheet" href="/assets/css/saatpheree.css">
========================================================= */

/* Optional (safe): if you want web fonts, uncomment.
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");
*/

:root{
  /* Wedding palette */
  --sp-bg: #fbf7f2;           /* warm ivory */
  --sp-surface: #ffffff;      /* cards */
  --sp-surface-2: #fff8f1;    /* subtle sections */
  --sp-ink: #2a2320;          /* deep brown */
  --sp-muted: #6f625c;        /* muted text */
  --sp-line: rgba(42,35,32,.10);

  --sp-gold: #c6a35a;         /* champagne gold */
  --sp-gold-2: #b58a3a;       /* deeper gold */
  --sp-blush: #e7c0b4;        /* blush */
  --sp-rose: #d49a9a;         /* rose accent */

  --sp-success-bg: #ecf8f0;
  --sp-success-ink: #1f6a3a;
  --sp-danger-bg: #fff0f0;
  --sp-danger-ink: #7b1f1f;

  /* Type */
  --sp-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sp-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Layout */
  --sp-container: 1120px;
  --sp-radius-xl: 22px;
  --sp-radius-lg: 16px;
  --sp-radius-md: 12px;
  --sp-shadow: 0 14px 42px rgba(42,35,32,.10);
  --sp-shadow-soft: 0 10px 26px rgba(42,35,32,.08);
  --sp-ring: 0 0 0 4px rgba(198,163,90,.18);

  /* Spacing */
  --sp-pad: 1.25rem; /* 20px */
  --sp-pad-lg: 1.75rem;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--sp-ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(231,192,180,.35), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(198,163,90,.18), transparent 55%),
    linear-gradient(180deg, var(--sp-bg), #fff 60%, var(--sp-bg));
  font-family: var(--sp-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

::selection{ background: rgba(198,163,90,.25); }

/* =========================================================
   Containers + Sections
========================================================= */
.sp-container{
  width: min(var(--sp-container), calc(100% - 2rem));
  margin: 0 auto;
}

.sp-section{
  padding: 3.25rem 0;
}

.sp-section--soft{
  background: rgba(255,255,255,.55);
  border-top: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
}

.sp-divider{
  height:1px;
  background: var(--sp-line);
  margin: 2.25rem 0;
}

/* =========================================================
   Typography
========================================================= */
.sp-kicker{
  font-size:.9rem;
  color: var(--sp-muted);
  letter-spacing:.08em;
  text-transform: uppercase;
}

.sp-title{
  font-family: var(--sp-font-display);
  font-weight: 700;
  letter-spacing: .01em;
  margin: .35rem 0 0;
  line-height: 1.1;
}

.sp-title--xl{ font-size: clamp(2.1rem, 4vw, 3.35rem); }
.sp-title--lg{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.sp-title--md{ font-size: 1.5rem; }

.sp-subtitle{
  color: var(--sp-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 58ch;
  margin-top: .9rem;
}

.sp-text{
  color: var(--sp-muted);
  line-height: 1.7;
}

.sp-h2{
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  margin: 0 0 .75rem;
}

.sp-h3{
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .35rem;
}

/* =========================================================
   Topbar / Header
========================================================= */
.sp-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(251,247,242,.78);
  border-bottom: 1px solid var(--sp-line);
}

.sp-topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .85rem 0;
}

.sp-brand{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  min-width: 220px;
}

.sp-brand__name{
  font-family: var(--sp-font-display);
  font-weight: 700;
  letter-spacing:.02em;
  font-size: 1.35rem;
}

.sp-brand__by{
  font-size:.9rem;
  color: var(--sp-muted);
  white-space:nowrap;
}

.sp-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  flex-wrap:wrap;
}

.sp-nav a.sp-link{
  padding:.55rem .75rem;
  border-radius: 999px;
  color: var(--sp-muted);
}
.sp-nav a.sp-link:hover{
  color: var(--sp-ink);
  background: rgba(255,255,255,.55);
}

/* =========================================================
   Buttons
========================================================= */
.sp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650;
  letter-spacing:.01em;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
  white-space:nowrap;
}

.sp-btn:active{ transform: translateY(1px); }

.sp-btn--primary{
  color: #fff;
  background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-2));
  box-shadow: 0 12px 26px rgba(198,163,90,.22);
}
.sp-btn--primary:hover{
  box-shadow: 0 14px 30px rgba(198,163,90,.28);
}

.sp-btn--secondary{
  background: rgba(255,255,255,.72);
  border-color: var(--sp-line);
  color: var(--sp-ink);
}
.sp-btn--secondary:hover{
  background: #fff;
  box-shadow: var(--sp-shadow-soft);
}

.sp-btn--ghost{
  background: transparent;
  border-color: var(--sp-line);
  color: var(--sp-ink);
}
.sp-btn--ghost:hover{
  background: rgba(255,255,255,.55);
}

.sp-btn--sm{ padding:.55rem .85rem; font-size:.95rem; }

/* =========================================================
   Cards
========================================================= */
.sp-card{
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-lg);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.sp-card--lift{
  box-shadow: var(--sp-shadow-soft);
}
.sp-card--lift:hover{
  box-shadow: var(--sp-shadow);
  transform: translateY(-2px);
  transition: transform .14s ease, box-shadow .22s ease;
}

.sp-card__pad{ padding: var(--sp-pad); }
.sp-card__pad-lg{ padding: var(--sp-pad-lg); }

/* =========================================================
   Hero
========================================================= */
.sp-hero{
  padding: 3.1rem 0 2.2rem;
}

.sp-hero__wrap{
  display:grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 1.25rem;
  align-items:stretch;
}

.sp-hero__panel{
  border-radius: var(--sp-radius-xl);
  border: 1px solid var(--sp-line);
  background:
    radial-gradient(500px 300px at 20% 10%, rgba(231,192,180,.32), transparent 62%),
    radial-gradient(520px 320px at 95% 5%, rgba(198,163,90,.22), transparent 58%),
    rgba(255,255,255,.70);
  box-shadow: var(--sp-shadow-soft);
  padding: 1.6rem 1.6rem 1.35rem;
}

.sp-hero__side{
  border-radius: var(--sp-radius-xl);
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.72);
  box-shadow: var(--sp-shadow-soft);
  padding: 1.6rem;
}

.sp-hero__cta{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top: 1.15rem;
}

/* Search */
.sp-search{
  margin-top: 1.35rem;
  padding: .95rem;
  border-radius: 18px;
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.82);
}

.sp-search__row{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .75rem;
  align-items:center;
}

.sp-field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.sp-label{
  font-size:.9rem;
  color: var(--sp-muted);
}

.sp-input, .sp-select, .sp-textarea{
  width:100%;
  border: 1px solid var(--sp-line);
  background: #fff;
  color: var(--sp-ink);
  border-radius: 14px;
  padding: .75rem .9rem;
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.sp-textarea{ min-height: 120px; resize: vertical; }

.sp-input:focus, .sp-select:focus, .sp-textarea:focus{
  border-color: rgba(198,163,90,.55);
  box-shadow: var(--sp-ring);
}

/* =========================================================
   Stats strip
========================================================= */
.sp-stats{
  margin-top: 1.25rem;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .75rem;
}

.sp-stat{
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.70);
}

.sp-stat__title{
  font-weight: 700;
  margin: 0 0 .25rem;
}
.sp-stat__text{
  color: var(--sp-muted);
  margin: 0;
  line-height: 1.5;
  font-size: .95rem;
}

/* =========================================================
   Grids
========================================================= */
.sp-grid{
  display:grid;
  gap: 1rem;
}

.sp-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.sp-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Category cards */
.sp-category{
  border-radius: 18px;
  padding: 1.05rem 1rem;
  border: 1px solid var(--sp-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,241,.72));
  transition: transform .14s ease, box-shadow .22s ease;
}

.sp-category:hover{
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-soft);
}

.sp-category__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .6rem;
}

.sp-category__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(231,192,180,.28);
  border: 1px solid rgba(212,154,154,.25);
  font-size: 1.2rem;
}

.sp-category__name{
  font-weight: 750;
  margin: .75rem 0 .2rem;
}

.sp-category__desc{
  margin: 0;
  color: var(--sp-muted);
  font-size: .95rem;
  line-height: 1.55;
}

/* Store cards */
.sp-store{
  overflow:hidden;
}

.sp-store__media{
  position:relative;
  height: 190px;
  background: rgba(231,192,180,.14);
  border-bottom: 1px solid var(--sp-line);
}

.sp-store__media img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.sp-store__body{ padding: 1rem; }

.sp-store__name{
  font-weight: 800;
  margin: 0;
  font-size: 1.05rem;
}

.sp-store__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top: .35rem;
  color: var(--sp-muted);
  font-size:.95rem;
}

.sp-store__price{
  margin-top: .7rem;
  font-weight: 750;
}

.sp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top: .65rem;
}

.sp-chip{
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.78);
  color: var(--sp-muted);
}

.sp-rating{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight: 700;
  color: var(--sp-ink);
}
.sp-stars{
  letter-spacing: .06em;
  color: var(--sp-gold-2);
  font-size: .95rem;
}

.sp-store__actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top: .95rem;
}

/* =========================================================
   How it works
========================================================= */
.sp-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.sp-step{
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.70);
}

.sp-step__num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-2));
  box-shadow: 0 10px 18px rgba(198,163,90,.18);
}

.sp-step__title{
  margin: .8rem 0 .25rem;
  font-weight: 800;
}

.sp-step__desc{
  margin: 0;
  color: var(--sp-muted);
  line-height: 1.6;
}

/* =========================================================
   Forms + Alerts
========================================================= */
.sp-form{
  display:grid;
  gap: .85rem;
}

.sp-form__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

.sp-help{
  color: var(--sp-muted);
  font-size:.9rem;
  line-height: 1.55;
}

.sp-alert{
  border-radius: 16px;
  padding: .85rem 1rem;
  border: 1px solid var(--sp-line);
}
.sp-alert--success{
  background: var(--sp-success-bg);
  border-color: rgba(31,106,58,.18);
  color: var(--sp-success-ink);
}
.sp-alert--danger{
  background: var(--sp-danger-bg);
  border-color: rgba(123,31,31,.18);
  color: var(--sp-danger-ink);
}

/* =========================================================
   Partner CTA band
========================================================= */
.sp-band{
  border-radius: var(--sp-radius-xl);
  border: 1px solid var(--sp-line);
  background:
    radial-gradient(700px 350px at 10% 0%, rgba(231,192,180,.35), transparent 60%),
    radial-gradient(750px 380px at 100% 20%, rgba(198,163,90,.22), transparent 55%),
    rgba(255,255,255,.76);
  box-shadow: var(--sp-shadow-soft);
  padding: 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap:wrap;
}

.sp-band__bullets{
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  color: var(--sp-muted);
  line-height: 1.7;
}

.sp-band__right{
  display:flex;
  align-items:center;
  gap: .6rem;
}

/* =========================================================
   Testimonials
========================================================= */
.sp-quote{
  padding: 1.15rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.72);
}

.sp-quote__text{
  margin: 0;
  color: var(--sp-muted);
  line-height: 1.75;
}

.sp-quote__who{
  margin-top: .85rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.sp-quote__name{ font-weight: 800; }
.sp-quote__tag{ color: var(--sp-muted); font-size:.95rem; }

/* =========================================================
   FAQ (accordion-style details/summary)
========================================================= */
.sp-faq details{
  border: 1px solid var(--sp-line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  padding: .95rem 1rem;
}

.sp-faq details + details{ margin-top: .75rem; }

.sp-faq summary{
  cursor:pointer;
  font-weight: 800;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
}
.sp-faq summary::-webkit-details-marker{ display:none; }

.sp-faq summary::after{
  content: "＋";
  font-weight: 900;
  color: var(--sp-gold-2);
}
.sp-faq details[open] summary::after{ content: "－"; }

.sp-faq .sp-text{
  margin: .8rem 0 0;
}

/* =========================================================
   Footer
========================================================= */
.sp-footer{
  padding: 2.2rem 0;
  border-top: 1px solid var(--sp-line);
  background: rgba(255,255,255,.62);
}

.sp-footer__grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 1rem;
}

.sp-footer__links{
  display:grid;
  gap:.35rem;
  color: var(--sp-muted);
}
.sp-footer__links a{
  padding: .25rem 0;
}
.sp-footer__links a:hover{
  color: var(--sp-ink);
}

.sp-footer__copy{
  margin-top: 1.15rem;
  color: var(--sp-muted);
  font-size: .95rem;
}

/* =========================================================
   Utilities
========================================================= */
.sp-center{ text-align:center; }
.sp-right{ text-align:right; }
.sp-mt-1{ margin-top:.5rem; }
.sp-mt-2{ margin-top:1rem; }
.sp-mt-3{ margin-top:1.5rem; }
.sp-mt-4{ margin-top:2rem; }

.sp-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid var(--sp-line);
  background: rgba(255,255,255,.72);
  color: var(--sp-muted);
  font-size:.92rem;
}

/* =========================================================
   Accessibility
========================================================= */
:focus-visible{
  outline: none;
  box-shadow: var(--sp-ring);
  border-radius: 12px;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .sp-hero__wrap{ grid-template-columns: 1fr; }
  .sp-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sp-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sp-grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sp-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sp-footer__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .sp-search__row{ grid-template-columns: 1fr; }
  .sp-form__row{ grid-template-columns: 1fr; }
  .sp-stats{ grid-template-columns: 1fr; }
  .sp-steps{ grid-template-columns: 1fr; }
  .sp-grid--3, .sp-grid--4{ grid-template-columns: 1fr; }
  .sp-brand{ min-width: auto; }
  .sp-nav{ justify-content:flex-start; }
}