:root {
  /* FranPOS theme variables retained for platform components */
  --main: #514590 !important;
  --white: #ffffff !important;
  --black: #2f2d39 !important;
  --yellow: #d1e000 !important;
  --danger: #dc3545 !important;

  --btn-primary: #514590 !important;
  --btn-secondary: #514590 !important;
  --btn-danger: #dc3545 !important;
  --btn-cart: #e5e1f6 !important;

  --btn-primary-hover: #40366f !important;
  --btn-outline-primary-hover: #514590 !important;
  --btn-primary-focus: rgba(81, 69, 144, 0.28) !important;
  --btn-outline-primary-focus: rgba(81, 69, 144, 0.28) !important;

  --btn-secondary-hover: #40366f !important;
  --btn-outline-secondary-hover: #514590 !important;
  --btn-secondary-focus: rgba(81, 69, 144, 0.28) !important;
  --btn-outline-secondary-focus: rgba(81, 69, 144, 0.28) !important;

  --btn-danger-hover: #b92735 !important;
  --btn-outline-danger-hover: #dc3545 !important;
  --btn-danger-focus: rgba(220, 53, 69, 0.25) !important;
  --btn-outline-danger-focus: rgba(220, 53, 69, 0.25) !important;

  --btn-cart-hover: #dddbf9 !important;
  --btn-disabled: #dcdcdc !important;

  /* DOGPerfect design tokens for custom pages and future components */
  --dp-purple: #514590;
  --dp-purple-dark: #40366f;
  --dp-lime: #d1e000;
  --dp-gray: #757982;
  --dp-ink: #2f2d39;
  --dp-white: #ffffff;
  --dp-lavender: #f5f3fc;
  --dp-lavender-strong: #e5e1f6;
  --dp-border: #dedbea;
  --dp-focus: rgba(81, 69, 144, 0.28);
  --dp-shadow-sm: 0 8px 24px rgba(63, 53, 111, 0.1);
  --dp-shadow-md: 0 18px 50px rgba(63, 53, 111, 0.14);
  --dp-radius-sm: 12px;
  --dp-radius-md: 20px;
  --dp-radius-lg: 30px;
  --dp-font-sans: "Montserrat", Arial, sans-serif;
}

/* ===== TYPOGRAPHY =====
   Montserrat is loaded by the Custom Script Head field.
   Explicit element selectors override FranPOS's built-in Quicksand/Poppins rules
   without using a universal * selector that could break SVGs or icon fonts.
*/

html,
body,
body a,
body button,
body input,
body select,
body textarea,
body option,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body li,
body div,
body label,
body legend,
body summary,
body small,
body strong,
body em,
body address {
  font-family: var(--dp-font-sans) !important;
}

body {
  color: var(--dp-ink);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body p,
body li {
  line-height: 1.6;
}

body button,
body input,
body select,
body textarea {
  line-height: 1.3;
}

/* Custom DOGPerfect landing pages receive deterministic typography even when
   embedded inside a FranPOS/BEE Custom HTML block. */
.dp-delivery,
.dp-delivery * {
  font-family: var(--dp-font-sans) !important;
}

.dp-delivery {
  line-height: 1.65 !important;
}

.dp-delivery p,
.dp-delivery li {
  line-height: 1.65 !important;
}

.dp-delivery h1,
.dp-delivery h2,
.dp-delivery h3,
.dp-delivery h4,
.dp-delivery h5,
.dp-delivery h6 {
  line-height: 1.12 !important;
}

/* ===== HEADER ===== */

#main-header {
  background-color: var(--dp-white) !important;
  box-shadow: 0 4px 20px rgba(63, 53, 111, 0.08);
}

#top-banner {
  background-color: var(--dp-purple) !important;
}

#main-header a,
#main-header div,
#main-header .navbar-dropdown a,
#main-header .navbar-dropdown div,
#main-header .dropdown-tab:hover,
#main-header .selected-tab,
#main-header .selected-tab .right-arrow-img,
#main-header .category-header {
  color: var(--dp-purple) !important;
}

#main-header a {
  font-weight: 700;
}

