/* =========================================================
   HENAISHA CATERING
   FINAL CUSTOM THEME
   Inspired by Ice Cream Shop Layout
   ========================================================= */

/* =========================================================
   1. COLOR VARIABLES
   ========================================================= */

:root {
  --henaisha-primary: #f4c430;
  --henaisha-secondary: #111111;
  --henaisha-white: #ffffff;
  --henaisha-light: #fffdf5;
  --henaisha-text: #263238;
  --henaisha-muted: #667085;
  --henaisha-border: #e5e7eb;
}

/* =========================================================
         2. GENERAL
         ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  color: var(--henaisha-text);
  background: var(--henaisha-white);
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: var(--henaisha-secondary);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--henaisha-primary);
  text-decoration: none;
}

p {
  line-height: 1.8;
}

main {
  width: 100%;
}

/* =========================================================
         3. BUTTON
         ========================================================= */

.btn-henaisha-primary {
  display: inline-block;
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  border: 2px solid var(--henaisha-primary);
  font-weight: 600;
  border-radius: 0;
  transition: all 0.3s ease;
}

.btn-henaisha-primary:hover {
  background-color: var(--henaisha-secondary);
  color: var(--henaisha-white);
  border-color: var(--henaisha-secondary);
}

.btn-henaisha-dark {
  display: inline-block;
  background-color: var(--henaisha-secondary);
  color: var(--henaisha-white);
  border: 2px solid var(--henaisha-secondary);
  font-weight: 600;
  border-radius: 0;
  transition: all 0.3s ease;
}

.btn-henaisha-dark:hover {
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  border-color: var(--henaisha-primary);
}

/* =========================================================
         4. TEXT
         ========================================================= */

.text-henaisha-primary {
  color: var(--henaisha-primary) !important;
}

.text-henaisha-dark {
  color: var(--henaisha-secondary) !important;
}

/* =========================================================
         5. BACKGROUND
         ========================================================= */

.bg-henaisha-primary {
  background-color: var(--henaisha-primary) !important;
}

.bg-henaisha-dark {
  background-color: var(--henaisha-secondary) !important;
}

.bg-henaisha-light {
  background-color: var(--henaisha-light) !important;
}

/* =========================================================
         6. TOP BAR
         =========================================================
         Yellow area above navbar
         ========================================================= */

.henaisha-topbar {
  position: relative;
  z-index: 1001;
  width: 100%;
  min-height: 80px;
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--henaisha-primary);
}

.henaisha-topbar .container {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.henaisha-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.henaisha-topbar-left a {
  color: var(--henaisha-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.henaisha-topbar-left a:hover {
  color: var(--henaisha-white);
}

.henaisha-topbar-left span {
  color: var(--henaisha-secondary);
  font-size: 13px;
}

.henaisha-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.henaisha-topbar-right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--henaisha-secondary);
  font-size: 14px;
  line-height: 1;
}

.henaisha-topbar-right a:hover {
  color: var(--henaisha-white);
  transform: translateY(-2px);
}

/* =========================================================
         7. NAVBAR
         =========================================================
         Ice Cream Shop style:
         - White rounded container
         - Menu left
         - Logo center
         - Menu right
         ========================================================= */

.nav-bar {
  position: relative;
  width: 100%;
  margin-top: -1px;
  z-index: 1000;
}

.nav-bar .container-lg {
  position: relative;
  z-index: 1000;

  width: 100%;
  max-width: 1050px;

  margin-left: auto;
  margin-right: auto;

  padding-left: 0;
  padding-right: 0;
}

.nav-bar .navbar {
  min-height: 86px;
  padding: 0 20px;
  background-color: var(--henaisha-white) !important;
  border-radius: 60px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

/* =========================================================
         8. NAVIGATION MENU
         ========================================================= */

.nav-bar .navbar-nav {
  display: flex;
  align-items: center;
}

.nav-bar .navbar-nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86px;
  padding: 0 16px;

  color: var(--henaisha-secondary);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;

  transition: all 0.3s ease;
}

.nav-bar .navbar-nav .nav-link:hover {
  color: var(--henaisha-primary);
}

.nav-bar .navbar-nav .nav-link.active {
  color: var(--henaisha-primary);
}

/* =========================================================
         9. NAVBAR LOGO
         ========================================================= */

.nav-bar .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 30px;
  padding: 0;
}

.henaisha-logo {
  display: block;
  width: 150px;
  max-height: 75px;
  object-fit: contain;
}

.henaisha-logo-mobile {
  display: block;
  width: 120px;
  max-height: 60px;
  object-fit: contain;
}

/* =========================================================
         10. NAVBAR TOGGLER
         ========================================================= */

.navbar-toggler {
  padding: 8px 10px;
  border: 1px solid var(--henaisha-border);
  border-radius: 4px;
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* =========================================================
         11. HERO
         ========================================================= */

.header-carousel {
  position: relative;
  width: 100%;
}

.header-carousel .owl-stage-outer {
  overflow: hidden;
}

.header-carousel .item,
.header-carousel > div {
  position: relative;
}

.header-carousel img {
  display: block;
  width: 100%;
  height: 620px;
  object-fit: cover;
}

.henaisha-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
}

.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(17, 17, 17, 0.3);
}

.hero-label {
  color: var(--henaisha-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.carousel-caption h1 {
  margin-bottom: 25px;
  color: var(--henaisha-white);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
}

.carousel-caption p:not(.hero-label) {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: var(--henaisha-white);
  font-size: 17px;
}

/* =========================================================
         12. OWL CAROUSEL NAVIGATION
         ========================================================= */

.header-carousel .owl-nav {
  position: absolute;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);

  display: flex;
  gap: 10px;
}

.header-carousel .owl-nav button {
  width: 45px;
  height: 45px;

  margin: 0 !important;

  background: var(--henaisha-primary) !important;
  color: var(--henaisha-secondary) !important;

  border: none;
  border-radius: 50%;

  font-size: 20px !important;
  transition: all 0.3s ease;
}

.header-carousel .owl-nav button:hover {
  background: var(--henaisha-secondary) !important;
  color: var(--henaisha-white) !important;
}

/* =========================================================
         13. SECTION
         ========================================================= */

.section-label {
  margin-bottom: 12px;
  color: var(--henaisha-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title {
  color: var(--henaisha-secondary);
  font-weight: 700;
  line-height: 1.25;
}

.henaisha-section-description {
  max-width: 650px;
  color: var(--henaisha-muted);
  line-height: 1.8;
}

/* =========================================================
         14. ABOUT
         ========================================================= */

.henaisha-about-image {
  overflow: hidden;
  border-radius: 6px;
}

.henaisha-about-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
         15. SERVICE CARD
         ========================================================= */

.henaisha-service-card {
  height: 100%;
  padding: 30px !important;

  background: var(--henaisha-white);
  border: 1px solid var(--henaisha-border);
  border-radius: 4px;

  transition: all 0.3s ease;
}

.henaisha-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.1);
}

.henaisha-service-icon {
  flex-shrink: 0;

  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  border-radius: 50%;

  font-size: 22px;
}

.henaisha-service-card h4 {
  color: var(--henaisha-secondary);
}

/* =========================================================
         16. MENU CARD
         ========================================================= */

.henaisha-menu-card {
  height: 100%;
  overflow: hidden;

  background: var(--henaisha-white);
  border: 1px solid var(--henaisha-border);
  border-radius: 4px;

  transition: all 0.3s ease;
}

.henaisha-menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.1);
}

.henaisha-menu-image {
  display: block;

  width: 100%;
  height: 240px;

  object-fit: cover;

  background: #f5f5f5;
}

.henaisha-menu-label {
  margin-bottom: 8px;

  color: var(--henaisha-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.henaisha-menu-card h4 {
  color: var(--henaisha-secondary);
  line-height: 1.4;
}

.henaisha-menu-price {
  color: var(--henaisha-secondary);
  font-size: 18px;
  font-weight: 700;
}

/* =========================================================
         17. CTA
         ========================================================= */

.henaisha-cta {
  padding: 50px !important;

  background-color: var(--henaisha-primary);
  border-radius: 4px;
}

.henaisha-cta h2 {
  color: var(--henaisha-secondary);
  font-weight: 700;
}

.henaisha-cta p {
  color: var(--henaisha-secondary);
}

.henaisha-cta-label {
  display: block;
  margin-bottom: 10px;

  color: var(--henaisha-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =========================================================
         18. PAGE HEADER
         ========================================================= */

.henaisha-page-header {
  padding: 90px 0 70px;
  background-color: var(--henaisha-light);
}

.henaisha-page-header .section-title {
  margin-bottom: 15px;
}

/* =========================================================
         19. CAPACITY CARD
         ========================================================= */

.henaisha-capacity-card {
  height: 100%;
  padding: 40px 30px;

  background-color: var(--henaisha-white);
  border: 1px solid var(--henaisha-border);
  border-radius: 4px;

  transition: all 0.3s ease;
}

.henaisha-capacity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.1);
}

.henaisha-capacity-number {
  margin-bottom: 15px;

  color: var(--henaisha-primary);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
         20. FOOTER
         ========================================================= */

.henaisha-footer {
  margin-top: 90px;

  background-color: var(--henaisha-secondary);
  color: rgba(255, 255, 255, 0.85);
}

.henaisha-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: all 0.3s ease;
}

.henaisha-footer a:hover {
  color: var(--henaisha-primary);
}

.henaisha-footer-logo {
  display: block;

  width: 160px;
  height: auto;

  margin: 0 auto;
  padding: 8px;
}

.henaisha-footer-description {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.75);
}

.henaisha-footer-title {
  margin-bottom: 18px;

  color: var(--henaisha-primary);
  font-weight: 700;
}

.henaisha-footer p {
  color: rgba(255, 255, 255, 0.8);
}

.henaisha-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.henaisha-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;

  font-size: 17px;
}

.henaisha-footer-social a:hover {
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  border-color: var(--henaisha-primary);
}

.henaisha-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.henaisha-footer-bottom p {
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* =========================================================
         21. GENERAL SPACING
         ========================================================= */

.henaisha-navbar-wrapper {
  position: relative;
  z-index: 1000;
}

.container-fluid.bg-henaisha-light {
  background-color: var(--henaisha-light);
}

/* =========================================================
         22. FORM ELEMENTS
         ========================================================= */

.form-control {
  border: 1px solid var(--henaisha-border);
  border-radius: 3px;
}

.form-control:focus {
  border-color: var(--henaisha-primary);
  box-shadow: 0 0 0 0.15rem rgba(244, 196, 48, 0.2);
}

/* =========================================================
         23. TABLE
         ========================================================= */

.table thead th {
  color: var(--henaisha-secondary);
  background-color: var(--henaisha-light);
  border-bottom: 2px solid var(--henaisha-primary);
}

/* =========================================================
         24. RESPONSIVE - TABLET
         ========================================================= */

@media (max-width: 991.98px) {
  /* Topbar */
  .henaisha-topbar {
    min-height: 45px;
  }

  .henaisha-topbar .container {
    min-height: 45px;
  }

  .henaisha-topbar-left a,
  .henaisha-topbar-left span,
  .henaisha-topbar-right a {
    font-size: 12px;
  }

  .henaisha-topbar-right {
    gap: 15px;
  }

  /* Navbar */
  .nav-bar {
    margin-top: 0;
  }

  .nav-bar .navbar {
    min-height: 75px;
    padding: 8px 15px;
    border-radius: 0;
  }

  .nav-bar .navbar-brand {
    margin: 0;
  }

  .nav-bar .navbar-nav {
    align-items: stretch;
    padding: 10px 0;
  }

  .nav-bar .navbar-nav .nav-link {
    min-height: auto;
    padding: 12px 15px;
    border-top: 1px solid #eeeeee;
  }

  .henaisha-logo {
    width: 125px;
    max-height: 60px;
  }

  .henaisha-logo-mobile {
    width: 115px;
  }

  /* Hero */
  .header-carousel img {
    height: 520px;
  }

  .carousel-caption h1 {
    font-size: 42px;
  }

  .carousel-caption p:not(.hero-label) {
    font-size: 15px;
  }

  /* Sections */
  .section-title {
    font-size: 38px;
  }
}

/* =========================================================
         25. RESPONSIVE - MOBILE
         ========================================================= */

@media (max-width: 767.98px) {
  /* Topbar */
  .henaisha-topbar-left {
    gap: 8px;
  }

  .henaisha-topbar-right {
    display: none;
  }

  /* Navbar */
  .nav-bar .navbar {
    min-height: 70px;
    padding: 8px 12px;
  }

  .henaisha-logo {
    width: 115px;
  }

  /* Hero */
  .header-carousel img {
    height: 470px;
  }

  .carousel-caption {
    padding: 20px;
  }

  .carousel-caption h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .carousel-caption p:not(.hero-label) {
    font-size: 14px;
    line-height: 1.7;
  }

  .hero-label {
    font-size: 12px;
    letter-spacing: 2px;
  }

  /* Sections */
  .section-title {
    font-size: 32px;
  }

  .henaisha-section-description {
    font-size: 14px;
  }

  /* Menu */
  .henaisha-menu-image {
    height: 220px;
  }

  /* CTA */
  .henaisha-cta {
    padding: 35px 25px !important;
  }

  /* Footer */
  .henaisha-footer {
    margin-top: 60px;
  }

  .henaisha-footer-social {
    justify-content: flex-start;
  }
}

/* =========================================================
         26. VERY SMALL MOBILE
         ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-topbar-left {
    gap: 6px;
  }

  .henaisha-topbar-left a,
  .henaisha-topbar-left span {
    font-size: 11px;
  }

  .nav-bar .navbar {
    min-height: 65px;
  }

  .henaisha-logo {
    width: 105px;
  }

  .header-carousel img {
    height: 430px;
  }

  .carousel-caption h1 {
    font-size: 27px;
  }

  .carousel-caption p:not(.hero-label) {
    font-size: 13px;
  }

  .section-title {
    font-size: 28px;
  }

  .henaisha-service-card {
    padding: 25px !important;
  }

  .henaisha-cta {
    padding: 30px 20px !important;
  }
}
/* =========================================================
         HENAISHA TOP BAR
         ========================================================= */

.henaisha-topbar {
  position: relative;
  z-index: 900;
  width: 100%;
  height: 82px;
  min-height: 82px;

  display: flex;
  align-items: flex-start;

  padding-top: 12px;

  background: var(--henaisha-primary);
}

.henaisha-topbar .container {
  height: auto;
  min-height: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.henaisha-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.henaisha-topbar-left a {
  color: var(--henaisha-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.henaisha-topbar-left a:hover {
  color: var(--henaisha-white);
}

.henaisha-topbar-left span {
  color: var(--henaisha-secondary);
  font-size: 12px;
}

.henaisha-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.henaisha-topbar-right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--henaisha-secondary);
  font-size: 13px;
  line-height: 1;

  transition: all 0.3s ease;
}

.henaisha-topbar-right a:hover {
  color: var(--henaisha-white);
  transform: translateY(-2px);
}

/* =========================================================
         NAVBAR
         ICE CREAM SHOP STYLE
         ========================================================= */

.nav-bar {
  position: relative;
  z-index: 1000;

  width: 100%;

  /*
           * Navbar dinaikkan ke area kuning.
           * Nilai negatif membuat navbar overlap dengan topbar.
           */
  margin-top: -38px;
}

.nav-bar .container-lg {
  position: relative;
  z-index: 1000;

  /*
           * Membatasi lebar navbar agar tidak terlalu panjang.
           */
  max-width: 1050px;
}

/* =========================================================
         NAVBAR CONTAINER
         ========================================================= */

.nav-bar .navbar {
  min-height: 82px;

  padding: 0 18px;

  background: var(--henaisha-white) !important;

  border-radius: 55px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13) !important;
}

/* =========================================================
         NAVIGATION MENU
         ========================================================= */

.nav-bar .navbar-nav {
  display: flex;
  align-items: center;
}

.nav-bar .navbar-nav .nav-link {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 82px;

  padding: 0 15px;

  color: var(--henaisha-secondary);

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;

  transition: all 0.3s ease;
}

.nav-bar .navbar-nav .nav-link:hover {
  color: var(--henaisha-primary);
}

.nav-bar .navbar-nav .nav-link.active {
  color: var(--henaisha-primary);
}

/* =========================================================
         LOGO TENGAH
         ========================================================= */

.nav-bar .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 22px;

  padding: 0;
}

.henaisha-logo {
  display: block;

  width: 125px;
  max-height: 65px;

  object-fit: contain;
}

.henaisha-logo-mobile {
  display: block;

  width: 115px;
  max-height: 60px;

  object-fit: contain;
}

/* =========================================================
         NAVBAR TOGGLER
         ========================================================= */

