/* =========================
   NEW S&M THEME (GLOBAL) — CLEAN + CONSISTENT
   Replace your whole CSS with this
   ========================= */

:root{
  /* brand */
  --sm-red:#b53258;
  --sm-blue:#3564b6;
  --sm-sky:#0ea5e9;

  /* base */
  --bg:#f6f8ff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;

  --border:rgba(53,100,182,.20);
  --shadow:0 18px 40px rgba(15,23,42,.10);

  --radius:18px;
  --radius-sm:12px;

  --container:1180px;
}

*{box-sizing:border-box;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(53,100,182,.14), transparent 55%),
    radial-gradient(900px 450px at 80% 10%, rgba(181,50,88,.12), transparent 55%),
    var(--bg);
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

/* =========================
   TOP BAR
   ========================= */
.topbar{
  background:linear-gradient(135deg, rgba(53,100,182,1), rgba(181,50,88,1));
  color:#fff;
  font-size:13px;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:8px 0;gap:12px}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar .top-item{display:inline-flex;align-items:center;gap:8px;font-weight:700;opacity:.98}
.topbar .top-icon{width:18px;height:18px;display:inline-block;vertical-align:middle;fill:#fff;opacity:.95}
.topbar .top-sep{margin:0 10px;opacity:.6}
@media(max-width:600px){
  .topbar .left .top-item + .top-sep{display:none}
  .topbar .left .top-item{font-size:12px}
}

/* =========================
   MAIN HEADER
   ========================= */
.main-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,248,255,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}

.logo{font-weight:950;letter-spacing:.3px;font-size:22px;color:var(--ink)}
.logo a{color:inherit}
.logo a:hover{opacity:.95}

.main-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.main-nav a{
  position:relative;
  font-weight:900;
  font-size:14px;
  color:var(--ink);
  opacity:.9;
  padding:10px 10px;
  border-radius:999px;
  transition:.15s ease;
}
.main-nav a:hover{background:rgba(53,100,182,.10);opacity:1}
.main-nav a:after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:6px;
  height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--sm-blue),var(--sm-red));
  transform:scaleX(0);
  transform-origin:left;
  transition:.18s ease;
  opacity:.95;
}
.main-nav a:hover:after{transform:scaleX(1)}

/* CTA button (global) */
.btn-book,
.subscribe-form button,
.upload-btn,
.set-gallery-btn,
.btn-save{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 18px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--sm-blue),var(--sm-red));
  box-shadow:0 14px 26px rgba(53,100,182,.18);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-book:hover,
.subscribe-form button:hover,
.upload-btn:hover,
.set-gallery-btn:hover,
.btn-save:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(181,50,88,.22);
  filter:brightness(1.02);
}
.btn-book:active,
.subscribe-form button:active,
.upload-btn:active,
.set-gallery-btn:active,
.btn-save:active{transform:translateY(0)}

/* remove “white flash” on hover/focus in some browsers */
.btn-book:focus,
.subscribe-form button:focus,
.upload-btn:focus,
.set-gallery-btn:focus,
.btn-save:focus{outline:none}
.btn-book::-moz-focus-inner,
.subscribe-form button::-moz-focus-inner,
.upload-btn::-moz-focus-inner,
.set-gallery-btn::-moz-focus-inner,
.btn-save::-moz-focus-inner{border:0}

/* =========================
   HERO
   ========================= */
.hero{padding:60px 0;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(2,6,23,0.02))}
.hero h1{font-size:36px;margin:0 0 8px;color:var(--sm-blue);font-weight:950}

/* Contact hero variant */
.contact-hero{padding:110px 0 60px;background-size:cover;background-position:center;position:relative;color:#fff}
.contact-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(2,6,23,.30),rgba(2,6,23,.30))}
.contact-hero .container{position:relative;z-index:2}
.contact-hero h1{color:#fff;font-size:48px;text-align:center;margin:0 0 8px}
.contact-hero p{color:rgba(255,255,255,.9);text-align:center;max-width:760px;margin:0 auto}

/* =========================
   SUBSCRIBE (FIX BLUE BAND + MATCH THEME)
   ========================= */
.subscribe-wrap{
  margin-top:32px;
  padding:22px 0 42px;
  position:relative;
  background:transparent !important;
}
.subscribe-wrap::before,
.subscribe-wrap::after{
  content:none !important;
  display:none !important;
}

/* Banner */
.subscribe-banner{
  background:
    radial-gradient(900px 280px at 20% 30%, rgba(53,100,182,.18), transparent 60%),
    radial-gradient(900px 280px at 80% 35%, rgba(181,50,88,.16), transparent 60%),
    #fff;
  color:var(--ink);
  padding:22px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  position:relative;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.subscribe-banner .copy{flex:1}
.subscribe-banner h3{margin:0 0 8px;font-size:20px;font-weight:950}
.subscribe-banner p{margin:0;color:var(--muted);font-weight:600;line-height:1.55;max-width:640px}

/* Form */
.subscribe-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.subscribe-form input[type="email"]{
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(53,100,182,.22);
  min-width:320px;
  max-width:100%;
  background:rgba(246,248,255,.75);
  color:var(--ink);
  font-weight:800;
  outline:none;
  transition:.15s ease;
}
.subscribe-form input[type="email"]::placeholder{color:rgba(100,116,139,.85);font-weight:700}
.subscribe-form input[type="email"]:focus{
  border-color:rgba(181,50,88,.45);
  box-shadow:0 0 0 4px rgba(181,50,88,.12);
  background:#fff;
}

/* =========================
   FOOTER (MATCH HEADER BG STYLE)
   ========================= */
.footer{
  padding:48px 0;
  margin-top:40px;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(53,100,182,.22), transparent 60%),
    radial-gradient(900px 420px at 82% 10%, rgba(181,50,88,.18), transparent 60%),
    rgba(246,248,255,.9);
  border-top:1px solid var(--border);
}
.footer-inner{display:flex;gap:40px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.footer-col{flex:1;min-width:220px}
.footer h4{color:var(--sm-red);margin-bottom:16px;font-weight:950}
.footer p,.footer a{color:var(--ink);opacity:.92}
.footer a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(181,50,88,.6)}
.footer .socials{display:flex;gap:12px;margin-top:12px}

/* social icons */
.socials .icon{
  width:42px;height:42px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(53,100,182,.18), rgba(181,50,88,.18));
  border:1px solid rgba(53,100,182,.18);
  transition:.15s ease;
}
.socials .icon:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--sm-blue),var(--sm-red))}
.socials .icon svg path{fill:#fff !important}

.site-credit{padding-top:18px;color:var(--muted);opacity:.9;text-align:center}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:900px){
  .main-nav{display:none}
  .header-inner{justify-content:space-between}
  .subscribe-banner{flex-direction:column;align-items:flex-start}
  .subscribe-form{width:100%;justify-content:flex-start}
  .subscribe-form input[type="email"]{min-width:0;width:100%}
  .footer-inner{flex-direction:column}
}

