/* Pharmsend Unified Design System — All-In-One Salon Style Reference */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* Colors */
  --color-inkwell-black: #17150e;
  --color-cloud-white: #ffffff;
  --color-porcelain-gray: #f0f7f6;
  --color-obsidian-black: #000000;
  --color-silver-mist: #e2e2e2;
  --color-brand-blue: #0d79f2;
  --color-brand-blue-dark: #0a66d1;
  --color-brand-blue-gradient: linear-gradient(180deg, #0d79f2, #0a66d1);
  --color-genius-yellow: #cccc25;
  --color-genius-yellow-gradient: linear-gradient(rgb(204, 204, 37), rgb(202, 205, 120));
  --color-sky-violet: #9fa6ff;
  --color-sky-violet-gradient: linear-gradient(rgb(159, 166, 255), rgb(179, 186, 232));

  /* Functional Theme Mapping */
  --color-primary: var(--color-brand-blue);
  --color-primary-dark: var(--color-brand-blue-dark);
  --color-primary-light: var(--color-porcelain-gray);
  --color-secondary: var(--color-sky-violet);
  --color-secondary-light: var(--color-porcelain-gray);
  --color-background: var(--color-cloud-white);
  --color-surface: var(--color-cloud-white);
  --color-text-primary: var(--color-inkwell-black);
  --color-text-secondary: var(--color-smoke-gray); /* note: smoke-gray maps to inkwell-black at 70% opacity */

  /* Typography — Font Families */
  --font-basel-grotesk-book: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-basel-classic-book: 'Playfair Display', Georgia, serif;

  /* Border Radius */
  --radius-nav: 40px;
  --radius-cards: 8px;
  --radius-badges: 8px;
  --radius-buttons: 1440px;
  --radius-interactiveelements: 8px;
}

/* Base resets & typography */
body {
  font-family: var(--font-basel-grotesk-book) !important;
  background-color: var(--color-cloud-white) !important;
  background-image: none !important;
  color: var(--color-inkwell-black) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-basel-grotesk-book) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}

/* Editorial display serif headings */
.editorial-display {
  font-family: var(--font-basel-classic-book) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.9 !important;
}

.technical-label {
  font-family: var(--font-basel-grotesk-book) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Core Layout Page Shell */
.page-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

/* Clean Editorial Full-Width Header */
.topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--color-silver-mist) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 12px 0;
}

.nav {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 !important;
  border-radius: 0px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--color-inkwell-black) !important;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-inkwell-black) !important;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.brand-mark img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-cards) !important;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-inkwell-black) !important;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a {
  padding: 8px 16px;
  border-radius: var(--radius-nav) !important;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--color-inkwell-black) !important;
}

.nav-links a:hover, .nav-links a.active {
  background: var(--color-porcelain-gray) !important;
  color: var(--color-obsidian-black) !important;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button & Interactive Elements Styling — rectangular brand CTA shape */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-cards) !important;
  font-family: var(--font-basel-grotesk-book);
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-0.5px);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-cards) !important;
  background: var(--color-brand-blue-gradient) !important;
  background-color: var(--color-brand-blue) !important;
  color: var(--color-cloud-white) !important;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(13, 121, 242, 0.18);
}

.btn-secondary {
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-cards) !important;
  background: var(--color-cloud-white) !important;
  color: var(--color-inkwell-black) !important;
  border: 1px solid var(--color-silver-mist) !important;
  font-size: 14px;
  font-weight: 500;
}

.btn-plain {
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--radius-cards) !important;
  background: transparent !important;
  color: var(--color-inkwell-black) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Informational Badges */
.badge-dark {
  background-color: var(--color-inkwell-black) !important;
  color: var(--color-cloud-white) !important;
  border-radius: var(--radius-badges) !important;
  padding: 4px 10px;
  font-size: 12px;
}

.badge-light {
  background-color: var(--color-porcelain-gray) !important;
  color: var(--color-inkwell-black) !important;
  border-radius: var(--radius-badges) !important;
  padding: 4px 10px;
  font-size: 12px;
}