#main-header .category-header:hover {
  border-bottom-color: var(--dp-purple) !important;
  color: var(--dp-purple) !important;
}

#main-header img,
#main-header .burger-menu {
  filter: brightness(0) saturate(100%) invert(31%) sepia(13%) saturate(2638%) hue-rotate(213deg) brightness(92%) contrast(83%) !important;
}

#main-header #header-logo {
  filter: none !important;
}

#main-header #wishlist-counter,
#main-header #cart-counter {
  background-color: var(--dp-lime) !important;
  border: 1px solid var(--dp-purple) !important;
  color: var(--dp-ink) !important;
  font-weight: 800;
}

/* ===== FOOTER ===== */

#main-footer {
  background-color: var(--dp-purple) !important;
}

#main-footer,
#main-footer a,
#main-footer div,
#main-footer p,
#main-footer span,
#main-footer li {
  color: var(--dp-white) !important;
}

#main-footer a:hover,
#main-footer a:focus-visible {
  color: var(--dp-lime) !important;
}

/* ===== PROFILE ===== */

.sidebar-tab.active-tab {
  background-color: var(--dp-purple) !important;
  color: var(--dp-white) !important;
}

/* ===== BUTTONS ===== */

.button-primary,
.button-outline-primary,
.button-secondary,
.button-outline-secondary,
.button-danger,
.button-outline-danger,
.button-cart {
  align-items: center;
  border-radius: 999px !important;
  display: inline-flex;
  font-weight: 800 !important;
  justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  text-decoration: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.button-primary {
  background-color: var(--btn-primary) !important;
  border: 1px solid var(--btn-primary) !important;
  color: var(--dp-white) !important;
}

.button-outline-primary {
  background-color: var(--dp-white) !important;
  border: 1px solid var(--btn-primary) !important;
  color: var(--btn-primary) !important;
}

.button-secondary {
  background-color: var(--btn-secondary) !important;
  border: 1px solid var(--btn-secondary) !important;
  color: var(--dp-white) !important;
}

.button-outline-secondary {
  background-color: var(--dp-white) !important;
  border: 1px solid var(--btn-secondary) !important;
  color: var(--btn-secondary) !important;
}

.button-danger {
  background-color: var(--btn-danger) !important;
  border-color: var(--btn-danger) !important;
  color: var(--dp-white) !important;
}

.button-outline-danger {
  background-color: var(--dp-white) !important;
  border-color: var(--btn-danger) !important;
  color: var(--btn-danger) !important;
}

.button-cart {
  background-color: var(--dp-white) !important;
  border: 2px solid var(--btn-cart) !important;
  color: var(--dp-purple) !important;
}

.button-primary:hover,
.button-primary:active {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--dp-white) !important;
  transform: translateY(-1px);
}

.button-outline-primary:hover,
.button-outline-primary:active {
  background-color: var(--btn-outline-primary-hover) !important;
  border-color: var(--btn-outline-primary-hover) !important;
  color: var(--dp-white) !important;
  transform: translateY(-1px);
}

.button-secondary:hover,
.button-secondary:active {
  background-color: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-hover) !important;
  color: var(--dp-white) !important;
  transform: translateY(-1px);
}

.button-outline-secondary:hover,
.button-outline-secondary:active {
  background-color: var(--btn-outline-secondary-hover) !important;
  border-color: var(--btn-outline-secondary-hover) !important;
  color: var(--dp-white) !important;
  transform: translateY(-1px);
}

.button-danger:hover,
.button-danger:active {
  background-color: var(--btn-danger-hover) !important;
  border-color: var(--btn-danger-hover) !important;
  color: var(--dp-white) !important;
}

.button-outline-danger:hover,
.button-outline-danger:active {
  background-color: var(--btn-outline-danger-hover) !important;
  border-color: var(--btn-outline-danger-hover) !important;
  color: var(--dp-white) !important;
}

.button-cart:hover,
.button-cart:active {
  background-color: var(--btn-cart-hover) !important;
  border-color: var(--btn-cart-hover) !important;
  color: var(--dp-purple) !important;
}

