#menu 
{
    width:100%;
}
.profile-image-edit
{
  height:200px;
}
 .selected_hospital {
            background: #fff3cd !important;
            /* light yellow */
            border: 2px solid #ff9800 !important;
            border-radius: 10px;
        }

        .selected_spec {
            background-color: #0d6efd !important;
            /* Bootstrap primary */
            color: #fff !important;
            border-color: #0d6efd !important;
        }

        .selected_package_btn {
            background-color: #198754 !important;
            /* green */
            color: #fff !important;
            border-color: #198754 !important;
        }

        .selected_package_card {
            border: 2px solid #198754 !important;
            box-shadow: 0 0 10px rgba(25, 135, 84, 0.4);
        }

        .selected_patient_card {
            border: 2px solid #0d6efd !important;
            /* blue */
            box-shadow: 0 0 10px rgba(13, 110, 253, 0.4);
        }

        .selected_patient_btn {
            background-color: #0d6efd !important;
            color: #fff !important;
            border-color: #0d6efd !important;
        }

        .selected_doctor_card {
            border: 2px solid #800000 !important;
            /* Maroon */
            box-shadow: 0 0 10px rgba(128, 0, 0, 0.4);
            /* Maroon glow */
        }

        .selected_doctor_btn {
            background-color: #800000 !important;
            /* Maroon */
            color: #fff !important;
            border-color: #800000 !important;
        }

        .selected_doctor_card,
        .selected_doctor_btn {
            transition: all 0.25s ease-in-out;
        }

        .selected_staff_card {
            border: 2px solid #008b8b !important;
            /* Dark Cyan */
            box-shadow: 0 0 12px rgba(0, 139, 139, 0.45);
            /* Glow */
            border-radius: 10px;
        }

        .selected_staff_btn {
            background-color: #008b8b !important;
            color: #fff !important;
            border-color: #008b8b !important;
        }

        .card-hover {
            transition: all 0.25s ease-in-out;
        }

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

        .booking-card {
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
        }

        .price-box {
            font-size: 22px;
            font-weight: bold;
            background: #eef7ff;
            padding: 12px 18px;
            border-radius: 8px;
            display: inline-block;
            margin-top: 10px;
        }
        .left-sidebar {
    width: 250px;
    transition: all 0.3s ease;
}

.left-sidebar.hide {
    margin-left: -260px;
}
.tabs {
    margin-bottom: 10px;
}

.tablink {
    padding: 8px 15px;
    border: none;
    background: #e9e9e9;
    margin-right: 5px;
    cursor: pointer;
}