/* Light Porcelain Gray Section Elements */
.card-porcelain {
  background-color: var(--color-porcelain-gray) !important;
  color: var(--color-inkwell-black) !important;
  border-radius: var(--radius-cards) !important;
  padding: 20px;
  border: 1px solid var(--color-silver-mist);
}

.card-sky-violet {
  background-color: var(--color-sky-violet) !important;
  color: var(--color-inkwell-black) !important;
  border-radius: var(--radius-cards) !important;
  padding: 20px;
}

/* Clean Muted Porcelain Footer */
.footer {
  padding: 64px 0 48px;
  background-color: var(--color-porcelain-gray) !important;
  color: var(--color-inkwell-black) !important;
  border-top: 1px solid var(--color-silver-mist);
}

.footer-inner {
  border-radius: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-inkwell-black) !important;
  padding: 0 !important;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}

.footer p {
  margin-top: 12px;
  color: var(--color-inkwell-black);
  opacity: 0.7;
  font-size: 14px;
  line-height: 1.6;
}

.footer .brand-mark {
  color: var(--color-inkwell-black) !important;
}

.footer-summary {
  max-width: 24rem;
  margin-top: 14px;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.footer-column-title {
  margin: 0 0 16px;
  color: var(--color-inkwell-black) !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  display: grid;
  gap: 12px;
}

.footer-links a {
  width: fit-content;
  color: var(--color-inkwell-black) !important;
  opacity: 0.8;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.2s ease;
  text-decoration: none;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--color-brand-blue) !important;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-link {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-buttons) !important;
  border: 1px solid var(--color-silver-mist) !important;
  background: var(--color-cloud-white) !important;
  color: var(--color-inkwell-black) !important;
  font-size: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.social-link:hover {
  background: var(--color-porcelain-gray) !important;
  border-color: var(--color-genius-yellow) !important;
  color: var(--color-genius-yellow) !important;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--color-silver-mist) !important;
  color: var(--color-inkwell-black) !important;
  opacity: 0.7;
  font-size: 12px;
}

.footer-bottom a {
  color: var(--color-inkwell-black) !important;
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: var(--color-genius-yellow) !important;
}