.navbar-toggler {
  padding: 7px 9px;

  border: 1px solid var(--henaisha-border);
  border-radius: 4px;

  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* =========================================================
         RESPONSIVE NAVBAR
         ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-topbar {
    height: 65px;
    min-height: 65px;
    padding-top: 10px;
  }

  .henaisha-topbar-right {
    gap: 12px;
  }

  .henaisha-topbar-left a,
  .henaisha-topbar-left span,
  .henaisha-topbar-right a {
    font-size: 11px;
  }

  .nav-bar {
    margin-top: -25px;
  }

  .nav-bar .container-lg {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-bar .navbar {
    min-height: 70px;
    padding: 8px 15px;

    border-radius: 40px;
  }

  .nav-bar .navbar-nav {
    align-items: stretch;
    padding: 10px 0;
  }

  .nav-bar .navbar-nav .nav-link {
    min-height: auto;
    padding: 12px 15px;

    border-top: 1px solid #eeeeee;
  }

  .nav-bar .navbar-brand {
    margin: 0;
  }

  .henaisha-logo {
    width: 115px;
    max-height: 58px;
  }
}

/* =========================================================
         MOBILE
         ========================================================= */

@media (max-width: 767.98px) {
  .henaisha-topbar {
    height: 55px;
    min-height: 55px;
    padding-top: 8px;
  }

  .henaisha-topbar-right {
    display: none;
  }

  .nav-bar {
    margin-top: -20px;
  }

  .nav-bar .navbar {
    min-height: 65px;
    padding: 7px 12px;

    border-radius: 35px;
  }

  .henaisha-logo {
    width: 105px;
  }
}
/* =========================================================
         FINAL HEADER OVERRIDE
         HENAISHA CATERING
         ========================================================= */

/* =========================================================
         TOPBAR
         ========================================================= */

.henaisha-topbar {
  position: relative;
  z-index: 1001;

  width: 100%;
  height: 78px;
  min-height: 78px;

  padding: 0;

  display: flex;
  align-items: flex-start;

  background: #f4c430;
}

/* Container Topbar */

.henaisha-topbar .container {
  width: 100%;
  max-width: 1100px;

  height: 48px;
  min-height: 48px;

  margin: 0 auto;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================
         SOCIAL MEDIA - KIRI
         ========================================================= */

.henaisha-topbar-left {
  display: flex;
  align-items: center;

  gap: 17px;

  margin: 0;
  padding: 0;
}

.henaisha-topbar-left a {
  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  color: #111111;

  font-size: 14px;
  line-height: 1;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-topbar-left a:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

/* =========================================================
         ACCOUNT - KANAN
         ========================================================= */

.henaisha-topbar-right {
  display: flex;
  align-items: center;

  gap: 24px;

  margin: 0;
  padding: 0;
}

.henaisha-topbar-right a {
  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-topbar-right a:hover {
  color: #ffffff;
}

.henaisha-topbar-right i {
  margin-right: 6px;

  font-size: 13px;
}

/* =========================================================
         NAVBAR WRAPPER
         ========================================================= */

.nav-bar {
  position: relative;

  z-index: 1000;

  width: 100%;

  /*
           * Navbar naik ke area kuning.
           */
  margin-top: -38px;

  padding: 0;
}

/* =========================================================
         NAVBAR WIDTH
         ========================================================= */

.nav-bar .container-lg {
  position: relative;

  z-index: 1000;

  width: 100%;
  max-width: 1020px;

  margin-left: auto;
  margin-right: auto;

  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
         WHITE NAVBAR
         ========================================================= */

.nav-bar .navbar {
  position: relative;

  width: 100%;
  min-height: 82px;

  margin: 0;
  padding: 0 22px;

  display: flex;
  align-items: center;

  background: #ffffff !important;

  border-radius: 50px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13) !important;
}

/* =========================================================
         NAVBAR COLLAPSE
         ========================================================= */

.nav-bar .navbar-collapse {
  width: 100%;

  display: flex !important;

  align-items: center;
  justify-content: space-between;
}

/* =========================================================
         MENU KIRI & KANAN
         ========================================================= */

.nav-bar .navbar-nav {
  display: flex;

  align-items: center;

  margin: 0;
  padding: 0;
}

/* =========================================================
         NAV LINK
         ========================================================= */

.nav-bar .navbar-nav .nav-link {
  min-height: 82px;

  padding: 0 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  transition: all 0.25s ease;
}

.nav-bar .navbar-nav .nav-link:hover {
  color: #f4c430;
}

.nav-bar .navbar-nav .nav-link.active {
  color: #f4c430;
}

/* =========================================================
         LOGO TENGAH
         ========================================================= */

.nav-bar .navbar-brand {
  position: relative;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 115px;

  margin: 0 15px;

  padding: 0;
}

.henaisha-logo {
  display: block;

  width: 105px;
  height: 65px;

  object-fit: contain;
}

/* =========================================================
         MOBILE LOGO
         ========================================================= */

.henaisha-logo-mobile {
  display: block;

  width: 105px;
  height: 58px;

  object-fit: contain;
}

/* =========================================================
         NAVBAR TOGGLER
         ========================================================= */

.navbar-toggler {
  border: 1px solid #e5e7eb !important;

  padding: 7px 9px;

  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
         DESKTOP - MENJAGA KESEIMBANGAN LOGO
         ========================================================= */

@media (min-width: 992px) {
  .nav-bar .navbar-collapse {
    display: grid !important;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;
  }

  .nav-bar .navbar-collapse > .navbar-nav:first-child {
    justify-content: flex-end;
  }

  .nav-bar .navbar-collapse > .navbar-brand {
    justify-self: center;
  }

  .nav-bar .navbar-collapse > .navbar-nav:last-child {
    justify-content: flex-start;
  }
}

/* =========================================================
         TABLET
         ========================================================= */

@media (max-width: 1199.98px) and (min-width: 992px) {
  .nav-bar .container-lg {
    max-width: 960px;
  }

  .nav-bar .navbar {
    padding: 0 15px;
  }

  .nav-bar .navbar-nav .nav-link {
    padding: 0 9px;

    font-size: 12px;
  }

  .nav-bar .navbar-brand {
    width: 100px;
    margin: 0 8px;
  }

  .henaisha-logo {
    width: 95px;
  }
}

/* =========================================================
         MOBILE / TABLET
         ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-topbar {
    height: 65px;
    min-height: 65px;
  }

  .henaisha-topbar .container {
    height: 45px;
    min-height: 45px;

    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-bar {
    margin-top: -25px;
  }

  .nav-bar .container-lg {
    max-width: 100%;

    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-bar .navbar {
    min-height: 70px;

    padding: 8px 15px;

    border-radius: 40px;
  }

  .nav-bar .navbar-collapse {
    display: block !important;
  }

  .nav-bar .navbar-nav {
    display: block;

    width: 100%;
  }

  .nav-bar .navbar-nav .nav-link {
    min-height: auto;

    display: flex;
    justify-content: flex-start;

    padding: 12px 15px;

    border-top: 1px solid #eeeeee;
  }

  .henaisha-topbar-left {
    gap: 13px;
  }

  .henaisha-topbar-right {
    gap: 15px;
  }

  .henaisha-topbar-left a,
  .henaisha-topbar-right a {
    font-size: 11px;
  }

  .henaisha-logo-mobile {
    width: 105px;
  }
}

/* =========================================================
         SMALL MOBILE
         ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-topbar {
    height: 55px;
    min-height: 55px;
  }

  .henaisha-topbar .container {
    height: 40px;
    min-height: 40px;

    padding-left: 12px;
    padding-right: 12px;
  }

  .henaisha-topbar-left {
    gap: 10px;
  }

  .henaisha-topbar-right {
    gap: 10px;
  }

  .henaisha-topbar-left a {
    width: 17px;
    height: 17px;

    font-size: 12px;
  }

  .henaisha-topbar-right a {
    font-size: 10px;
  }

  .nav-bar {
    margin-top: -20px;
  }

  .nav-bar .navbar {
    min-height: 65px;

    border-radius: 32px;
  }

  .henaisha-logo-mobile {
    width: 95px;
  }
}
/* =========================================================
         FINAL HEADER FIX
         ========================================================= */

/* =========================================================
         TOPBAR
         ========================================================= */

.henaisha-topbar {
  position: relative;
  z-index: 900;

  width: 100%;
  height: 78px;
  min-height: 78px;

  background: #f4c430;

  padding: 0;
}

/* Isi topbar */

.henaisha-topbar .container {
  width: 100%;
  max-width: 1100px;

  height: 78px;
  min-height: 78px;

  margin: 0 auto;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================
         SOSIAL MEDIA KIRI
         ========================================================= */

.henaisha-topbar-left {
  display: flex;
  align-items: center;

  gap: 18px;

  margin: 0;
  padding: 0;
}

.henaisha-topbar-left a {
  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  color: #111111;

  font-size: 14px;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-topbar-left a:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

/* =========================================================
         AKUN KANAN
         ========================================================= */

.henaisha-topbar-right {
  display: flex;
  align-items: center;

  gap: 22px;

  margin: 0;
  padding: 0;
}

.henaisha-topbar-right a {
  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-topbar-right a:hover {
  color: #ffffff;
}

.henaisha-topbar-right i {
  margin-right: 6px;
  font-size: 13px;
}

/* =========================================================
         NAVBAR
         ========================================================= */

.nav-bar {
  position: relative;

  z-index: 1000;

  width: 100%;

  /*
           * Naik ke area kuning.
           */
  margin-top: -38px;

  padding: 0;
}

/* =========================================================
         LEBAR NAVBAR
         ========================================================= */

.nav-bar .container-lg {
  position: relative;

  z-index: 1000;

  width: 100%;
  max-width: 1020px;

  margin-left: auto;
  margin-right: auto;

  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
         NAVBAR PUTIH
         ========================================================= */

.nav-bar .navbar {
  position: relative;

  z-index: 1000;

  width: 100%;
  min-height: 82px;

  margin: 0;
  padding: 0 22px;

  display: flex;
  align-items: center;

  background: #ffffff !important;

  border-radius: 50px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13) !important;
}

/* =========================================================
         NAVBAR COLLAPSE
         ========================================================= */

.nav-bar .navbar-collapse {
  width: 100%;

  display: grid !important;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;
}

/* =========================================================
         MENU
         ========================================================= */

.nav-bar .navbar-nav {
  display: flex;

  align-items: center;

  margin: 0;
  padding: 0;
}

.nav-bar .navbar-collapse > .navbar-nav:first-child {
  justify-content: flex-end;
}

.nav-bar .navbar-collapse > .navbar-nav:last-child {
  justify-content: flex-start;
}

/* =========================================================
         LINK MENU
         ========================================================= */

.nav-bar .navbar-nav .nav-link {
  min-height: 82px;

  padding: 0 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  transition: all 0.25s ease;
}

.nav-bar .navbar-nav .nav-link:hover {
  color: #f4c430;
}

.nav-bar .navbar-nav .nav-link.active {
  color: #f4c430;
}

/* =========================================================
         LOGO TENGAH
         ========================================================= */

.nav-bar .navbar-brand {
  justify-self: center;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 115px;

  margin: 0 15px;

  padding: 0;
}

.henaisha-logo {
  display: block;

  width: 105px;
  height: 65px;

  object-fit: contain;
}

/* =========================================================
         MOBILE LOGO
         ========================================================= */

.henaisha-logo-mobile {
  display: block;

  width: 105px;
  height: 58px;

  object-fit: contain;
}

/* =========================================================
         MOBILE
         ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-topbar {
    height: 65px;
    min-height: 65px;
  }

  .henaisha-topbar .container {
    height: 45px;
    min-height: 45px;

    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-bar {
    margin-top: -15px;
  }

  .nav-bar .container-lg {
    max-width: 100%;

    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-bar .navbar {
    min-height: 70px;

    padding: 8px 15px;

    border-radius: 40px;
  }

  .nav-bar .navbar-collapse {
    display: block !important;
  }

  .nav-bar .navbar-nav {
    display: block;

    width: 100%;
  }

  .nav-bar .navbar-nav .nav-link {
    min-height: auto;

    justify-content: flex-start;

    padding: 12px 15px;

    border-top: 1px solid #eeeeee;
  }
}

/* =========================================================
         SMALL MOBILE
         ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-topbar {
    height: 55px;
    min-height: 55px;
  }

  .henaisha-topbar .container {
    height: 40px;
    min-height: 40px;

    padding-left: 12px;
    padding-right: 12px;
  }

  .henaisha-topbar-left {
    gap: 11px;
  }

  .henaisha-topbar-right {
    gap: 10px;
  }

  .henaisha-topbar-left a {
    width: 16px;
    height: 16px;

    font-size: 12px;
  }

  .henaisha-topbar-right a {
    font-size: 10px;
  }

  .nav-bar {
    margin-top: -15px;
  }

  .nav-bar .navbar {
    min-height: 65px;

    border-radius: 32px;
  }

  .henaisha-logo-mobile {
    width: 95px;
  }
}
/* =========================================================
         KATALOG PAGE
      ========================================================= */

.henaisha-page-header {
  padding: 150px 0 70px;
  background: #ffffff;
}

.henaisha-section-label {
  margin-bottom: 12px;

  color: #f4c430;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;

  letter-spacing: 2px;
  text-transform: uppercase;
}

.henaisha-page-title {
  margin-bottom: 15px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 48px;
  font-weight: 700;

  line-height: 1.15;
}

.henaisha-page-description {
  max-width: 650px;

  margin: 0 auto;

  color: #667085;

  font-family: "Poppins", sans-serif;
  font-size: 15px;

  line-height: 1.8;
}

/* =========================================================
       FILTER
      ========================================================= */

.henaisha-catalog-filter {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 35px;
}

.henaisha-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;

  padding: 11px 22px;

  border: 1px solid #e5e7eb;
  border-radius: 30px;

  background: #ffffff;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-filter-btn:hover {
  border-color: #f4c430;

  background: #f4c430;

  color: #111111;

  text-decoration: none;
}

.henaisha-filter-btn.active {
  border-color: #f4c430;

  background: #f4c430;

  color: #111111;
}

/* =========================================================
       INFO
      ========================================================= */

.henaisha-catalog-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 25px;
  padding-bottom: 15px;

  border-bottom: 1px solid #e5e7eb;

  color: #667085;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
}

.henaisha-catalog-info strong {
  color: #111111;
}

/* =========================================================
       MENU CARD
      ========================================================= */

.henaisha-menu-card {
  height: 100%;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 18px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.henaisha-menu-card:hover {
  transform: translateY(-6px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* =========================================================
       IMAGE
      ========================================================= */

.henaisha-menu-card-image {
  width: 100%;
  height: 245px;

  overflow: hidden;

  background: #fffdf5;
}

.henaisha-menu-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.4s ease;
}

.henaisha-menu-card:hover .henaisha-menu-card-image img {
  transform: scale(1.04);
}

/* =========================================================
       CARD BODY
      ========================================================= */

.henaisha-menu-card-body {
  display: flex;
  flex-direction: column;

  min-height: 245px;

  padding: 25px;
}

.henaisha-menu-category {
  margin-bottom: 8px;

  color: #f4c430;

  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.henaisha-menu-title {
  margin-bottom: 10px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 21px;
  font-weight: 700;

  line-height: 1.35;
}

.henaisha-menu-description {
  margin-bottom: 20px;

  color: #667085;

  font-family: "Poppins", sans-serif;
  font-size: 13px;

  line-height: 1.7;
}

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

.henaisha-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: auto;

  padding-top: 18px;

  border-top: 1px solid #e5e7eb;
}

.henaisha-menu-price {
  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;

  white-space: nowrap;
}

.henaisha-menu-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 15px;

  border-radius: 7px;

  background: #111111;

  color: #ffffff;

  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-menu-detail:hover {
  background: #f4c430;

  color: #111111;

  text-decoration: none;
}

/* =========================================================
       EMPTY
      ========================================================= */

.henaisha-empty-catalog {
  padding: 70px 20px;

  text-align: center;

  border: 1px dashed #d1d5db;
  border-radius: 15px;

  background: #fffdf5;
}

.henaisha-empty-icon {
  margin-bottom: 20px;

  color: #f4c430;

  font-size: 40px;
}

.henaisha-empty-catalog h3 {
  margin-bottom: 10px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.henaisha-empty-catalog p {
  margin-bottom: 25px;

  color: #667085;

  font-size: 14px;
}

/* =========================================================
       CTA
      ========================================================= */

.henaisha-catalog-cta {
  padding: 40px 0 80px;
}

.henaisha-cta-box {
  padding: 45px;

  border-radius: 20px;

  background: #f4c430;
}

.henaisha-cta-box .henaisha-section-label {
  color: #111111;
}

.henaisha-cta-box h2 {
  margin-bottom: 12px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.henaisha-cta-box p {
  margin-bottom: 0;

  color: #333333;

  font-family: "Poppins", sans-serif;
  font-size: 14px;

  line-height: 1.7;
}

.henaisha-cta-box .btn-henaisha-dark {
  padding: 13px 25px;

  border-radius: 7px;

  font-size: 13px;
}

/* =========================================================
       RESPONSIVE
      ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-page-header {
    padding: 120px 0 55px;
  }

  .henaisha-page-title {
    font-size: 40px;
  }

  .henaisha-menu-card-image {
    height: 230px;
  }

  .henaisha-cta-box {
    padding: 35px;
  }
}

@media (max-width: 767.98px) {
  .henaisha-page-header {
    padding: 90px 0 45px;
  }

  .henaisha-page-title {
    font-size: 34px;
  }

  .henaisha-page-description {
    font-size: 14px;
  }

  .henaisha-catalog-info {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }

  .henaisha-menu-card-image {
    height: 240px;
  }

  .henaisha-cta-box {
    padding: 30px;
  }

  .henaisha-cta-box h2 {
    font-size: 25px;
  }
}

@media (max-width: 575.98px) {
  .henaisha-page-header {
    padding: 75px 0 40px;
  }

  .henaisha-page-title {
    font-size: 29px;
  }

  .henaisha-catalog-filter {
    gap: 7px;
  }

  .henaisha-filter-btn {
    min-width: 90px;

    padding: 9px 15px;

    font-size: 11px;
  }

  .henaisha-menu-card-body {
    padding: 20px;
  }

  .henaisha-menu-title {
    font-size: 19px;
  }

  .henaisha-menu-footer {
    align-items: flex-start;

    flex-direction: column;
  }

  .henaisha-menu-detail {
    width: 100%;
  }

  .henaisha-cta-box {
    padding: 25px;
  }
}
/* =========================================================
         DETAIL MENU
      ========================================================= */

.henaisha-detail-header {
  padding: 125px 0 25px;

  background: #ffffff;
}

.henaisha-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px;

  color: #98a2b3;

  font-family: "Poppins", sans-serif;
  font-size: 12px;
}

.henaisha-breadcrumb a {
  color: #111111;

  font-weight: 500;

  text-decoration: none;
}

.henaisha-breadcrumb a:hover {
  color: #f4c430;
}

.henaisha-detail-section {
  padding: 30px 0 90px;

  background: #ffffff;
}

.henaisha-detail-image {
  width: 100%;
  height: 500px;

  overflow: hidden;

  border-radius: 20px;

  background: #fffdf5;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.henaisha-detail-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.henaisha-detail-content {
  padding-left: 35px;
}

.henaisha-detail-category {
  margin-bottom: 12px;

  color: #f4c430;

  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.henaisha-detail-title {
  margin-bottom: 18px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 42px;
  font-weight: 700;

  line-height: 1.2;
}

.henaisha-detail-price {
  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.henaisha-detail-divider {
  width: 100%;
  height: 1px;

  margin: 25px 0;

  background: #e5e7eb;
}

.henaisha-detail-description h4 {
  margin-bottom: 10px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.henaisha-detail-description p {
  margin-bottom: 0;

  color: #667085;

  font-family: "Poppins", sans-serif;
  font-size: 14px;

  line-height: 1.8;
}

.henaisha-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}

.henaisha-detail-actions .btn {
  padding: 12px 22px;

  border-radius: 7px;

  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
       OUTLINE BUTTON
      ========================================================= */

.btn-henaisha-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #111111;

  background: #ffffff;

  color: #111111;
}

.btn-henaisha-outline:hover {
  border-color: #f4c430;

  background: #f4c430;

  color: #111111;
}

/* =========================================================
       RECOMMENDATION
      ========================================================= */

.henaisha-recommendation-section {
  padding: 80px 0;

  background: #fffdf5;
}

.henaisha-section-title {
  margin-bottom: 12px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 36px;
  font-weight: 700;

  line-height: 1.2;
}

.henaisha-section-description {
  max-width: 650px;

  margin-right: auto;
  margin-left: auto;

  color: #667085;

  font-family: "Poppins", sans-serif;
  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
       CTA
      ========================================================= */

.henaisha-detail-cta {
  padding: 0 0 80px;

  background: #fffdf5;
}

/* =========================================================
       RESPONSIVE
      ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-detail-header {
    padding-top: 100px;
  }

  .henaisha-detail-content {
    padding-left: 0;
  }

  .henaisha-detail-image {
    height: 420px;
  }

  .henaisha-detail-title {
    font-size: 36px;
  }
}

@media (max-width: 767.98px) {
  .henaisha-detail-header {
    padding-top: 80px;
  }

  .henaisha-detail-section {
    padding-bottom: 60px;
  }

  .henaisha-detail-image {
    height: 350px;
  }

  .henaisha-detail-title {
    font-size: 31px;
  }

  .henaisha-detail-price {
    font-size: 21px;
  }

  .henaisha-detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .henaisha-detail-actions .btn {
    width: 100%;
  }

  .henaisha-recommendation-section {
    padding: 60px 0;
  }

  .henaisha-section-title {
    font-size: 30px;
  }
}

@media (max-width: 575.98px) {
  .henaisha-detail-image {
    height: 300px;
  }

  .henaisha-detail-title {
    font-size: 27px;
  }

  .henaisha-detail-category {
    font-size: 11px;
  }

  .henaisha-detail-description p {
    font-size: 13px;
  }

  .henaisha-cta-box {
    padding: 25px;
  }
}
/* =========================================================
         CARA BOOKING
      ========================================================= */

.henaisha-booking-section {
  padding: 80px 0;

  background: #ffffff;
}

.henaisha-booking-section .henaisha-section-title {
  margin-bottom: 12px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 36px;
  font-weight: 700;

  line-height: 1.2;
}

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

.henaisha-booking-step {
  position: relative;

  height: 100%;

  padding: 35px 30px 30px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 15px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.henaisha-booking-step:hover {
  transform: translateY(-6px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* =========================================================
       NUMBER
      ========================================================= */

.henaisha-booking-number {
  position: absolute;

  top: 20px;
  right: 25px;

  color: #f4c430;

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* =========================================================
       ICON
      ========================================================= */

.henaisha-booking-icon {
  width: 60px;
  height: 60px;

  margin-bottom: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f4c430;

  color: #111111;

  border-radius: 50%;

  font-size: 21px;
}

.henaisha-booking-step h3 {
  margin-bottom: 12px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 700;
}

.henaisha-booking-step p {
  margin-bottom: 20px;

  color: #667085;

  font-family: "Poppins", sans-serif;
  font-size: 13px;

  line-height: 1.8;
}

/* =========================================================
       LINK
      ========================================================= */

.henaisha-booking-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;

  text-decoration: none;
}

.henaisha-booking-link:hover {
  color: #f4c430;

  text-decoration: none;
}

.henaisha-booking-link i {
  transition: transform 0.25s ease;
}

.henaisha-booking-link:hover i {
  transform: translateX(4px);
}

/* =========================================================
       INFORMATION BOX
      ========================================================= */

.henaisha-booking-info-section {
  padding: 0 0 80px;

  background: #ffffff;
}

.henaisha-booking-info {
  padding: 45px;

  background: #f4c430;

  border-radius: 20px;
}

.henaisha-booking-info .henaisha-section-label {
  color: #111111;
}

.henaisha-booking-info h2 {
  margin-bottom: 12px;

  color: #111111;

  font-family: "Poppins", sans-serif;
  font-size: 29px;
  font-weight: 700;

  line-height: 1.3;
}

.henaisha-booking-info p {
  margin-bottom: 0;

  color: #333333;

  font-family: "Poppins", sans-serif;
  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
       RESPONSIVE
      ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-booking-section {
    padding: 65px 0;
  }

  .henaisha-booking-section .henaisha-section-title {
    font-size: 32px;
  }

  .henaisha-booking-info {
    padding: 35px;
  }

  .henaisha-booking-info h2 {
    font-size: 26px;
  }
}

@media (max-width: 767.98px) {
  .henaisha-booking-section {
    padding: 55px 0;
  }

  .henaisha-booking-section .henaisha-section-title {
    font-size: 29px;
  }

  .henaisha-booking-step {
    padding: 30px 25px;
  }

  .henaisha-booking-info {
    padding: 30px;
  }

  .henaisha-booking-info h2 {
    font-size: 24px;
  }
}

@media (max-width: 575.98px) {
  .henaisha-booking-section .henaisha-section-title {
    font-size: 26px;
  }

  .henaisha-booking-step {
    padding: 27px 22px;
  }

  .henaisha-booking-info {
    padding: 25px;
  }

  .henaisha-booking-info h2 {
    font-size: 22px;
  }
}
/* =========================================================
         GALERI PUBLIC
      ========================================================= */

.page-header {
  position: relative;
  padding: 100px 0 90px;
  background: var(--henaisha-primary) !important;
  overflow: hidden;
}

.page-header::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  right: -80px;
  top: -100px;
}

.page-header-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: auto;
  text-align: center;
}

.page-header-subtitle {
  display: block;
  margin-bottom: 12px;
  color: var(--henaisha-secondary) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.page-header h1 {
  margin: 0 0 15px;
  color: var(--henaisha-secondary) !important;
  font-size: 52px;
  font-weight: 800;
}

.page-header p {
  margin: 0;
  color: var(--henaisha-secondary) !important;
  font-size: 17px;
  line-height: 1.8;
}

/* =========================================================
       GALLERY SECTION
      ========================================================= */

.gallery-section {
  padding: 90px 0 100px;
  background: var(--henaisha-white);
}

.gallery-section .section-heading {
  max-width: 760px;
  margin: 0 auto 40px;
}

.gallery-section .section-heading span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--henaisha-secondary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.gallery-section .section-heading h2 {
  margin: 0 0 15px;
  color: var(--henaisha-secondary);
  font-size: 38px;
  font-weight: 800;
}

.gallery-section .section-heading p {
  margin: 0;
  color: var(--henaisha-muted);
  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
       FILTER
      ========================================================= */

.gallery-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 45px;
}

.gallery-filter a {
  display: inline-block;
  padding: 11px 24px;
  border: 2px solid var(--henaisha-secondary);
  border-radius: 30px;
  background: var(--henaisha-white);
  color: var(--henaisha-secondary) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.gallery-filter a:hover,
.gallery-filter a.active {
  background: var(--henaisha-secondary);
  color: var(--henaisha-primary) !important;
}

/* =========================================================
       GALLERY GRID
      ========================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* =========================================================
       GALLERY CARD
      ========================================================= */

.gallery-card {
  overflow: hidden;
  border-radius: 18px;
  background: var(--henaisha-white);
  border: 1px solid var(--henaisha-border);
  box-shadow: 0 8px 30px rgba(17, 17, 17, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(17, 17, 17, 0.12);
}

/* =========================================================
       GALLERY IMAGE
      ========================================================= */

.gallery-image {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: var(--henaisha-light);
}

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

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

.gallery-overlay {
  position: absolute;
  left: 18px;
  top: 18px;
}

.gallery-category {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =========================================================
       GALLERY CONTENT
      ========================================================= */

.gallery-content {
  padding: 22px 24px 25px;
}

.gallery-content h3 {
  margin: 0 0 10px;
  color: var(--henaisha-secondary);
  font-size: 20px;
  font-weight: 700;
}

.gallery-content p {
  margin: 0;
  color: var(--henaisha-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
       EMPTY STATE
      ========================================================= */

.gallery-empty {
  max-width: 650px;
  margin: 20px auto 0;
  padding: 65px 30px;
  border: 1px dashed var(--henaisha-border);
  border-radius: 18px;
  background: var(--henaisha-light);
  text-align: center;
}

.gallery-empty-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.gallery-empty h3 {
  margin: 0 0 10px;
  color: var(--henaisha-secondary);
  font-size: 24px;
  font-weight: 800;
}

.gallery-empty p {
  margin: 0 0 25px;
  color: var(--henaisha-muted);
}

.btn-gallery {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 30px;
  background: var(--henaisha-secondary);
  color: var(--henaisha-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.btn-gallery:hover {
  background: var(--henaisha-primary);
  color: var(--henaisha-secondary) !important;
}

/* =========================================================
       RESPONSIVE
      ========================================================= */

@media (max-width: 991px) {
  .page-header {
    padding: 80px 0 70px;
  }

  .page-header h1 {
    font-size: 44px;
  }

  .gallery-section {
    padding: 70px 0 80px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .page-header {
    padding: 65px 0 60px;
  }

  .page-header h1 {
    font-size: 38px;
  }

  .page-header p {
    font-size: 15px;
  }

  .gallery-section .section-heading h2 {
    font-size: 30px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .gallery-image {
    height: 250px;
  }

  .gallery-filter {
    gap: 7px;
  }

  .gallery-filter a {
    padding: 9px 18px;
  }
}
/* =========================================================
         ADMIN - GALERI
      ========================================================= */

.admin-gallery-thumbnail {
  width: 90px;
  height: 65px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--light);
}

.admin-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-gallery-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-gallery-title strong {
  color: var(--secondary);
  font-size: 14px;
}

.admin-gallery-title small {
  max-width: 350px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-badge-category {
  background: rgba(244, 196, 48, 0.18);
  color: #7a5b00;
}

.admin-inline-form {
  display: inline;
  margin: 0;
}

.admin-action-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-action-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-action-edit {
  background: #f2f4f7;
  color: var(--secondary);
}

.admin-action-edit:hover {
  background: var(--secondary);
  color: var(--white);
}

.admin-action-warning {
  background: #fff4d6;
  color: #8a6500;
}

.admin-action-warning:hover {
  background: var(--primary);
  color: var(--secondary);
}

.admin-action-success {
  background: #f2f4f7;
  color: var(--secondary);
}

.admin-action-success:hover {
  background: var(--primary);
  color: var(--secondary);
}

.admin-action-delete {
  background: #fdecec;
  color: #b42318;
}

.admin-action-delete:hover {
  background: #b42318;
  color: var(--white);
}

@media (max-width: 767px) {
  .admin-gallery-thumbnail {
    width: 70px;
    height: 55px;
  }

  .admin-action-group {
    flex-wrap: wrap;
  }
}
/* =========================================================
         ADMIN - FORM GALERI
      ========================================================= */

.admin-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.admin-form-group {
  margin-bottom: 22px;
}

.admin-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--secondary);
  font-size: 14px;
  font-weight: 700;
}

.admin-form-group .required {
  color: #b42318;
}

.admin-form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.15);
}

textarea.admin-form-control {
  min-height: 120px;
  resize: vertical;
}

.admin-form-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* =========================
       FILE UPLOAD
      ========================= */

.admin-file-upload {
  position: relative;
}

.admin-file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.admin-file-label {
  width: 100%;
  min-height: 150px;
  margin: 0 !important;
  padding: 30px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--light);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.admin-file-label:hover {
  border-color: var(--primary);
  background: #fffbea;
}

.admin-file-label i {
  margin-bottom: 5px;
  color: var(--secondary);
  font-size: 30px;
}

.admin-file-label strong {
  color: var(--secondary);
  font-size: 15px;
}

.admin-file-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* =========================
       IMAGE PREVIEW
      ========================= */

.admin-image-preview {
  margin-top: 15px;
}

.admin-image-preview img {
  width: 100%;
  max-width: 420px;
  max-height: 280px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* =========================
       FORM ACTIONS
      ========================= */

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

/* =========================
       INFORMATION CARD
      ========================= */

.admin-form-info {
  position: sticky;
  top: 25px;
}

.admin-info-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.admin-info-list li:last-child {
  border-bottom: 0;
}

.admin-info-list i {
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--secondary);
}

/* =========================
       RESPONSIVE
      ========================= */

@media (max-width: 991px) {
  .admin-form-layout {
    grid-template-columns: 1fr;
  }

  .admin-form-info {
    position: static;
  }
}

@media (max-width: 575px) {
  .admin-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .admin-form-actions .admin-btn {
    width: 100%;
    justify-content: center;
  }

  .admin-file-label {
    padding: 25px 15px;
  }
}
/* =========================================================
         ADMIN - CURRENT GALLERY IMAGE
      ========================================================= */

.admin-current-image {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--light);
}

.admin-current-image img {
  width: 100%;
  max-height: 280px;
  display: block;
  object-fit: cover;
}
/* =========================================================
         ABOUT PAGE
      ========================================================= */

.henaisha-about-header {
  background-color: var(--henaisha-light) !important;
  padding: 90px 0 70px;
}

.henaisha-about-section {
  padding: 90px 0;
  background-color: var(--henaisha-white);
}

.henaisha-about-image {
  overflow: hidden;
  border-radius: 8px;
}

.henaisha-about-image img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.henaisha-about-text {
  color: var(--henaisha-muted);
  line-height: 1.8;
}

.henaisha-about-services {
  padding: 90px 0;
  background-color: var(--henaisha-light);
}

.henaisha-about-service-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;

  padding: 35px 30px;

  background-color: var(--henaisha-white);
  border: 1px solid var(--henaisha-border);

  transition: all 0.3s ease;
}

.henaisha-about-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.1);
}

.henaisha-about-service-icon {
  flex: 0 0 55px;

  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  border-radius: 50%;

  font-size: 20px;
}

.henaisha-about-service-card h3 {
  margin-bottom: 12px;

  color: var(--henaisha-secondary);
  font-size: 21px;
  font-weight: 700;
}

.henaisha-about-service-card p {
  margin-bottom: 0;

  color: var(--henaisha-muted);
  line-height: 1.7;
}

.henaisha-about-cta {
  padding: 70px 0;

  background-color: var(--henaisha-primary);
}

.henaisha-about-cta h2 {
  color: var(--henaisha-secondary);
  font-weight: 700;
}

.henaisha-about-cta p {
  color: var(--henaisha-secondary);
}

@media (max-width: 991.98px) {
  .henaisha-about-image img {
    height: 380px;
  }

  .henaisha-about-section,
  .henaisha-about-services {
    padding: 70px 0;
  }
}

@media (max-width: 767.98px) {
  .henaisha-about-header {
    padding: 60px 0 45px;
  }

  .henaisha-about-image img {
    height: 280px;
  }

  .henaisha-about-service-card {
    padding: 25px 20px;
  }

  .henaisha-about-cta {
    padding: 55px 0;
  }
}
/* =========================================================
         CONTACT PAGE
      ========================================================= */

.henaisha-contact-header {
  background-color: var(--henaisha-light) !important;
}

.henaisha-contact-section {
  padding: 90px 0;
  background-color: var(--henaisha-white);
}

.henaisha-contact-intro {
  margin-bottom: 35px;
}

.henaisha-contact-description {
  color: var(--henaisha-muted);
  line-height: 1.8;
}

/* CONTACT CARD */

.henaisha-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--henaisha-border);
}

.henaisha-contact-card:first-of-type {
  border-top: 1px solid var(--henaisha-border);
}

.henaisha-contact-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  border-radius: 50%;
  font-size: 19px;
}

.henaisha-contact-card h3 {
  margin-bottom: 6px;
  color: var(--henaisha-secondary);
  font-size: 18px;
  font-weight: 700;
}

.henaisha-contact-card p {
  margin-bottom: 0;
  color: var(--henaisha-muted);
  line-height: 1.6;
}

/* CONTACT ACTION */

.henaisha-contact-action {
  height: 100%;
  padding: 45px 40px;
  background-color: var(--henaisha-light);
  border: 1px solid var(--henaisha-border);
}

.henaisha-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* CTA */

.henaisha-contact-cta {
  padding: 70px 0;
  background-color: var(--henaisha-primary);
}

.henaisha-contact-cta h2 {
  margin-bottom: 12px;
  color: var(--henaisha-secondary);
  font-weight: 700;
}

.henaisha-contact-cta p {
  color: var(--henaisha-secondary);
}

/* RESPONSIVE */

@media (max-width: 767.98px) {
  .henaisha-contact-section {
    padding: 60px 0;
  }

  .henaisha-contact-action {
    padding: 30px 25px;
  }

  .henaisha-contact-actions {
    flex-direction: column;
  }

  .henaisha-contact-actions .btn {
    width: 100%;
  }

  .henaisha-contact-cta {
    padding: 55px 0;
  }
}
/* =========================================================
         WISHLIST
         ========================================================= */

.henaisha-wishlist-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.henaisha-wishlist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50px;
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Tombol heart pada card */

.henaisha-wishlist-button {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background-color: var(--henaisha-white);
  color: var(--henaisha-secondary);

  font-size: 17px;

  cursor: pointer;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1);

  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.henaisha-wishlist-button:hover {
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  transform: translateY(-2px);
}

.henaisha-wishlist-button.is-active {
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
}

.henaisha-wishlist-button.is-active i::before {
  content: "\f004";
}
/* Header */

.henaisha-wishlist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 30px 32px 24px;

  border-bottom: 1px solid var(--henaisha-border);
}

.henaisha-wishlist-label-title {
  display: block;

  margin-bottom: 7px;

  color: var(--henaisha-primary);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.henaisha-wishlist-header h2 {
  margin: 0 0 7px;

  color: var(--henaisha-secondary);

  font-size: 28px;
  font-weight: 700;
}

.henaisha-wishlist-header p {
  margin: 0;

  color: var(--henaisha-muted);

  font-size: 14px;
  line-height: 1.6;
}

.henaisha-wishlist-close {
  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background-color: #f5f5f5;
  color: var(--henaisha-secondary);

  cursor: pointer;

  transition: 0.2s ease;
}

.henaisha-wishlist-close:hover {
  background-color: var(--henaisha-primary);
}

/* Body */

.henaisha-wishlist-body {
  max-height: 52vh;

  overflow-y: auto;

  padding: 22px 32px;
}

/* Empty */

.henaisha-wishlist-empty {
  padding: 45px 20px;

  text-align: center;
}

.henaisha-wishlist-empty-icon {
  width: 70px;
  height: 70px;

  margin: 0 auto 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background-color: var(--henaisha-light);
  color: var(--henaisha-secondary);

  font-size: 28px;
}

.henaisha-wishlist-empty h3 {
  margin-bottom: 8px;

  color: var(--henaisha-secondary);

  font-size: 20px;
}

.henaisha-wishlist-empty p {
  max-width: 430px;

  margin: 0 auto 22px;

  color: var(--henaisha-muted);

  line-height: 1.7;
}

/* List */

.henaisha-wishlist-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.henaisha-wishlist-item {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 12px;

  border: 1px solid var(--henaisha-border);
  border-radius: 12px;

  background-color: var(--henaisha-white);

  transition: 0.2s ease;
}

.henaisha-wishlist-item:hover {
  border-color: var(--henaisha-primary);
}

.henaisha-wishlist-item-image {
  flex: 0 0 78px;

  width: 78px;
  height: 78px;

  overflow: hidden;

  border-radius: 10px;

  background-color: var(--henaisha-light);
}

.henaisha-wishlist-item-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.henaisha-wishlist-item-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--henaisha-muted);

  font-size: 22px;
}

.henaisha-wishlist-item-content {
  flex: 1;
  min-width: 0;
}

.henaisha-wishlist-item-content h4 {
  margin: 0 0 5px;

  color: var(--henaisha-secondary);

  font-size: 16px;
  font-weight: 700;
}

.henaisha-wishlist-item-content p {
  margin: 0;

  color: var(--henaisha-muted);

  font-size: 13px;
}

.henaisha-wishlist-item-price {
  margin-top: 5px;

  color: var(--henaisha-secondary);

  font-size: 14px;
  font-weight: 700;
}

.henaisha-wishlist-item-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.henaisha-wishlist-item-actions a,
.henaisha-wishlist-remove {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--henaisha-border);
  border-radius: 8px;

  background-color: var(--henaisha-white);
  color: var(--henaisha-secondary);

  cursor: pointer;

  transition: 0.2s ease;
}

.henaisha-wishlist-item-actions a:hover {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
}

.henaisha-wishlist-remove:hover {
  background-color: #f3f3f3;
}

/* Footer */

.henaisha-wishlist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 18px 32px;

  border-top: 1px solid var(--henaisha-border);

  background-color: #fafafa;

  color: var(--henaisha-muted);

  font-size: 14px;
}

.henaisha-wishlist-footer strong {
  color: var(--henaisha-secondary);
}

.henaisha-wishlist-clear {
  border: 0;

  background: transparent;

  color: var(--henaisha-secondary);

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.henaisha-wishlist-clear:hover {
  color: #000;
}

/* Responsive */

@media (max-width: 575.98px) {
  .henaisha-wishlist-modal {
    width: calc(100% - 20px);
    max-height: 90vh;
    border-radius: 14px;
  }

  .henaisha-wishlist-header {
    padding: 24px 20px 20px;
  }

  .henaisha-wishlist-header h2 {
    font-size: 23px;
  }

  .henaisha-wishlist-body {
    padding: 18px 20px;
  }

  .henaisha-wishlist-footer {
    padding: 16px 20px;
  }

  .henaisha-wishlist-item {
    align-items: flex-start;
  }

  .henaisha-wishlist-item-image {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }

  .henaisha-wishlist-item-actions {
    flex-direction: column;
  }

  .henaisha-wishlist-item-content h4 {
    font-size: 14px;
  }
}
/* =========================================================
         KATALOG MENU - FINAL LAYOUT
         ========================================================= */

.henaisha-catalog-section {
  padding: 80px 0;
  background-color: var(--henaisha-white);
}

/* =========================================================
         FILTER KATEGORI
         ========================================================= */

.henaisha-catalog-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 45px;
}

.henaisha-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  padding: 10px 22px;

  border: 1px solid var(--henaisha-border);
  border-radius: 50px;

  background-color: var(--henaisha-white);
  color: var(--henaisha-secondary);

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-filter-button:hover {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  text-decoration: none;
}

.henaisha-filter-button.active {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
}

/* =========================================================
         MENU GRID
         ========================================================= */

/*
       * Override Bootstrap .row / .col agar katalog
       * menggunakan grid yang konsisten.
       */

#menuList {
  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 30px;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/*
       * Setiap item menu menjadi grid item.
       */

#menuList > .menu-item {
  width: 100% !important;
  max-width: none !important;

  flex: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Jika menggunakan wrapper .henaisha-menu-grid */

.henaisha-menu-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 30px;

  width: 100%;
}

/* =========================================================
         MENU CARD
         ========================================================= */

.henaisha-menu-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  height: 100%;

  overflow: hidden;

  background-color: var(--henaisha-white);

  border: 1px solid var(--henaisha-border);
  border-radius: 14px;

  box-shadow: 0 5px 20px rgba(17, 17, 17, 0.06);

  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.henaisha-menu-card:hover {
  transform: translateY(-6px);

  border-color: rgba(244, 196, 48, 0.65);

  box-shadow: 0 15px 35px rgba(17, 17, 17, 0.12);
}

/* =========================================================
         IMAGE AREA
         ========================================================= */

.henaisha-menu-card-image {
  position: relative;

  width: 100%;
  height: 240px;

  overflow: hidden;

  background-color: var(--henaisha-light);
}

.henaisha-menu-card-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;
}

.henaisha-menu-card:hover .henaisha-menu-card-image img {
  transform: scale(1.04);
}

/* Placeholder ketika foto kosong */

.henaisha-menu-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--henaisha-light);

  color: var(--henaisha-muted);

  font-size: 42px;
}

/* =========================================================
         WISHLIST BUTTON
         ========================================================= */

.henaisha-wishlist-button {
  position: absolute;

  top: 15px;
  right: 15px;

  z-index: 5;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  border-radius: 50%;

  background-color: var(--henaisha-white);
  color: var(--henaisha-secondary);

  font-size: 17px;

  cursor: pointer;

  box-shadow: 0 5px 18px rgba(17, 17, 17, 0.15);

  transition: all 0.2s ease;
}

.henaisha-wishlist-button:hover {
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  transform: scale(1.05);
}

.henaisha-wishlist-button.is-active {
  background-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
}

/* =========================================================
         CARD CONTENT
         ========================================================= */

.henaisha-menu-card-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 24px;
}

/* Label kategori */

.henaisha-menu-label {
  display: block;

  margin-bottom: 8px;

  color: var(--henaisha-primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Nama menu */

.henaisha-menu-card-title {
  margin: 0 0 10px;

  color: var(--henaisha-secondary);

  font-size: 20px;
  font-weight: 700;

  line-height: 1.35;
}

/* Deskripsi */

.henaisha-menu-card-description {
  display: -webkit-box;

  margin: 0 0 20px;

  overflow: hidden;

  color: var(--henaisha-muted);

  font-size: 14px;

  line-height: 1.7;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

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

.henaisha-menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: auto;
  padding-top: 18px;

  border-top: 1px solid var(--henaisha-border);
}

/* Harga */

.henaisha-menu-price {
  margin: 0;

  color: var(--henaisha-secondary);

  font-size: 18px;
  font-weight: 800;

  white-space: nowrap;
}

/* Tombol detail */

.henaisha-menu-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 16px;

  border: 2px solid var(--henaisha-secondary);
  border-radius: 7px;

  background-color: var(--henaisha-secondary);
  color: var(--henaisha-white);

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;

  transition: all 0.2s ease;
}

.henaisha-menu-detail:hover {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);

  text-decoration: none;
}

/* =========================================================
         EMPTY STATE
         ========================================================= */

.henaisha-catalog-empty {
  padding: 70px 30px;

  text-align: center;

  background-color: var(--henaisha-light);

  border: 1px dashed var(--henaisha-border);
  border-radius: 14px;
}

.henaisha-catalog-empty i {
  margin-bottom: 18px;

  color: var(--henaisha-primary);

  font-size: 42px;
}

.henaisha-catalog-empty h3 {
  margin-bottom: 10px;

  color: var(--henaisha-secondary);

  font-size: 22px;
}

.henaisha-catalog-empty p {
  margin: 0;

  color: var(--henaisha-muted);
}

/* =========================================================
         CATALOG CTA
         ========================================================= */

.henaisha-catalog-cta {
  margin-top: 60px;
  padding: 55px 30px;

  text-align: center;

  background-color: var(--henaisha-primary);

  border-radius: 14px;
}

.henaisha-catalog-cta h2 {
  margin-bottom: 10px;

  color: var(--henaisha-secondary);

  font-weight: 700;
}

.henaisha-catalog-cta p {
  margin-bottom: 25px;

  color: var(--henaisha-secondary);
}

/* =========================================================
         TABLET
         ========================================================= */

@media (max-width: 991.98px) {
  #menuList,
  .henaisha-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .henaisha-menu-card-image {
    height: 220px;
  }
}

/* =========================================================
         MOBILE
         ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-catalog-section {
    padding: 55px 0;
  }

  #menuList,
  .henaisha-menu-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .henaisha-catalog-filter {
    gap: 8px;
    margin-bottom: 30px;
  }

  .henaisha-filter-button {
    min-width: 95px;
    padding: 9px 16px;

    font-size: 13px;
  }

  .henaisha-menu-card-image {
    height: 220px;
  }

  .henaisha-menu-card-content {
    padding: 20px;
  }

  .henaisha-menu-card-title {
    font-size: 18px;
  }

  .henaisha-menu-card-footer {
    align-items: flex-end;
  }

  .henaisha-menu-price {
    font-size: 16px;
  }

  .henaisha-menu-detail {
    padding: 8px 12px;
    font-size: 11px;
  }
}
/* =========================================================
         KATALOG MENU - FINAL
         Sesuai struktur katalog.php
         ========================================================= */

/* =========================================================
         CATALOG SECTION
         ========================================================= */

.henaisha-catalog-section {
  padding: 80px 0;
  background-color: var(--henaisha-white);
}

/* =========================================================
         FILTER
         ========================================================= */

.henaisha-catalog-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 30px;
}

.henaisha-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 105px;

  padding: 10px 22px;

  border: 1px solid var(--henaisha-border);
  border-radius: 30px;

  background-color: var(--henaisha-white);
  color: var(--henaisha-secondary);

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  transition: all 0.25s ease;
}

.henaisha-filter-btn:hover {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  text-decoration: none;
}

.henaisha-filter-btn.active {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
}

/* =========================================================
         CATALOG INFORMATION
         ========================================================= */

.henaisha-catalog-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 30px;
  padding-bottom: 15px;

  border-bottom: 1px solid var(--henaisha-border);

  color: var(--henaisha-muted);

  font-size: 14px;
}

