/* ------------------------------------------------------------------
   Sparkle Online Solutions — public page branding for listmonk
   Applies to: subscription form, preferences, opt-in, unsubscribe, archive.
   Managed in /opt/listmonk/branding/public.css and pushed with apply.py.
   Edit the file, not the admin textarea, or the next push overwrites you.
   ------------------------------------------------------------------ */

:root{
  --sp-orange:#E84C0A;
  --sp-orange-dark:#C63D05;
  --sp-ink:#111827;
  --sp-ink-soft:#3A4250;
  --sp-muted:#6B7280;
  --sp-soft:#FFF3ED;
  --sp-line:#E4E7EC;
  --sp-page:#F4F5F7;
  --sp-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,Helvetica,sans-serif;
}

html,body{
  background:var(--sp-page) !important;
  color:var(--sp-ink-soft) !important;
  font-family:var(--sp-font) !important;
  font-size:16px !important;
  line-height:1.6 !important;
}

/* ---------------------------------------------------------- header */
.header{
  background:var(--sp-ink);
  border-radius:12px 12px 0 0;
  padding:22px 30px !important;
  margin:0 !important;
  border-bottom:4px solid var(--sp-orange);
  text-align:left !important;
}
.header .logo{margin:0 !important;}
.header .logo a{
  display:inline-flex !important;
  align-items:center;
  gap:13px;
  text-decoration:none !important;
  border:0 !important;
}
.header .logo img{
  width:42px !important;height:42px !important;
  max-width:42px !important;max-height:42px !important;
  border-radius:9px;background:#fff;display:block;
}
/* Wordmark — listmonk's header markup has no text node of its own. */
.header .logo a::after{
  content:"Sparkle Online Solutions";
  font-size:17px;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1.2;
}

/* ------------------------------------------------------------ card */
.container.wrap{
  max-width:640px !important;
  margin:34px auto 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.container.wrap > section,
.container.wrap > form,
.container.wrap > div:not(.logo):not(.header){
  background:#fff;
  padding:30px 30px 34px !important;
  border-radius:0 0 12px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18);
}
section{margin:0 !important;}

h1,h2,h3,h4{color:var(--sp-ink) !important;font-weight:700 !important;letter-spacing:-.2px;}
h2{font-size:22px !important;margin:0 0 18px !important;}
.lists h2{font-size:15px !important;margin:22px 0 10px !important;color:var(--sp-muted) !important;
  text-transform:uppercase;letter-spacing:.6px;font-weight:700 !important;}

a{color:var(--sp-orange) !important;}
a:hover{color:var(--sp-orange-dark) !important;}

/* ----------------------------------------------------------- forms */
label{color:var(--sp-ink) !important;font-weight:600 !important;font-size:14px !important;
  display:block;margin-bottom:5px;}
input[type="text"],input[type="email"],input[type="password"],select,textarea{
  width:100% !important;box-sizing:border-box !important;
  padding:11px 13px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:8px !important;
  background:#fff !important;color:var(--sp-ink) !important;
  font-family:var(--sp-font) !important;font-size:15px !important;
  transition:border-color .15s,box-shadow .15s;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,select:focus,textarea:focus{
  border-color:var(--sp-orange) !important;
  box-shadow:0 0 0 3px rgba(232,76,10,.14) !important;
  outline:none !important;
}

/* --------------------------------------------------------- buttons */
.button,button[type="submit"],input[type="submit"]{
  background:var(--sp-orange) !important;
  border:1px solid var(--sp-orange) !important;
  color:#fff !important;
  font-family:var(--sp-font) !important;
  font-weight:700 !important;font-size:15px !important;
  padding:12px 26px !important;
  border-radius:8px !important;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  transition:background .15s,transform .05s;
}
.button:hover,button[type="submit"]:hover{background:var(--sp-orange-dark) !important;border-color:var(--sp-orange-dark) !important;}
.button:active,button[type="submit"]:active{transform:translateY(1px);}
.button.button-outline{
  background:#fff !important;color:var(--sp-orange) !important;border:1px solid var(--sp-orange) !important;
}
.button.button-outline:hover{background:var(--sp-soft) !important;}

/* ------------------------------------------- list picker & archive */
.lists{list-style:none !important;padding:0 !important;margin:0 0 6px !important;}
.lists li{
  border:1px solid var(--sp-line);
  border-radius:9px;
  padding:13px 15px !important;
  margin:0 0 9px !important;
  background:#fff;
  transition:border-color .15s,background .15s;
}
.lists li:hover{border-color:var(--sp-orange);background:var(--sp-soft);}
.lists li label{display:inline !important;font-weight:700 !important;color:var(--sp-ink) !important;
  margin:0 0 0 8px !important;cursor:pointer;}
.lists li input[type="checkbox"]{accent-color:var(--sp-orange);width:16px;height:16px;vertical-align:middle;}
.lists .description{
  color:var(--sp-muted) !important;font-size:13px !important;
  margin:7px 0 0 26px !important;line-height:1.5;
}

ul.archive{list-style:none !important;padding:0 !important;}
ul.archive li{
  border:1px solid var(--sp-line);border-radius:10px;
  padding:16px 18px !important;margin:0 0 11px !important;background:#fff;
}
ul.archive li:hover{border-color:var(--sp-orange);}

.error{
  background:#FEF2F2 !important;border:1px solid #FCA5A5 !important;
  color:#991B1B !important;border-radius:8px;padding:12px 14px !important;
}

/* ---------------------------------------------------------- footer */
footer.container{
  max-width:640px !important;margin:20px auto 40px !important;
  text-align:center !important;
  color:var(--sp-muted) !important;font-size:12.5px !important;
}
footer.container a{color:var(--sp-muted) !important;text-decoration:underline !important;}
footer.container::before{
  content:"Newsletters for Sparkle Online Solutions and partner brands.";
  display:block;margin-bottom:5px;color:var(--sp-muted);
}

@media (max-width:640px){
  .container.wrap{margin:16px auto 0 !important;}
  .header{padding:18px 20px !important;border-radius:0;}
  .container.wrap > section,
  .container.wrap > form,
  .container.wrap > div:not(.logo):not(.header){padding:22px 20px 26px !important;border-radius:0;}
  .header .logo a::after{font-size:15px;}
}