/* Brand-native surface helpers */
.brand-card {
  background: var(--color-cloud-white) !important;
  border: 1px solid var(--color-silver-mist) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brand-radius {
  border-radius: var(--radius-cards) !important;
}

.brand-no-shadow,
.drop-brand-no-shadow {
  box-shadow: none !important;
  filter: none !important;
}

.brand-no-blur {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brand-icon-ligature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================
   ROBUST TAILWIND STYLING OVERRIDES
   ========================================== */

/* Overwrite common roundings while keeping CTAs rectangular and brand-consistent */
.rounded-3xl, .rounded-2xl, .rounded-xl, .brand-radius {
  border-radius: var(--radius-cards) !important;
}

.rounded-lg, .rounded-md, .rounded {
  border-radius: var(--radius-cards) !important;
}

.rounded-full, [class*="rounded-t-3xl"], [class*="rounded-b-3xl"], [class*="rounded-l-3xl"], [class*="rounded-r-3xl"] {
  border-radius: var(--radius-buttons) !important;
}

/* Override background colors of material light panels and body tags */
.bg-\[\#faf9fe\], .bg-slate-50, .bg-slate-100, .bg-background, .bg-surface {
  background-color: var(--color-cloud-white) !important;
  background-image: none !important;
}

.bg-white {
  background-color: var(--color-cloud-white) !important;
  border-color: var(--color-silver-mist) !important;
}

/* Inputs, Textareas, Selects Pill styling */
input, select, [type="text"], [type="email"], [type="password"], [type="tel"], [type="number"], [type="search"] {
  border-radius: var(--radius-interactiveelements) !important;
  border: 1px solid var(--color-silver-mist) !important;
  font-family: var(--font-basel-grotesk-book) !important;
  background-color: var(--color-cloud-white) !important;
  transition: all 0.2s ease !important;
}

textarea {
  border-radius: var(--radius-cards) !important;
  border: 1px solid var(--color-silver-mist) !important;
  font-family: var(--font-basel-grotesk-book) !important;
  background-color: var(--color-cloud-white) !important;
  transition: all 0.2s ease !important;
}

/* Override focused rings/highlights globally to match pill shape and brand color */
input:focus, select:focus, textarea:focus,
[type="text"]:focus, [type="email"]:focus, [type="password"]:focus, [type="tel"]:focus, [type="number"]:focus, [type="search"]:focus,
[class*="focus:ring"]:focus, [class*="focus:border"]:focus {
  border-color: var(--color-brand-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(13, 121, 242, 0.24) !important;
}

/* Ensure any element acting as a search bar container uses the rectangular brand shape */
.brand-card:has(input[type="text"]),
.brand-card:has(input[type="search"]),
.hero-form,
.search-container {
  border-radius: var(--radius-interactiveelements) !important;
  background: var(--color-porcelain-gray) !important;
  border: 1px solid var(--color-silver-mist) !important;
  box-shadow: none !important;
  padding: 6px 8px !important;
}

.brand-card:has(input[type="text"]) input,
.brand-card:has(input[type="search"]) input,
.search-container input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-card:has(input[type="text"]) button,
.brand-card:has(input[type="search"]) button,
.search-container button {
  border-radius: var(--radius-cards) !important;
}

button.btn,
a.btn,
button[class*="btn-"],
a[class*="btn-"],
button[class*="rounded-full"],
a[class*="rounded-full"],
button[class*="rounded-[1440px]"],
a[class*="rounded-[1440px]"],
button[class*="bg-primary"],
a[class*="bg-primary"],
button[class*="bg-secondary"],
a[class*="bg-secondary"],
button[class*="bg-[#0058bc]"],
a[class*="bg-[#0058bc]"],
button[class*="bg-[#0d79f2]"],
a[class*="bg-[#0d79f2]"],
button[class*="bg-[#cccc25]"],
a[class*="bg-[#cccc25]"],
button[class*="bg-surface-container"],
a[class*="bg-surface-container"],
.registration-cta,
.support-send-button {
  border-radius: var(--radius-cards) !important;
}

/* Primary buttons override */
.bg-primary, .bg-\[\#0058bc\], .bg-\[\#0d79f2\], .bg-\[\#cccc25\], .bg-blue-600 {
  background: var(--color-brand-blue-gradient) !important;
  background-color: var(--color-brand-blue) !important;
  color: var(--color-cloud-white) !important;
}

.text-primary, .text-\[\#0058bc\], .text-\[\#0d79f2\], .text-blue-600 {
  color: var(--color-brand-blue) !important;
}

.border-primary, .border-\[\#0058bc\], .border-\[\#0d79f2\] {
  border-color: var(--color-brand-blue) !important;
}

/* Secondary badges / container highlights mapping */
.bg-secondary-container {
  background-color: var(--color-porcelain-gray) !important;
}

.text-on-secondary-container {
  color: var(--color-inkwell-black) !important;
}

.bg-tertiary-container {
  background-color: var(--color-sky-violet) !important;
}

.bg-error-container {
  background-color: var(--color-sky-violet) !important;
}

/* Shadows reduction - ABSOLUTELY ZERO SHADOWS */
.brand-no-shadow,
.drop-brand-no-shadow,
.shadow {
  box-shadow: none !important;
}

/* Responsive grid overrides and padding rules */
@media (max-width: 900px) {
  .nav {
    border-radius: var(--radius-nav) !important;
  }
  .nav-links {
    display: none !important;
  }
  .btn-plain {
    display: none !important;
  }
  .mobile-short {
    position: relative !important;
    box-sizing: border-box !important;
    flex: 0 0 88px !important;
    font-size: 0 !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-short::after {
    content: "Search" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 42px !important;
    font-weight: 600 !important;
    color: var(--color-cloud-white) !important;
  }
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ==========================================
   SITEWIDE MOBILE RESPONSIVENESS FOUNDATION
   ========================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  min-width: 0;
}

@media (max-width: 767px) {
  :root {
    --mobile-page-x: 16px;
  }

  body {
    min-width: 0 !important;
  }

  .page-shell {
    width: min(100% - 20px, 1200px) !important;
  }

  .topbar {
    padding: 8px 0 !important;
  }

  .nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 52px !important;
    gap: 8px !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
  }

  .brand-mark,
  .pharmsend-brand {
    gap: 8px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .brand-mark img,
  .pharmsend-brand-logo {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
  }

  .brand-mark span,
  .pharmsend-brand-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nav-actions {
    gap: 6px !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    justify-self: end !important;
  }

  .nav-actions .btn,
  .nav-actions button {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .nav-actions .mobile-short {
    flex-basis: 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    padding: 0 !important;
  }

  main {
    width: 100% !important;
  }

  main[class*="px-margin-mobile"],
  .container,
  [class*="px-margin-mobile"] {
    padding-left: var(--mobile-page-x) !important;
    padding-right: var(--mobile-page-x) !important;
  }

  section,
  article,
  aside,
  form,
  .brand-card,
  .brand-radius,
  .brand-no-shadow,
  .brand-no-shadow,
  .card-porcelain,
  .card-sky-violet {
    max-width: 100% !important;
  }

  [class*="p-8"],
  [class*="p-10"],
  [class*="p-12"],
  [class*="p-lg"],
  [class*="p-xl"] {
    padding: 20px !important;
  }

  [class*="py-xl"],
  [class*="py-\\[120px\\]"],
  [class*="py-20"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  [class*="gap-xl"],
  [class*="gap-lg"] {
    gap: 20px !important;
  }

  h1,
  .text-display-lg,
  .font-display-lg,
  [class*="text-display"],
  [class*="text-headline-lg"] {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
  }

  h2,
  .text-headline-md,
  [class*="text-headline-md"] {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.14 !important;
  }

  p,
  li,
  .text-body-lg,
  .text-body-md,
  [class*="text-body"] {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .btn,
  button,
  a[role="button"] {
    min-height: 44px !important;
  }

  .flex[class*="sm:flex-row"],
  .flex[class*="md:flex-row"],
  .flex[class*="lg:flex-row"] {
    min-width: 0 !important;
  }

  .grid,
  [class*="grid-cols"],
  [class*="lg:grid-cols"],
  [class*="md:grid-cols"] {
    min-width: 0 !important;
  }

  .grid > *,
  .flex > * {
    min-width: 0;
  }

  .overflow-x-auto,
  .custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .overflow-x-auto::-webkit-scrollbar,
  .custom-scrollbar::-webkit-scrollbar {
    display: none;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important;
  }

  .footer {
    padding: 40px 0 32px !important;
    margin-top: 48px !important;
  }

  .footer-main {
    gap: 28px !important;
  }

  .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-links {
    gap: 10px !important;
  }

  .footer-bottom {
    margin-top: 32px !important;
    padding-top: 18px !important;
  }

  .social-link {
    width: 40px !important;
    height: 40px !important;
  }

  #hero-map,
  #search-map,
  #map {
    min-height: 280px !important;
  }

  #map {
    height: 48vh !important;
    max-height: 420px !important;
  }

  .leaflet-container {
    font: inherit !important;
  }

  .support-page {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: block !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  .support-page main {
    min-height: 100svh !important;
    border-radius: 0 !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.support-page) nav.fixed.bottom-0 {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  main.overflow-hidden,
  .overflow-hidden {
    overflow-x: hidden !important;
  }

  [class*="min-h-\\[calc\\(100vh"] {
    min-height: auto !important;
  }
}

@media (max-width: 479px) {
  .page-shell {
    width: min(100% - 16px, 1200px) !important;
  }

  .brand-mark,
  .pharmsend-brand {
    max-width: 100% !important;
  }

  .nav-actions {
    max-width: none !important;
  }

  .nav-actions .btn,
  .nav-actions button {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .nav-actions .mobile-short {
    flex-basis: 84px !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }

  [class*="p-6"],
  [class*="p-md"] {
    padding: 16px !important;
  }

  h1,
  .text-display-lg,
  .font-display-lg,
  [class*="text-display"],
  [class*="text-headline-lg"] {
    font-size: clamp(28px, 10vw, 36px) !important;
  }

  .footer {
    padding-bottom: 28px !important;
  }
}