.henaisha-catalog-info strong {
  color: var(--henaisha-secondary);
}

/* =========================================================
         BOOTSTRAP ROW FIX
         ========================================================= */

/*
       * Bootstrap .row memberikan margin negatif.
       * Untuk katalog kita reset agar card tidak bergeser.
       */

.henaisha-catalog-section .row {
  margin-left: -15px;
  margin-right: -15px;
}

/*
       * Kolom Bootstrap tetap digunakan.
       * Tidak perlu mengganti struktur katalog.php.
       */

.henaisha-catalog-section .col-lg-4,
.henaisha-catalog-section .col-md-6 {
  display: flex;
}

/* =========================================================
         MENU CARD
         ========================================================= */

.henaisha-menu-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background-color: var(--henaisha-white);

  border: 1px solid var(--henaisha-border);
  border-radius: 14px;

  box-shadow: 0 5px 20px rgba(17, 17, 17, 0.06);

  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.henaisha-menu-card:hover {
  transform: translateY(-6px);

  border-color: var(--henaisha-primary);

  box-shadow: 0 15px 35px rgba(17, 17, 17, 0.12);
}

/* =========================================================
         MENU IMAGE
         ========================================================= */

.henaisha-menu-card > img {
  display: block;

  width: 100%;
  height: 240px;

  object-fit: cover;

  background-color: var(--henaisha-light);

  transition: transform 0.4s ease;
}