.tablink.active {
    background: #007bff;
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.card-select {
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-select.active {
  border: 2px solid #0d6efd;        /* Bootstrap primary */
  box-shadow: 0 0 10px rgba(13,110,253,0.4);
  transform: scale(1.02);
}

/* Fallback for missing Bootstrap Icons */

/* Train */
.bi-train-front::before {
  content: "🚆";
 
  display: inline-block;
}

/* Flight */
.bi-airplane::before {
  content: "✈️";

  display: inline-block;
}
.bi-hotel::before {
  content: "🏨";
  display: inline-block;
}
/* Doctor */
.bi-doctor::before {
  content: "🩺";
  display: inline-block;
}

/* Bus */
.bi-bus-front::before {
  content: "🚌";

  display: inline-block;
}
/* Medicine / Pharmacy */
.bi-capsule::before {
  content: "💊";
   display: inline-block;
}
.bi-cab-front::before {
  content: "🚗";
  display: inline-block;
}

/* Free Room */
.bi-rooms::before {
  content: "🟢";
  display: inline-block;
}

/* Book For Own Customer */
.bi-booking::before {
  content: "📝";
  display: inline-block;
}

/* Manage Rooms */
.bi-room-manage::before {
  content: "🛏️";
  display: inline-block;
}

/* Online Orders */
.bi-order::before {
  content: "🧾";
  display: inline-block;
}
/* Services & Price */
.bi-service-price::before {
  content: "🧺";
  display: inline-block;
}
/* Food Delivery */
.bi-delivery::before {
  content: "🍔";
  display: inline-block;
}

/* Laundry Pickup */
.bi-pickup::before {
  content: "🧺⬆️";
  display: inline-block;
}
/* Laundry Drop */
.bi-drop::before {
  content: "🧺⬇️";
  display: inline-block;
}

.bi-food::before {
  content: "🍔";
  display: inline-block;
}

/* Pathology / Diagnostic Icon */
.bi-pathology::before {
  content: "🧪";
  display: inline-block;
}
/* Medicine Delivery Icon */
.bi-delivery-medicine::before {
  content: "💊🚚";
  display: inline-block;
}
/* Food Delivery Icon */
.bi-delivery-food::before {
  content: "🍔🚚";
  display: inline-block;
}
/* Medicine Delivery Icon */
.bi-medicine::before {
  content: "💊";
  display: inline-block;
}

/* My Patient Icon */
.bi-my_patient::before {
  content: "🧑‍⚕️📋";
  display: inline-block;
}

.bi-staff::before {
  content: "🧑‍⚕️";
  display: inline-block;
}

/* Add Patient Icon */
.bi-add-patient::before {
  content: "➕🧑";
  display: inline-block;
}
/* Laundry */
.bi-laundry::before {
  content: "🧺";
  display: inline-block;
}


/* Background image */

.login-card-bg {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* Background image layer */
.login-card-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/medi.png") center / cover no-repeat;
  opacity: 0.3;
  animation: cardOpacityPulse 8s infinite ease-in-out;
  z-index: 0;
}

/* Keep all content above background */
.login-card-bg > * {
  position: relative;
  z-index: 1;
}

/* Smooth opacity animation */
@keyframes cardOpacityPulse {
  0%   { opacity: 0.15; }
  20%  { opacity: 0.20; }
  40%  { opacity: 0.25; }
  60%  { opacity: 0.3; }
  80%  { opacity: 0.20; }
  100% { opacity: 0.10; }
}



.hospital-card-bg {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* hospital Background image layer */
.hospital-card-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/medi-2.png") center / cover no-repeat;
  opacity: 0.2;
  animation: cardOpacityPulse2 8s infinite ease-in-out;
  z-index: 0;
}

/* Keep all content above background */
.hospital-card-bg > * {
  position: relative;
  z-index: 1;
}

/* Smooth opacity animation */
@keyframes cardOpacityPulse2 {
  0%   { opacity: 0.06; }
  20%  { opacity: 0.10; }
  40%  { opacity: 0.15; }
  60%  { opacity: 0.2; }
  80%  { opacity: 0.15; }
  100% { opacity: 0.10; }
}

.doctor-card-bg {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* doctor Background image layer */
.doctor-card-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/medi-2.png") center / cover no-repeat;
  opacity: 0.2;
  animation: cardOpacityPulse3 8s infinite ease-in-out;
  z-index: 0;
}

/* Keep all content above background */
.doctor-card-bg > * {
  position: relative;
  z-index: 1;
}

/* Smooth opacity animation */
@keyframes cardOpacityPulse3 {
  0%   { opacity: 0.06; }
  20%  { opacity: 0.10; }
  40%  { opacity: 0.15; }
  60%  { opacity: 0.2; }
  80%  { opacity: 0.15; }
  100% { opacity: 0.10; }
}

/* ===== MAIN CARD GRADIENT ===== */
.main-gradient-card {
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    #f8f9ff 0%,
    #eef2ff 40%,
    #e6f0ff 100%
  );
}

/* ===== MENU CARD BASE ===== */
.menu-card {
  min-height: 80px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== HOVER EFFECT ===== */
.menu-card:hover {
  background: #6e75a9!important;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

/* ===== GRADIENT COLORS ===== */

/* Patient */
.bg-primary.menu-card {
  background: linear-gradient(135deg, #0d6efd, #4dabf7);
}

/* Case Manager */
.bg-success.menu-card {
  background: linear-gradient(135deg, #198754, #51cf66);
}

/* Hotel */
.bg-info.menu-card {
  background: linear-gradient(135deg, #0dcaf0, #66d9e8);
}

/* Restaurant */
.bg-warning.menu-card {
  background: linear-gradient(135deg, #ffc107, #ffd43b);
}

/* Doctor */
.bg-danger.menu-card {
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

/* Hospital */
.bg-secondary.menu-card {
  background: linear-gradient(135deg, #6c757d, #adb5bd);
}
  /* make sure second modal is always on top */
  .modal.prescription-modal {
    z-index: 1065;
  }

  .modal-backdrop.prescription-backdrop {
    z-index: 1060;
  }
  
  .min-h-120 
  {
    min-height: 120px;
  }


 .profile-text-bg {
  background-image:
    linear-gradient(
      to right,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.75) 30%,
      rgba(255,255,255,0.3) 60%,
      rgba(255,255,255,0) 100%
    ),
    url("../images/bgflower.jpg");

  background-size: cover;
  background-position: right center;
  min-height: 80px;

  display: flex;
  align-items: center;
}

.profile-text-bg {
  background-blend-mode: lighten;
}
.profile-text-bg h5 {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 6px rgba(0,0,0,0.85),
    0 4px 12px rgba(0,0,0,0.6);
}

.icon {
  font-size: 22px;
  line-height: 1;
}

.home-icon::before {
  content: "🏠";
}

.login-icon::before {
  content: "🔐";
}

.contact-icon::before {
  content: "📞";
}

.logout-icon::before {
  content: "🔒";
}
/* Dashboard */
.dashboard-icon::before {
  content: "📊";
}

/* Ticket */
.ticket-icon::before {
  content: "🎫";
}


/* MENU CARD STYLING */

/* MENU CARD */
.menu-card {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: visible;
  background-color: #cd96cd;
  opacity:0.6;

}

.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Background image overlay */
.menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/corner.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.85;
  z-index: 0;
}

/* ICON CIRCLE */
.menu-icon-circle {
  position: relative;
  z-index: 3;

  width: 50px;
  height: 50px;
  border-radius: 50%;
   display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* center horizontally */
  font-size: 2rem;
  color: #fff;

  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-icon-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.5);
}

/* Menu text with 45° bottom-left shadow */
.menu-card-text {
  color: #f2f0e1;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 2px 3px 3px #4d7b4d;

  /* Ensure text is above all backgrounds */
  position: relative;
  z-index: 20;

  /* Full opacity to prevent blending */
  opacity: 1;
}






/* MAIN MENU LINK */
.left-menu {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  gap: 12px;                 /* 👈 spacing between icon & text */
  white-space: nowrap;
}

/* ICON — INLINE, NOT ABSOLUTE */
.left-menu::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;               /* 👈 fixed icon column */
  min-width: 20px;
  font-size: 16px;
  flex-shrink: 0;            /* 👈 NEVER shrink */
}

/* SUBMENU */
.submenu .left-menu {
  padding-left: 35px;
}

/* ICONS */
.hospital::before { content: "🏥"; }
.doctor::before { content: "👨‍⚕️"; }
.travel::before { content: "🌍"; }
.train::before { content: "🚆"; }
.flight::before { content: "✈️"; }
.bus::before { content: "🚌"; }
.cab::before { content: "🚕"; }
.hotel::before { content: "🏨"; }
.food::before { content: "🍽️"; }
.pathology::before { content: "🧪"; }
.medicine::before { content: "💊"; }
.laundry::before { content: "🧺"; }
.staff::before { content: "👥"; }
.admission::before { content: "📝"; }
.visa::before { content: "🛂"; }
.currency::before { content: "💱"; }
.contact::before { content: "📞"; }
.about::before { content: "ℹ️"; }
.terms::before { content: "📜"; }
.refund::before { content: "💸"; }
.login::before { content: "🔓"; } 
.profile::before {  content: "👤";}
.dashboard::before {  content: "📊";}
.logout::before { content: "🔓"; } 
.hotel-profile::before {  content: "👤";}
.hotel-dashboard::before {  content: "📊";}
.tech-profile::before {
  content: "👤";
}

.tech-dashboard::before {
  content: "📊";
}
.restaurant-profile::before {
  content: "👤";
}

.restaurant-dashboard::before {
  content: "📊";
}
.pharmacy-profile::before {
  content: "👤";
}

.pharmacy-dashboard::before {
  content: "📊";
}

.center-profile::before {
  content: "👤";
}

.center-dashboard::before {
  content: "📊";
}

.hospital-profile::before {
  content: "👤";
}

.hospital-dashboard::before {
  content: "📊";
}

.doctor-profile::before {
  content: "👤";
}

.doctor-dashboard::before {
  content: "📊";
}

.laundry-profile::before {
  content: "👤";
}

.laundry-dashboard::before {
  content: "📊";
}

.delivery-profile::before {
  content: "👤";
}

.delivery-dashboard::before {
  content: "📊";
}

.relationship-profile::before {
  content: "👤";
}

.relationship-dashboard::before {
  content: "📊";
}

.case-profile::before {
  content: "👤";
}

.case-dashboard::before {
  content: "📊";
}

.staff-profile::before {
  content: "👤";
}

.staff-dashboard::before {
  content: "📊";
}

.admission-profile::before {
  content: "👤";
}

.admission-dashboard::before {
  content: "📊";
}


#sb_invoiceDiv {
  width: 800px;
  background: #fff;
  font-family: Arial, sans-serif;
  color: #333;
  position: relative;
  overflow: hidden;
}

/* Background image with gradient fade */
#sb_invoiceDiv::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.8) 0%,   /* image ~0.2 */
      rgba(255,255,255,0.7) 50%,  /* image ~0.5 */
      rgba(255,255,255,0.8) 100%  /* image ~0.1 */
    ),
    url("../images/invoice-bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 0;
}

/* Ensure invoice content stays on top */
#sb_invoiceDiv > * {
  position: relative;
  z-index: 1;
}



  /* Header */
  .inv-header {
    background: linear-gradient(120deg, #0d3b66, #1b6ca8);
    color: #fff;
    padding: 15px;
    position: relative;
  }

  .inv-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .inv-logo img {
    height: 55px;
    background: #fff;
    padding: 6px;
    border-radius: 4px;
  }

  .inv-company {
    margin-top: 10px;
    font-size: 11px;
    font-weight: bold;
    
  }

.inv-contact {
  width: 30%;
  text-align: left;   /* ← FIX */
  font-size: 11px;
  line-height: 1.4;
}


  /* Body */
  .inv-body {
    padding: 15px;
  }

  .inv-title {
    text-align: center;
    margin-bottom: 10px;
  }

  .inv-title h2 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
  }

  .inv-subtitle {
    font-size: 11px;
    margin-top: 5px;
    color: #666;
  }

  .inv-section {
    margin-top: 15px;
  }

  .inv-section h4 {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    font-size: 12px;
  }

  .inv-row {
    font-size: 11px;
    margin-bottom: 6px;
  }

  /* Table */
  table.inv-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 11px;
  }

  .inv-table th,
  .inv-table td {
    border: 1px solid #ddd;
    padding: 10px;
  }

  .inv-table th {
    background: #f4f6f8;
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .inv-total {
    font-weight: bold;
    background: #f9fafb;
  }

  .inv-footer {
    margin-top: 10px;
    font-size: 11px;
    color: #555;
  }

  
  .inv-contact {
  position: relative;
  width: 30%;
  padding: 10px 10px 10px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;

  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}

.room-alert-border {
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
  
}

.room-alert {
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.booking-personal {
  position: relative;
  overflow: hidden;
}

/* right-top background image */
.booking-personal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;          /* adjust size */
  height: 200px;

  background-image: url('../images/right-top-corner.png');
  background-repeat: no-repeat;
  background-size: contain;

  opacity: 0.15;          /* image opacity only */
  pointer-events: none;
  z-index: 0;
}

/* keep content above the image */
.booking-personal .card-body {
  position: relative;
  z-index: 1;
}

.booking-system {
  position: relative;
  overflow: hidden;
}

/* right-top background image */
.booking-system::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;          /* adjust size */
  height: 200px;

  background-image: url('../images/right-top-corner.png');
  background-repeat: no-repeat;
  background-size: contain;

  opacity: 0.15;          /* image opacity only */
  pointer-events: none;
  z-index: 0;
}

/* keep content above the image */
.booking-system .card-body {
  position: relative;
  z-index: 1;
}

.inv-table {
  border-collapse: separate;
  border-spacing: 0;
}

.inv-table th,
.inv-table td {
  padding: 5px;
  vertical-align: middle;
}

.menu-card .fw-semibold 
{
  color:#fff;
  z-index: 9!important;
  text-shadow: 2px 3px 4px #000;
}

.info-row{
    display: flex;
    align-items: center;
    margin: 4px 0;
}

.info-label{
    min-width: 120px;   /* ← YOUR REQUIREMENT */
    font-weight: 600;
    position: relative;
    padding-right: 10px;
}

.info-label::after{
    content: ":";
    position: absolute;
    right: 0;
}

.info-value{
    margin-left: 10px;
    word-break: break-word;
}

 .food-card{
border-radius:16px;
overflow:hidden;
transition:.3s;
}

.food-card:hover{
transform:translateY(-4px);
}

.price-badge{
position:absolute;
top:10px;
left:10px;
background:rgba(0,0,0,0.7);
color:#fff;
padding:3px 8px;
border-radius:6px;
font-size:12px;
}

.bookmark{
position:absolute;
top:10px;
right:10px;
background:#fff;
padding:4px 7px;
border-radius:6px;
font-size:14px;
}

.rating-badge{
background:#198754;
color:#fff;
padding:2px 6px;
border-radius:6px;
font-size:12px;
font-weight:600;
}

.offer-text{
color:#2563eb;
font-size:13px;
font-weight:600;
}

.restaurant-name{
font-size:14px;
cursor:pointer;
}

.slider-title {
    color: #fff;
    text-shadow: 2px 3px 4px #1a78d7;
}

.invalid-item {
    background: #ffe6e6;
    border: 1px solid red !important;
    border-bottom: 1px solid red !important;
    margin-bottom: 5px;
    padding: 5px;
}