/* This file contains all custom styling for the user dashboard */

/* CSS FROM DASHBOARD BLADE FILE */

.navbar.dual-horizontal {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 1px solid #e9ecef;
}

.logo-main {
    display: flex;
    align-items: center;
}

.logo-title {
    margin: 0;
    font-weight: 600;
}

.nav-link {
    color: #343a40 !important;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 10px 15px;
}

.nav-link:hover {
    color: #c19648 !important;
    background-color: rgba(193, 150, 72, 0.1);
    border-radius: 5px;
}

.nav-link.active {
    color: #c19648 !important;
    font-weight: 600;
    background-color: rgba(193, 150, 72, 0.15);
    border-radius: 5px;
}

.tab-content-section {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
}

.btn-logout {
    border: 1px solid #c19648;
    color: #c19648;
    background-color: transparent;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background-color: #c19648;
    border-color: #c19648;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(193, 150, 72, 0.3);
}

.btn-logout:focus {
    box-shadow: 0 0 0 0.2rem rgba(193, 150, 72, 0.25);
}

.user-name-display {
    color: #343a40;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

/* Calendar specific styles */
.fc-available-date:hover {
    background-color: #c19648 !important;
    color: white !important;
}

.fc-selected-date {
    background-color: #c19648 !important;
    color: white !important;
    border: 2px solid #a0803a !important;
}

.time-slot-btn {
    border-color: #c19648;
    color: #c19648;
}

.time-slot-btn:hover {
    background-color: #c19648;
    border-color: #c19648;
    color: white;
}

.appointment-item {
    border-color: #e9ecef !important;
    transition: all 0.3s ease;
}

.appointment-item:hover {
    border-color: #c19648 !important;
    box-shadow: 0 2px 4px rgba(193, 150, 72, 0.2);
}

#userCalendar .fc-button-primary {
    background-color: #c19648;
    border-color: #c19648;
}

#userCalendar .fc-button-primary:hover {
    background-color: #a0803a;
    border-color: #a0803a;
}

#userCalendar .fc-button-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(193, 150, 72, 0.25);
}

.alert-info {
    border-color: #c19648;
    background-color: rgba(193, 150, 72, 0.1);
    color: #6c5730;
}

/* Menu items styling */
.menu-item {
    border-color: #e9ecef !important;
    transition: all 0.3s ease;
}

.menu-item.menu-clickable:hover {
    border-color: #c19648 !important;
    box-shadow: 0 2px 4px rgba(193, 150, 72, 0.2);
    transform: translateY(-1px);
}