.henaisha-menu-card:hover > img {
  transform: scale(1.03);
}

/*
       * Placeholder ketika foto kosong
       */

.henaisha-menu-placeholder {
  width: 100%;
  height: 240px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--henaisha-light);

  color: var(--henaisha-primary);

  font-size: 42px;
}

/* =========================================================
         WISHLIST BUTTON
         ========================================================= */

.henaisha-wishlist-button {
  position: absolute;

  top: 15px;
  right: 15px;

  z-index: 5;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  border-radius: 50%;

  background-color: var(--henaisha-white);
  color: var(--henaisha-secondary);

  font-size: 16px;

  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.15);

  cursor: pointer;

  transition: all 0.2s ease;
}

.henaisha-wishlist-button:hover {
  background-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);

  transform: scale(1.05);
}

/* =========================================================
         CARD BODY
         ========================================================= */

.henaisha-menu-card-body {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 22px 22px 20px;
}

/* =========================================================
         CATEGORY
         ========================================================= */

.henaisha-menu-category {
  margin-bottom: 8px;

  color: var(--henaisha-primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

/* =========================================================
         TITLE
         ========================================================= */

.henaisha-menu-title {
  margin: 0 0 10px;

  color: var(--henaisha-secondary);

  font-size: 20px;
  font-weight: 700;

  line-height: 1.35;
}

/* =========================================================
         DESCRIPTION
         ========================================================= */

.henaisha-menu-description {
  min-height: 48px;

  margin-bottom: 20px;

  color: var(--henaisha-muted);

  font-size: 13px;

  line-height: 1.7;
}

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

.henaisha-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: auto;
  padding-top: 16px;

  border-top: 1px solid var(--henaisha-border);
}

/* =========================================================
         PRICE
         ========================================================= */

.henaisha-menu-price {
  display: block;

  color: var(--henaisha-secondary);

  font-size: 17px;
  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
         DETAIL BUTTON
         ========================================================= */

.henaisha-menu-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 15px;

  border: 2px solid var(--henaisha-secondary);
  border-radius: 6px;

  background-color: var(--henaisha-secondary);
  color: var(--henaisha-white);

  font-size: 11px;
  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  transition: all 0.2s ease;
}

.henaisha-menu-detail:hover {
  background-color: var(--henaisha-primary);
  border-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);

  text-decoration: none;
}

