/* Pot Shop Maps – specials panel */

/* container */
.psm-tabs         { display:flex; gap:0.5rem; margin-bottom:0.5rem; }
.psm-tab          { padding:.35rem .9rem; border:1px solid #ccc; border-radius:4px;
                    font-size:.9rem; cursor:pointer; user-select:none; }
.psm-tab.active   { background:#065E36; color:#fff; border-color:#065E36; }
.psm-tabs button.active { background:#065E36; color:#fff; }
.psm-panel      { display:none; }
.psm-panel.show { display:block; }
.psm-deal { background:#fafafa; }

/* panel bodies */
.psm-panel        { display:none; }
.psm-panel.show   { display:block; }

/* specials grid (placeholder) */
#psm-specials     { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
                    gap:0.75rem; margin-top:0.75rem; }
.psm-deal         { padding:.6rem; border:1px solid #eee; border-radius:6px;
                    box-shadow:0 1px 2px rgba(0,0,0,.06); font-size:.85rem; }
    
/* ── Load More button ── */
#psm-load-more {
  background-color: #065E36;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  font-weight: 600;
}
#psm-load-more:hover:not(:disabled) {
  background-color: #054a2b;
}
#psm-load-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
      
/* remove any big padding/margin on the loading container */
#psm-loading {
  padding: 0 !important;
  margin: 1em auto !important;
}

/* size the spinner & animate */
#psm-loading.svg,
#psm-loading svg {
  display: block;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Dark-mode variables ───────────────────────────────── */
:root {
  --psm-bg: #ffffff;
  --psm-text: #000000;
  --psm-panel-bg: #f9f9f9;
  --psm-accent: #065E36;
}

body.dark-mode {
  --psm-bg: #121212;
  --psm-text: #e0e0e0;
  --psm-panel-bg: #1f1f1f;
}

/* ─── Apply base colors ─────────────────────────────────— */
body {
  background-color: var(--psm-bg);
  color: var(--psm-text);
}

/* panels and lists */
.psm-wrapper,
.psm-panel,
#psm-places-list li {
  background-color: var(--psm-panel-bg);
}

/* preserve your existing accent color variable usage */
.psm-tabs button.active,
.psm-pill.active,
#psm-load-more {
  background-color: var(--psm-accent);
  color: #fff;
}

/* ─── Dark toggle button ─────────────────────────────── */
#psm-dark-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--psm-accent);
  color: #fff;
  border: none;
  padding: 0.5em;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: 1.2em;
}
 
.psm-wrapper,
.psm-wrapper * {
  color: #ff0000 !important;
}
 
/* ─── Dark-mode overrides ─── */
.psm-wrapper.dark-mode {
  /* if you want a dark background behind the whole widget */
  background: #111;
}

/* make the location <input> text (and placeholder) black */
.psm-wrapper.dark-mode #psm-location,
.psm-wrapper.dark-mode #psm-location::placeholder {
  color: #000;
}

/* make the tab buttons’ text black */
.psm-wrapper.dark-mode .psm-tabs button {
  color: #000;
}

/* make the “Dispensaries” header text black */
.psm-wrapper.dark-mode h3 {
  color: #000;
}
 
/* ─── Dark-mode toggle button: light-mode appearance ─── */
#psm-dark-toggle {
  /* make it a white pill with red text and border */
  background: #fff !important;
  color: #e22 !important;            /* your red */
  border: 2px solid #e22 !important;
  border-radius: 4px;
  padding: 0.5em 0.75em;
  font-weight: bold;
  cursor: pointer;
}

/* remove any default half-black background on focus/active */
#psm-dark-toggle:active,
#psm-dark-toggle:focus {
  outline: none;
  box-shadow: none;
}

/* ─── Dark-mode: override toggle styling ─── */
.psm-wrapper.dark-mode #psm-dark-toggle {
  /* keep the same red/white treatment but swap bg for dark gray if you like */
  background: #222 !important;
  color: #e22 !important;
  border-color: #e22 !important;
}

/* ─── Adjust primary “active” green to #39fb2c ─── */

/* Active pill (5/10/25 mi) & Search button background */
.psm-pill.active,
#psm-search-form button[type="submit"] {
  background-color: #39fb2c !important;
}

/* Load More button */
#psm-load-more {
  background-color: #39fb2c !important;
}

/* And if you have any other elements using the old green: */
.psm-wrapper .bg-\[\\#065E36\] {
  background-color: #39fb2c !important;
}

/* ─── Match active buttons/tabs to globe-icon green ─── */
.psm-tabs button.active,
.psm-pill.active,
#psm-search-form button[type="submit"],
#psm-load-specials {
  background-color: #39fb2c !important;
  border-color:     #39fb2c !important;
}