/* ==========================================================================
   Provider Pro — Store theme
   Drop-in stylesheet for the store module markup (#storeTable, #storeItems,
   #leftNav, #cart, jsTree category list).

   Install: upload this file, then add to your site's <head> AFTER the
   platform's own stylesheets so these rules win:
     <link rel="stylesheet" href="/provider-pro-store.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   1. Brand tokens
   -------------------------------------------------------------------------- */
:root {
  --pp-bg:         #08080b;
  --pp-surface:    #111117;
  --pp-surface-2:  #16161d;
  --pp-line:       #22222c;
  --pp-line-soft:  #1b1b24;

  --pp-pink:       #F0197A;
  --pp-pink-hi:    #ff4b9c;
  --pp-purple:     #7A2FF7;
  --pp-blue:       #2F6BFF;
  --pp-teal:       #17C3B2;
  --pp-gold:       #F5B93B;

  --pp-text:       #ffffff;
  --pp-text-mid:   #a6a6b2;
  --pp-text-dim:   #6f6f7c;

  --pp-radius:     16px;
  --pp-radius-pill: 999px;
  --pp-font:       'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Store shell
   -------------------------------------------------------------------------- */
#storeTable {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: var(--pp-font);
  font-size: 15px;
  line-height: 1.55;
}

#storeTable,
#storeTable * {
  box-sizing: border-box;
}

/* left / right columns */
#store_column_left {
  width: 240px;
  min-width: 200px;
  border-right: 1px solid var(--pp-line) !important;
  padding: 28px 24px 40px !important;
  vertical-align: top !important;
  background: var(--pp-bg);
}

#store_column_right {
  padding: 28px 34px 40px 34px !important;
  vertical-align: top !important;
  background: var(--pp-bg);
  width: auto;
}

/* keep the cart button and the heading from colliding */
#storeItems { clear: none; }

/* --------------------------------------------------------------------------
   3. Left nav — categories
   -------------------------------------------------------------------------- */
#leftNav {
  font-family: var(--pp-font);
}

#storeCategoriesLabel {
  margin-top: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em;
  color: var(--pp-pink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-line);
  margin-bottom: 6px;
}

a.storeCategoryNav,
#leftNav a {
  display: block;
  padding: 11px 14px;
  margin: 4px 0;
  border-radius: 10px;
  color: #c9c9d2;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

a.storeCategoryNav,
#leftNav a { text-decoration: none !important; }

a.storeCategoryNav:hover,
#leftNav a:hover {
  background: var(--pp-surface);
  color: #fff;
  transform: translateX(3px);
}

/* active / selected category */
a.storeCategoryNav.pp-active,
li.storeCategoryNav.jstree-clicked > a,
#leftNav a.selected {
  background: linear-gradient(135deg, rgba(240,25,122,.18), rgba(122,47,247,.14));
  color: #fff;
  box-shadow: inset 2px 0 0 var(--pp-pink);
}

/* collapse the stray <br> spacing the platform emits */
#leftNav br {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Search box
   -------------------------------------------------------------------------- */
#searchStoreItems {
  margin-top: 14px !important;
  display: none;
  gap: 8px;
  align-items: center;
}

#searchStoreItems.pp-open {
  display: flex;
}

#searchStoreField {
  width: 100% !important;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  color: #fff;
  font-family: var(--pp-font);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 16px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#searchStoreField::placeholder { color: var(--pp-text-dim); }

#searchStoreField:focus {
  border-color: var(--pp-pink);
  box-shadow: 0 0 0 3px rgba(240,25,122,.18);
}

#searchStoreItems > a {
  flex: none;
  display: inline-flex;
  align-items: center;
  background: var(--pp-pink);
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--pp-radius-pill);
  text-decoration: none;
  transition: background .18s ease;
}

#searchStoreItems > a:hover { background: var(--pp-pink-hi); }

/* --------------------------------------------------------------------------
   5. jsTree category tree — restyled to match
   -------------------------------------------------------------------------- */
#treeLeft {
  margin-top: 14px !important;
  background: transparent;
}