/* =========================================================
         EMPTY CATALOG
         ========================================================= */

.henaisha-empty-catalog {
  padding: 70px 30px;

  text-align: center;

  background-color: var(--henaisha-light);

  border: 1px dashed var(--henaisha-border);
  border-radius: 14px;
}

.henaisha-empty-icon {
  margin-bottom: 20px;

  color: var(--henaisha-primary);

  font-size: 42px;
}

.henaisha-empty-catalog h3 {
  margin-bottom: 10px;

  color: var(--henaisha-secondary);

  font-size: 22px;
  font-weight: 700;
}

.henaisha-empty-catalog p {
  margin-bottom: 25px;

  color: var(--henaisha-muted);
}

/* =========================================================
         CATALOG CTA
         ========================================================= */

.henaisha-catalog-cta {
  padding: 70px 0;

  background-color: var(--henaisha-primary);
}

.henaisha-cta-box {
  padding: 45px;

  background-color: var(--henaisha-primary);
}

.henaisha-cta-box h2 {
  margin-bottom: 12px;

  color: var(--henaisha-secondary);

  font-weight: 700;
}

.henaisha-cta-box p {
  margin-bottom: 0;

  color: var(--henaisha-secondary);
}

/* =========================================================
         WISHLIST MODAL
         ========================================================= */

.henaisha-wishlist-modal {
  width: min(720px, calc(100% - 30px));

  max-height: 85vh;

  padding: 0;

  border: none;
  border-radius: 16px;

  background-color: var(--henaisha-white);

  box-shadow: 0 25px 80px rgba(17, 17, 17, 0.25);
}

.henaisha-wishlist-modal::backdrop {
  background: rgba(17, 17, 17, 0.55);
}

.henaisha-wishlist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 25px 30px;

  border-bottom: 1px solid var(--henaisha-border);
}

.henaisha-wishlist-label-title {
  display: block;

  margin-bottom: 5px;

  color: var(--henaisha-primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.henaisha-wishlist-header h2 {
  margin: 0 0 5px;

  color: var(--henaisha-secondary);

  font-size: 24px;
  font-weight: 700;
}

.henaisha-wishlist-header p {
  margin: 0;

  color: var(--henaisha-muted);

  font-size: 13px;
}

.henaisha-wishlist-close {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  border: none;
  border-radius: 50%;

  background-color: var(--henaisha-light);
  color: var(--henaisha-secondary);

  cursor: pointer;
}

.henaisha-wishlist-close:hover {
  background-color: var(--henaisha-primary);
}

.henaisha-wishlist-body {
  padding: 30px;

  max-height: 55vh;

  overflow-y: auto;
}

.henaisha-wishlist-empty {
  padding: 40px 20px;

  text-align: center;
}

.henaisha-wishlist-empty-icon {
  margin-bottom: 15px;

  color: var(--henaisha-primary);

  font-size: 42px;
}

.henaisha-wishlist-empty h3 {
  color: var(--henaisha-secondary);

  font-size: 20px;
}

.henaisha-wishlist-empty p {
  color: var(--henaisha-muted);

  font-size: 14px;
}

.henaisha-wishlist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 18px 30px;

  border-top: 1px solid var(--henaisha-border);
}

.henaisha-wishlist-clear {
  border: none;

  background: transparent;

  color: #b42318;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

/* =========================================================
         RESPONSIVE - TABLET
         ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-menu-card > img,
  .henaisha-menu-placeholder {
    height: 220px;
  }

  .henaisha-menu-card-body {
    padding: 20px;
  }
}

/* =========================================================
         RESPONSIVE - MOBILE
         ========================================================= */

@media (max-width: 767.98px) {
  .henaisha-catalog-section {
    padding: 55px 0;
  }

  .henaisha-catalog-info {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }

  .henaisha-catalog-section .col-lg-4,
  .henaisha-catalog-section .col-md-6 {
    display: block;
  }

  .henaisha-menu-card > img,
  .henaisha-menu-placeholder {
    height: 230px;
  }

  .henaisha-menu-title {
    font-size: 18px;
  }

  .henaisha-menu-footer {
    align-items: center;
  }

  .henaisha-menu-price {
    font-size: 16px;
  }

  .henaisha-menu-detail {
    padding: 8px 12px;

    font-size: 11px;
  }

  .henaisha-catalog-cta {
    padding: 50px 0;
  }

  .henaisha-cta-box {
    padding: 30px 20px;
  }
}

/* =========================================================
         RESPONSIVE - SMALL MOBILE
         ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-catalog-filter {
    gap: 8px;
  }

  .henaisha-filter-btn {
    min-width: 90px;

    padding: 9px 15px;

    font-size: 13px;
  }

  .henaisha-menu-card > img,
  .henaisha-menu-placeholder {
    height: 210px;
  }

  .henaisha-menu-footer {
    flex-wrap: wrap;
  }

  .henaisha-menu-detail {
    flex: 1;

    min-width: 100px;
  }

  .henaisha-wishlist-header {
    padding: 20px;
  }

  .henaisha-wishlist-body {
    padding: 20px;
  }

  .henaisha-wishlist-footer {
    padding: 15px 20px;
  }
}
/* =========================================================
         KATALOG PAGINATION
         ========================================================= */

.henaisha-catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;

  margin-top: 30px;
  margin-bottom: 20px;
}

.henaisha-catalog-pagination nav {
  display: flex;
  justify-content: center;
}

.henaisha-catalog-pagination .pagination {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.henaisha-catalog-pagination .page-item {
  margin: 0;
}

.henaisha-catalog-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;

  padding: 0 12px;

  border: 1px solid var(--henaisha-border);
  border-radius: 8px;

  background: var(--henaisha-white);

  color: var(--henaisha-secondary);

  font-size: 14px;
  font-weight: 600;

  transition: all 0.2s ease;
}

.henaisha-catalog-pagination .page-link:hover {
  background: var(--henaisha-primary);

  border-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);
}

.henaisha-catalog-pagination .page-item.active .page-link {
  background: var(--henaisha-primary);

  border-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);
}

.henaisha-catalog-pagination .page-item.disabled .page-link {
  opacity: 0.45;

  cursor: not-allowed;

  background: #f8f8f8;
}

/* MOBILE */

@media (max-width: 575.98px) {
  .henaisha-catalog-pagination {
    margin-top: 20px;
  }

  .henaisha-catalog-pagination .pagination {
    gap: 5px;
  }

  .henaisha-catalog-pagination .page-link {
    min-width: 36px;
    height: 36px;

    padding: 0 9px;

    font-size: 13px;
  }
}

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

.henaisha-wishlist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  width: 100%;

  padding: 22px 24px 18px;

  border-bottom: 1px solid var(--henaisha-border);

  background: var(--henaisha-white);
}

/* Bagian teks header */

.henaisha-wishlist-header > div {
  min-width: 0;
  flex: 1;
}

/* Label */

.henaisha-wishlist-label-title {
  display: block;

  margin-bottom: 5px;

  color: var(--henaisha-primary);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

/* Judul */

.henaisha-wishlist-header h2 {
  margin: 0 0 6px;

  color: var(--henaisha-secondary);

  font-size: 22px;
  font-weight: 700;

  line-height: 1.25;
}

/* Deskripsi */

.henaisha-wishlist-header p {
  margin: 0;

  max-width: 430px;

  color: var(--henaisha-muted);

  font-size: 13px;

  line-height: 1.6;
}

/* =========================================================
       CLOSE BUTTON
       ========================================================= */

.henaisha-wishlist-close {
  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  margin: 0;
  padding: 0;

  border: 1px solid var(--henaisha-border);
  border-radius: 50%;

  background: var(--henaisha-white);

  color: var(--henaisha-secondary);

  cursor: pointer;

  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.henaisha-wishlist-close:hover {
  background: var(--henaisha-primary);

  border-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);
}

/* =========================================================
       BODY
       ========================================================= */

.henaisha-wishlist-body {
  width: 100%;

  min-height: 260px;
  max-height: calc(100vh - 220px);

  padding: 28px 24px;

  overflow-y: auto;

  background: var(--henaisha-white);
}

/* =========================================================
       EMPTY STATE
       ========================================================= */

.henaisha-wishlist-empty {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-height: 250px;

  width: 100%;

  text-align: center;
}

.henaisha-wishlist-empty-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin-bottom: 16px;

  border-radius: 50%;

  background: var(--henaisha-light);

  color: var(--henaisha-primary);

  font-size: 22px;
}

.henaisha-wishlist-empty h3 {
  margin: 0 0 8px;

  color: var(--henaisha-secondary);

  font-size: 17px;
  font-weight: 600;
}

.henaisha-wishlist-empty p {
  max-width: 340px;

  margin: 0 0 18px;

  color: var(--henaisha-muted);

  font-size: 12px;

  line-height: 1.6;
}

/* =========================================================
       WISHLIST LIST
       ========================================================= */

.henaisha-wishlist-list {
  display: flex;

  flex-direction: column;

  width: 100%;

  gap: 12px;
}

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

.henaisha-wishlist-footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  width: 100%;

  min-height: 58px;

  padding: 14px 20px;

  border-top: 1px solid var(--henaisha-border);

  background: #fafafa;
}

.henaisha-wishlist-footer > span {
  color: var(--henaisha-muted);

  font-size: 12px;
}

.henaisha-wishlist-footer strong {
  color: var(--henaisha-secondary);
}

.henaisha-wishlist-clear {
  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: #d32f2f;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.henaisha-wishlist-clear:hover {
  color: #a00000;
}

/* =========================================================
       BUTTON DI EMPTY STATE
       ========================================================= */

.henaisha-wishlist-empty .btn {
  margin: 0;
}

/* =========================================================
       RESPONSIVE
       ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-wishlist-modal {
    width: calc(100vw - 24px);

    max-height: calc(100vh - 24px);

    border-radius: 14px;
  }

  .henaisha-wishlist-header {
    padding: 18px 18px 15px;

    gap: 12px;
  }

  .henaisha-wishlist-header h2 {
    font-size: 19px;
  }

  .henaisha-wishlist-header p {
    font-size: 12px;
  }

  .henaisha-wishlist-body {
    min-height: 220px;

    padding: 22px 18px;

    max-height: calc(100vh - 190px);
  }

  .henaisha-wishlist-footer {
    padding: 12px 16px;
  }
}
/* =========================================================
         HENAISHA FOOTER - FINAL
         ========================================================= */

.henaisha-footer {
  margin-top: 80px;
  padding: 65px 0 0;
  background: var(--henaisha-secondary);
  color: rgba(255, 255, 255, 0.82);
}

.henaisha-footer .row {
  margin-bottom: 0;
}

/* BRAND */

.henaisha-footer-brand {
  max-width: 430px;
}

.henaisha-footer-logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0;
  padding: 6px;
}

.henaisha-footer-brand p {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.8;
}

/* SOCIAL MEDIA */

.henaisha-footer-social {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
}

.henaisha-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;

  text-decoration: none;
  transition: all 0.25s ease;
}

.henaisha-footer-social a:hover {
  background: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  transform: translateY(-2px);
}

/* TITLE */

.henaisha-footer-title {
  margin: 0 0 22px;

  color: var(--henaisha-primary);
  font-size: 16px;
  font-weight: 700;
}

/* CONTACT */

.henaisha-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.henaisha-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;

  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.henaisha-footer-contact-item i {
  flex: 0 0 18px;
  margin-top: 4px;

  color: var(--henaisha-primary);
  text-align: center;
}

/* NAVIGATION */

.henaisha-footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.henaisha-footer-menu li {
  margin-bottom: 12px;
}

.henaisha-footer-menu a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.henaisha-footer-menu a:hover {
  padding-left: 4px;
  color: var(--henaisha-primary);
}

/* BOTTOM */

.henaisha-footer-bottom {
  margin-top: 55px;
  padding: 22px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.henaisha-footer-bottom p,
.henaisha-footer-bottom a {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.henaisha-footer-bottom a {
  text-decoration: none;
}

.henaisha-footer-bottom a:hover {
  color: var(--henaisha-primary);
}

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

@media (max-width: 767.98px) {
  .henaisha-footer {
    margin-top: 60px;
    padding-top: 50px;
  }

  .henaisha-footer-brand {
    max-width: none;
  }

  .henaisha-footer-logo {
    margin: 0 auto;
  }

  .henaisha-footer-brand p {
    text-align: center;
  }

  .henaisha-footer-social {
    justify-content: center;
  }

  .henaisha-footer-title {
    margin-top: 35px;
    margin-bottom: 17px;
  }

  .henaisha-footer-bottom {
    margin-top: 40px;
  }

  .henaisha-footer-bottom .text-md-right {
    text-align: center !important;
  }
}
/* =========================================================
         WISHLIST MODAL - STATE CONTROL
         ========================================================= */

/* Jangan tampilkan dialog sebelum dibuka oleh JavaScript */
.henaisha-wishlist-modal:not([open]) {
  display: none !important;
}

/* Modal hanya tampil ketika memiliki atribut open */
.henaisha-wishlist-modal[open] {
  display: flex;
  flex-direction: column;

  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
  max-height: calc(100vh - 40px);

  margin: auto;
  padding: 0;

  border: 0;
  border-radius: 16px;

  background: var(--henaisha-white);
  color: var(--henaisha-text);

  overflow: hidden;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

/* Backdrop hanya digunakan ketika modal benar-benar terbuka */
.henaisha-wishlist-modal[open]::backdrop {
  background: rgba(17, 17, 17, 0.6);
}
/* =========================================================
         FOOTER - FINAL
         ========================================================= */

.henaisha-footer {
  margin-top: 90px;
  padding: 70px 0 0;
  background: var(--henaisha-secondary);
  color: rgba(255, 255, 255, 0.85);
}

.henaisha-footer-brand {
  max-width: 430px;
}

.henaisha-footer-logo {
  display: block;
  width: 160px;
  height: auto;
  margin: 0;
  padding: 8px;
}

.henaisha-footer-description {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.8;
}

.henaisha-footer-title {
  margin: 0 0 22px;
  color: var(--henaisha-primary);
  font-size: 17px;
  font-weight: 700;
}

.henaisha-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.henaisha-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.7;
}

.henaisha-footer-contact-item > i {
  flex: 0 0 18px;
  margin-top: 4px;
  color: var(--henaisha-primary);
  text-align: center;
}

.henaisha-footer-contact-item a {
  color: rgba(255, 255, 255, 0.78);
}

.henaisha-footer-contact-item a:hover {
  color: var(--henaisha-primary);
}

.henaisha-footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.henaisha-footer-menu li {
  margin-bottom: 11px;
}

.henaisha-footer-menu a {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  transition: all 0.25s ease;
}

.henaisha-footer-menu a::before {
  content: "\f105";
  margin-right: 9px;
  font-family: FontAwesome;
  color: var(--henaisha-primary);
  transition: transform 0.25s ease;
}

.henaisha-footer-menu a:hover {
  color: var(--henaisha-primary);
  transform: translateX(3px);
}

.henaisha-footer-menu a:hover::before {
  transform: translateX(2px);
}

.henaisha-footer-bottom {
  margin-top: 55px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.henaisha-footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
         FOOTER - RESPONSIVE
         ========================================================= */

@media (max-width: 767.98px) {
  .henaisha-footer {
    margin-top: 60px;
    padding-top: 55px;
  }

  .henaisha-footer-brand {
    max-width: 100%;
  }

  .henaisha-footer-logo {
    width: 145px;
  }

  .henaisha-footer-title {
    margin-bottom: 18px;
  }

  .henaisha-footer-bottom {
    margin-top: 40px;
  }
}
/* =========================================================
         AUTH PAGE
         LOGIN & REGISTER
         ========================================================= */

.henaisha-auth-page {
  min-height: 100vh;
  margin: 0;
  padding: 0;

  background: var(--henaisha-primary);

  font-family: "Poppins", sans-serif;
}

/* =========================================================
         AUTH WRAPPER
         ========================================================= */

.henaisha-auth-wrapper {
  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px 20px;
}

/* =========================================================
         AUTH CARD
         ========================================================= */

.henaisha-auth-card {
  width: 100%;
  max-width: 460px;

  padding: 38px 40px 32px;

  background: var(--henaisha-white);

  border-radius: 18px;

  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.2);

  animation: henaishaAuthFade 0.45s ease;
}

.henaisha-auth-card-register {
  max-width: 520px;
}

/* =========================================================
         LOGO
         ========================================================= */

.henaisha-auth-logo {
  display: flex;
  justify-content: center;

  margin-bottom: 22px;
}

.henaisha-auth-logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.henaisha-auth-logo img {
  display: block;

  width: 145px;
  height: auto;

  object-fit: contain;
}

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

.henaisha-auth-header {
  margin-bottom: 28px;

  text-align: center;
}

.henaisha-auth-label {
  display: block;

  margin-bottom: 8px;

  color: var(--henaisha-primary);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 2px;
  text-transform: uppercase;
}

.henaisha-auth-header h1 {
  margin: 0 0 10px;

  color: var(--henaisha-secondary);

  font-size: 28px;
  font-weight: 700;

  line-height: 1.25;
}

.henaisha-auth-header p {
  max-width: 390px;

  margin: 0 auto;

  color: var(--henaisha-muted);

  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
         ALERT
         ========================================================= */

.henaisha-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-bottom: 22px;
  padding: 13px 15px;

  border-radius: 8px;

  font-size: 13px;
  line-height: 1.6;
}

.henaisha-auth-alert > i {
  flex-shrink: 0;

  margin-top: 3px;

  font-size: 15px;
}

.henaisha-auth-alert-danger {
  background: #fff1f1;

  border: 1px solid #ffd2d2;

  color: #a61b1b;
}

.henaisha-auth-alert-success {
  background: #eefbf2;

  border: 1px solid #c9efd4;

  color: #176b2c;
}

.henaisha-auth-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* =========================================================
         FORM
         ========================================================= */

.henaisha-auth-form {
  width: 100%;
}

.henaisha-auth-field {
  margin-bottom: 18px;
}

.henaisha-auth-field label {
  display: block;

  margin-bottom: 7px;

  color: var(--henaisha-secondary);

  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
         INPUT
         ========================================================= */

.henaisha-auth-input {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  border: 1px solid #dfe3e8;
  border-radius: 9px;

  background: #ffffff;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.henaisha-auth-input > i {
  flex: 0 0 42px;

  color: #98a1ad;

  font-size: 15px;

  text-align: center;

  transition: color 0.2s ease;
}

.henaisha-auth-input input,
.henaisha-auth-input textarea {
  width: 100%;

  margin: 0;
  padding: 13px 14px 13px 0;

  border: 0 !important;
  outline: none !important;

  background: transparent !important;

  color: var(--henaisha-secondary);

  font-family: "Poppins", sans-serif;
  font-size: 13px;

  box-shadow: none !important;
}

.henaisha-auth-input input::placeholder,
.henaisha-auth-input textarea::placeholder {
  color: #a8afb8;
}

.henaisha-auth-input:focus-within {
  border-color: var(--henaisha-primary);

  box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.16);
}

.henaisha-auth-input:focus-within > i {
  color: var(--henaisha-primary);
}

/* =========================================================
         TEXTAREA
         ========================================================= */

.henaisha-auth-textarea {
  align-items: flex-start;
}

.henaisha-auth-textarea > i {
  padding-top: 15px;
}

.henaisha-auth-input textarea {
  min-height: 88px;

  padding-top: 13px;

  resize: vertical;
}

/* =========================================================
         SUBMIT
         ========================================================= */

.henaisha-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;

  margin-top: 8px;
  padding: 13px 18px;

  border: 2px solid var(--henaisha-secondary);
  border-radius: 9px;

  background: var(--henaisha-secondary);

  color: var(--henaisha-white);

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}

.henaisha-auth-submit:hover {
  background: var(--henaisha-primary);

  border-color: var(--henaisha-primary);

  color: var(--henaisha-secondary);

  transform: translateY(-1px);
}

.henaisha-auth-submit:active {
  transform: translateY(0);
}

/* =========================================================
         SWITCH LOGIN / REGISTER
         ========================================================= */

.henaisha-auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 22px;

  color: var(--henaisha-muted);

  font-size: 13px;
}

