/*
  ============================================================================
  BarkBone storefront — custom theme
  ============================================================================

  COLOR SYSTEM (matches the BeeFree page palette)
    --main           #52847b   Brand teal (links, primary, accents)
    --teal-light     #c6dbd3   Light teal companion (hover/secondary)
    --brown          #4b3d2a   Dark brown (section backgrounds)
    --cream          #e0dcd3   Cream (text on dark sections, dividers)
    --gold           #f2af4a   Warm gold (stars, badges, counters)
    --neutral        #bbbbbb   Neutral gray
    --white          #ffffff
    --black          #000000
    --danger         #dc3545   Reserved for error/destructive states

  To re-skin: change the variable above; everything downstream updates.
  Avoid editing component blocks directly unless you need a one-off.

  ----------------------------------------------------------------------------
  NOTES ON !important
  ----------------------------------------------------------------------------
  Every rule below uses !important because the storefront platform injects
  competing styles we need to win against. This is deliberate. If you add
  new rules, follow the same pattern OR you'll silently lose the cascade.
*/

@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&family=Quicksand:wght@400;500;700&display=swap');

:root {
  /* Brand palette */
  --main: #52847b !important;
  --teal-light: #c6dbd3 !important;
  --brown: #4b3d2a !important;
  --cream: #e0dcd3 !important;
  --gold: #f2af4a !important;
  --neutral: #bbbbbb !important;
  --white: #ffffff !important;
  --black: #000000 !important;
  --danger: #dc3545 !important;

  /* RGB triplet of --main, for rgba() focus shadows */
  --main-rgb: 82, 132, 123;

  /* Buttons */
  --btn-primary: var(--main) !important;
  --btn-secondary: var(--main) !important;
  --btn-light: var(--main) !important;
  --btn-cart: var(--teal-light) !important;
  --btn-danger: var(--danger) !important;

  --btn-primary-hover: var(--teal-light) !important;
  --btn-outline-primary-hover: var(--teal-light) !important;
  --btn-primary-focus: var(--teal-light) !important;
  --btn-outline-primary-focus: var(--teal-light) !important;

  --btn-secondary-hover: var(--teal-light) !important;
  --btn-outline-secondary-hover: var(--teal-light) !important;
  --btn-secondary-focus: var(--teal-light) !important;
  --btn-outline-secondary-focus: var(--teal-light) !important;

  --btn-light-hover: var(--teal-light) !important;
  --btn-cart-hover: var(--teal-light) !important;

  --btn-danger-hover: #c82333 !important;
  --btn-outline-danger-hover: var(--danger) !important;
  --btn-danger-focus: rgba(220, 53, 69, 0.5) !important;
  --btn-outline-danger-focus: rgba(220, 53, 69, 0.5) !important;

  --btn-disabled: #dcdcdc !important;
}

/* ====== FONTS ======
   Set the base font once on body (no !important needed at this level —
   the cascade flows down). Headings override. This replaces the old
   universal-selector approach which forced font-family on every element
   on every render. */

body {
  font-family: 'Quicksand', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Averia Serif Libre', serif !important;
}
/* ====== END OF FONTS ====== */


/* ====== HEADER ====== */
#main-header {
  background-color: var(--main) !important;
}

#main-header a,
#main-header div {
  color: var(--white) !important;
}

#main-header .navbar-dropdown a,
#main-header .navbar-dropdown div {
  color: var(--black) !important;
}

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

#main-header .category-header:hover {
  border-bottom: 1px solid var(--main) !important;
  color: var(--main) !important;
}

#main-header img,
#main-header img#close-button-img,
#main-header #header-sidebar img,
#categories-content img,
img#header-logo {
  filter: invert(0%) !important;
}

#main-header #wishlist-counter,
#main-header #cart-counter {
  color: var(--black) !important;
  border: 1px solid var(--main) !important;
  background-color: var(--gold) !important;
}

.language-option-active {
  background-color: #173da4 !important;
}
/* ====== END OF HEADER ====== */