#treeLeft .jstree-anchor {
  display: block;
  height: auto;
  line-height: 1.5;
  padding: 10px 14px;
  margin: 3px 0;
  border-radius: 10px;
  color: #c9c9d2;
  font-family: var(--pp-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

#treeLeft .jstree-anchor:hover,
#treeLeft .jstree-hovered {
  background: var(--pp-surface) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#treeLeft .jstree-clicked {
  background: linear-gradient(135deg, rgba(240,25,122,.2), rgba(122,47,247,.14)) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--pp-pink) !important;
}

#treeLeft .jstree-icon,
#treeLeft .jstree-themeicon,
#treeLeft .jstree-ocl { display: none !important; }

#treeLeft .jstree-children { padding-left: 14px; }

/* --------------------------------------------------------------------------
   6. View cart button
   -------------------------------------------------------------------------- */
#viewCartButton {
  float: right;
  margin: 0 0 20px 0 !important;
}

#viewCartButton a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--pp-pink) !important;
  color: #fff !important;
  font-family: var(--pp-font);
  font-weight: 800 !important;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 14px 26px !important;
  margin: 0 !important;
  border-radius: var(--pp-radius-pill) !important;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(240,25,122,.28);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

#viewCartButton a:hover {
  background: var(--pp-pink-hi) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(240,25,122,.36);
}

#viewCartAmount {
  font-weight: 800;
  background: rgba(0,0,0,.28);
  border-radius: var(--pp-radius-pill);
  padding: 2px 10px;
  font-size: 13px;
}

#viewCartAmount:empty { display: none; }

/* --------------------------------------------------------------------------
   7. Cart drop panel
   -------------------------------------------------------------------------- */
#cart {
  width: 100% !important;
  background-color: var(--pp-surface) !important;
  border: 1px solid var(--pp-line) !important;
  border-radius: var(--pp-radius) !important;
  padding: 24px !important;
  color: var(--pp-text);
  font-family: var(--pp-font);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

#cart a { color: var(--pp-pink); text-decoration: none; font-weight: 700; }
#cart a:hover { color: var(--pp-pink-hi); }

#cart table { width: 100%; border-collapse: collapse; }
#cart th {
  text-align: left;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
  color: var(--pp-text-dim);
  text-transform: uppercase;
  padding: 12px 10px;
  border-bottom: 1px solid var(--pp-line);
}
#cart td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--pp-line-soft);
  color: #d7d7de;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   8. Product grid — #storeItems
   -------------------------------------------------------------------------- */
/* The platform emits products as a FLAT flow (heading, price, qty, button,
   <hr>, repeat) rather than one wrapper per product — so this is a full-width
   single column, with each <hr> acting as the divider between products. */
#storeItems {
  min-height: 400px;
  display: block;
  width: 100%;
  max-width: 900px;
  font-family: var(--pp-font);
}

#storeItems > div,
#storeItems > table,
#storeItems .storeItem,
#storeItems .storeItemBox {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  padding: 0;
}

/* page heading — "Viewing Category: General" */
#storeItems h1,
#storeItems h2 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pp-line);
  overflow-wrap: break-word;
}

/* the category name inside that heading renders as a link — kill the blue */
#storeItems h1 a,
#storeItems h2 a,
#storeItems h1 font,
#storeItems h2 font {
  color: var(--pp-pink) !important;
  text-decoration: none !important;
}

/* product name */
#storeItems h3,
#storeItems .storeItemName,
#storeItems b,
#storeItems strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  hyphens: none;
}

#storeItems p {
  color: var(--pp-text-mid);
  font-size: 15px;
  margin: 0 0 14px;
  max-width: 62ch;
}

/* <hr> between products becomes the card divider */
#storeItems hr {
  height: 1px;
  border: none;
  background: var(--pp-line);
  margin: 30px 0;
}

/* product imagery — constrained, not full-bleed */
#storeItems img {
  display: block;
  max-width: 200px;
  height: auto;
  border-radius: 12px;
  margin: 0 0 16px;
  background: var(--pp-surface-2);
}

/* product links */
#storeItems a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: color .18s ease;
}
#storeItems a:hover { color: var(--pp-pink-hi); }