.henaisha-auth-switch a {
  color: var(--henaisha-secondary);

  font-weight: 600;
}

.henaisha-auth-switch a:hover {
  color: var(--henaisha-primary);
}

/* =========================================================
         BACK TO HOME
         ========================================================= */

.henaisha-auth-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  margin-top: 18px;

  color: #8a929c;

  font-size: 12px;
}

.henaisha-auth-back:hover {
  color: var(--henaisha-secondary);
}

/* =========================================================
         ANIMATION
         ========================================================= */

@keyframes henaishaAuthFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
         RESPONSIVE
         ========================================================= */

@media (max-width: 575.98px) {
  .henaisha-auth-wrapper {
    padding: 25px 15px;
  }

  .henaisha-auth-card {
    padding: 30px 22px 25px;

    border-radius: 14px;
  }

  .henaisha-auth-logo img {
    width: 125px;
  }

  .henaisha-auth-header h1 {
    font-size: 24px;
  }

  .henaisha-auth-header p {
    font-size: 12px;
  }
}
/* =========================================================
         HENAISHA DASHBOARD
         ADMIN & OWNER
         ========================================================= */

.henaisha-dashboard-body {
  min-height: 100vh;
  margin: 0;
  background: #f7f7f7;
  color: var(--henaisha-text);
}

/* =========================================================
         SIDEBAR
         ========================================================= */

.henaisha-dashboard-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;

  width: 270px;
  height: 100vh;

  overflow-y: auto;

  background: var(--henaisha-secondary);

  box-shadow: 5px 0 25px rgba(17, 17, 17, 0.08);

  transition: transform 0.3s ease;
}

/* BRAND */

.henaisha-dashboard-brand {
  padding: 24px 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.henaisha-dashboard-brand-link {
  display: flex;
  align-items: center;

  gap: 12px;

  color: var(--henaisha-white) !important;
}

.henaisha-dashboard-brand-link:hover {
  color: var(--henaisha-white) !important;
}

.henaisha-dashboard-logo {
  width: 46px;
  height: 46px;

  object-fit: contain;
}

.henaisha-dashboard-brand-text {
  display: flex;
  flex-direction: column;

  line-height: 1.15;
}

.henaisha-dashboard-brand-text strong {
  color: var(--henaisha-white);

  font-size: 19px;
  font-weight: 800;
}

.henaisha-dashboard-brand-text span {
  margin-top: 3px;

  color: var(--henaisha-primary);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* =========================================================
         USER
         ========================================================= */

.henaisha-dashboard-user {
  display: flex;
  align-items: center;

  gap: 12px;

  margin: 18px 16px;
  padding: 14px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.henaisha-dashboard-user-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--henaisha-primary);

  color: var(--henaisha-secondary);

  border-radius: 50%;

  font-size: 17px;
}

.henaisha-dashboard-user-info {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.henaisha-dashboard-user-info strong {
  overflow: hidden;

  color: var(--henaisha-white);

  font-size: 14px;
  font-weight: 700;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.henaisha-dashboard-user-info span {
  margin-top: 3px;

  color: #aeb4bb;

  font-size: 11px;
}

/* =========================================================
         NAVIGATION
         ========================================================= */

.henaisha-dashboard-nav {
  padding: 4px 14px 25px;
}

.henaisha-dashboard-nav-label {
  margin: 18px 10px 9px;

  color: #8f969e;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.henaisha-dashboard-nav-link {
  display: flex;
  align-items: center;

  min-height: 45px;

  margin-bottom: 4px;
  padding: 0 13px;

  gap: 12px;

  color: #c9cdd1 !important;

  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;

  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.henaisha-dashboard-nav-link i {
  width: 20px;

  color: #969da5;

  text-align: center;

  font-size: 15px;

  transition: color 0.2s ease;
}

.henaisha-dashboard-nav-link:hover {
  background: rgba(244, 196, 48, 0.1);

  color: var(--henaisha-white) !important;

  transform: translateX(2px);
}

.henaisha-dashboard-nav-link:hover i {
  color: var(--henaisha-primary);
}

.henaisha-dashboard-nav-link.active {
  background: var(--henaisha-primary);

  color: var(--henaisha-secondary) !important;
}

.henaisha-dashboard-nav-link.active i {
  color: var(--henaisha-secondary);
}

.henaisha-dashboard-nav-divider {
  height: 1px;

  margin: 18px 8px;

  background: rgba(255, 255, 255, 0.08);
}

.henaisha-dashboard-logout {
  margin-top: 4px;
}

.henaisha-dashboard-logout:hover {
  background: rgba(220, 53, 69, 0.14);
}

/* =========================================================
         MAIN WRAPPER
         ========================================================= */

.henaisha-dashboard-wrapper {
  min-height: 100vh;

  margin-left: 270px;
}

/* =========================================================
         TOPBAR
         ========================================================= */

.henaisha-dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 900;

  min-height: 82px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 15px 32px;

  background: var(--henaisha-white);

  border-bottom: 1px solid var(--henaisha-border);

  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.04);
}

.henaisha-dashboard-topbar-left {
  display: flex;
  align-items: center;

  gap: 15px;
}

.henaisha-dashboard-menu-toggle {
  display: none;

  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 8px;

  background: var(--henaisha-primary);

  color: var(--henaisha-secondary);

  cursor: pointer;

  font-size: 18px;
}

.henaisha-dashboard-topbar-label {
  display: block;

  margin-bottom: 3px;

  color: var(--henaisha-primary);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.henaisha-dashboard-topbar-title {
  margin: 0;

  color: var(--henaisha-secondary);

  font-size: 21px;
  font-weight: 800;
}

.henaisha-dashboard-topbar-right {
  display: flex;
  align-items: center;

  gap: 18px;
}

.henaisha-dashboard-date {
  display: flex;
  align-items: center;

  gap: 7px;

  color: var(--henaisha-muted);

  font-size: 13px;
}

.henaisha-dashboard-date i {
  color: var(--henaisha-primary);
}

.henaisha-dashboard-role {
  padding: 7px 13px;

  background: var(--henaisha-light);

  color: var(--henaisha-secondary);

  border: 1px solid var(--henaisha-border);
  border-radius: 20px;

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =========================================================
         CONTENT
         ========================================================= */

.henaisha-dashboard-content {
  min-height: calc(100vh - 82px);

  padding: 30px 32px 45px;
}

/* =========================================================
         MOBILE OVERLAY
         ========================================================= */

.henaisha-dashboard-overlay {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 1050;

  background: rgba(17, 17, 17, 0.45);
}

.henaisha-dashboard-overlay.show {
  display: block;
}

/* =========================================================
         RESPONSIVE
         ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-dashboard-sidebar {
    transform: translateX(-100%);
  }

  .henaisha-dashboard-sidebar.show {
    transform: translateX(0);
  }

  .henaisha-dashboard-wrapper {
    margin-left: 0;
  }

  .henaisha-dashboard-menu-toggle {
    display: flex;

    align-items: center;
    justify-content: center;
  }

  .henaisha-dashboard-topbar {
    padding: 14px 20px;
  }

  .henaisha-dashboard-content {
    padding: 25px 20px 40px;
  }

  .henaisha-dashboard-date {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .henaisha-dashboard-topbar-title {
    font-size: 17px;
  }

  .henaisha-dashboard-topbar-label {
    font-size: 9px;
  }

  .henaisha-dashboard-role {
    display: none;
  }

  .henaisha-dashboard-content {
    padding: 20px 15px 35px;
  }
}
/* =========================================================
         DASHBOARD ADMIN & OWNER
         ========================================================= */

.henaisha-dashboard-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 30px;
}

.henaisha-dashboard-page-label {
  display: block;
  margin-bottom: 8px;
  color: var(--henaisha-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.henaisha-dashboard-page-title {
  margin: 0 0 8px;
  color: var(--henaisha-secondary);
  font-size: 30px;
  font-weight: 800;
}

.henaisha-dashboard-page-description {
  margin: 0;
  color: var(--henaisha-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
         NOTIFICATION
         ========================================================= */

.henaisha-dashboard-notification {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 10px 15px;

  border: 1px solid var(--henaisha-border);
  border-radius: 8px;

  background: var(--henaisha-white);
  color: var(--henaisha-secondary);

  font-size: 13px;
  font-weight: 600;

  text-decoration: none;

  transition: all 0.2s ease;
}

.henaisha-dashboard-notification:hover {
  background: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  text-decoration: none;
}

.henaisha-dashboard-notification i {
  color: var(--henaisha-primary);
}

.henaisha-dashboard-notification:hover i {
  color: var(--henaisha-secondary);
}

/* =========================================================
         STAT CARD
         ========================================================= */

.henaisha-dashboard-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;

  min-height: 145px;

  padding: 24px;

  background: var(--henaisha-white);

  border: 1px solid var(--henaisha-border);
  border-radius: 14px;

  box-shadow: 0 5px 20px rgba(17, 17, 17, 0.05);

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.henaisha-dashboard-stat-card:hover {
  transform: translateY(-3px);

  border-color: var(--henaisha-primary);

  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.09);
}

.henaisha-dashboard-stat-icon {
  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  border-radius: 12px;

  font-size: 20px;
}

.henaisha-dashboard-stat-content {
  min-width: 0;
}

.henaisha-dashboard-stat-label {
  display: block;

  margin-bottom: 7px;

  color: var(--henaisha-muted);

  font-size: 13px;
  line-height: 1.4;
}

.henaisha-dashboard-stat-value {
  display: block;

  margin-bottom: 10px;

  color: var(--henaisha-secondary);

  font-size: 25px;
  font-weight: 800;

  line-height: 1.2;
}

.henaisha-dashboard-stat-currency {
  font-size: 20px;
}

.henaisha-dashboard-stat-content a {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: var(--henaisha-secondary);

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}

.henaisha-dashboard-stat-content a:hover {
  color: var(--henaisha-primary);
  text-decoration: none;
}

/* =========================================================
         PANEL
         ========================================================= */

.henaisha-dashboard-panel {
  margin-bottom: 30px;

  overflow: hidden;

  background: var(--henaisha-white);

  border: 1px solid var(--henaisha-border);
  border-radius: 14px;

  box-shadow: 0 5px 20px rgba(17, 17, 17, 0.05);
}

.henaisha-dashboard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 24px 26px;

  border-bottom: 1px solid var(--henaisha-border);
}

.henaisha-dashboard-panel-label {
  display: block;

  margin-bottom: 5px;

  color: var(--henaisha-primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.henaisha-dashboard-panel-title {
  margin: 0;

  color: var(--henaisha-secondary);

  font-size: 20px;
  font-weight: 800;
}

.henaisha-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 15px;

  background: var(--henaisha-secondary);
  color: var(--henaisha-white);

  border-radius: 7px;

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;

  transition: all 0.2s ease;
}

.henaisha-dashboard-btn:hover {
  background: var(--henaisha-primary);
  color: var(--henaisha-secondary);
  text-decoration: none;
}

/* =========================================================
         TABLE
         ========================================================= */

.henaisha-dashboard-table {
  width: 100%;
  margin: 0;

  border-collapse: collapse;
}

.henaisha-dashboard-table th {
  padding: 15px 20px;

  background: var(--henaisha-light);

  color: var(--henaisha-muted);

  border-bottom: 1px solid var(--henaisha-border);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.8px;
  text-transform: uppercase;

  white-space: nowrap;
}

.henaisha-dashboard-table td {
  padding: 17px 20px;

  color: var(--henaisha-secondary);

  border-bottom: 1px solid var(--henaisha-border);

  font-size: 13px;

  vertical-align: middle;
}

.henaisha-dashboard-table tbody tr:last-child td {
  border-bottom: none;
}

.henaisha-dashboard-table tbody tr {
  transition: background-color 0.2s ease;
}

.henaisha-dashboard-table tbody tr:hover {
  background-color: #fafafa;
}

.henaisha-table-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: var(--henaisha-secondary);

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}

.henaisha-table-action:hover {
  color: var(--henaisha-primary);
  text-decoration: none;
}

/* =========================================================
         STATUS
         ========================================================= */

.henaisha-status-badge {
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;

  border-radius: 20px;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;
}

.henaisha-status-badge.waiting {
  background: #fff3cd;
  color: #856404;
}

.henaisha-status-badge.accepted {
  background: #d1ecf1;
  color: #0c5460;
}

.henaisha-status-badge.scheduled {
  background: #d4edda;
  color: #155724;
}

.henaisha-status-badge.completed {
  background: #d4edda;
  color: #155724;
}

.henaisha-status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.henaisha-status-badge.default {
  background: #e9ecef;
  color: #495057;
}

/* =========================================================
         EMPTY STATE
         ========================================================= */

.henaisha-dashboard-empty {
  padding: 60px 25px;

  text-align: center;
}

.henaisha-dashboard-empty-icon {
  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 18px;

  background: var(--henaisha-light);
  color: var(--henaisha-primary);

  border-radius: 50%;

  font-size: 23px;
}

.henaisha-dashboard-empty h4 {
  margin-bottom: 8px;

  color: var(--henaisha-secondary);

  font-size: 18px;
  font-weight: 700;
}

.henaisha-dashboard-empty p {
  margin: 0;

  color: var(--henaisha-muted);

  font-size: 13px;
}

/* =========================================================
         OWNER INFORMATION
         ========================================================= */

.henaisha-owner-information {
  display: flex;
  align-items: flex-start;

  gap: 15px;

  margin-bottom: 30px;
  padding: 18px 20px;

  background: #fffdf3;

  border: 1px solid #f0df91;
  border-radius: 10px;
}

.henaisha-owner-information-icon {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--henaisha-primary);
  color: var(--henaisha-secondary);

  border-radius: 50%;

  font-size: 16px;
}

.henaisha-owner-information strong {
  display: block;

  margin-bottom: 4px;

  color: var(--henaisha-secondary);

  font-size: 14px;
}

.henaisha-owner-information p {
  margin: 0;

  color: var(--henaisha-muted);

  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
         RESPONSIVE
         ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-dashboard-page-header {
    flex-direction: column;
  }

  .henaisha-dashboard-notification {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .henaisha-dashboard-page-title {
    font-size: 25px;
  }

  .henaisha-dashboard-stat-card {
    min-height: auto;
    padding: 20px;
  }

  .henaisha-dashboard-stat-value {
    font-size: 22px;
  }

  .henaisha-dashboard-panel-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .henaisha-dashboard-btn {
    width: 100%;
    justify-content: center;
  }

  .henaisha-dashboard-table th,
  .henaisha-dashboard-table td {
    padding: 13px 14px;
  }

  .henaisha-owner-information {
    padding: 15px;
  }
}

/* =========================================================
         ADMIN PANEL — UI FOUNDATION
         Final override layer for Bootstrap + legacy theme styles.
         Presentation only; no business logic.
         ========================================================= */

.henaisha-dashboard-content {
  color: var(--henaisha-text);
}

.henaisha-dashboard-content .admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.henaisha-dashboard-content .admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #ffffff;
  color: #344054;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.henaisha-dashboard-content .admin-btn:hover,
.henaisha-dashboard-content .admin-btn:focus {
  text-decoration: none !important;
  outline: none;
}

.henaisha-dashboard-content .admin-btn:active {
  transform: translateY(1px);
}

.henaisha-dashboard-content .admin-btn i {
  width: auto;
  margin: 0;
  font-size: 12px;
  line-height: 1;
}

.henaisha-dashboard-content .admin-btn-primary {
  background: var(--henaisha-primary);
  border-color: var(--henaisha-primary);
  color: var(--henaisha-secondary) !important;
  box-shadow: 0 5px 14px rgba(244, 196, 48, 0.16);
}

.henaisha-dashboard-content .admin-btn-primary:hover,
.henaisha-dashboard-content .admin-btn-primary:focus {
  background: #e2b318;
  border-color: #e2b318;
  color: var(--henaisha-secondary) !important;
  box-shadow: 0 7px 18px rgba(244, 196, 48, 0.22);
}

.henaisha-dashboard-content .admin-btn-dark {
  background: var(--henaisha-secondary);
  border-color: var(--henaisha-secondary);
  color: #ffffff !important;
}

.henaisha-dashboard-content .admin-btn-dark:hover,
.henaisha-dashboard-content .admin-btn-dark:focus {
  background: #27303d;
  border-color: #27303d;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(17, 17, 17, 0.12);
}

.henaisha-dashboard-content .admin-btn-outline {
  background: #ffffff;
  border-color: var(--henaisha-border);
  color: #344054 !important;
}

.henaisha-dashboard-content .admin-btn-outline:hover,
.henaisha-dashboard-content .admin-btn-outline:focus {
  background: #f8fafc;
  border-color: #cfd5dd;
  color: var(--henaisha-secondary) !important;
}

.henaisha-dashboard-content .admin-btn-danger {
  background: #d92d20;
  border-color: #d92d20;
  color: #ffffff !important;
}

.henaisha-dashboard-content .admin-btn-danger:hover,
.henaisha-dashboard-content .admin-btn-danger:focus {
  background: #b42318;
  border-color: #b42318;
  color: #ffffff !important;
}

.henaisha-dashboard-content .admin-card {
  background: #ffffff;
  border: 1px solid var(--henaisha-border);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.045);
}

.henaisha-dashboard-content .admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--henaisha-border);
}

.henaisha-dashboard-content .admin-card-header h2,
.henaisha-dashboard-content .admin-card-header h3 {
  margin: 0;
  color: var(--henaisha-secondary);
  font-weight: 800;
}

.henaisha-dashboard-content .admin-form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #d7dce5;
  border-radius: 9px;
  background: #ffffff;
  color: #344054;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.henaisha-dashboard-content .admin-form-control:focus {
  border-color: #d6a900;
  box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.13);
}

