.cursor-pointer {
  cursor: pointer !important;
}


.rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  overflow: hidden;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  gap: 4px;
}

.rating > input {
  display: none;
}
.rating > label {
  cursor: pointer;
  position: relative;
  width: 28px;
  height: 30px;
}
.rating > label::before {
  position: absolute;
  font-family: bootstrap-icons, sans-serif !important;
  content: "\F586";
  font-size: 28px;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  line-height: 1.2;
  opacity: 0.2;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.rating > input:checked ~ label::before,
.rating > input:checked ~ label ~ label::before {
  opacity: 1;
  color: #fcd93a;
}

.rating > input:not(:checked) ~ label:hover::before,
.rating > input:not(:checked) ~ label:hover ~ label::before {
  opacity: 1;
  color: #fcd93a;
}


.feedback-file {
  cursor: pointer;
  display: block;
  border: 1px dashed var(--border-two);
  background-color: var(--site-bg-dash);
  border-radius: 16px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.feedback-file:hover {
  border-color: var(--color-primary);
}
.feedback-file > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.1;
  padding: 30px 20px;
  background-color: var(--site-bg-dash);
}
.feedback-file > span i {
  font-size: 26px;
  line-height: 26px;
  color: var(--color-primary);
}

.page-content {
  padding: 30px 35px;
  border-radius: 40px;
}

.text-editor-content{
   h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
  }
    ul,ol{
      padding-left: 2rem !important;
    }
    ul, ol, li {
      margin: 0;
      list-style-type: disc !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .page-content {
    padding: 25px;
  }
}
@media (max-width: 767px) {
  .page-content {
    padding: 15px;
  }
}

.otp-expired-message {
  color: var(--color-warning);
  font-size: 18px;
}

.pointer {
  cursor: pointer !important;
}

.note-editor .note-toolbar .note-dropdown-menu,
.note-popover .popover-content .note-dropdown-menu {
  top: 115%;
}

.note-modal {
  z-index: 1070 !important;
}
.note-modal .form-group {
  margin-bottom: 15px;
}

.note-dropdown-menu.dropdown-menu {
  border: 1px solid var(--color-primary-light) !important;
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.note-modal .close {
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  font-size: 20px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
.note-editor .note-editable > ul {
  list-style: disc !important;
  list-style-position: inside !important;
}
.note-editor .note-editable > ul > li,
.note-editor .note-editable > ol > li {
  list-style-type: unset !important;
}

.note-editor .note-editable > ol {
  list-style: decimal !important;
  list-style-position: inside !important;
}

.note-modal .btn.note-btn-primary {
  background-color: var(--color-primary) !important;
}

.note-modal .btn:disabled,
.note-modal fieldset:disabled .btn {
  color: var(--color-primary-text) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  opacity: 1 !important;
}

.note-editor .note-dropdown-menu .dropdown-item:focus,
.note-editor .note-dropdown-menu .dropdown-item:hover {
  color: var(--text-primary) !important;
  background-color: var(--site-bg) !important;
}

.note-editor .note-dropdown-menu .dropdown-item.active,
.note-editor .note-dropdown-menu .dropdown-item:active {
  color: var(--color-primary-text) !important;
  background-color: var(--color-primary) !important;
}

@-webkit-keyframes stretch {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    background-color: #aaa;
  }

  50% {
    background-color: #ccc;
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    background-color: #fff;
  }
}

@keyframes stretch {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    background-color: #aaa;
  }

  50% {
    background-color: #ccc;
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    background-color: #fff;
  }
}

.ai-btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 160px !important;
}

.ai-btn.btn__dots--loading .btn__dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 5px;
}

.ai-btn.btn__dots--loading .btn__dots i {
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: stretch;
          animation-name: stretch;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  border-radius: 100%;
  display: block;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  margin: 0 5px;
}

.ai-btn.btn__dots--loading .btn__dots i:first-child {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  margin: 0;
}

.ai-btn.btn__dots--loading .btn__dots i:last-child {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  margin: 0;
}

.ai-btn i {
  font-weight: normal;
}

.ai-btn .btn__dots {
  display: none;
}

.card-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  isolation: isolate;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.spinner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@-webkit-keyframes lds-roller {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes lds-roller {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.lds-roller {
  position: relative;
  display: inline-block;
  height: 64px;
  width: 64px;
}
.lds-roller div {
  -webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  -webkit-transform-origin: 32px 32px;
      -ms-transform-origin: 32px 32px;
          transform-origin: 32px 32px;
}
.lds-roller div:after {
  position: absolute;
  display: block;
  background: var(--color-primary);
  border-radius: 50%;
  content: " ";
  margin: -3px 0 0 -3px;
  height: 6px;
  width: 6px;
}
.lds-roller div:nth-child(1) {
  -webkit-animation-delay: -0.036s;
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  -webkit-animation-delay: -0.072s;
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  -webkit-animation-delay: -0.108s;
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  -webkit-animation-delay: -0.144s;
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  -webkit-animation-delay: -0.18s;
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  -webkit-animation-delay: -0.216s;
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  -webkit-animation-delay: -0.252s;
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  -webkit-animation-delay: -0.288s;
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}

.image-card  img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}


.image-dropdwon{
  min-width: 100px;
  background-color: var(--color-white) !important;
  padding: 8px 23px 8px 13px !important;
  font-size: 14px !important;
  color: var(--text-secondary);
  height: 38px;
}

.ai-image-card{
  border-radius: 16px;
}

.ai-image-card .card-body{
  padding: 15px !important;
}
.image-content-wrap{
  height: 300px;
  margin-bottom: 15px;
}
.image-content-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-check {
  position: absolute;
  top: 10px;
  right: 10px;
}

.gallery-check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border-radius: 0.25rem;
  cursor: pointer;
}