.menu-item.menu-disabled {
    background-color: #f8f9fa;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Measurements styling */
.bg-gold-light {
    background-color: #c19648 !important;
    color: white !important;
}

.measurement-card {
    transition: all 0.3s ease;
}

.measurement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* === 3D FLIP ANIMATION FOR MENU DETAILS === */
.menu-flip-container {
    perspective: 1200px;
    width: 100%;
    min-height: 400px;
    position: relative;
}

.menu-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.menu-flipper.flipped {
    transform: rotateY(180deg);
}

.menu-front, .menu-back {
    position: absolute;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    top: 0;
    left: 0;
}

.menu-back {
    transform: rotateY(180deg);
}

/* Admin-style button styling for user dashboard */
.btn-custom-user {
    background-color: #ffffff;
    border: 1px solid var(--bs-primary-tint-80);
    color: #a67c30;
    transition: all 0.3s ease;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-custom-user:hover {
    background-color: #c19648;
    color: #ffffff;
    border-color: #c19648;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(193, 150, 72, 0.3);
}

.btn-custom-user:active {
    transform: translateY(0px);
}

.btn-custom-user:focus {
    box-shadow: 0 0 0 0.2rem rgba(193, 150, 72, 0.25);
}

.btn-custom-user .btn-inner {
    display: inline-flex;
    align-items: center;
}

.btn-custom-user svg {
    width: 16px;
    height: 16px;
}

/* Loading animation for flip */
.menu-flipper.loading {
    pointer-events: none;
}

.menu-flipper.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #c19648;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === ENHANCED MENU TABLE STYLING === */
.menu-front .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 15px;
}

.menu-front .table-responsive {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.menu-front .table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 0;
}

.menu-front .table thead th {
    background: linear-gradient(135deg, #c19648 0%, #a67c30 100%);
    color: white;
    font-weight: 600;
    padding: 16px 12px;
    border: none;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.menu-front .table tbody tr {
    transition: all 0.3s ease;
}

.menu-front .table tbody tr:hover {
    background-color: #faf7f2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(193, 150, 72, 0.15);
}

.menu-front .table tbody th {
    background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
    color: #c19648;
    font-weight: 600;
    border-right: 3px solid #c19648;
    padding: 14px 12px;
    text-transform: capitalize;
}

.menu-front .table tbody td {
    padding: 14px 12px;
    border-color: #e9ecef;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
    position: relative;
    overflow: hidden;
}

.menu-front .table tbody td:not(:empty) {
    background: white;
}

.menu-front .table tbody td:empty::after {
    content: '-';
    color: #adb5bd;
    font-style: italic;
}

/* Week headers with elegant styling */
.menu-front h5 {
    color: #c19648;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 25px;
    display: inline-block;
    position: relative;
}

.menu-front h5::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 50%;
    height: 3px;
}

/* Enhanced cell content styling with animated accents */
.menu-front .table tbody td:not(:empty):not([data-empty])::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #c19648, #a67c30);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.menu-front .table tbody tr:hover td:not(:empty):not([data-empty])::before {
    transform: scaleY(1);
}

/* Alternating row colors */
.menu-front .table tbody tr:nth-child(odd) {
    background-color: #fbfbfb;
}

.menu-front .table tbody tr:nth-child(even) {
    background-color: white;
}

/* === RECIPE CONTENT STYLING FOR BACK SIDE === */
.recipe-content {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 20px;
}

.recipe-section {
    margin-bottom: 30px;
}

.recipe-section h5 {
    color: #c19648;
    border-bottom: 2px solid #c19648;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.recipe-item {
    background: white;
    padding: 15px;
    border-left: 4px solid #c19648;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.recipe-item .recipe-number {
    color: #c19648;
    font-weight: bold;
}

.substitution-section {
    background: #fff3cd;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ffeaa7;
}

.substitution-section h4 {
    color: #856404;
    margin-bottom: 20px;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .menu-flip-container {
        perspective: 800px;
        min-height: 300px;
    }

    .menu-flipper {
        transition: transform 0.6s ease;
    }

    .btn-custom-user {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Enhanced mobile responsiveness for menu tables */
    .menu-front .table tbody th,
    .menu-front .table tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .menu-front .table thead th {
        padding: 12px 8px;
        font-size: 12px;
    }

    .menu-front .table-responsive {
        padding: 15px;
    }

    .menu-front h5::after {
        width: 70%;
    }

    .recipe-content {
        padding: 15px;
    }

    .recipe-item {
        padding: 12px;
    }
}

 /* === ENHANCED MEASUREMENT CARDS STYLING === */
  .measurement-card, .measurement-card-latest {
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      border: none;
      overflow: hidden;
  }

  .measurement-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }

  .measurement-card-latest {
      border: 2px solid #c19648;
      transform: scale(1.02);
  }

  .measurement-card-latest:hover {
      transform: scale(1.02) translateY(-5px);
      box-shadow: 0 10px 30px rgba(193, 150, 72, 0.3);
  }

  .bg-gold {
      background: linear-gradient(135deg, #c19648 0%, #a67c30 100%);
  }

  .bg-gradient-primary {
      background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  }

  .measurement-section {
      padding: 15px 0;
  }

  .section-title {
      color: #c19648;
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 2px solid #f8f9fa;
  }

  .measurement-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
  }

  .measurement-item {
      display: flex;
      flex-direction: column;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
      border-left: 3px solid #c19648;
      transition: all 0.3s ease;
  }

  .measurement-item:hover {
      background: #e9ecef;
      transform: translateX(5px);
  }

  .measurement-label {
      font-size: 12px;
      color: #6c757d;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
  }

  .measurement-value {
      font-size: 18px;
      font-weight: 700;
      color: #495057;
      display: flex;
      align-items: baseline;
      gap: 4px;
  }

  .measurement-value .unit {
      font-size: 12px;
      color: #6c757d;
      font-weight: 400;
  }

  /* Measurements responsive adjustments */
  @media (max-width: 768px) {
      .measurement-grid {
          grid-template-columns: 1fr;
          gap: 8px;
      }

      .measurement-item {
          padding: 10px;
      }

      .measurement-value {
          font-size: 16px;
      }

      .measurement-card-latest {
          transform: scale(1);
      }
  }

/* ===== RESPONSIVE USER NAVIGATION LAYOUT ===== */

/* Force navbar visibility at all screen sizes */
.navbar.dual-horizontal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
}

#navbar_main.user {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 0px !important;
}