.henaisha-dashboard-content .admin-form-group label {
  display: block;
  margin-bottom: 7px;
  color: #1f2937;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.henaisha-dashboard-content .admin-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.henaisha-dashboard-content .admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.henaisha-dashboard-content .admin-badge-active {
  background: #e7f7ee;
  color: #087443;
}

.henaisha-dashboard-content .admin-badge-inactive {
  background: #f2f4f7;
  color: #667085;
}

.henaisha-dashboard-content .admin-badge-warning {
  background: #fff4d6;
  color: #8a6500;
}

.henaisha-dashboard-content .admin-badge-category {
  background: #fff5d9;
  color: #8a6500;
}

.henaisha-dashboard-content .admin-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.henaisha-dashboard-content .admin-alert i {
  flex: 0 0 auto;
}

.henaisha-dashboard-content .admin-alert-success {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.henaisha-dashboard-content .admin-alert-error {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

.henaisha-dashboard-content .admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.henaisha-dashboard-content .admin-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #344054;
  font-size: 13px;
}

.henaisha-dashboard-content .admin-table thead th {
  padding: 12px 15px;
  background: #f8fafc;
  border-bottom: 1px solid var(--henaisha-border);
  color: #475467;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.henaisha-dashboard-content .admin-table tbody td {
  padding: 13px 15px;
  background: #ffffff;
  border-bottom: 1px solid #edf0f4;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: middle;
}

.henaisha-dashboard-content .admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.henaisha-dashboard-content .admin-table tbody tr:hover td {
  background: #fffdf6;
}

.henaisha-dashboard-content .admin-action-group {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.henaisha-dashboard-content .admin-action-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  text-decoration: none !important;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.henaisha-dashboard-content .admin-action-btn i {
  margin: 0;
  font-size: 12px;
  line-height: 1;
}

.henaisha-dashboard-content .admin-action-edit {
  background: #f2f4f7;
  color: #344054;
}

.henaisha-dashboard-content .admin-action-edit:hover,
.henaisha-dashboard-content .admin-action-edit:focus {
  background: var(--henaisha-secondary);
  color: #ffffff;
}

.henaisha-dashboard-content .admin-action-delete {
  background: #fff0f1;
  color: #d92d20;
}

.henaisha-dashboard-content .admin-action-delete:hover,
.henaisha-dashboard-content .admin-action-delete:focus {
  background: #d92d20;
  color: #ffffff;
}

.henaisha-dashboard-content .admin-empty-state {
  padding: 56px 24px;
  text-align: center;
}

.henaisha-dashboard-content .admin-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #f8fafc;
  color: #98a2b3;
  font-size: 22px;
}

@media (max-width: 991.98px) {
  .henaisha-dashboard-content .admin-page-header {
    gap: 18px;
  }
}

@media (max-width: 575.98px) {
  .henaisha-dashboard-content .admin-page-header {
    flex-direction: column;
  }

  .henaisha-dashboard-content .admin-btn {
    min-height: 42px;
  }

  .henaisha-dashboard-content .admin-filter-actions {
    width: 100%;
  }

  .henaisha-dashboard-content .admin-filter-actions .admin-btn {
    flex: 1 1 0;
  }
}
/* =========================================================
       CUSTOMER MENU - THREE DOTS
       ========================================================= */

/* =========================================================
       HENAISHA CUSTOMER ACCOUNT MENU - CLEAN FINAL
       Satu sumber aturan untuk avatar + dropdown pelanggan.
       ========================================================= */

.henaisha-account-menu {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  z-index: 3000 !important;
  overflow: visible !important;
}

.henaisha-account-trigger {
  position: relative !important;
  z-index: 3001 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111111 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.henaisha-account-trigger::after {
  display: none !important;
}

.henaisha-account-trigger:hover,
.henaisha-account-trigger:focus,
.henaisha-account-trigger:active {
  color: #111111 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.henaisha-profile-avatar {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.henaisha-account-menu:hover .henaisha-profile-avatar {
  border-color: rgba(0, 0, 0, 0.28) !important;
}

/*
     * Dropdown dikontrol oleh header.php melalui class .is-open.
     * Tidak memakai aturan Bootstrap .show.
     */
.henaisha-account-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3002 !important;
  display: none !important;
  width: 190px !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border: 1px solid #e9e9e9 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  transform: none !important;
}

.henaisha-account-menu.is-open .henaisha-account-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.henaisha-account-dropdown .dropdown-item,
.henaisha-account-dropdown .henaisha-account-link {
  position: relative !important;
  z-index: 3003 !important;
  width: 100% !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  color: #222222 !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transform: none !important;
}

.henaisha-account-dropdown .dropdown-item:hover,
.henaisha-account-dropdown .dropdown-item:focus,
.henaisha-account-dropdown .henaisha-account-link:hover,
.henaisha-account-dropdown .henaisha-account-link:focus {
  color: #111111 !important;
  background: #fff9df !important;
  text-decoration: none !important;
  outline: none !important;
}

.henaisha-account-dropdown .dropdown-item i {
  width: 20px !important;
  min-width: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5f6368 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;
}

.henaisha-account-dropdown .dropdown-item:hover i,
.henaisha-account-dropdown .henaisha-account-link:hover i {
  color: #f4c430 !important;
}

.henaisha-account-dropdown .dropdown-item span,
.henaisha-account-dropdown .henaisha-account-link span {
  flex: 1 1 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  white-space: nowrap !important;
}

.henaisha-account-dropdown .dropdown-divider {
  height: 1px !important;
  margin: 5px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid #eeeeee !important;
}

@media (max-width: 575.98px) {
  .henaisha-account-trigger {
    width: 38px !important;
    height: 40px !important;
  }

  .henaisha-profile-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .henaisha-account-dropdown {
    width: 180px !important;
    min-width: 180px !important;
  }
}

.henaisha-page-hero-image {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
}

.henaisha-page-hero-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.38);
}

.henaisha-page-hero-content {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 90%;
  max-width: 900px;

  transform: translate(-50%, -50%);

  text-align: center;

  color: #ffffff;
}

.henaisha-page-hero-label {
  margin-bottom: 12px;

  color: #f2b900;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 3px;
  text-transform: uppercase;
}

.henaisha-page-hero-title {
  margin: 0 0 15px;

  color: #ffffff;

  font-size: 48px;
  font-weight: 700;

  line-height: 1.2;
}

.henaisha-page-hero-description {
  max-width: 700px;

  margin: 0 auto;

  color: rgba(255, 255, 255, 0.95);

  font-size: 16px;
  line-height: 1.7;
}

/* =========================================================
       RESPONSIVE
       ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-page-hero {
    height: 380px;
  }

  .henaisha-page-hero-title {
    font-size: 38px;
  }
}

@media (max-width: 767.98px) {
  .henaisha-page-hero {
    height: 340px;
  }

  .henaisha-page-hero-title {
    font-size: 30px;
  }

  .henaisha-page-hero-description {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .henaisha-page-hero {
    height: 300px;
  }

  .henaisha-page-hero-title {
    font-size: 26px;
  }

  .henaisha-page-hero-label {
    font-size: 11px;
    letter-spacing: 2px;
  }
}
/* =========================================================
       FINAL PUBLIC HEADER + HERO POSITION
       Navbar overlap TOPBAR dan HERO
       ========================================================= */

/* =========================================================
       TOPBAR
       ========================================================= */

.henaisha-topbar {
  position: relative !important;

  width: 100% !important;

  height: 78px !important;
  min-height: 78px !important;

  margin: 0 !important;
  padding: 0 !important;

  /* Jangan membuat stacking context agar dropdown akun
         dapat berada di atas navbar yang overlap. */
  z-index: auto !important;
  overflow: visible !important;
}

/* =========================================================
       TOPBAR CONTENT
       ========================================================= */