.gallery-card{
  position: relative;
  overflow: hidden;
}

.gallery-card:hover .gallery-overlay{
  opacity: 1;
}

.gallery-overlay{
  transition: 0.55s ease;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 9;
}


.daterangepicker{
    color: var(--text-secondary) !important;
    background-color: var(--site-bg-dash) !important;
    border: 1px solid var(--border-two) !important;
  }
.daterangepicker .calendar-table {
  background-color: var(--site-bg-dash) !important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: var(--card-bg-dash) !important;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: var(--card-bg-dash) !important;
    color: var(--text-secondary) !important;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    background: var(--card-bg-dash) !important;
    border: 1px solid var(--border-two);
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    color: var(--text-secondary) !important;
    border: solid  var(--text-secondary) !important;
    border-width: 0 2px 2px 0 !important;
}


/* ============================================================
   ZenCard — Organic Modernism 2026 — Global Component Styles
   ============================================================ */

/* --- Header: transparent floating by default, glassmorphism on sticky --- */
/* Do NOT apply background to .header directly — it floats at top:40px with no bg */

/* --- Typography Base --- */
body {
  font-family: var(--font-primary) !important;
  color: var(--text-primary);
  background-color: var(--site-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Display statement */
.display-lg {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Headline guide */
.headline-md {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Labels — premium caption feel */
.label-md,
.section-label,
.badge-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body workhorse */
p, .body-lg {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Primary Button — Hearth Gradient Pill --- */
.i-btn,
.btn--primary,
.cmn-btn,
.btn-primary {
  background: var(--color-primary-gradient) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  padding: 0.75rem 2rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 20px rgba(157, 67, 0, 0.25) !important;
}

.i-btn:hover,
.btn--primary:hover,
.cmn-btn:hover,
.btn-primary:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(157, 67, 0, 0.35) !important;
  color: #fff !important;
}

/* Secondary button — integrated */
.btn--secondary,
.btn-outline-primary {
  background: var(--surface-container-high, #e8e8e6) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  padding: 0.75rem 2rem !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.btn--secondary:hover,
.btn-outline-primary:hover {
  background: var(--surface-container, #eeeeec) !important;
  transform: scale(1.02) !important;
  color: var(--text-primary) !important;
}

/* --- Bento Cards --- */
.card,
.bento-card,
.feature-card,
.plan-card,
.pricing-card {
  background: var(--surface-container-low, #f3f4f3) !important;
  border: none !important;
  border-radius: var(--radius-lg, 24px) !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.card:hover,
.bento-card:hover,
.feature-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Inner card elements — pop of white */
.card .card-body,
.card-inner,
.input-group,
.form-group-inner {
  background: var(--surface-container-lowest, #ffffff) !important;
  border-radius: var(--radius-md, 16px) !important;
  border: none !important;
}

/* --- Input Fields --- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  background: var(--surface-container-low, #f3f4f3) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-md, 16px) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-primary) !important;
  padding: 0.75rem 1.25rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background: var(--surface-container-lowest, #ffffff) !important;
  border-color: rgba(157, 67, 0, 0.40) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.08) !important;
  outline: none !important;
}

/* Form labels — outside field, label-md style */
label,
.form-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: var(--text-secondary) !important;
  margin-bottom: 0.5rem !important;
}

/* --- Selection Chips --- */
.chip,
.filter-chip,
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill) !important;
  padding: 0.375rem 1rem !important;
  font-size: 0.85rem;
  font-weight: 500;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  background: var(--surface-container-high, #e8e8e6);
  color: var(--text-secondary);
}

.chip.active,
.chip--selected,
.filter-chip.active {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

/* --- Section Spacing (No-Line Rule) --- */
.section-divider,
hr {
  display: none !important;
}

section,
.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* --- Ambient Shadows for Floating Elements --- */
.modal .modal-content,
.dropdown-menu,
.popover {
  border: none !important;
  border-radius: var(--radius-lg, 24px) !important;
  box-shadow: 0 40px 80px rgba(26, 28, 28, 0.08) !important;
}

/* --- Surface Background --- */
.bg-surface { background: var(--site-bg) !important; }
.bg-container-low { background: var(--surface-container-low) !important; }
.bg-container { background: var(--surface-container) !important; }
.bg-white-pop { background: var(--surface-container-lowest) !important; }

/* --- Section Titles --- */
.section-title,
.section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

.section-subtitle,
.section__subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
}

/* --- Footer warm dark --- */
.footer-section,
footer {
  background: var(--footer-bg, #1a1c1c) !important;
  color: rgba(249, 249, 248, 0.75);
}

.footer-section a,
footer a {
  color: rgba(249, 249, 248, 0.60);
  transition: color 0.2s ease;
  text-decoration: none;
}

.footer-section a:hover,
footer a:hover {
  color: var(--color-primary-container);
}

/* --- Scrollbar (subtle) --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--site-bg); }
::-webkit-scrollbar-thumb { background: var(--surface-container-high); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }


/* ============================================================
   ZenCard — Hero / Banner Section — Organic Modernism
   ============================================================ */

.banner-section {
  padding: 12px 12px 0 12px !important;
  background: var(--site-bg) !important;
}

/* Bento hero wrapper — warm tonal gradient, large radius, generous padding */
.banner-wrapper {
  background: linear-gradient(135deg,
    var(--surface-container-low, #f3f4f3) 0%,
    rgba(249, 115, 22, 0.06) 60%,
    rgba(157, 67, 0, 0.08) 100%
  ) !important;
  border-radius: var(--radius-xl, 32px) !important;
  padding: 160px 8% 120px !important;
  position: relative;
  overflow: hidden;
}

/* Decorative ambient glow behind the CTA */
.banner-wrapper::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

[data-bs-theme="dark"] .banner-wrapper {
  background: linear-gradient(135deg,
    rgba(30, 24, 18, 0.95) 0%,
    rgba(249, 115, 22, 0.06) 60%,
    rgba(157, 67, 0, 0.10) 100%
  ) !important;
}

/* Hero headline */
.banner-content h1 {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
  margin-bottom: 1.5rem !important;
}

/* Inline vector image in title */
.banner-content h1 img {
  width: 64px !important;
  vertical-align: middle;
}

/* Hero description */
.banner-content > p,
.banner-content p {
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  max-width: 480px;
  margin-bottom: 2.5rem !important;
}

/* CTA primary — hearth gradient pill */
.banner-content .i-btn.btn--dark,
.banner-content .i-btn.btn--lg {
  background: var(--color-primary-gradient) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.875rem 2.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 8px 32px rgba(157, 67, 0, 0.30) !important;
  text-decoration: none !important;
}

.banner-content .i-btn.btn--dark:hover,
.banner-content .i-btn.btn--lg:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 12px 48px rgba(157, 67, 0, 0.40) !important;
}

/* Play button — glassmorphism circle */
.circle-container .circleButton {
  background: rgba(249, 249, 248, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(26, 28, 28, 0.10) !important;
}

.circle-container .circleButton span {
  border: none !important;
}

.circle-container .circleButton span > a {
  color: var(--color-primary) !important;
}

/* Hero image — ambient shadow */
.banner-image img {
  border-radius: var(--radius-lg, 24px) !important;
  box-shadow: 0 40px 80px rgba(26, 28, 28, 0.10) !important;
  width: 100% !important;
  height: auto !important;
}

/* Sponsors strip — hearth gradient background */
.sponsors-area {
  background: var(--color-primary-gradient) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.sponsors-area .vector-right,
.sponsors-area .vector-left {
  color: var(--site-bg) !important;
}

.sponsors-area .swiper-wrapper {
  gap: 0;
}

.sponsors-area .swiper-slide {
  padding: 0 6px !important;
}

.sponsors-area .sponsor-item {
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(26,28,28,0.10);
}

.sponsors-area .sponsor-item img {
  opacity: 1;
  max-height: 48px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.sponsors-area .sponsor-item:hover img {
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 991px) {
  .banner-wrapper {
    padding: 80px 6% 100px !important;
  }
  .banner-content > p {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .banner-wrapper {
    padding: 60px 5% 80px !important;
    border-radius: var(--radius-lg, 24px) !important;
  }
  .banner-section {
    padding: 8px 8px 0 8px !important;
  }
}


/* ============================================================
   ZenCard — Section Titles — Organic Modernism
   ============================================================ */

.section-title-one .subtitle {
  display: inline-block;
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  padding: 0.35rem 1rem !important;
  margin-bottom: 1rem !important;
}

/* Remove the ::after pseudo-element line decoration */
.section-title-one .subtitle::after {
  display: none !important;
}

.section-title-one h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.15 !important;
  color: var(--text-primary) !important;
  margin-bottom: 1rem !important;
}

.section-title-one p {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--text-secondary) !important;
}


/* ============================================================
   ZenCard — Feature Section — Accordion Bento Style
   ============================================================ */

.feature-section {
  background: var(--site-bg) !important;
}

.feature-section .faq-wrap-two {
  background: transparent !important;
}

/* Accordion — no borders, bento approach */
.feature-section .accordion-item,
.faq-wrap-two .accordion-item {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s ease !important;
}

.feature-section .accordion-item:hover,
.faq-wrap-two .accordion-item:hover {
  box-shadow: var(--shadow-md) !important;
}

.feature-section .accordion-button,
.faq-wrap-two .accordion-button {
  background: var(--surface-container-low) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: none !important;
}

/* Neutralize the big orange circle icon from common.css */
.feature-section .accordion-item .accordion-button::after,
.faq-wrap-two .accordion-item .accordion-button::after {
  content: '' !important;
  counter-increment: none !important;
  position: static !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239d4300'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.2s ease !important;
  transform: rotate(-90deg) !important;
  box-shadow: none !important;
}

.feature-section .accordion-button:not(.collapsed)::after,
.faq-wrap-two .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg) !important;
}

/* Hide vertical connecting line between accordion items */
.faq-wrap-two .accordion-item::after {
  display: none !important;
}

.feature-section .accordion-button:not(.collapsed),
.faq-wrap-two .accordion-button:not(.collapsed) {
  background: var(--surface-container-lowest) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.feature-section .accordion-body,
.faq-wrap-two .accordion-body {
  background: var(--surface-container-lowest) !important;
  color: var(--text-secondary) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  padding: 1rem 1.5rem 1.5rem !important;
  border-top: none !important;
}

/* Feature image */
.feature-section .col-lg-7 img {
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 40px 80px rgba(26, 28, 28, 0.09) !important;
  width: 100% !important;
}


/* ============================================================
   ZenCard — Why Us / Choose Cards — Bento Grid
   ============================================================ */

.choose {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius-xl) !important;
  margin: 0 12px !important;
}

.choose-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 2rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.choose-card:hover {
  background: var(--surface-container-lowest) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

/* Even cards — tonal variation instead of primary fill */
.choose-card-wrapper .col-lg-4:nth-child(even) .choose-card {
  background-color: var(--surface-container-low) !important;
  color: var(--text-primary) !important;
}

.choose-card-wrapper .col-lg-4:nth-child(even) .choose-card h4,
.choose-card-wrapper .col-lg-4:nth-child(even) .choose-card p {
  color: var(--text-primary) !important;
}

.choose-card-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.25rem !important;
}

/* Even card icon stays primary-tinted */
.choose-card-wrapper .col-lg-4:nth-child(even) .choose-card-icon {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.choose-card h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.5rem !important;
}

.choose-card p {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}


/* ============================================================
   ZenCard — Pricing / Plans Section — Bento Cards
   ============================================================ */

.pricing-plan {
  background: var(--site-bg) !important;
}

/* Duration tabs — chip style */
.plan-tab {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px !important;
  border: none !important;
  gap: 4px !important;
  display: inline-flex !important;
}

.plan-tab > li a,
.plan-tab > button {
  border-radius: var(--radius-pill) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 1.5rem !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
}

.plan-tab > li a:hover,
.plan-tab > button:hover {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.plan-tab > li a.active,
.plan-tab > button.active,
.plan-tab.glider-tab button.active {
  background: var(--color-primary-gradient) !important;
  color: #fff !important;
}

/* Hide the glider sliding indicator — replaced by CSS active state */
.glider {
  display: none !important;
}

/* Pricing cards */
.pricing-item {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-top: 3px solid rgba(157, 67, 0, 0.18) !important;
  border-radius: var(--radius-xl) !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

.pricing-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-top-color: #f97316 !important;
}

/* Recommended / featured plan */
.pricing-item.style-dark {
  background: linear-gradient(135deg, #1a1c1c 0%, #2e2218 100%) !important;
  color: #fff !important;
}

.pricing-item.style-dark .pricing-header h5,
.pricing-item.style-dark .pricing-header p,
.pricing-item.style-dark .price h3,
.pricing-item.style-dark .body h6,
.pricing-item.style-dark .body ul li {
  color: rgba(249, 249, 248, 0.90) !important;
}

.pricing-item.style-dark .body ul li span {
  background: rgba(249, 115, 22, 0.20) !important;
  color: #c45000 !important;
}

/* Hide decorative shape images — replaced by gradient bg */
.pricing-item .radius-one,
.pricing-item .radius-two {
  display: none !important;
}

/* Plan icon — reset absolute positioning from style.css */
.pricing-item .icon {
  position: static !important;
  inset-inline-end: unset !important;
  top: unset !important;
  width: 52px !important;
  height: 52px !important;
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.5rem !important;
}

.pricing-item.style-dark .icon {
  background: rgba(249, 115, 22, 0.20) !important;
  color: #c45000 !important;
}

/* Recommended badge */
.pricing-item .pricing-header > span {
  background: var(--color-primary-gradient) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.85rem !important;
  display: inline-block !important;
  margin-bottom: 0.75rem !important;
}

.pricing-item .pricing-header h5 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.pricing-item .pricing-header p {
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

/* Price display */
.pricing-item .price h3 {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 !important;
}

.pricing-item .price h3 span {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--text-light) !important;
}

/* Features list */
.pricing-item .body {
  border-top: 1px solid var(--border-one) !important;
  padding-top: 1.25rem !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

.pricing-item .body h6 {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: var(--text-secondary) !important;
  margin-bottom: 0.75rem !important;
}

.pricing-item .body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pricing-item .body ul li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  margin-bottom: 0.6rem !important;
}

.pricing-item .body ul li span {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(157, 67, 0, 0.10) !important;
  color: #c45000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
}

.pricing-item .body ul li span.bg-danger {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #c0392b !important;
}

/* Subscribe CTA inside card — reset absolute from style.css */
.pricing-item > .i-btn.subscribe-plan {
  position: static !important;
  inset-inline-start: unset !important;
  bottom: unset !important;
  width: 100% !important;
  justify-content: center !important;
  transform: none !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-primary-gradient) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.875rem 1.5rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 20px rgba(157, 67, 0, 0.20) !important;
}

.pricing-item:hover > .i-btn.subscribe-plan {
  transform: translateX(0) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(157, 67, 0, 0.35) !important;
}

/* White/outline CTA in plan section header */
.pricing-plan .i-btn.btn--white {
  background: var(--surface-container-high) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  padding: 0.75rem 2rem !important;
  transition: transform 0.2s ease !important;
}

.pricing-plan .i-btn.btn--white:hover {
  transform: scale(1.02) !important;
  background: var(--surface-container) !important;
}


/* ============================================================
   ZenCard — FAQ Section — Bento Accordion
   ============================================================ */

.faq-section {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius-xl) !important;
  margin: 0 12px !important;
  padding-top: 5rem !important;
}

.faq-wrap .accordion-item {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s ease !important;
}

.faq-wrap .accordion-item:hover {
  box-shadow: var(--shadow-md) !important;
}

.faq-wrap .accordion-button {
  background: var(--surface-container-lowest) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 1.1rem 1.5rem !important;
  box-shadow: none !important;
}

.faq-wrap .accordion-button:not(.collapsed) {
  color: var(--color-primary) !important;
  background: var(--surface-container-lowest) !important;
}

/* Neutralize the big orange circle icon from common.css */
.faq-wrap .accordion-item .accordion-button::after {
  content: '' !important;
  position: static !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239d4300'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.2s ease !important;
  transform: rotate(-90deg) !important;
  box-shadow: none !important;
}

.faq-wrap .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg) !important;
}

.faq-wrap .accordion-body {
  background: var(--surface-container-lowest) !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  padding: 0 1.5rem 1.25rem !important;
  border-top: none !important;
}

.faq-wrap .accordion-body p {
  margin: 0 !important;
  color: var(--text-secondary) !important;
}


/* ============================================================
   ZenCard — Testimonials — Warm Review Cards
   ============================================================ */

.reviews {
  background: var(--site-bg) !important;
}

/* Remove decorative shape images */
.review-wrapper .shape-radius-one,
.review-wrapper .shape-radius-two {
  display: none !important;
}

.review-wrapper {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  padding: 2rem !important;
}

.review-card:not(.review-title) {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Quote icon */
.review-card .quote-icon {
  color: var(--color-primary-light) !important;
}

.review-card .quote-icon i {
  font-size: 3rem !important;
  color: var(--color-primary) !important;
  opacity: 0.15;
}

/* Review content */
.review-content {
  padding: 2rem 2rem 2rem 1.5rem !important;
  background: var(--surface-container-lowest) !important;
  min-height: auto !important;
}

.review-content > p {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 1.25rem !important;
  font-style: italic;
}

/* Rating stars */
.review-rating li i {
  color: #f97316 !important;
}

/* Reviewer meta */
.reviewer-meta h6 {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.15rem !important;
}

.reviewer-meta span {
  font-size: 0.8rem !important;
  color: var(--text-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}

/* Review image */
.review-image {
  min-width: 180px;
  max-width: 220px;
}

.review-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}

/* Navigation arrows */
.review-arrow-wrapper {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 1.5rem;
}

.review-button-prev,
.review-button-next {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--surface-container-lowest) !important;
  color: var(--text-primary) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.review-button-prev:hover,
.review-button-next:hover {
  background: var(--color-primary-gradient) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
}

@media (max-width: 768px) {
  .review-image {
    min-width: 100%;
    max-width: 100%;
    height: 220px;
  }
  .review-image img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  .review-content {
    padding: 1.5rem !important;
  }
}


/* ============================================================
   ZenCard — Blog Section — Card Grid
   ============================================================ */

.blog-section,
.latest-blog {
  background: var(--site-bg) !important;
}

/* Blog cards */
.blog-card,
.post-card,
.blog-item {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-card:hover,
.post-card:hover,
.blog-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Blog card image */
.blog-card img,
.blog-item img,
.post-card img {
  border-radius: 0 !important;
  transition: transform 0.4s ease !important;
}

.blog-card:hover img,
.blog-item:hover img {
  transform: scale(1.04) !important;
}

/* Blog card body */
.blog-card .card-body,
.blog-item .content,
.post-content {
  padding: 1.5rem !important;
  background: var(--surface-container-low) !important;
}

/* Blog category tag */
.blog-card .category,
.post-tag,
.blog-tag {
  display: inline-block;
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Blog card title */
.blog-card h3,
.blog-card h4,
.blog-card h5,
.blog-item h3,
.blog-item h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.35 !important;
  margin-bottom: 0.5rem !important;
}

/* Blog read more link */
.blog-card a.read-more,
.blog-item a.read-more {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: gap 0.2s ease;
}

.blog-card a.read-more:hover,
.blog-item a.read-more:hover {
  text-decoration: underline !important;
}


/* ============================================================
   ZenCard — Header & Navbar — Glassmorphism Organic Modernism
   ============================================================ */

/*
 * Structure originale du header (style.css) :
 *   .header { position:fixed; top:40px; padding:0 45px; } — transparent, flottant
 *   .header-left { background:white; border-radius:40px; } — pill logo (desktop)
 *   .sidebar .sidebar-body { background:var(--header-bg); border-radius:40px; } — pill nav (desktop)
 *   .nav-right { border-radius:40px; } — boutons droite
 *   .header.sticky { background:var(--header-bg); top:0; } — fond plein au scroll
 *
 * Règle : NE PAS modifier position/top/padding de .header. Styler uniquement les pills internes.
 */

/* Pills desktop : logo + nav + droite — même traitement glassmorphism */
.header-left,
.sidebar .sidebar-body {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 40px !important;
  border: 1px solid rgba(26, 28, 28, 0.08) !important;
  box-shadow: 0 2px 16px rgba(26, 28, 28, 0.06) !important;
}

@media (min-width: 992px) {
  .nav-right {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 40px !important;
    border: 1px solid rgba(26, 28, 28, 0.08) !important;
    padding: 5px 10px !important;
    box-shadow: 0 2px 16px rgba(26, 28, 28, 0.06) !important;
  }
}

/* Sticky state — fond plein au scroll */
.header.sticky {
  background: rgba(249, 249, 248, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 2px 20px rgba(26, 28, 28, 0.06) !important;
  top: 0 !important;
}

/* Sticky : les pills internes deviennent transparents pour ne pas doubler l'effet */
.header.sticky .header-left,
.header.sticky .sidebar .sidebar-body,
.header.sticky .nav-right {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile : le sidebar-body est le menu complet — toujours opaque même en sticky */
@media (max-width: 991px) {
  .header.sticky .sidebar .sidebar-body {
    background: rgba(249, 249, 248, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 0 !important;
    box-shadow: 2px 0 20px rgba(26, 28, 28, 0.12) !important;
  }
  [data-bs-theme="dark"] .header.sticky .sidebar .sidebar-body {
    background: rgba(20, 18, 16, 0.98) !important;
  }
}

[data-bs-theme="dark"] .header-left,
[data-bs-theme="dark"] .sidebar .sidebar-body,
[data-bs-theme="dark"] .nav-right {
  background: rgba(20, 18, 16, 0.88) !important;
}

[data-bs-theme="dark"] .header.sticky {
  background: rgba(20, 18, 16, 0.92) !important;
}

/* Logo */
.header-logo {
  min-width: 130px !important;
  max-width: 160px !important;
}

/* Nav links */
.sidebar .sidebar-body .menu-list .menu-item .menu-link {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: var(--text-primary) !important;
  padding: 0.5rem 0.85rem !important;
  border-radius: var(--radius-pill) !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
}

.sidebar .sidebar-body .menu-list .menu-item .menu-link:hover,
.sidebar .sidebar-body .menu-list .menu-item .menu-link.active {
  color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
}

/* Hamburger / theme toggle buttons */
.mobile-menu-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--surface-container-low) !important;
  border: none !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.mobile-menu-btn:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

/* Language / currency dropdowns */
.language button,
.currency button {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 0.4rem 0.85rem !important;
  transition: background 0.2s ease !important;
}

.language button:hover,
.currency button:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

/* Dropdown menus */
.header .dropdown-menu,
.language .dropdown-menu,
.currency .dropdown-menu {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 48px rgba(26, 28, 28, 0.10) !important;
  padding: 0.5rem !important;
}

.header .dropdown-menu .dropdown-item {
  border-radius: var(--radius-sm) !important;
  font-size: 0.88rem !important;
  color: var(--text-secondary) !important;
  padding: 0.5rem 0.85rem !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.header .dropdown-menu .dropdown-item:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

/* Login CTA in header */
.nav-right .i-btn.btn--dark {
  background: var(--color-primary-gradient) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.65rem 1.8rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(157, 67, 0, 0.25) !important;
}

.nav-right .i-btn.btn--dark:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 28px rgba(157, 67, 0, 0.35) !important;
}

/* Get Started CTA (sidebar mobile) */
.sidebar-action .i-btn.btn--primary-outline {
  background: var(--color-primary-gradient) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.sidebar-action .i-btn.btn--secondary {
  background: var(--surface-container-high) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Profile dropdown trigger */
.profile-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--surface-container-low) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: background 0.2s ease !important;
}

.profile-btn:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.dropdown-menu-title h6 {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  padding: 0.5rem 0.85rem !important;
  margin: 0 !important;
}

.dropdown-menu-title h6 .user-name {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* Mega menu — bento panel */
.mega-menu-wrapper {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 64px rgba(26, 28, 28, 0.10) !important;
  border: none !important;
  overflow: hidden !important;
}

.mega-menu-wrapper .social-integra h5 {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  color: var(--text-light) !important;
  margin-bottom: 1rem !important;
}

/* Mega menu social integration tabs */
.mega-menu-integra .nav-link.menu-social-item {
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0.75rem 1rem !important;
  transition: background 0.2s ease !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}

.mega-menu-integra .nav-link.menu-social-item:hover,
.mega-menu-integra .nav-link.menu-social-item.active {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.mega-menu-integra .nav-link .content h6 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.mega-menu-integra .nav-link .content p {
  font-size: 0.78rem !important;
  color: var(--text-light) !important;
  margin: 0 !important;
}

/* Mobile sidebar panel (full screen drawer) */
@media (max-width: 991px) {
  .sidebar .sidebar-body {
    background: rgba(249, 249, 248, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  [data-bs-theme="dark"] .sidebar .sidebar-body {
    background: rgba(20, 18, 16, 0.97) !important;
  }
}

/* Sidebar overlay */
.sidebar-overlay {
  background: rgba(26, 28, 28, 0.40) !important;
}

/* Closer button (X) */
.closer-sidebar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--surface-container-low) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--text-primary) !important;
  transition: background 0.2s ease !important;
}

.closer-sidebar:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}


/* Banner image */
.banner-image {
  border-radius: var(--radius-xl, 32px) !important;
  overflow: hidden !important;
}

/* ============================================================
   Section Service — Organic Modernism overrides
   ============================================================ */

/* Masquer le SVG décoratif violet */
.service-wrapper > svg {
  display: none !important;
}

/* Service cards */
.service-item {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius-lg, 24px) !important;
  border: none !important;
  padding: 2rem !important;
  box-shadow: var(--shadow-md) !important;
}

.service-item::before {
  background-color: var(--color-primary) !important;
}

/* Icônes rondes dans les cards service */
.service-type-icon {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
}

.service-type-icon i {
  color: var(--color-primary) !important;
}

/* ============================================================
   ZenCard — About section center icon
   ============================================================ */

.about-card-wrapper .center-icon {
  background: linear-gradient(135deg, #9d4300, #f97316) !important;
  border-radius: 2rem !important;
  box-shadow: 0 20px 60px rgba(157, 67, 0, 0.25) !important;
}

.about-card-wrapper .center-icon svg {
  width: 120px !important;
  height: 120px !important;
}

/* ============================================================
   ZenCard — Inner pages banner + breadcrumb (toutes pages)
   ============================================================ */

.inner-banner-wrapper {
  background: linear-gradient(135deg, #9d4300 0%, #f97316 100%) !important;
}

.breadcrumb {
  background: linear-gradient(135deg, #9d4300 0%, #f97316 100%) !important;
}

/* Placeholder image 1700X500 dans le header — masquer */
.inner-banner-img {
  display: none !important;
}

/* ============================================================
   ZenCard — Empty State (not_found partial)
   ============================================================ */

.zencard-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zencard-empty__icon svg {
  animation: zc-pulse 2.4s ease-in-out infinite;
}

.zencard-empty__text {
  color: var(--text-secondary, #584237);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@keyframes zc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.75; }
}

/* ============================================================
   ZenCard — Header — masquer sélecteur devise
   ============================================================ */

.currency {
  display: none !important;
}

/* ============================================================
   ZenCard — Contact Page
   ============================================================ */

/* Remplace le dégradé bleu/violet partout */
.linear-bg {
  background: linear-gradient(135deg, rgba(157,67,0,0.06) 0%, rgba(249,115,22,0.08) 100%) !important;
}

/* Image placeholder — masquer */
.contact-left-img {
  display: none !important;
}

/* Bande "Vous êtes déjà client" */
.contact .existing-customer {
  border-radius: var(--radius-xl) !important;
  padding: 1.5rem 2rem !important;
  margin-bottom: 1.5rem !important;
}

.contact .existing-customer h5 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.25rem !important;
}

.contact .existing-customer p {
  color: var(--text-secondary) !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
}

/* Wrapper principal contact */
.contact-wrapper {
  border-radius: var(--radius-xl) !important;
  padding: 2.5rem !important;
}

/* Formulaire — carte blanche */
.contact-form-wrapper {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius-xl) !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-md) !important;
}

.contact-form h4 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0 !important;
}

/* Icônes liste contact — orange */
.contact .contact-left .contact-list li span {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
}

.contact .contact-left .contact-list li a,
.contact .contact-left .contact-list li p {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* ============================================================
   ZenCard — Page Login / Auth
   ============================================================ */

/* Panel droit (slider) — remplace conic-gradient bleu/violet */
.auth .auth-left {
  background: linear-gradient(135deg, #7a3300 0%, #c45000 45%, #f97316 100%) !important;
  border-radius: var(--radius-xl) !important;
}

/* Masquer images placeholder dans le slider */
.platform-content-img {
  display: none !important;
}

/* Texte du slider — blanc lisible */
.auth .auth-left .auth-left-content h4 {
  color: #fff !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.75rem !important;
}

.auth .auth-left .auth-left-content p {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Pagination swiper — blanc */
.auth .auth-left .swiper-pagination-bullet {
  background: rgba(255,255,255,0.45) !important;
}
.auth .auth-left .swiper-pagination-bullet-active {
  background: #fff !important;
}

/* Logo — taille raisonnable + cacher si placeholder */
.auth .site-log img {
  max-height: 50px !important;
  width: auto !important;
  max-width: 180px !important;
}

/* Titre page login */
.auth .auth-right .auth-content > h2 {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}

.auth .auth-right .auth-content > p {
  color: var(--text-secondary) !important;
  font-size: 0.95rem !important;
  margin-bottom: 2rem !important;
}

/* ── Restaurant illustration (CSS only) ── */
.auth .auth-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 220px;
  height: 220px;
  background:
    /* Assiette */
    radial-gradient(ellipse 130px 18px at 50% 68%, rgba(255,255,255,0.18) 70%, transparent 100%),
    /* Dôme cloche */
    radial-gradient(ellipse 90px 55px at 50% 52%, rgba(255,255,255,0.13) 70%, transparent 100%),
    /* Poignée cloche */
    radial-gradient(ellipse 14px 10px at 50% 30%, rgba(255,255,255,0.22) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Grandes étoiles décoratives */
.auth .auth-left::after {
  content: "🍽";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%);
  font-size: 100px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.3));
}

/* Cercles décoratifs flottants */
.auth .auth-left .swiper {
  position: relative;
  z-index: 2;
}

/* Fond étoilé subtil */
.auth .auth-left {
  overflow: hidden !important;
  position: relative !important;
}

/* Motif géométrique warm */
.auth .auth-left .platform-content-img {
  display: none !important;
}

/* ── Post type radio buttons — meilleur contraste ── */
.radio--button label {
  border: 1.5px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
}

.radio--button label:hover {
  border-color: #f97316 !important;
  color: #c45000 !important;
}

.radio--button input[type="radio"]:checked + label {
  background: linear-gradient(135deg, #c45000, #f97316) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(249,115,22,0.3) !important;
}

/* ── Select2 auth pages — container pleine largeur ── */
.auth-form .auth-input .select2-container {
  width: 100% !important;
  display: block !important;
}
.auth-form .auth-input label {
  display: block !important;
}
.auth-form .auth-input .select2-container--default .select2-selection--single {
  height: 55px !important;
  border-radius: 60px !important;
  border: 1px solid var(--border-one) !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
}
.auth-form .auth-input .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 20px !important;
  line-height: normal !important;
  color: var(--text-secondary) !important;
}
.auth-form .auth-input .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 55px !important;
  top: 0 !important;
  right: 12px !important;
}

/* Photo thumbnail compact dans le formulaire de publication */
#zcPhotoPreview { background: #f5f0eb; border-radius: 10px; padding: 0.6rem 0.75rem; }
#zcPhotoPreview > div { display: flex !important; align-items: center !important; gap: 0.75rem !important; position: static !important; }
#zcPhotoImg { width: 48px !important; height: 48px !important; max-height: 48px !important; border-radius: 8px !important; object-fit: cover !important; flex-shrink: 0 !important; }
#zcPhotoRemove { position: static !important; margin-left: auto !important; background: none !important; color: #999 !important; font-size: 1rem !important; }

/* ── Cartes sujets create-simple (bypasse OPcache/CSP) ── */
.zc-subjects {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.65rem !important;
    margin-bottom: 1.25rem !important;
}
@media (max-width: 991px) and (min-width: 601px) {
    .zc-subjects { grid-template-columns: repeat(3, 1fr) !important; }
}
.zc-subject-card {
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    padding: 1rem 0.6rem !important;
    text-align: center !important;
    cursor: pointer !important;
    background: #fff !important;
    position: relative !important;
    user-select: none !important;
}
.zc-subject-card.selected { border-color: #9d4300 !important; background: #fff7f0 !important; }
.zc-icon-circle {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 auto 0.5rem !important; font-size: 1.25rem !important;
}
.zc-subject-card .zc-label { font-weight: 600 !important; font-size: 0.85rem !important; color: #555 !important; display: block !important; }
.zc-subject-card.selected .zc-label { color: #9d4300 !important; }
.zc-subject-card .zc-check { position: absolute !important; top: 8px !important; right: 10px !important; color: #9d4300 !important; display: none !important; }
.zc-subject-card.selected .zc-check { display: block !important; }

/* ── Responsive create-simple (priorité haute, bypasse OPcache) ── */
@media (max-width: 991px) {
    .zc-simple-wrap { grid-template-columns: 1fr !important; }
    .zc-preview-panel { grid-column: auto !important; grid-row: auto !important; position: static !important; top: auto !important; }
    #zcPublishInline { grid-column: auto !important; }
}
@media (max-width: 600px) {
    .zc-simple-wrap { gap: 1rem !important; }
    .zc-simple-wrap > * { min-width: 0 !important; }
    .i-card-md { min-width: 0 !important; max-width: 100% !important; }
    .zc-subjects {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .zc-subjects::-webkit-scrollbar { display: none !important; }
    .zc-subject-card { flex: 0 0 auto !important; width: 100px !important; }
    .zc-gentypes, .zc-tones {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .zc-gentypes::-webkit-scrollbar, .zc-tones::-webkit-scrollbar { display: none !important; }
    .zc-gentype-btn, .zc-tone-btn { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ── Sidebar toggle desktop (inverse du mobile : show-side-bar = caché) ── */
@media (min-width: 1200px) {
    .aside { transition: transform 0.2s ease !important; }
    .aside.show-side-bar { transform: translateX(-260px) !important; }
    .sidebaroverlay { display: none !important; }
    /* :has() — étendre le .main quand la sidebar est cachée */
    body:has(.aside.show-side-bar) .main {
        margin-inline-start: 0 !important;
        transition: margin-inline-start 0.2s ease;
    }
}

/* Mobile login button in header */
.mobile-login-btn {
  font-size: 0.82rem !important;
  padding: 0.5rem 1rem !important;
}

/* OTP fields — ne pas écraser avec le style global input */
.auth-form.otp-form .otp-field > input {
  background: #fff !important;
  border: 2px solid var(--color-primary, #f97316) !important;
  border-radius: 12px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #1a1c1c) !important;
  text-align: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(157,67,0,0.10) !important;
}
.auth-form.otp-form .otp-field > input:focus {
  border-color: var(--color-primary, #9d4300) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
  outline: none !important;
}

/* Power feature section — image contenue */
.power-feature-section .col-lg-6:first-child img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 1.5rem !important;
}

.power-feature-section .col-lg-6:first-child {
  overflow: hidden !important;
}

/* Remove auth background rocket image */
.auth .auth-left::before { content: none !important; display: none !important; }

/* Auth slider images */
.auth-slide-img { max-width: 100%; border-radius: 12px; }