#navbar_main.mobile-offcanvas {
    display: flex !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
}

#navbar_main .container-fluid {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    visibility: visible !important;
}

/* Override any potential hiding classes */
.mobile-offcanvas.nav.navbar {
    display: flex !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Logo visibility - show only on desktop (1200px+) */
.logo-desktop-only {
    display: block;
    padding: 0px !important;
}

/* Desktop (1200px+) - reduce height slightly */
@media (min-width: 1200px) {
    
    .nav-link {
        padding: 8px 15px; /* Slightly reduced padding */
    }
    .navbar-nav {
        margin-right: 35px;
    }
}

/* Tablet (768px to 1199px) - hide logo, keep user name, horizontal layout */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .logo-desktop-only {
        display: none !important;
    }
    
    .logo-main img {
        max-width: 160px;
    }
    
    .nav-link {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .navbar.dual-horizontal {
        padding: 10px 0;
    }
    
    /* Force horizontal layout for tablet */
    .navbar-nav {
        flex-direction: row !important;
        display: flex !important;
        margin-right: 20px;
    }
    
    #navbar_main .container-fluid {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    /* Ensure logout button is visible and properly styled */
    .btn-logout {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    
    /* User actions container */
    .navbar-nav.ms-auto {
        display: flex !important;
        visibility: visible !important;
    }
    
    .nav-item.dropdown {
        display: flex !important;
        align-items: center;
    }
}

/* Mobile (under 768px) - hide logo and user name, center everything */
@media (max-width: 767.98px) {
    /* Hide logo on mobile */
    .logo-desktop-only {
        display: none !important;
    }
    
    /* Hide user name on mobile to save space */
    .user-name-display {
        display: none !important;
    }
    
    /* Make navigation more compact on mobile */
    .navbar.dual-horizontal {
        padding: 8px 0;
    }
    
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: center !important;
    }
    
    /* Center everything horizontally */
    #navbar_main .container-fluid {
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        flex-wrap: nowrap;
        gap: 8px;
    }
    
    /* Compact navigation links for mobile */
    .nav-link {
        padding: 8px 6px !important;
        font-size: 13px !important;
        font-weight: 500;
    }
    
    /* Compact logout button - force visibility */
    .btn-logout {
        padding: 6px 8px !important;
        font-size: 12px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
    }
    
    /* Adjust navbar layout for mobile - all items in one centered row */
    .navbar-nav {
        flex-direction: row !important;
        gap: 4px;
        margin: 0 !important;
        display: flex !important;
    }
    
    /* Navigation links container */
    .navbar-nav:first-of-type {
        display: flex !important;
        justify-content: center;
        margin-bottom: 0 !important;
    }
    
    /* User actions container - force visibility */
    .navbar-nav.ms-auto {
        margin-left: 0 !important;
        display: flex !important;
        visibility: visible !important;
    }
    
    .nav-item.dropdown {
        display: flex !important;
        align-items: center;
    }
    
    .nav-item.dropdown .nav-link {
        display: flex !important;
        align-items: center;
    }
    
    /* Remove scroll from questionnaire responses section on mobile only (under 576px) */
}

