:root{
  --gsmsp-box-bg:#eaf6ff;
  --gsmsp-text:#0b1220;
  --gsmsp-border-color:#9ecfff;
  --gsmsp-border-style:dotted;
  --gsmsp-border-width:2px;
  --gsmsp-radius:12px;
  --gsmsp-padding:14px;
  --gsmsp-align:center;

  --gsmsp-btn-bg:#ff7a00;
  --gsmsp-btn-text:#fff;
  --gsmsp-btn-radius:999px;
  --gsmsp-btn-padding:12px 14px;

  --gsmsp-icon-size:18px;
  --gsmsp-shadow: none;
}

/* Box */
.gsmsp-box{
  margin:14px 0;
  padding:var(--gsmsp-padding);
  border-radius:var(--gsmsp-radius);
  background:var(--gsmsp-box-bg);
  color:var(--gsmsp-text);
  border:var(--gsmsp-border-width) var(--gsmsp-border-style) var(--gsmsp-border-color);
  box-shadow:var(--gsmsp-shadow);
  text-align:var(--gsmsp-align);
}
.gsmsp-head{
  font-weight:800;
  font-size:16px;
  margin-bottom:4px;
}
.gsmsp-sub{
  font-size:13px;
  opacity:.9;
  margin-bottom:12px;
}

/* Grid */
.gsmsp-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(var(--cols-desktop,1), minmax(0,1fr));
  justify-items:center;
  align-items:center;
}
@media (max-width:1024px){
  .gsmsp-grid{ grid-template-columns: repeat(var(--cols-tablet,1), minmax(0,1fr)); }
}
@media (max-width:768px){
  .gsmsp-grid{ grid-template-columns: repeat(var(--cols-mobile,1), minmax(0,1fr)); }
}

/* Button */
.gsmsp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:var(--gsmsp-btn-padding);
  color:var(--gsmsp-btn-text);
  background:var(--gsmsp-btn-bg);
  border-radius:var(--gsmsp-btn-radius);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  min-height:44px;
  width:100%;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-align:center;
}
.gsmsp-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.18); filter:saturate(1.05); }
.gsmsp-btn .gsmsp-ic{ width:var(--gsmsp-icon-size); height:var(--gsmsp-icon-size); display:inline-block; color:#fff; }
.gsmsp-btn svg{ width:100%; height:100%; display:block; }
.gsmsp-btn-label{ display:inline; } /* always visible on all devices */

/* Guest modal */
.gsmsp-guest{ position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; }
.gsmsp-guest[hidden]{ display:none; }
.gsmsp-guest-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.gsmsp-guest-panel{
  position:relative; background:#fff; color:#111; border-radius:14px; padding:18px; width:92%; max-width:520px; box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.gsmsp-guest-panel h3{ margin:0 0 8px; color:#0b5ea8; font-weight:800; }
.gsmsp-guest-panel p{ margin:0 0 12px; }
.gsmsp-guest-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.gsmsp-guest-btn{ display:inline-block; padding:10px 14px; border-radius:999px; color:#fff; text-decoration:none; font-weight:700; }
.gsmsp-guest-btn.login{ background:#0ea5e9; } 
.gsmsp-guest-btn.register{ background:#10b981; } 
.gsmsp-guest-btn.more{ background:#6b7280; } 
.gsmsp-guest-btn.custom{ background:#ef4444; }
.gsmsp-guest-close{ position:absolute; right:10px; top:6px; font-size:22px; border:0; background:transparent; cursor:pointer; }
