/* put your own styles to customize and override the theme */

/* ============================================================
   MSN Solution — Public site color system
   Same theme variables and switcher as the dashboard, so
   picking a theme feels consistent across the whole site.
   ============================================================ */

:root,
html[data-theme="ocean"] {
  --msn-primary: #145da0;
  --msn-primary-dark: #0d3b66;
  --msn-secondary: #1fb6a4;
  --msn-accent: #ffb703;
  --msn-danger: #e5383b;
  --msn-grad-start: #145da0;
  --msn-grad-end: #1fb6a4;
  --msn-bg-soft: #eef6fb;
}
html[data-theme="sunset"] {
  --msn-primary: #e8590c;
  --msn-primary-dark: #a8340a;
  --msn-secondary: #f9c74f;
  --msn-accent: #d00000;
  --msn-danger: #9d0208;
  --msn-grad-start: #e8590c;
  --msn-grad-end: #f9c74f;
  --msn-bg-soft: #fff3e6;
}
html[data-theme="emerald"] {
  --msn-primary: #0e8f4f;
  --msn-primary-dark: #085c33;
  --msn-secondary: #74c69d;
  --msn-accent: #ffd60a;
  --msn-danger: #d00000;
  --msn-grad-start: #0e8f4f;
  --msn-grad-end: #74c69d;
  --msn-bg-soft: #e9f9f0;
}
html[data-theme="grape"] {
  --msn-primary: #7048e8;
  --msn-primary-dark: #4c2889;
  --msn-secondary: #b197fc;
  --msn-accent: #ff9f1c;
  --msn-danger: #e5383b;
  --msn-grad-start: #7048e8;
  --msn-grad-end: #b197fc;
  --msn-bg-soft: #f2edfd;
}
html[data-theme="ruby"] {
  --msn-primary: #c9184a;
  --msn-primary-dark: #800f2f;
  --msn-secondary: #ff758f;
  --msn-accent: #ffca3a;
  --msn-danger: #6a040f;
  --msn-grad-start: #c9184a;
  --msn-grad-end: #ff758f;
  --msn-bg-soft: #ffe5ec;
}
html[data-theme="midnight"] {
  --msn-primary: #1b2a4a;
  --msn-primary-dark: #0b1220;
  --msn-secondary: #3a6ea5;
  --msn-accent: #ffb703;
  --msn-danger: #ef233c;
  --msn-grad-start: #1b2a4a;
  --msn-grad-end: #3a6ea5;
  --msn-bg-soft: #eaeef5;
}

:root {
  --msn-radius: 12px;
  --msn-shadow: 0 4px 16px rgba(13, 59, 102, 0.10);
  --msn-shadow-hover: 0 10px 28px rgba(13, 59, 102, 0.16);
}

body { scroll-behavior: smooth; }

/* Buttons */
.btn-primary {
  background-color: var(--msn-primary);
  border-color: var(--msn-primary);
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--msn-primary-dark);
  border-color: var(--msn-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--msn-shadow);
}
.btn-success { background-color: var(--msn-secondary); border-color: var(--msn-secondary); }
.btn-warning { background-color: var(--msn-accent); border-color: var(--msn-accent); color: #3a2600; }
.btn-outline-primary { color: var(--msn-primary); border-color: var(--msn-primary); }
.btn-outline-primary:hover { background-color: var(--msn-primary); border-color: var(--msn-primary); }

/* Cards / feature blocks */
.card {
  border: none;
  border-top: 3px solid var(--msn-primary);
  border-radius: var(--msn-radius);
  box-shadow: var(--msn-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  box-shadow: var(--msn-shadow-hover);
  transform: translateY(-3px);
}

/* Gradient hero / banner sections — apply this class on your hero div */
.msn-hero,
.hero-section,
section.hero {
  background: linear-gradient(135deg, var(--msn-grad-start), var(--msn-grad-end));
  color: #fff;
}

/* Links */
a { transition: color 0.15s ease; }
a:not(.btn):not(.nav-link):hover { color: var(--msn-primary-dark); }

/* Badges / labels used on pricing or plan sections */
.badge-primary, .bg-primary { background-color: var(--msn-primary) !important; }
.badge-success, .bg-success { background-color: var(--msn-secondary) !important; }
.badge-warning, .bg-warning { background-color: var(--msn-accent) !important; color: #3a2600 !important; }

/* Form focus states */
.form-control:focus {
  border-color: var(--msn-primary);
  box-shadow: 0 0 0 3px rgba(20, 93, 160, 0.15);
}

/* ============================================================
   Color theme switcher widget (shared with dashboard)
   ============================================================ */
.msn-theme-switcher { position: fixed; right: 20px; bottom: 20px; z-index: 1080; }
.msn-theme-toggle {
  width: 48px; height: 48px; border-radius: 50%; border: none; color: #fff;
  background: linear-gradient(135deg, var(--msn-grad-start), var(--msn-grad-end));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-size: 1.1rem; cursor: pointer; transition: transform 0.15s ease;
}
.msn-theme-toggle:hover { transform: scale(1.08) rotate(15deg); }
.msn-theme-panel {
  position: absolute; right: 0; bottom: 58px; width: 220px;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 14px; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.msn-theme-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.msn-theme-panel-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; color: #333; }
.msn-theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.msn-theme-swatch {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease;
}
.msn-theme-swatch:hover { transform: scale(1.1); }
.msn-theme-swatch.is-active { border-color: #333; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Service showcase tiles (homepage) ---- */
.pub-service-tile {
  display: block;
  text-align: center;
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem 1rem;
  text-decoration: none;
  color: #333;
  box-shadow: var(--msn-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
  border-top: 3px solid transparent;
}
.pub-service-tile:hover {
  box-shadow: var(--msn-shadow-hover);
  transform: translateY(-4px);
  color: var(--msn-primary-dark);
  border-top-color: var(--msn-primary);
}
.pub-service-tile i {
  font-size: 1.9rem;
  background: linear-gradient(135deg, var(--msn-grad-start), var(--msn-grad-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.6rem;
  display: inline-block;
}
.pub-service-tile .pub-service-name {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
}
.pub-category-title {
  display: inline-block;
  padding: 0.4em 1.2em;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--msn-grad-start), var(--msn-grad-end));
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}