/* Fix 'Izmeni' button positioning in medium mobile range */
@media (min-width: 576px) and (max-width: 767.98px) {
    .card-header .d-flex.justify-content-between {
        flex-wrap: wrap !important;
        gap: 10px;
    }
    
    .header-title {
        flex: 1 1 100% !important;
        margin-bottom: 10px !important;
    }
    
    .custom-button {
        flex: 1 1 auto !important;
        text-align: center !important;
    }
    
    .btn-custom {
        width: auto !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
}

/* Target smaller mobile devices specifically for scroll removal */
@media (max-width: 575.98px) {
    .questionnaire-responses {
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        height: auto !important;
    }
    
    .questionnaire-responses .row {
        overflow: visible !important;
    }
    
    /* Also fix button layout on very small screens */
    .card-header .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .header-title {
        margin-bottom: 15px !important;
    }
    
    .custom-button {
        align-self: flex-end !important;
    }
}

/* Fixed Information Button */
  .fixed-info-button {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background-color: #c19648;
      color: white;
      border: none;
      border-radius: 50px;
      padding: 15px 25px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(193, 150, 72, 0.4);
      transition: all 0.3s ease;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      user-select: none;
  }

  .fixed-info-button:hover {
      background-color: #a37d33;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(193, 150, 72, 0.6);
      color: white;
      text-decoration: none;
  }

  .fixed-info-button:active {
      transform: translateY(0);
      box-shadow: 0 3px 10px rgba(193, 150, 72, 0.4);
  }

  .fixed-info-button .icon {
      font-size: 18px;
      display: flex;
      align-items: center;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .fixed-info-button {
          bottom: 20px;
          right: 20px;
          padding: 12px 20px;
          font-size: 14px;
      }

      .fixed-info-button .icon {
          font-size: 16px;
      }
  }

  /* Animation for attention */
  .fixed-info-button.pulse {
      animation: pulse-info 2s infinite;
  }

  @keyframes pulse-info {
      0% {
          transform: scale(1);
          box-shadow: 0 4px 15px rgba(193, 150, 72, 0.4);
      }
      50% {
          transform: scale(1.05);
          box-shadow: 0 6px 25px rgba(193, 150, 72, 0.7);
      }
      100% {
          transform: scale(1);
          box-shadow: 0 4px 15px rgba(193, 150, 72, 0.4);
      }
  }



    /* Information popup tabs styling */
  #infoPopup .info-tabs {
      margin-bottom: 20px;
  }

  #infoPopup .info-tabs .nav-link {
      color: #666;
      border: 1px solid transparent;
      border-bottom: none;
      padding: 10px 15px;
      font-weight: 500;
      transition: all 0.3s ease;
      margin-right: 8px;
  }

  #infoPopup .info-tabs .nav-link:hover {
      color: #c19648;
      background-color: #f8f9fa;
  }

  #infoPopup .info-tabs .nav-link.active {
      color: white !important; /* Force white text */
      background-color: #c19648 !important; /* Force brand color background */
      border-color: #c19648 !important;
      border-bottom: 2px solid #c19648 !important;
      margin-bottom: -2px;
      font-weight: 600;
  }

  /* Force active state on mobile devices */
  #infoPopup .info-tabs .nav-link.active:focus,
  #infoPopup .info-tabs .nav-link.active:active,
  #infoPopup .info-tabs .nav-link.active:visited,
  #infoPopup .info-tabs .nav-link.active:hover {
      color: white !important;
      background-color: #c19648 !important;
      border-color: #c19648 !important;
  }

  #infoPopup .info-tab-content {
      min-height: 300px;
  }

  #infoPopup .info-content {
      padding: 0;
  }

  #infoPopup .info-content h5 {
      color: #c19648;
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 2px solid #c19648;
  }

  #infoPopup .info-content p {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
      color: #555;
  }

  #infoPopup .info-content ul {
      margin-bottom: 0;
      padding-left: 20px;
  }

  #infoPopup .info-content li {
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 1.5;
      color: #666;
  }
    #infoPopup .info-content li::marker {
      color: #c19648;
  }

    #infoPopup .info-content span {
        font-size: 14px;
        line-height: 1.6;
        color: #555;
        font-weight: bolder;
  }

  /* Responsive tabs */
  @media (max-width: 768px) {
      #infoPopup .info-tabs .nav-link {
          padding: 8px 10px;
          font-size: 12px;
          margin-right: 4px;
      }

      /* Extra mobile-specific active state */
      #infoPopup .info-tabs .nav-link.active {
          color: white !important;
          background-color: #c19648 !important;
          border-color: #c19648 !important;
      }

      #infoPopup .info-tab-content {
          min-height: 250px;
      }
  }

    /* Extra small mobile devices (390px and smaller) - prevent text wrapping */
    @media (max-width: 390px) {
        /* Force smaller font and padding to prevent wrapping */
        .nav-link {
            padding: 6px 4px !important;
            font-size: 11px !important;
            font-weight: 500;
            white-space: nowrap !important; /* Prevent text wrapping */
        }

        /* Reduce container padding to give more space */
        .container-fluid {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

        /* Reduce gap between nav items */
        .navbar-nav {
            gap: 2px !important;
        }

        /* Make logout button more compact */
        .btn-logout {
            padding: 4px 6px !important;
            font-size: 10px !important;
        }

        /* Reduce icon margins */
        .nav-link i {
            margin-right: 4px !important;
        }

        /* Ensure no text wrapping anywhere in navigation */
        .navbar-nav .nav-link {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap !important;
        }
    }

    /* Desktop (768px and above) - Cards expanded by default */
    @media (min-width: 768px) {
        #record-tab .card .card-body {
            display: block !important;
        }
    }

    /*  Custom responsive margin classes to replace Bootstrap mb-4 
        Desktop (768px and above) - Use Bootstrap default 1.5rem (24px) */
    @media (min-width: 768px) {
        #record-tab .custom-mb {
            margin-bottom: 1.5rem !important; /* Same as Bootstrap mb-4 */
        }
    }

  /* Mobile (767px and below) - Consolidated card toggle functionality */
  @media (max-width: 767.98px) {
      /* Hide card bodies by default on mobile */
      #record-tab .card .card-body {
          display: none !important;
      }


      /* Standardize all card header heights and styling */
      #record-tab .card-header {
          min-height: 60px !important;
          display: flex !important;
          align-items: center !important;
          padding: 15px 45px 15px 15px !important;
          cursor: pointer;
          position: relative;
      }

      /* Standardize header text */
      #record-tab .card-header h5,
      #record-tab .card-header .card-title {
          font-size: 0.9rem !important;
          margin: 0 !important;
          line-height: 1.3 !important;
          font-weight: 600 !important;
      }

      /* Container and column spacing */
      #record-tab .container-fluid {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      #record-tab .row {
          margin-left: -10px !important;
          margin-right: -10px !important;
      }

      #record-tab [class*="col-"] {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      /* Remove extra margins from nested elements */
      #record-tab .card-header i {
          margin-right: 8px !important;
      }

      /* Style buttons in headers */
      #record-tab .card-header .btn,
      #record-tab .card-header .btn-sm,
      #record-tab .document-list .btn,
      #record-tab .document-list .btn-sm {
          padding: 3px 6px !important;
          font-size: 0.7rem !important;
          height: auto !important;
          z-index: 3;
          position: relative;
      }
      #record-tab .card-header .btn svg,
      #record-tab .card-header .btn-sm svg,
      #record-tab .document-list .btn svg,
      #record-tab .document-list .btn-sm svg {
      width: 12px !important;
      height: 12px !important;
      }

      /* Toggle arrow styling */
      #record-tab .card-header::after {
          content: "▼";
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 12px;
          color: #c19648;
          transition: transform 0.3s ease;
          z-index: 2;
      }

      /* When card is expanded */
      #record-tab .card.expanded .card-body {
          display: block !important;
      }

      #record-tab .card.expanded .card-header::after {
          transform: translateY(-50%) rotate(180deg);
      }

      #record-tab .col-lg-4 .card-header.d-flex .header-title {
        margin-top: 8px;
     }
     #record-tab .col-lg-4 .card-header.d-flex .custom-button {
        margin-bottom: 10px !important;
     }

     #recipes-tab .card-header {
          cursor: pointer;
          position: relative;
          padding-right: 3rem;
      }

      #recipes-tab .card-header::after {
          content: '▼';
          position: absolute;
          right: 1rem;
          top: 50%;
          transform: translateY(-50%);
          font-size: 0.8rem;
          color: #6c757d;
          transition: transform 0.3s ease;
      }

      #recipes-tab .card.expanded .card-header::after {
          transform: translateY(-50%) rotate(180deg);
      }

      #recipes-tab .card:not(.expanded) .card-body {
          display: none !important;
      }

      #recipes-tab .card-body {
          transition: all 0.3s ease;
      }
  }
  

  /* Only collapse recipe-content when menu-flipper is NOT flipped */
  .menu-flipper:not(.flipped) .recipe-content {
      height: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
  }

  @media (min-width: 768px){
    .hero-section {
        height: calc(100vh - 130px) !important;
        min-height: calc(100vh - 130px) !important;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    footer .col-md-6:first-child p {
          font-size: 1rem;
          font-weight: 500;
          text-decoration: underline;
          text-decoration-color: #c19648;
          text-underline-offset: 3px;
          margin-bottom: 8px !important;
      }

      footer .col-md-6:last-child p {
          font-size: 0.9rem;
          font-style: italic;
          opacity: 0.8;
          margin-bottom: 0 !important;
      }
  }



   @media (max-width: 768px) {
      .hero-section {
          padding-top: 40px !important; /* Adjust based on your mobile header height */
      }

      .hero-section .container {
          padding-top: 20px;
      }
      .hero-section {
          padding-bottom: 70px !important; /* Adjust based on your footer height */
      }

      .card-body {
          padding-top: 20px !important;
          padding-bottom: 20px !important;
      }
      .navbar-brand {
          margin-right: 45px !important;
      }

      .navbar-nav .nav-item {
          margin-left: 45px;
      }

      footer .row {
          text-align: center !important;
      }

      footer .col-md-6 {
          margin-bottom: 10px;
      }

      footer .col-md-6:first-child p {
          font-size: 0.85rem;
          font-weight: 500;
          text-decoration: underline;
          text-decoration-color: #c19648;
          text-underline-offset: 3px;
          margin-bottom: 8px !important;
      }

      footer .col-md-6:last-child p {
          font-size: 0.75rem;
          font-style: italic;
          opacity: 0.8;
          margin-bottom: 0 !important;
      }

      footer .text-md-end {
          text-align: center !important;
      }

      /* Prevent body padding shift */
      .modal-open .modal {
          padding-right: 0 !important;
      }

      .modal-open {
          padding-right: 0 !important;
      }

     .modal-dialog {
          max-width: 90% !important;
          width: 90% !important;
      }

      .modal-content {
          width: 100% !important;
          max-width: 100% !important;
      }
  }

  .hero-section h1,
  .hero-section .display-4 {
      position: relative;
      display: inline-block;
      margin-bottom: 35px;
  }

  .hero-section h1::after,
  .hero-section .display-4::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: -5px;
      width: 110%;
      height: 4px;
      background: linear-gradient(45deg, transparent 0%, #212529 20%, #212529 50%, #212529 80%, transparent 100%);
      transform: skew(-25deg);
      border-radius: 2px;
  }

    /* Information popup - single scroll fix */
  #infoPopup .popup-content {
      max-height: 85vh !important;
      overflow-y: auto !important;
      margin-top: 2vh !important;
      margin-bottom: 2vh !important;
  }

  /* Remove scroll from tab-content - let popup-content handle it */
  #infoPopup .popup-content .tab-content {
      max-height: none !important;
      overflow-y: visible !important;
      padding-right: 0 !important;
  }

  /* Ensure popup doesn't go through header on laptop screens */
  @media (min-height: 600px) and (max-height: 900px) {
      #infoPopup .popup-content {
          max-height: 80vh !important;
          margin-top: 5vh !important;
      }
  }

  /* Style the single scrollbar */
  #infoPopup .popup-content::-webkit-scrollbar {
      width: 6px;
  }

  #infoPopup .popup-content::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
  }

  #infoPopup .popup-content::-webkit-scrollbar-thumb {
      background: #c19648;
      border-radius: 3px;
  }

  #infoPopup .popup-content::-webkit-scrollbar-thumb:hover {
      background: #a08139;
  }
  

   /* Location Modal and Package Type Modal Styling */
  #locationModal .modal-title,
  #packageTypeModal .modal-title {
      font-size: 1.5rem !important;
      font-weight: 600 !important;
      text-align: center !important;
      width: 100% !important;
      color: #0c112e !important;
      margin-bottom: 0 !important;
  }

  /* Center modal headers */
  #locationModal .modal-header,
  #packageTypeModal .modal-header {
      justify-content: center !important;
      position: relative !important;
      padding: 1.5rem 1.5rem 1rem 1.5rem !important;
  }

  /* Position close button absolutely */
  #locationModal .btn-close,
  #packageTypeModal .btn-close {
      position: absolute !important;
      top: 15px !important;
      right: 15px !important;
  }

  /* Update button styling */
  #locationModal .location-btn,
  #packageTypeModal .package-type-btn {
      border: 2px solid #0c112e !important;
      color: #0c112e !important;
      background-color: white !important;
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 1rem !important;
  }

  #locationModal .location-btn:hover,
  #packageTypeModal .package-type-btn:hover {
      background-color: #0c112e !important;
      color: white !important;
  }

  #locationModal .location-btn:hover small,
  #packageTypeModal .package-type-btn:hover small {
      color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Center button content */
  #locationModal .location-btn .d-inline-block,
  #packageTypeModal .package-type-btn .d-inline-block {
      text-align: center !important;
  }

  /* Update first text color (main text) */
  #locationModal .location-btn .fw-bold,
  #packageTypeModal .package-type-btn .fw-bold {
      color: #0c112e !important;
      font-size: 1.1rem !important;
  }

  #locationModal .location-btn:hover .fw-bold,
  #packageTypeModal .package-type-btn:hover .fw-bold {
      color: white !important;
  }

  /* Keep small text gray */
  #locationModal .location-btn small,
  #packageTypeModal .package-type-btn small {
      color: #6c757d !important;
      font-size: 0.875rem !important;
  }

  /* Center icons */
  #locationModal .location-btn i,
  #packageTypeModal .package-type-btn i {
      color: #0c112e !important;
  }

  #locationModal .location-btn:hover i,
  #packageTypeModal .package-type-btn:hover i {
      color: white !important;
  } 

   /* === PRICING FLIP ANIMATION FOR LANDING PAGE === */
  .pricing-flip-container {
      perspective: 1200px;
      width: 100%;
      min-height: 600px; /* Increased to prevent overflow */
      position: relative;
  }

  .pricing-flipper {
      position: relative;
      width: 100%;
      min-height: 600px; /* Match container height */
      transform-style: preserve-3d;
      transition: transform 0.6s ease;
  }

  .pricing-flipper.flipped {
      transform: rotateY(180deg);
  }

  .pricing-front, .pricing-back {
      position: absolute;
      width: 100%;
      min-height: 600px; /* Match container height */
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      top: 0;
      left: 0;
  }

  .pricing-back {
      transform: rotateY(180deg);
  }

  /* Pricing link styling - RIGHT ALIGNED - More specific selectors */
  .pricing-front > .mb-4:first-child,
  .pricing-back .mb-4 {
      text-align: right !important;
  }

  .pricing-link, .pricing-link-back {
      color: white !important;
      text-decoration: none !important;
      font-size: 1.2rem;
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-block;
      padding: 10px 0;
      position: relative;
      text-align: right;
  }

  .pricing-link::after,
  .pricing-link-back::after {
      content: '';
      position: absolute;
      bottom: 5px;
      right: 0;
      width: 0;
      height: 2px;
      background-color: white;
      transition: width 0.3s ease;
  }

  .pricing-link:hover::after,
  .pricing-link-back:hover::after {
      width: 100%;
  }

  .pricing-link:hover,
  .pricing-link-back:hover {
      color: #f8f9fa !important;
      text-decoration: none !important;
  }

  .pricing-link:hover {
      transform: translateX(5px);
  }

  .pricing-link-back:hover {
      transform: translateX(-5px);
  }

  /* Pricing slider styling - MODERN VERSION */
  .pricing-slider {
      position: relative;
      min-height: 400px; /* Increased for content */
      overflow: visible; /* Changed to prevent cutoff */
  }

  .pricing-slide {
      display: none;
      animation: slideIn 0.5s ease-in-out;
  }

  .pricing-slide.active {
      display: block;
  }

  /* Package title styling - MODERN & BOLD */
  .package-title {
      color: white;
      font-weight: 800;
      font-size: 1.5rem;
      margin-bottom: 1rem;
      position: relative;
      display: block;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .package-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: white;
      border-radius: 2px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Pricing info styling - MODERN & PROMINENT */
  .pricing-info {
      color: rgba(255, 255, 255, 0.95);
      font-size: 1.0rem;
      line-height: 1.3;
      margin-bottom: 1.3rem;
      text-align: center;
      background: rgba(0, 0, 0, 0.2);
      padding: 1rem 1.0rem;
      border-radius: 10px;
      max-width: 400px;
      margin: 1.5rem auto;
  }

  .pricing-info strong {
      color: white;
      font-size: 1.5rem;
      font-weight: 900;
      display: inline-block;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* Package features list styling - MODERN & CLEAN */
  .package-features {
      list-style: none;
      padding: 0;
      margin: 1rem auto 0;
      text-align: left;
      max-width: 500px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      padding: 1.5rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .package-features li {
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.8rem;
      line-height: 1.2;
      margin-bottom: 0.8rem;
      padding-left: 0;
      text-align: left;
      word-wrap: break-word;
      overflow-wrap: break-word;
      position: relative;
  }

  .package-features li::before {
      content: none; /* Remove bullets completely */
  }

  .package-features li:last-child {
      margin-bottom: 0;
  }

  /* Slider navigation - COMPACT */
  .slider-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-top: 1rem;
  }

  .slider-btn {
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid white;
      color: white;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      font-size: 1.3rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .slider-btn:hover {
      background: white;
      color: #c19648;
  }

  .slider-dots {
      display: flex;
      gap: 8px;
  }

  .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      border: 2px solid white;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .dot.active,
  .dot:hover {
      background: white;
  }

  @keyframes slideIn {
      from {
          opacity: 0;
          transform: translateY(15px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
      .pricing-flip-container {
          perspective: 800px;
          width: 100%;
          min-height: 400px;
          height: auto;
          position: relative;
          transition: height 0.6s ease;
      }

      /* Fallback for browsers without :has() support */
      .pricing-flip-container.active {
          min-height: 525px;
      }

      .pricing-back {
          position: absolute;
          width: 100%;
          height: auto;
          min-height: 100%;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          top: 0;
          left: 0;
          transform: rotateY(180deg);
          padding: 1rem;
          box-sizing: border-box;
      }

      .pricing-front {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          top: 0;
          left: 0;
      }

      .package-title {
          font-size: 1.5rem;
          margin-bottom: 1rem;
      }

      .package-title::after {
          height: 2px;
          bottom: -6px;
      }

      .pricing-info {
          font-size: 0.9rem;
      }

      .package-features {
          max-width: 280px;
      }

      .package-features li {
          font-size: 0.75rem;
          margin-bottom: 0.3rem;
      }

      .package-features li::before {
          font-size: 0.8rem;
          margin-right: 0.4rem;
      }

      .slider-btn {
          width: 30px;
          height: 30px;
          font-size: 1.1rem;
      }

      .dot {
          width: 8px;
          height: 8px;
      }

      .slider-nav {
          gap: 12px;
      }

    /* Fix questionnaire modal scrolling - remove duplicate scrolls and fix height */
    #questionnaireModal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative; /* Create stacking context but don't clip Select2 */
    }

    /* Ensure Select2 dropdowns render above modal */
    .select2-container--open {
        z-index: 10000 !important;
    }

    .select2-dropdown {
        z-index: 10000 !important;
    }

    #questionnaireModal .questionnaire-form {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Remove ALL extra spacing from modal content - aggressive approach */
    #questionnaireModal .modal-body,
    #questionnaireModal .modal-body form,
    #questionnaireModal #questionnaireForm,
    #questionnaireModal .questionnaire-form,
    #questionnaireModal .tab-content,
    #questionnaireModal .tab-pane,
    #questionnaireModal #dynamicQuestions,
    #questionnaireModal #dynamicQuestionsPerson1,
    #questionnaireModal #dynamicQuestionsPerson2 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Remove bottom margin from last row in questionnaire */
    #questionnaireModal .row:last-child,
    #questionnaireModal .questionnaire-form .row:last-child {
        margin-bottom: 0 !important;
    }

    /* Remove margin from submit button container */
    #questionnaireModal .text-center.mt-4 {
        margin-bottom: 0 !important;
        padding-bottom: 1rem !important; /* Small padding for breathing room */
    }

    /* Remove margin from relationship card */
    #questionnaireModal .card.mt-4 {
        margin-bottom: 0 !important;
    }

    /* Custom validation styling for required fields */
    .is-invalid {
        border-color: #dc3545 !important;
        padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .is-invalid:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    select.is-invalid {
        background-position: right 0.75rem center, center right 2.25rem;
    }

    /* Select2 dropdown styling for modal - must be above Bootstrap modal (1055) */
    .select2-container--default .select2-dropdown {
        z-index: 10000 !important;
    }

    .select2-dropdown-modal {
        z-index: 10000 !important;
    }

    .select2-container-modal {
        z-index: 10000 !important;
    }

    /* Force Select2 dropdown to appear above everything */
    body > .select2-container {
        z-index: 10000 !important;
    }

    /* Ensure Select2 works properly in modal */
    .modal .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--multiple {
        min-height: 38px;
    }

    /* Fix Select2 search input visibility */
    .select2-search__field {
        width: 100% !important;
    }

    /* Ensure Select2 results are visible */
    .select2-results {
        display: block !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }

    .select2-results__options {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .select2-results__option {
        display: block !important;
        padding: 6px 12px !important;
        cursor: pointer !important;
    }

    /* Fix dropdown appearing below viewport on desktop */
    .select2-container--open .select2-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Debug: Make dropdown very visible */
    .select2-dropdown {
        background-color: white !important;
        border: 2px solid #000 !important;
        display: block !important;
    }

    /* Force display on larger screens */
    @media (min-width: 768px) {
        .select2-container--open .select2-dropdown--below {
            display: block !important;
            visibility: visible !important;
            position: absolute !important;
        }

        .select2-container--open .select2-dropdown--above {
            display: block !important;
            visibility: visible !important;
            position: absolute !important;
        }

        .select2-results {
            min-height: 100px !important;
            display: block !important;
        }

        .select2-results__options {
            min-height: 50px !important;
            display: block !important;
        }

        .select2-results__option {
            display: list-item !important;
        }

        /* Override any modal overflow hiding */
        body > .select2-container--open {
            z-index: 99999 !important;
        }

        body > .select2-container--open .select2-dropdown {
            display: block !important;
            visibility: visible !important;
            z-index: 99999 !important;
        }
    }
  }