.button-primary:focus,
.button-primary:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--btn-primary-focus) !important;
  outline: none;
}

.button-outline-primary:focus,
.button-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--btn-outline-primary-focus) !important;
  outline: none;
}

.button-secondary:focus,
.button-secondary:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--btn-secondary-focus) !important;
  outline: none;
}

.button-outline-secondary:focus,
.button-outline-secondary:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--btn-outline-secondary-focus) !important;
  outline: none;
}

.button-danger:focus,
.button-danger:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--btn-danger-focus) !important;
  outline: none;
}

.button-outline-danger:focus,
.button-outline-danger:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--btn-outline-danger-focus) !important;
  outline: none;
}

.button:disabled,
.button:disabled:hover,
button:disabled,
button:disabled:hover {
  background-color: var(--btn-disabled) !important;
  border-color: var(--btn-disabled) !important;
  color: var(--dp-ink) !important;
  cursor: not-allowed;
  transform: none;
}

/* ===== FORMS AND INPUTS ===== */

body input,
body select,
body textarea {
  accent-color: var(--dp-purple);
}

body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: 2px solid var(--dp-purple);
  outline-offset: 2px;
}

.custom-input-container:hover .custom-input-label,
.custom-select-container:hover .custom-select-label,
.custom-text-area-container:hover .custom-text-area-label,
.custom-input-label--focus,
.custom-select-label--focus,
.custom-text-area-label--focus {
  color: var(--dp-purple) !important;
}

.custom-input-container:hover .custom-input-border,
.custom-select-container:hover .custom-select-border,
.custom-text-area-container:hover .custom-text-area-border,
.custom-input-border--focus,
.custom-select-border--focus,
.custom-text-area-border--focus {
  border-color: var(--dp-purple) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox-container input:checked ~ .custom-checkbox-checkmark {
  background-color: var(--dp-purple) !important;
  border-color: var(--dp-purple) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--dp-purple) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem var(--dp-focus) !important;
}

/* ===== LOADERS ===== */

.loader--primary {
  border-color: var(--dp-white) var(--dp-purple) var(--dp-purple) !important;
}

.loader--light {
  border-color: var(--dp-purple) var(--dp-white) var(--dp-white) !important;
}

.loader--danger {
  border-color: var(--danger) var(--dp-white) var(--dp-white) !important;
}

/* ===== PRODUCT AND CATALOG UI ===== */

.slider-image-wrapper--active {
  border-color: var(--dp-purple) !important;
}

#catalog-mobile-search {
  background-color: var(--dp-purple) !important;
}

.active-footer-button {
  background-color: var(--dp-purple) !important;
  color: var(--dp-white) !important;
}

/* ===== BOOKING ===== */

.selected-service-item,
.selected-service-item-text,
.selected-provider-item,
.selected-provider-item-text {
  background-color: var(--dp-purple) !important;
  color: var(--dp-white) !important;
}

.class-event {
  border-color: var(--dp-purple) !important;
  color: var(--dp-purple) !important;
}

.class-event:hover,
.class-selected {
  background-color: var(--dp-purple) !important;
  border-color: var(--dp-purple) !important;
  color: var(--dp-white) !important;
}

.booking-complete-header {
  background-color: var(--dp-purple) !important;
  color: var(--dp-white) !important;
}

/* ===== TEMPORARY LEGACY PAGE COMPATIBILITY =====
   Retain until the Locations page is rebuilt with .dp-* components.
*/

.location-button {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}

.location-button:hover,
.location-button:focus-visible {
  background-color: var(--dp-lime) !important;
  color: var(--dp-purple) !important;
}

.shop-button {
  text-decoration: none !important;
}

/* ===== MOTION PREFERENCE ===== */

@media (prefers-reduced-motion: reduce) {
  .button-primary,
  .button-outline-primary,
  .button-secondary,
  .button-outline-secondary,
  .button-danger,
  .button-outline-danger,
  .button-cart {
    transition: none;
  }
}

/* Full-bleed custom landing pages */
.bee-row-content:has(.dp-full-width) {
  max-width: none !important;
  width: 100% !important;
}