/* price line — the platform prints it as plain text, so target both */
#storeItems .storeItemPrice,
#storeItems .price,
#storeItems .storePrice {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--pp-pink);
  letter-spacing: -.01em;
  margin: 6px 0 18px;
}

/* quantity label + select + button sit on one row */
#storeItems form,
#storeItems .storeItemControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
}

#storeItems select {
  min-width: 72px;
  color: #fff;
}

#storeItems label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-text-dim);
}

/* --------------------------------------------------------------------------
   9. Buttons & inputs inside the store
   -------------------------------------------------------------------------- */

/* the platform hard-codes green on Add to Cart — override it */
#storeItems input[value*="Add to Cart" i],
#storeItems input[value*="Add To Cart" i],
#storeItems a[onclick*="addToCart" i],
#storeItems .addToCart,
#storeItems [class*="addtocart" i] {
  background: var(--pp-pink) !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--pp-radius-pill) !important;
  font-family: var(--pp-font) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 13px 26px !important;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(240,25,122,.25);
  transition: background .18s ease, transform .18s ease;
}

#storeItems input[value*="Add to Cart" i]:hover,
#storeItems a[onclick*="addToCart" i]:hover,
#storeItems .addToCart:hover {
  background: var(--pp-pink-hi) !important;
  transform: translateY(-1px);
}

#storeItems input[type="button"],
#storeItems input[type="submit"],
#storeItems button,
#cart input[type="button"],
#cart input[type="submit"],
#cart button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-pink);
  color: #fff;
  border: none;
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font);
  font-size: 15px;
  font-weight: 800;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

#storeItems input[type="button"]:hover,
#storeItems input[type="submit"]:hover,
#storeItems button:hover,
#cart input[type="button"]:hover,
#cart input[type="submit"]:hover,
#cart button:hover {
  background: var(--pp-pink-hi);
  transform: translateY(-1px);
}

/* secondary / continue-shopping style buttons */
#storeItems .pp-secondary,
#cart .pp-secondary {
  background: transparent;
  border: 1px solid #33333f;
  color: #fff;
}

#storeItems .pp-secondary:hover,
#cart .pp-secondary:hover {
  background: var(--pp-surface-2);
  border-color: #454552;
}

#storeItems input[type="text"],
#storeItems input[type="number"],
#storeItems select,
#storeItems textarea,
#cart input[type="text"],
#cart input[type="number"],
#cart select,
#cart textarea {
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  color: #fff;
  font-family: var(--pp-font);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#storeItems input:focus,
#storeItems select:focus,
#storeItems textarea:focus,
#cart input:focus,
#cart select:focus,
#cart textarea:focus {
  border-color: var(--pp-pink);
  box-shadow: 0 0 0 3px rgba(240,25,122,.18);
}

/* --------------------------------------------------------------------------
   10. Loading spinner (.uil-ring-css) — brand pink
   -------------------------------------------------------------------------- */
.uil-ring-css {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 40px auto;
  background: none !important;
}

.uil-ring-css > div {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid rgba(240,25,122,.18);
  border-top-color: var(--pp-pink);
  box-shadow: none !important;
  animation: pp-spin .8s linear infinite;
}

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

/* --------------------------------------------------------------------------
   11. Responsive — stack the two columns on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  #storeTable,
  #storeTable tbody,
  #storeTable tr { display: block; width: 100%; }

  #store_column_left,
  #store_column_right {
    display: block;
    width: 100% !important;
    border-right: none !important;
    padding: 20px 18px !important;
  }

  #store_column_left {
    border-bottom: 1px solid var(--pp-line) !important;
  }

  #storeItems { max-width: 100%; }

  #storeItems h1,
  #storeItems h2 { font-size: 24px; }

  #storeItems h3 { font-size: 19px; }

  #viewCartButton { float: none; }
  #viewCartButton a { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   12. Optional page chrome — uncomment if the store sits on a white template
        and you want the whole page dark like the landing page.
   -------------------------------------------------------------------------- */
/*
html, body {
  background: var(--pp-bg) !important;
  color: var(--pp-text);
  font-family: var(--pp-font);
}
*/