/* ====== FOOTER ====== */
#main-footer {
  background-color: var(--main) !important;
}

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

#footer-nav-and-social {
  display: none;
}
/* ====== END OF FOOTER ====== */


/* ====== PROFILE ====== */
.sidebar-tab.active-tab {
  background-color: var(--main) !important;
  color: var(--white) !important;
}
/* ====== END OF PROFILE ====== */


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

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

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

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

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

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

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

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

/* Pagination arrow color.
   This filter chain recolors a black source SVG/PNG to approximately
   #52847b. It is an approximation produced from the brand teal's HSL
   (hue 169, sat 23%, lum 42%). If it looks visibly off after deploy,
   either fine-tune it at https://codepen.io/sosuke/pen/Pjoqqp or
   (preferred) replace the <img> with an inline <svg> and set
   `fill: var(--main)` directly. */
.button-light img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(15%) saturate(900%)
    hue-rotate(125deg) brightness(95%) contrast(85%) !important;
}

.button-primary:hover,
.button-primary:active {
  color: var(--black) !important;
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}

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

.button-secondary:hover,
.button-secondary:active {
  color: var(--black) !important;
  background-color: var(--btn-secondary-hover) !important;
  border-color: var(--btn-secondary-hover) !important;
}

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

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

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

.button-cart:hover {
  color: var(--main) !important;
  background-color: var(--btn-cart-hover) !important;
  border-color: var(--btn-cart-hover) !important;
}

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

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

.button-primary:focus,
.button-secondary:focus,
.button-light:focus,
.button-light-active:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--btn-primary-focus) !important;
}

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

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

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

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

.button:disabled,
.button:disabled:hover {
  color: var(--black) !important;
  background-color: var(--btn-disabled) !important;
  border-color: var(--btn-disabled) !important;
}
/* ====== END OF BUTTONS ====== */


/* ====== LOADERS ====== */
.loader--primary {
  border-color: var(--white) var(--main) var(--main) !important;
}

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

.loader--danger {
  border-color: var(--danger) var(--white) var(--white) !important;
}
/* ====== END OF LOADERS ====== */


/* ====== INPUTS ====== */
.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(--main) !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(--main) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}

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

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--main-rgb), 0.25) !important;
}

.custom-checkbox-container input:checked ~ .custom-checkbox-checkmark {
  background-color: var(--main) !important;
}
/* ====== END OF INPUTS ====== */


/* ====== SLIDER ====== */
.slider-image-wrapper--active {
  border-color: var(--main) !important;
}
/* ====== END OF SLIDER ====== */


/* ====== CATALOG ====== */
#catalog-mobile-search {
  background-color: var(--main) !important;
}
/* ====== END OF CATALOG ====== */


/* ====== MOBILE FOOTER ====== */
.active-footer-button {
  background-color: var(--main) !important;
  color: var(--white) !important;
}
/* ====== END OF MOBILE FOOTER ====== */


/* ====== BOOKING ====== */
.selected-service-item,
.selected-provider-item {
  border: 1px solid var(--main);
}

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

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

.booking-complete-header {
  background-color: var(--main) !important;
  color: var(--white) !important;
}
/* ====== END OF BOOKING ====== */


/* ====== BEEFREE ====== */
.bee-row-content p {
  font-weight: unset;
  color: unset;
}

.bee-row-1 {
  background-position: center;
}
/* ====== END OF BEEFREE ====== */


/* ====== HEADER LOGO (desktop sizing) ====== */
@media only screen and (min-width: 1200px) {
  #header-logo {
    max-width: 250px;
    height: 60px;
  }
}


/* ====== FAQ ====== */
.faq {
  text-align: left;
  margin: 30px;
}

.faq details {
  margin-bottom: 1.3rem;
}

.faq summary {
  font-weight: 600;
  cursor: pointer;
}

.faq p {
  margin: 0.5rem 0 0;
}

#faq-heading {
  color: var(--main) !important;
  padding-bottom: 30px !important;
}
/* ====== END OF FAQ ====== */