.henaisha-topbar > .container {
  position: relative !important;
  z-index: auto !important;
  overflow: visible !important;

  width: 100% !important;
  max-width: none !important;

  height: 78px !important;
  min-height: 78px !important;

  margin: 0 !important;

  padding-left: 35px !important;
  padding-right: 35px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* =========================================================
       NAVBAR
       Navbar dibuat FLOATING sehingga tidak mengambil ruang
       di dalam layout.
       ========================================================= */

.nav-bar {
  position: absolute !important;

  top: 48px !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 2000 !important;
}

/* Container navbar */

.nav-bar .container-lg {
  position: relative !important;

  width: 100% !important;
  max-width: 1020px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* White navbar */

.nav-bar .navbar {
  position: relative !important;

  width: 100% !important;

  min-height: 82px !important;

  margin: 0 !important;

  padding: 0 22px !important;

  display: flex !important;
  align-items: center !important;

  background: #ffffff !important;

  border-radius: 50px !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;

  z-index: 2001 !important;
}

/* =========================================================
       HERO
       Hero langsung dimulai setelah TOPBAR.
       Navbar akan berada DI ATAS hero.
       ========================================================= */

.henaisha-page-hero {
  position: relative !important;

  width: 100% !important;

  height: 430px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  z-index: 1 !important;
}

/* Hero image */

.henaisha-page-hero-image {
  display: block !important;

  width: 100% !important;
  height: 430px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;
}

/* Hero overlay */

.henaisha-page-hero-overlay {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  background: rgba(0, 0, 0, 0.38) !important;

  z-index: 2 !important;
}

/* Hero content */

.henaisha-page-hero-content {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 90% !important;
  max-width: 900px !important;

  margin: 0 !important;
  padding: 30px !important;

  transform: translate(-50%, -50%) !important;

  text-align: center !important;

  z-index: 3 !important;
}

/* =========================================================
       DESKTOP
       ========================================================= */

@media (min-width: 992px) {
  .henaisha-topbar {
    height: 78px !important;
    min-height: 78px !important;
  }

  .henaisha-topbar > .container {
    height: 78px !important;
    min-height: 78px !important;
  }

  .nav-bar {
    top: 38px !important;
  }

  .henaisha-page-hero {
    height: 430px !important;
  }

  .henaisha-page-hero-image {
    height: 430px !important;
  }
}

/* =========================================================
       TABLET
       ========================================================= */

@media (max-width: 991.98px) {
  .henaisha-topbar {
    height: 65px !important;
    min-height: 65px !important;
  }

  .henaisha-topbar > .container {
    height: 65px !important;
    min-height: 65px !important;
  }

  .nav-bar {
    top: 35px !important;
  }

  .henaisha-page-hero {
    height: 380px !important;
  }

  .henaisha-page-hero-image {
    height: 380px !important;
  }
}

/* =========================================================
       MOBILE
       ========================================================= */

@media (max-width: 767.98px) {
  .henaisha-topbar {
    height: 55px !important;
    min-height: 55px !important;
  }

  .henaisha-topbar > .container {
    height: 55px !important;
    min-height: 55px !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav-bar {
    top: 30px !important;
  }

  .nav-bar .navbar {
    min-height: 65px !important;

    padding: 7px 15px !important;

    border-radius: 35px !important;
  }

  .henaisha-page-hero {
    height: 340px !important;
  }

  .henaisha-page-hero-image {
    height: 340px !important;
  }
}

/* =========================================================
       SMALL MOBILE
       ========================================================= */

@media (max-width: 575.98px) {
  .nav-bar {
    top: 28px !important;
  }

  .henaisha-page-hero {
    height: 300px !important;
  }

  .henaisha-page-hero-image {
    height: 300px !important;
  }
}
/* =========================================================
       HENAISHA CAROUSEL - FIX WHITE GAP
       ========================================================= */

.header-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.header-carousel .carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.header-carousel .carousel-item {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
}

.header-carousel .carousel-item img {
  display: block;
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: center;
}

/* Caption */
.header-carousel .carousel-caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(17, 17, 17, 0.3);
}

/* Pastikan slide tidak menghasilkan ruang putih */
.header-carousel .carousel-item.active,
.header-carousel .carousel-item-next,
.header-carousel .carousel-item-prev {
  display: block;
}

.header-carousel .carousel-item-next,
.header-carousel .carousel-item-prev {
  position: absolute;
  top: 0;
  width: 100%;
}

/* Indicator */
.header-carousel .carousel-indicators {
  z-index: 20;
  margin-bottom: 25px;
}

.header-carousel .carousel-indicators li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
}

/* Tombol */
.header-carousel .carousel-control-prev,
.header-carousel .carousel-control-next {
  z-index: 20;
  width: 8%;
}

.header-carousel .carousel-control-prev-icon,
.header-carousel .carousel-control-next-icon {
  width: 35px;
  height: 35px;
}

/* =========================================================
       RESPONSIVE
       ========================================================= */

@media (max-width: 991.98px) {
  .header-carousel .carousel-item {
    height: 520px;
  }

  .header-carousel .carousel-item img {
    height: 520px;
  }
}

@media (max-width: 767.98px) {
  .header-carousel .carousel-item {
    height: 500px;
  }

  .header-carousel .carousel-item img {
    height: 500px;
  }
}

@media (max-width: 575.98px) {
  .header-carousel .carousel-item {
    height: 460px;
  }

  .header-carousel .carousel-item img {
    height: 460px;
  }
}
/* =========================================================
       FINAL HENAIShA HOME CAROUSEL
       FIX WHITE GAP DURING SLIDE
       ========================================================= */

.header-carousel {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.header-carousel .carousel-inner {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Semua slide memiliki ukuran yang sama */

.header-carousel .carousel-item {
  position: relative !important;

  width: 100% !important;
  height: 620px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #111111 !important;
}

/* Gambar selalu memenuhi slide */

.header-carousel .carousel-item > img {
  display: block !important;

  width: 100% !important;
  height: 620px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;
}

/* =========================================================
       BOOTSTRAP CAROUSEL TRANSITION
       Jangan override positioning bawaan Bootstrap
       ========================================================= */

.header-carousel .carousel-item-next,
.header-carousel .carousel-item-prev {
  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 620px !important;
}

/* Slide aktif */

.header-carousel .carousel-item.active {
  position: relative !important;
}

/* =========================================================
       CAPTION
       ========================================================= */

.header-carousel .carousel-caption {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 30px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  background: rgba(0, 0, 0, 0.3) !important;

  z-index: 5 !important;
}

/* =========================================================
       CONTROLS
       ========================================================= */

.header-carousel .carousel-control-prev,
.header-carousel .carousel-control-next {
  z-index: 20 !important;

  top: 0 !important;
  bottom: 0 !important;

  width: 8% !important;
}

/* =========================================================
       INDICATORS
       ========================================================= */

.header-carousel .carousel-indicators {
  z-index: 20 !important;

  margin-bottom: 25px !important;
}

.header-carousel .carousel-indicators li {
  width: 10px !important;
  height: 10px !important;

  margin-left: 5px !important;
  margin-right: 5px !important;

  border-radius: 50% !important;
}

/* =========================================================
       RESPONSIVE
       ========================================================= */

@media (max-width: 991.98px) {
  .header-carousel .carousel-item,
  .header-carousel .carousel-item-next,
  .header-carousel .carousel-item-prev {
    height: 520px !important;
  }

  .header-carousel .carousel-item > img {
    height: 520px !important;
  }
}

@media (max-width: 767.98px) {
  .header-carousel .carousel-item,
  .header-carousel .carousel-item-next,
  .header-carousel .carousel-item-prev {
    height: 500px !important;
  }

  .header-carousel .carousel-item > img {
    height: 500px !important;
  }
}

@media (max-width: 575.98px) {
  .header-carousel .carousel-item,
  .header-carousel .carousel-item-next,
  .header-carousel .carousel-item-prev {
    height: 460px !important;
  }

  .header-carousel .carousel-item > img {
    height: 460px !important;
  }
}
/* =========================================================
       WISHLIST FIX
       ========================================================= */

.henaisha-wishlist-item-image {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f6ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.henaisha-wishlist-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.henaisha-wishlist-item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c79a28;
  background: #fff8df;
  font-size: 22px;
}

/* Tombol aksi wishlist */
.henaisha-wishlist-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.henaisha-wishlist-item-actions a,
.henaisha-wishlist-item-actions button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid #e1e5ea;
  border-radius: 9px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.henaisha-wishlist-item-actions a:hover,
.henaisha-wishlist-item-actions button:hover {
  border-color: #d4a72c;
  background: #fff9e8;
  transform: translateY(-1px);
}

.henaisha-wishlist-item-actions svg {
  width: 18px;
  height: 18px;
  display: block;
}

.henaisha-wishlist-remove {
  color: #dc3545;
}

.henaisha-wishlist-remove:hover {
  border-color: #dc3545 !important;
  background: #fff5f5 !important;
}

/* Item wishlist */
.henaisha-wishlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
}

.henaisha-wishlist-item-content {
  flex: 1;
  min-width: 0;
}

.henaisha-wishlist-item-content h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #202733;
  line-height: 1.3;
}

.henaisha-wishlist-item-content p {
  margin: 0 0 5px;
  font-size: 11px;
  color: #7b8490;
}

.henaisha-wishlist-item-price {
  font-size: 13px;
  font-weight: 700;
  color: #202733;
}

/* Mobile */
@media (max-width: 576px) {
  .henaisha-wishlist-item {
    align-items: flex-start;
  }

  .henaisha-wishlist-item-image {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }

  .henaisha-wishlist-item-actions {
    gap: 5px;
  }

  .henaisha-wishlist-item-actions a,
  .henaisha-wishlist-item-actions button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .henaisha-wishlist-item-actions svg {
    width: 16px;
    height: 16px;
  }
}
.henaisha-auth-forgot {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.henaisha-auth-forgot a {
  color: #111827;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
}

.henaisha-auth-forgot a:hover {
  color: #b98f00;
  text-decoration: underline;
}

/* =========================================================
     HENAISHA CATERING — FINAL MOBILE RESPONSIVE PATCH
     Tempelkan di bagian PALING AKHIR henaisha.css.
     Fokus: navbar collapse, overflow horizontal, dan layar HP.
     Tidak mengubah route, query, form, atau logika PHP.
     ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

.nav-bar,
.nav-bar .container-lg,
.nav-bar .navbar,
.nav-bar .navbar-collapse,
.nav-bar .navbar-nav {
  min-width: 0;
}

@media (max-width: 991.98px) {
  /* Kontainer header mengikuti lebar perangkat. */
  .nav-bar {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav-bar .container-lg {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Baris logo + tombol hamburger. */
  .nav-bar .navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 8px 13px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .nav-bar .navbar > .navbar-brand.d-lg-none {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: calc(100% - 58px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-bar .navbar > .navbar-brand.d-lg-none img,
  .henaisha-logo-mobile {
    display: block !important;
    width: 100px !important;
    max-width: 100% !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .nav-bar .navbar > .navbar-toggler {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0 auto !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    background: #ffffff !important;
  }

  /*
     * PENTING: jangan memaksa collapse selalu tampil.
     * Bootstrap membuka menu dengan class .show.
     * Class .collapsing tetap ditampilkan selama animasi.
     */
  .nav-bar .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .nav-bar .navbar-collapse.show,
  .nav-bar .navbar-collapse.collapsing {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid #eeeeee !important;
    background: transparent !important;
    box-shadow: none !important;
    float: none !important;
  }

  .nav-bar .navbar-collapse > .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-bar .navbar-collapse > .navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 43px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 10px !important;
    border-top: 1px solid #f1f1f1 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  .nav-bar .navbar-collapse > .navbar-nav .nav-link:first-child {
    border-top: 0 !important;
  }

  /* Logo desktop di tengah tidak boleh ikut tampil di menu HP. */
  .nav-bar .navbar-collapse > .navbar-brand.d-none {
    display: none !important;
  }

  /* Area utama tidak boleh mendorong layar melebar. */
  .container,
  .container-fluid,
  .container-lg {
    min-width: 0;
  }

  [class^="col-"],
  [class*=" col-"] {
    min-width: 0;
  }

  .henaisha-page-hero-content {
    width: calc(100% - 28px) !important;
    max-width: 900px !important;
    padding: 12px !important;
  }

  .henaisha-page-hero-title {
    overflow-wrap: anywhere;
  }

  .henaisha-page-hero-description {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .henaisha-about-image,
  .henaisha-detail-image,
  .gallery-image,
  .henaisha-menu-image-wrap {
    max-width: 100%;
  }

  .henaisha-about-image img,
  .henaisha-detail-image img,
  .gallery-image img,
  .henaisha-menu-image {
    max-width: 100% !important;
  }

  .gallery-filter,
  .henaisha-catalog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }

  .gallery-filter a,
  .henaisha-filter-btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 575.98px) {
  .nav-bar .container-lg {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .nav-bar .navbar {
    min-height: 58px !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
  }

  .nav-bar .navbar > .navbar-brand.d-lg-none img,
  .henaisha-logo-mobile {
    width: 88px !important;
    height: 44px !important;
  }

  .nav-bar .navbar-toggler {
    padding: 7px 9px !important;
  }

  .nav-bar .navbar-collapse.show,
  .nav-bar .navbar-collapse.collapsing {
    margin-top: 5px !important;
    padding-top: 5px !important;
  }

  .nav-bar .navbar-collapse > .navbar-nav .nav-link {
    min-height: 42px !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  .henaisha-page-hero-content {
    width: calc(100% - 22px) !important;
    padding: 8px !important;
  }

  .henaisha-page-hero-title {
    font-size: clamp(23px, 6.4vw, 30px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .henaisha-page-hero-description {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .henaisha-page-hero-label {
    margin-bottom: 8px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }

  .henaisha-about-section,
  .henaisha-about-services {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .henaisha-about-image img {
    height: auto !important;
    max-height: 340px;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
  }

  .henaisha-about-service-card {
    gap: 14px !important;
    padding: 18px !important;
  }

  .henaisha-about-service-card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  .henaisha-about-service-card p,
  .henaisha-about-text {
    overflow-wrap: anywhere;
  }

  .henaisha-cta,
  .henaisha-about-cta,
  .henaisha-contact-cta,
  .henaisha-detail-cta,
  .henaisha-catalog-cta {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .henaisha-catalog-pagination .pagination {
    flex-wrap: wrap;
  }

  .henaisha-wishlist-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .henaisha-auth-wrapper {
    width: 100%;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .henaisha-auth-card {
    width: 100%;
    max-width: 100%;
  }
}
/* =========================================================
   HENAISHA CATERING — MOBILE NAVBAR CORRECTION V2
   Berlaku untuk struktur navbar Bootstrap 4 pada project.

   PENTING:
   1. Hapus patch responsive sebelumnya dari henaisha.css jika pernah ditempel.
   2. Tempel isi file ini pada PALING AKHIR public/assets/css/henaisha.css.
   3. Jangan mengganti stylesheet utama dengan file patch ini.
   ========================================================= */

@media (max-width: 991.98px) {
  /* Pastikan wrapper dan navbar benar-benar mengikuti lebar viewport. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  header,
  .henaisha-topbar,
  .nav-bar {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .henaisha-topbar {
    width: 100% !important;
  }

  .henaisha-topbar > .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .nav-bar {
    position: absolute !important;
    top: 35px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .nav-bar > .container-lg {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .nav-bar .navbar {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  /* Logo mobile di kiri. */
  .nav-bar .navbar > a.navbar-brand.d-lg-none {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }

  .nav-bar .navbar > a.navbar-brand.d-lg-none img,
  .nav-bar .navbar > a.navbar-brand.d-lg-none .henaisha-logo-mobile {
    display: block !important;
    width: 92px !important;
    max-width: 100% !important;
    height: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
  }

  /* Tombol hamburger harus tetap tampak dan berada di kanan. */
  .nav-bar .navbar > button.navbar-toggler {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 40px !important;
    min-height: 38px !important;
    margin: 0 0 0 auto !important;
    padding: 7px 9px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    float: none !important;
    transform: none !important;
  }

  .nav-bar .navbar > button.navbar-toggler .navbar-toggler-icon {
    display: inline-block !important;
    width: 1.25em !important;
    height: 1.25em !important;
  }

  /* Menutup menu saat kelas Bootstrap .show tidak ada. */
  .nav-bar .navbar > .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  /* Saat tombol ditekan, menu turun di baris berikutnya, bukan menyamping. */
  .nav-bar .navbar > .navbar-collapse.collapse.show,
  .nav-bar .navbar > .navbar-collapse.collapsing {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid #eeeeee !important;
    background: #ffffff !important;
    transform: none !important;
    float: none !important;
    overflow: hidden !important;
  }

  .nav-bar .navbar > .navbar-collapse > .navbar-nav {
    display: flex !important;
    flex: 0 0 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .nav-bar .navbar > .navbar-collapse > .navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-top: 1px solid #f1f1f1 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    transform: none !important;
  }

  .nav-bar .navbar > .navbar-collapse > .navbar-nav .nav-link:first-child {
    border-top: 0 !important;
  }

  /* Logo versi desktop di tengah tidak digunakan pada HP. */
  .nav-bar .navbar > .navbar-collapse > a.navbar-brand.d-none {
    display: none !important;
  }

  /* Hindari konten kartu/kolom membuat viewport melebar. */
  main,
  main > section,
  .container,
  .container-fluid,
  .container-lg,
  [class^="col-"],
  [class*=" col-"] {
    min-width: 0;
    max-width: 100%;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .nav-bar {
    top: 28px !important;
  }

  .nav-bar > .container-lg {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .nav-bar .navbar {
    min-height: 58px !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
  }

  .nav-bar .navbar > a.navbar-brand.d-lg-none img,
  .nav-bar .navbar > a.navbar-brand.d-lg-none .henaisha-logo-mobile {
    width: 86px !important;
    height: 43px !important;
    max-height: 43px !important;
  }

  .nav-bar .navbar > button.navbar-toggler {
    min-width: 38px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
  }

  .nav-bar .navbar > .navbar-collapse.collapse.show,
  .nav-bar .navbar > .navbar-collapse.collapsing {
    margin-top: 6px !important;
    padding-top: 5px !important;
  }

  .nav-bar .navbar > .navbar-collapse > .navbar-nav .nav-link {
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
}
/* =========================================================
   HENAISHA CATERING — MOBILE PRODUCT GRID + FIXED HEADER
   Tambahkan isi file ini pada BARIS PALING AKHIR:
   public/assets/css/henaisha.css

   Memerlukan browser modern yang mendukung CSS :has() (Chrome modern).
   Tidak mengubah HTML/PHP, route, query, filter, atau logika wishlist.
   ========================================================= */

/* ---------------------------------------------------------
   1. FIXED TOPBAR + NAVBAR
   Header publik tetap di bagian atas saat halaman digulir.
   Topbar tetap menjadi bagian layout; navbar tetap overlap seperti desain lama.
   --------------------------------------------------------- */
body:has(> header > .henaisha-topbar) {
  padding-top: 78px !important;
}

body:has(> header > .henaisha-topbar) > header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: 5000 !important;
  overflow: visible !important;
  background: transparent !important;
}

body:has(> header > .henaisha-topbar) > header .henaisha-topbar {
  position: relative !important;
  width: 100% !important;
  flex: 0 0 auto !important;
}

body:has(> header > .henaisha-topbar) > header .nav-bar {
  position: absolute !important;
  top: 38px !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 5001 !important;
}

@media (max-width: 991.98px) {
  body:has(> header > .henaisha-topbar) {
    padding-top: 65px !important;
  }

  body:has(> header > .henaisha-topbar) > header .nav-bar {
    top: 35px !important;
  }
}

@media (max-width: 767.98px) {
  body:has(> header > .henaisha-topbar) {
    padding-top: 55px !important;
  }

  body:has(> header > .henaisha-topbar) > header .henaisha-topbar,
  body:has(> header > .henaisha-topbar) > header .henaisha-topbar > .container {
    height: 55px !important;
    min-height: 55px !important;
  }

  /* Sedikit overlap saja agar topbar tidak tertutup navbar. */
  body:has(> header > .henaisha-topbar) > header .nav-bar {
    top: 48px !important;
  }
}

/* ---------------------------------------------------------
     2. PRODUCT GRID 2 KOLOM DI HOME DAN KATALOG
     Mengidentifikasi row melalui kartu produk agar row layanan lain
     tidak ikut berubah menjadi 2 kolom.
     --------------------------------------------------------- */
@media (max-width: 767.98px) {
  main .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card) {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -6px !important;
    margin-left: -6px !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    > .col-lg-4.col-md-6.mb-4 {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Gambar Home: langsung berada di dalam kartu. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    > img.henaisha-menu-image {
    display: block !important;
    width: 100% !important;
    height: 135px !important;
    min-height: 135px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Gambar Katalog: berada di wrapper bersama tombol wishlist. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-image-wrap {
    position: relative !important;
    width: 100% !important;
    height: 135px !important;
    min-height: 135px !important;
    overflow: hidden !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-image-wrap
    .henaisha-menu-image,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-placeholder {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  /* Konten kartu Home menggunakan utility Bootstrap .p-4. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    > .p-4 {
    padding: 10px !important;
  }

  /* Konten kartu Katalog. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    .henaisha-menu-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 10px !important;
    min-width: 0 !important;
  }

  /* Judul dibuat ringkas dan maksimal dua baris. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    h4,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 32px !important;
    margin: 0 0 7px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-label,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-category {
    margin-bottom: 5px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.5px !important;
    overflow-wrap: anywhere !important;
  }

  /* Harga dan tombol dirapikan vertikal agar tidak bertabrakan. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    .d-flex.align-items-center.justify-content-between,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 9px !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-price {
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-detail,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 7px 5px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* Ringkasan kapasitas harus tetap muat di kartu yang lebih sempit. */
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-home-capacity,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-capacity {
    margin: 7px 0 !important;
    padding: 7px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-home-capacity-header,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-capacity-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
}

@media (max-width: 359.98px) {
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-card
    > img.henaisha-menu-image,
  main
    .row:has(> .col-lg-4.col-md-6.mb-4 > .henaisha-menu-card)
    .henaisha-menu-image-wrap {
    height: 120px !important;
    min-height: 120px !important;
  }
}