/**
 * Pure Ayurveda theme – colors and design from pureayurveda-demo-placeholder
 * Applied project-wide. Expands theme only; no functional changes.
 */

/* Header from top edge: remove body top padding (overrides style.css padding-top: 56px) */
body {
  padding-top: 0 !important;
}

/* Header and footer logo size on small screens */
@media (max-width: 991px) {
  .ayur-menu-logo img,
  .ayur-footer-logo img {
    max-width: 18vw !important;
    height: auto;
  }
}

/* Ensure Font Awesome 6 icons display (override conflicting font from demo/other CSS) */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}
.fas, .fa-solid { font-weight: 900 !important; }
.far, .fa-regular { font-weight: 400 !important; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* ---------- Pure Ayurveda CSS variables ---------- */
:root {
  --ayur-primary-color: #CD8973;
  --ayur-white-color: #ffffff;
  --ayur-primary-light: #D6CDCA;
  --ayur-banheading-color: #222222;
  --ayur-heading-color: #000;
  --ayur-para-color: #797979;
  --ayur-text-color: #ABABAB;
  --ayur-testpara-bgcolor: #FCF9F8;
  --ayur-border-color: #FFEBE4;
  --ayur-borderbox-color: #F0F0F0;
  --ayur-checkbox-label-color: #e0e7ef;
  --ayur-formtext-color: #DBD1D9;
  --ayur-footer-bg: #220F08;
  --ayur-footertext-color: #E4D4CF;
  --ayur-primary-lightcolor: #F6F1ED;
}

/* Map project variables to Pure Ayurveda theme */
:root {
  --primary-color: var(--ayur-primary-color);
  --dark-color: var(--ayur-footer-bg);
  --light-bg: var(--ayur-primary-lightcolor);
  --white: var(--ayur-white-color);
  --text-dark: var(--ayur-heading-color);
  --text-light: var(--ayur-para-color);
  --border-color: var(--ayur-border-color);
  --success: var(--ayur-primary-color);
  --COLOR_LIGHT: var(--ayur-primary-lightcolor);
}

/* ---------- Typography (Archivo + Inter) ---------- */
body {
  font-family: "Archivo", sans-serif;
  background-color: #FDFFFF;
  color: var(--ayur-heading-color);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Archivo", sans-serif;
  color: var(--ayur-heading-color);
}

p, ul {
  font-family: "Inter", sans-serif;
  color: var(--ayur-para-color);
}

a {
  color: var(--ayur-banheading-color);
}

a:hover {
  color: var(--ayur-primary-color);
}

/* ---------- Buttons (Ayur style) ---------- */
.btn-primary,
.ayur-btn,
button.ayur-btn,
input.ayur-btn {
  min-height: 45px;
  border-radius: 22px;
  background-color: var(--ayur-primary-color);
  border: 1px solid #f2efec;
  color: var(--ayur-white-color);
  font-size: 16px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.ayur-btn:hover {
  background-color: var(--ayur-banheading-color);
  color: var(--ayur-white-color);
  border-color: var(--ayur-banheading-color);
}

.btn-success {
  background-color: var(--ayur-primary-color);
  border-color: var(--ayur-primary-color);
}

.btn-success:hover {
  background-color: var(--ayur-banheading-color);
  border-color: var(--ayur-banheading-color);
}

/* ---------- Bold & dark: text boxes and labels ---------- */
.form-control, input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.form-label, label {
  font-weight: bold !important;
  color: #1a1a1a !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  font-weight: bold;
  color: #444 !important;
}

/* ---------- Form controls ---------- */
.form-control,
input:not([type="checkbox"]):not([type="radio"]),
select {
  height: 45px !important;
  background-color: var(--ayur-white-color);
  border-radius: 10px;
  border: 1px solid var(--ayur-border-color);
  color: #1a1a1a !important;
  font-weight: bold !important;
}

.form-control:focus {
  box-shadow: none;
  border-color: var(--ayur-primary-color);
}

textarea.form-control {
  min-height: 120px;
  border-radius: 10px;
  border: 1px solid var(--ayur-border-color);
  padding: 12px 16px;
}

/* ---------- Cards ---------- */
.card {
  border-radius: 10px;
  border: 1px solid var(--ayur-border-color);
  box-shadow: 2px 4px 22px 0px rgba(0, 0, 0, 0.04);
}

.card-header {
  background-color: var(--ayur-primary-lightcolor);
  border-bottom: 1px solid var(--ayur-border-color);
  font-family: "Archivo", sans-serif;
  font-weight: 500;
}

/* ---------- Navbar / sidebar (theme colors) ---------- */
.navbar {
  background-color: var(--ayur-white-color) !important;
  box-shadow: 2px 4px 22px 0px rgba(0, 0, 0, 0.04);
}

.navbar-brand,
.nav-link {
  color: var(--ayur-banheading-color) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--ayur-primary-color) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: var(--ayur-footertext-color) !important;
}

.navbar-dark {
  background-color: var(--ayur-footer-bg) !important;
}

/* ---------- Sidebar (admin/user panel) ---------- */
.sidebar {
  background-color: var(--ayur-footer-bg) !important;
}

.sidebar .nav-link {
  color: var(--ayur-footertext-color) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: var(--ayur-white-color) !important;
  background-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Tables ---------- */
.table thead th {
  background-color: var(--ayur-primary-lightcolor);
  color: var(--ayur-heading-color);
  font-family: "Archivo", sans-serif;
  border-color: var(--ayur-border-color);
}

.table-bordered td,
.table-bordered th {
  border-color: var(--ayur-border-color);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: #dddddd;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--ayur-primary-color);
}

/* ---------- Alerts / badges ---------- */
.alert-success {
  background-color: var(--ayur-primary-lightcolor);
  border-color: var(--ayur-border-color);
  color: var(--ayur-heading-color);
}

.badge.bg-primary,
.badge.bg-success {
  background-color: var(--ayur-primary-color) !important;
}

/* ---------- Footer ---------- */
footer,
.ayur-footer {
  background-color: var(--ayur-footer-bg);
  color: var(--ayur-footertext-color);
}

footer a,
.ayur-footer a {
  color: var(--ayur-footertext-color);
}

footer a:hover,
.ayur-footer a:hover {
  color: var(--ayur-primary-light);
}

/* Banner: keep side leaves and slider arrows visible (match Pure Ayurveda reference) */
.ayur-banner-section {
  overflow: visible;
}
.ayur-banner-slider-sec {
  overflow: visible;
}
/* Re-show banner slider arrows so it slides on click (demo hides at 766px and 575px) */
@media (max-width: 766px) {
  .ayur-banner-slider > .swiper-button-prev,
  .ayur-banner-slider .swiper-button-next {
    display: flex !important;
  }
}
@media (max-width: 575px) {
  .ayur-banner-slider > .swiper-button-prev,
  .ayur-banner-slider .swiper-button-next {
    display: flex !important;
  }
}

/* Care slider: always show left/right arrows (not clipped, not hidden) */
.ayur-care-slider-wrapper {
  overflow: visible;
}
.ayur-care-slider-sec {
  overflow: visible;
  position: relative;
}
/* Force arrows visible at all breakpoints (demo hides at 575px; -32px gets clipped by body overflow) */
.ayur-care-slider-sec .swiper-button-prev,
.ayur-care-slider-sec .swiper-button-next {
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* Position inside visible area so they aren't clipped by body overflow-x: hidden */
.ayur-care-slider-sec > .swiper-button-prev {
  left: 10px;
}
.ayur-care-slider-sec > .swiper-button-next {
  right: 10px;
}
@media (max-width: 575px) {
  .ayur-care-slider-sec .swiper-button-prev,
  .ayur-care-slider-sec .swiper-button-next {
    display: flex !important;
  }
  .ayur-care-slider-sec > .swiper-button-prev {
    left: 5px;
  }
  .ayur-care-slider-sec > .swiper-button-next {
    right: 5px;
  }
}