/* =========================
   CONTACT FORM
   ========================= */
.contact .card{padding:26px}
.form-row{margin-bottom:14px}
.form-row label{display:block;margin-bottom:8px;color:var(--muted);font-weight:800}
.form-row input[type="text"], .form-row input[type="email"], .form-row textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  box-shadow:inset 0 2px 8px rgba(2,6,23,.03);
  font-size:14px;
  color:var(--ink);
  outline:none;
  transition:.15s ease;
}
.form-row textarea{min-height:120px}
.form-row input:focus,.form-row textarea:focus{
  border-color:rgba(53,100,182,.55);
  box-shadow:0 0 0 4px rgba(53,100,182,.12);
}

/* =========================
   PRODUCT / UPLOADER (KEEP CLEAN)
   ========================= */
.product-form-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
.product-form .col{background:transparent}
.product-form .aside-panel{background:#fff;border:1px solid rgba(15,23,42,.10);padding:16px;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,.06)}
.two-col-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.image-input{display:flex;flex-direction:column;gap:10px}
.thumb{width:100%;height:160px;border-radius:12px;border:1px dashed rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;color:#94a3b8;overflow:hidden;background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.other-images-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.other-thumb{width:100%;padding-top:70%;background:#fff;border-radius:12px;border:1px dashed rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;font-size:28px;color:#94a3b8;background-size:cover;background-position:center}
.muted{color:var(--muted);font-size:13px}

@media(max-width:980px){
  .product-form-grid{grid-template-columns:1fr}
  .other-images-grid{grid-template-columns:repeat(4,1fr)}
}

.dashed-uploader{
  border:1px dashed rgba(53,100,182,.35);
  border-radius:16px;
  padding:18px;
  background:rgba(14,165,233,.06);
}
.dashed-uploader.dragover{
  background:rgba(181,50,88,.06);
  border-color:rgba(181,50,88,.45);
}
.dashed-inner{display:flex;align-items:center;justify-content:center;min-height:160px}
.upload-area{display:flex;flex-direction:column;align-items:center;gap:14px}
.feature-preview{
  width:100%;
  height:160px;
  border-radius:14px;
  background:#fff;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.gallery-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.gallery-thumb{
  width:78px;height:78px;
  border-radius:12px;
  background:#fff;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 20px rgba(2,6,23,.06);
  transition:.15s ease;
}
.gallery-thumb:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(2,6,23,.12);border-color:rgba(181,50,88,.28)}
@media(max-width:600px){.gallery-thumb{width:64px;height:64px}}

.form-row .error{color:#b91c1c;margin-top:6px;font-size:13px;font-weight:800}

/* =========================
   CONTACT INFO CARDS (FIX OLD OVERRIDE)
   IMPORTANT: this removes your OLD purple icon block
   ========================= */
.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:28px 0 18px;
}
.info-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 16px 34px rgba(31,42,68,.08);
  transition:.15s ease;
  position:relative;
  overflow:hidden;
}
.info-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(520px 220px at 15% 20%, rgba(53,100,182,.16), transparent 60%),
    radial-gradient(520px 220px at 85% 25%, rgba(181,50,88,.14), transparent 60%);
  pointer-events:none;
}
.info-card > *{position:relative;z-index:1}
.info-card:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(31,42,68,.12)}

/* ICON — pastel blue + pastel pink like your reference */
.info-icon{
  width:54px;height:54px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cfe7ff,#ffd6df);
  border:1px solid rgba(181,50,88,.18);
  box-shadow:0 10px 22px rgba(181,50,88,.18), inset 0 1px 0 rgba(255,255,255,.9);
  flex:0 0 54px;
}
.info-icon svg{
  width:22px;height:22px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
.info-icon svg path{fill:#fff !important}

.info-title{font-weight:900;font-size:13px;letter-spacing:.2px;color:var(--muted);margin-top:2px}
.info-value{margin-top:6px;font-weight:900;font-size:15px;color:var(--ink);line-height:1.35;word-break:break-word}

@media(max-width:900px){
  .info-grid{grid-template-columns:1fr}
}