.vrtual-section {
    --vrtual-ink: #0f172a;
    --vrtual-muted: #4c4f52;
    --vrtual-accent: #111827;
    --vrtual-brand: #111827;
    --vrtual-line: #e5e7eb;
    --vrtual-card: #ffffff;
    --vrtual-bg: #f8fafc;
    --vrtual-ok: #16a34a;
    --vrtual-draft: #b2593c;
  }
  .vrtual-section .alert.livebus02{
    padding-left: 10px!important;
  }
  .vrtual-iconbtn i, .vrtual-iconbtn-01 i,
  .vrtual-menu-item i {
      font-size: 16px;
      width: 16px;
      height: 16px;
      display: inline-block;
      text-align: center;
      color: var(--vrtual-muted);
  }

  .evser-list01.evser-list01 .vis-left{
    gap: 1rem !important;
  }

  /* QR Modal Styles */
  .vrtual-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    /* ABOVE the fixed top bar (Bootstrap's .fixed-top is 1030). At 1000 the
       Previewing bar on the draft preview page drew over the top of this window
       and cut the title off. 1056 is above Bootstrap's own modals (1055) and
       below SweetAlert (1060). */
    z-index: 1056;
    padding: 20px;
    overflow-y: auto;
  }

  .vrtual-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    /* Never taller than the screen: on a short window the content scrolls
       inside the card rather than running under the top bar. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: vrtual-modal-appear 0.3s ease-out;
    position: relative;
  }
  .vrtual-vis-row {
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0px 0px;
    border: 1px solid var(--vrtual-line);
    border-radius: 12px;
    /*background: #f9fafb;*/
    margin-bottom: 0px;
    background: linear-gradient(180deg, #eeeaf7, #eeeaf7);
  }


  @keyframes vrtual-modal-appear {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .vrtual-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 0;
    position: relative;
  }

  .vrtual-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    /*color: var(--vrtual-ink);*/
    flex: 1;
  }

  .vrtual-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--vrtual-muted);
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
    transition: all 0.2s ease;
  }

  .vrtual-modal-body {
    padding: 16px 24px 20px;
  }

  #qrCodeContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
  }

  /* The code is built at 300px so the downloaded and shared image stays sharp;
     only its size ON SCREEN is reduced, so the window fits a short screen.

     *** zoom, NOT width/height. *** The code is an SVG with no viewBox, so
     giving it a smaller width and height does not shrink the drawing -- it
     shrinks the frame and CUTS the code off at the right and bottom, which
     is exactly what the first version of this did. zoom scales the drawing
     and its layout space together. A browser that ignores zoom simply shows
     the full 300px code, which is larger but never cropped. */
  #qrCodeContainer svg,
  #qrCodeContainer canvas,
  #qrCodeContainer img {
    zoom: 0.73;
  }

  .vrtual-qr-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }

  .vrtual-qr-actions .vrtual-btn {
    flex: 1;
    padding: 12px 16px;
    font-weight: 600;
    border: 1px solid var(--vrtual-line);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  /*.vrtual-qr-actions .vrtual-btn.vrtual-primary {
    background: var(--vrtual-brand);
    border-color: var(--vrtual-brand);
    color: #fff;
  }

  .vrtual-qr-actions .vrtual-btn.vrtual-primary:hover {
    background: #000;
    border-color: #000;
  }*/

  .vrtual-qr-actions .vrtual-btn {
    background: #fff;
    /*color: var(--vrtual-ink);*/
  }

  .vrtual-qr-actions .vrtual-btn:hover {
    background: #f8fafc;
    border-color: var(--vrtual-muted);
  }

  /* Scroll Section Styles */
  .vrtual-scroll-section {
    margin-top: 10px;
  }

  .vrtual-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
  }
  .vrtual-scroll-container.upcoming_session01{
    max-height: 500px;
  }

  /* Custom Scrollbar Styling */
  .vrtual-scroll-container::-webkit-scrollbar {
    width: 6px;
  }

  .vrtual-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .vrtual-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
  }

  .vrtual-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  /* Copy Alert Styles - Positioned near the copy button */
  .vrtual-copy-wrapper {
    position: relative;
    display: inline-block;
  }

  .vrtual-copy-alert {
    position: absolute;
    background: #10b981;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  /* Position for inline buttons */
  .vrtual-actions .vrtual-copy-alert {
position: absolute;
  bottom: -35px;                 /* show below */
  top: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #10b981;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  }

  /* Position for menu items */
  .vrtual-menu-pop .vrtual-copy-alert{
    top: 50%;
    left: -90px;
    transform: translateY(-50%) translateX(10px);
  }

  .vrtual-copy-alert.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  }

  .vrtual-menu-pop .vrtual-copy-alert.show {
    transform: translateY(-50%) translateX(0);
  }

  .vrtual-copy-alert::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
  }

  /* Arrow for inline buttons */
  .vrtual-actions .vrtual-copy-alert::after {
content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #10b981;
  }

  /* Arrow for menu items */
  .vrtual-menu-pop .vrtual-copy-alert::after {
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border-left-color: #10b981;
  }

  /* App shell */
  .vrtual-wrap {
    padding: 20px;
  }
  
  .vrtual-card {
    background: var(--vrtual-card);
    border: 1px solid var(--vrtual-line);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .04);
  }
  
  .vrtual-muted {
    color: var(--vrtual-muted);
    font-size: 14px;
  }

  /* Booking links */
  .vrtual-links-box {
    display: grid;
    gap: 10px;
  }

   /* Link row — mobile‑first clutter‑lite */
  .vrtual-link-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--vrtual-line);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    position: relative;
    overflow: visible !important;
    box-shadow: 0 4px 5px 0px rgb(0 0 0 / 7%);
    margin-bottom: 7px;
  }

  .premium-booking-hub {
    background: linear-gradient(135deg, #fffbeb 0%, #fdf4ff 55%, #eef2ff 100%);
    border-color: #f3e8ff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    padding: 16px 14px;
    min-height: 96px;
  }

  .booking-hub-gem {
    margin-right: 8px;
    color: #5742db;
  }
  
  .vrtual-link-meta {
    min-width: 0;
  }
  
  .vrtual-link-url {
    font-weight: 600;    
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vrtual-link-url a,.vrtual-session-title a{
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
  }
  .vrtual-link-url a:hover,.vrtual-session-title a:hover {
    text-decoration: underline;
     cursor: pointer;
  }
  
  .vrtual-link-title {
    font-size: 13px;
    color: var(--vrtual-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .vrtual-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /*border: 1px solid var(--vrtual-line);*/
    border:unset;
    border-radius: 999px;
    padding: 0px 8px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .vrtual-chip.vrtual-ok {
    color: var(--vrtual-muted);
    border-color: #e5e7eb;
    background: #f3f4f6;
    font-weight: 600;
    font-size: 11px;
  }
  
  .vrtual-chip.vrtual-draft {
    color: var(--vrtual-muted);
    border-color: #e5e7eb;
    background: #f3f4f6;
    font-size: 11px;
  }

  .premium-booking-hub .vrtual-link-title {
    margin-top: 6px;
    margin-bottom: 12px;
  }

  .vis-badge i {
    font-size: 18px;
    line-height: 1;
  }

  .vrtual-chip .fa-check {
    font-size: 12px;
    line-height: 1;
  }

  /* Desktop shows inline actions; mobile hides behind kebab */
  .vrtual-actions {
    /*display: flex;*/
    gap: 6px;
    font-size: 11px;
  }
  
  .vrtual-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px 6px 10px;
    border: 1px solid var(--vrtual-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .vrtual-iconbtn:hover {
    background: #f8fafc;
  }
  .vrtual-iconbtn-01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px 6px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #bbf7d0;
    cursor: pointer;
    transition: background-color 0.2s;
    color: green;
    
  }

  .vrtual-iconbtn-01:hover {
    background: #bbf7d0;
    color: green;
    
  }
  .vrtual-iconbtn-01 span{
    font-size: 12px;
    padding-left: 5px;
    color: #4c4f52;
    display: none;
  }
  
  /* KEBAB BUTTON - FIXED */
  .vrtual-kebab {
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 1px 2px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 18px;
    line-height: 1;
    min-width: 27px;
    min-height: 40px;
    color: var(--vrtual-muted);
  }

  /* Popover menu additions */
  .vrtual-menu-pop {
    position: absolute;
    right: 8px;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--vrtual-line);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(2, 6, 23, .18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
    min-width: 180px; /* Match session menu width */
  }

  .vrtual-menu-pop.vrtual-hide {
    display: none;
  }
  .vrtual-menu-pop a{
    text-decoration: none;
  }
  
  .vrtual-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 5px;
    border: 0;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 400;
    text-align: left;
    transition: background-color 0.2s;
    position: relative;
    width: 100%;
    text-decoration: none; /* Add this to match session menu */
    color: var(--vrtual-muted); /* Add this to match session menu */
  }
      
  .vrtual-menu-item:hover {
    background: #f3f4f6;
  }
    
   .vrtual-menu-item span {
    font-weight: 600;
  }
  
.vrtual-menu-item i {
  font-style: normal;
  width: 16px; /* Add this to match session menu */
  text-align: center; /* Add this to match session menu */
}

  /* Small button variant */
  .vrtual-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--vrtual-line);
    background: #fff;
    font-weight: 700;
    cursor: pointer;*/
    height: 35px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .vrtual-section .btn.btn-start {
	  background: #2563eb;
	  color: #fff;
	  border: none;
	  border-radius: 999px!important;
	  font-size: 16px!important;
	  font-weight: 500;
	  padding: 5px 9px;	 
	  align-items: center;
	  gap: 6px;
	  cursor: pointer;
	  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
	}
  
 /* .vrtual-btn.vrtual-primary {
    background: var(--vrtual-brand);
    border-color: var(--vrtual-brand);
    color: #fff;
  }*/

  /* Ensure scroll container doesn't clip the menu */
  .vrtual-scroll-container {
    position: relative;
    z-index: 1;
  }

  

  .vrtual-hide {
    display: none;
  }

  /* Additional fix to ensure kebab button is visible */
  button.vrtual-kebab {
    display: none;
  }
  
  
  /* Additional CSS for Upcoming Sessions */
.vrtual-session-card {
  border: 1px solid var(--vrtual-line);
  border-radius: 12px;
  padding: 16px 7px 16px 16px;
  background: #fff;
  margin-bottom: 12px;
}

.vrtual-session-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 12px;
}

/*.vrtual-session-meta {
  flex: 1;
  min-width: 0;
}*/

.vrtual-session-title {
  font-size: 16px;
  font-weight: 600;
  /*color: var(--vrtual-ink);*/
  margin-bottom: 8px;
  line-height: 1.4;
}

.vrtual-session-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vrtual-session-type {
 /* background: #eef2ff;
  color: #4338ca;*/
   background-color: #6A51FF;
  color: #FFFFFF!important;
  padding: 0px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vrtual-session-details .vrtual-chip {  
  padding: 0px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: unset;
}


.vrtual-session-meeting {
  font-size: 12px;
  color: var(--vrtual-muted);
}

.vrtual-session-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.vrtual-session-secondary-actions {
  display: flex;
  gap: 4px;
}

.vrtual-session-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--vrtual-line);
}

.vrtual-session-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--vrtual-muted);
}

.vrtual-session-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0px 8px;
  border-radius: 999px;
  background: transparent;
 /* color: #92400e;*/
  font-size: 11px;
  font-weight: 500;
  color: var(--vrtual-muted);
}

.vrtual-session-status-waiting {
  background: #dcfce7;
  color: #166534;
}

.vrtual-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
}

.vrtual-session-status-waiting .vrtual-status-dot {
  background: #22c55e;
}

/* Mobile Responsive */

/* Kebab menu for mobile sessions */
.vrtual-kebab-session {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1px 2px;
  border: 1px solid var(--vrtual-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 18px;
  line-height: 1;
  min-width: 27px;
  min-height: 40px;
}
.headerup_01{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.headerup-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.headerup-main .vis-left{
  gap: 1rem !important;
}
.headerup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 25px;
  padding-right: 20px;
}
.vrtual-section .btn.headerup-ghost {
  background: transparent;
  border-color: #e0e4ec;  
  border-radius: 999px!important;
  box-shadow: unset;
  padding: 7px 14px;

}
.sharemeeting-copy-wrapper {
  position: relative;
  display: inline-block;
}

.sharemeeting-copy-alert {
  position: absolute;
  bottom: -35px;            /* below icon */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #10b981;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
}

.sharemeeting-copy-alert.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sharemeeting-copy-alert::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #10b981;
}
/*.vrtual-iconbtn.startmeet{
      padding: 5px 9px;
}*/
.vrtual-iconbtn.startmeet i{
      color: green;
}
.vrt-swal-popup{
    border-radius:18px !important;
    padding:25px !important;
}

.swal-edit-btn{
    display:inline-block;
    background:#6366F1;
    color:white;
    padding:12px 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.swal-edit-btn:hover{
    background:#4F46E5;
}
#joinLetEventModal .modal-dialog,
#joinIntMeetingModal .modal-dialog {
    max-width: 420px;
}

#joinLetEventModal .upgr8.txt-cmm-fsize,
#joinIntMeetingModal .upgr8.txt-cmm-fsize {
    font-size: 14px !important;
}

#joinLetEventModal .vrt-preview-btn,
#joinIntMeetingModal .vrt-preview-btn {
    padding: 6px 31px !important;
    color: #000!important;
}
#joinLetEventModal .pres-2 i.top-3--icon,#joinIntMeetingModal .pres-2 i.top-3--icon{
  font-size: 73px !important;
}
.mobopen{
      display: none;
}
.mobopen1{
      display: none;
}
@media (max-width: 768px) {


  .vrtual-iconbtn-01{
        padding: 6px 10px 6px 10px;
        font-size: 11px;
  }
  .vrtual-iconbtn-01 i{      
        font-size: 11px;
        width: unset;
        height: unset;
  }
  .vrtual-iconbtn-01 span{
    font-size: 11px;
  }
  .vrtual-session-secondary-actions {
    display: none;

  }
   .mobopen1{
      display: block;
        position: absolute;
        text-align: right;
        right: 0;
        bottom: 0;
        margin-bottom: 8px;
        margin-right: 8px;
    }
    .homeurl01{
      padding-bottom: 0;
    }
  .mobopen{
      display: block;
        position: absolute;
        text-align: right;
        right: 0;
        bottom: 0;
        margin-bottom: 8px;
        margin-right: 8px;
    }

  .evser-list01.evser-list01 .vis-left{
    gap: .5rem !important;
  }
  
  .vrtual-kebab-session {
    display: inline-flex !important;
  }
  .vrtual-session-main {
    flex-direction: column;
    align-items: stretch;
  }
  
  .vrtual-session-actions {
    justify-content: space-between;
    width: 49%;
  }
  
  .vrtual-session-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .vrtual-session-secondary-actions {
    display: none;
  }
  
  .vrtual-kebab-session {
    display: inline-flex !important;
  }
}
/* RESPONSIVE RULES - FIXED */
  @media (max-width: 600px) {

  	button.vrtual-kebab {
      display: inline-flex !important;
    }

    .vrtual-actions {
      display: none !important; /* Force hide actions on mobile */
    }
    
    /* KEBAB BUTTON - FIXED FOR MOBILE */
    .vrtual-kebab {
      display: inline-flex !important; /* Force show kebab on mobile */
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .vrtual-link-row {
      grid-template-columns: 1fr auto;
      align-items: start;
      position: relative;
      overflow: visible;
    }
    
    .vrtual-link-url, .vrtual-link-title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    
    .vrtual-link-url {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    
    .vrtual-link-title {
      word-break: break-word;
    }

    .vrtual-scroll-container {
      max-height: 300px;
      overflow-y: auto;
      position: relative;
    }

    /* Mobile menu popover */
    .vrtual-menu-pop {
      position: absolute;
      right: 8px;
      top: calc(45% + 6px);
      z-index: 100;
      min-width: 180px;
    }

    .vrtual-modal-content {
      margin: 20px;
      max-width: none;
    }
    
    .vrtual-modal-close {
      top: 10px;
      right: 10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }

    .vrtual-qr-actions {
      flex-direction: column;
    }
    .vrtual-session-details{
      gap:3px;
    }
    .vrtual-session-type{
      padding: 0px 6px;
    }
  }
/* Additional CSS for Upcoming Sessions Mobile Layout */
.vrtual-session-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0px;
  /*border-top: 1px dashed var(--vrtual-line);*/
  flex-wrap: wrap;
}

.vrtual-session-info-separator {
  color: var(--vrtual-muted);
  font-size: 12px;
}

.vrtual-session-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--vrtual-muted);
}

.vrtual-session-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0px 8px;
  border-radius: 999px;
  background: transparent;
  /*color: #92400e;*/
  font-size: 11px;
  font-weight: 500;
  color: var(--vrtual-muted);
}

.vrtual-session-status-waiting {
  background: transparent;
  /*color: #166534;*/
  color: var(--vrtual-muted);
}

.vrtual-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
}

.vrtual-session-status-waiting .vrtual-status-dot {
  background: #22c55e;
}

/* Session-specific menu styles */
.vrtual-session-menu-pop {
  position: absolute;
  right: 8px;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--vrtual-line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  min-width: 180px;
}

.vrtual-session-menu-pop.vrtual-hide {
  display: none;
}

.vrtual-session-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 5px;
  border: 0;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  transition: background-color 0.2s;
  position: relative;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
  
.vrtual-session-menu-item:hover {
  background: #f3f4f6;
}

.vrtual-session-menu-item span {
  font-weight: 400;
}

.vrtual-session-menu-item i {
  font-style: normal;
  width: 16px;
  text-align: center;
}
.text-warning-01{
  color: #e99b57 !important;
  font-size: 20px!important;

}
.vrtual-iconbtn.stripe-warning-01{
  padding: 5px 10px 10px 10px;
  background-color: #fef2e7; 
  border-color: #fef2e7; 
}
/* ===== Rounded card ===== */
.stripe-popup{
  border-radius: 26px !important;
  padding: 20px 5px 35px !important;
  width: 450px !important;
  max-width: 95%;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  text-align: center;
}

/* icon spacing */
.swal2-icon{
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

/* title */
.stripe-title{
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}

/* description text */
.stripe-text{
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  max-width: 420px;
  margin: 0 auto 0px auto !important;
  padding-top: 5px;
}

/* buttons container spacing */
.swal2-actions{
  gap: 14px !important;
}

/* primary button (Integrate) */
.stripe-btn-primary{
  background: #fff !important;
  border: 2px solid #111827 !important;
  border-radius: 999px !important;
  padding: 10px 28px !important;
  font-weight: 600;
  font-size: 26px!important;
}
.stripe-popup  .swal2-icon.swal2-warning{
  background-color: #fef2e7; 
  border-color:#fef2e7;
}

/* cancel button */
.stripe-btn-secondary{
  background: #fff !important;
  border: 2px solid #d1d5db !important;
  border-radius: 999px !important;
  padding: 10px 26px !important;
}

/* close icon position */
.swal2-close{
  top: 0px !important;
  right: 0px !important;
  font-size: 40px !important;
  color: #000 !important;
}


/* === Status Banner === */
.vis-banner{
  /*border-radius:16px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:14px 18px;*/
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* icon box */
.vis-badge01{
 /* width:38px;
  height:38px;*/
  border-radius:12px;  
  align-items:center;
  justify-content:center;
  font-size:16px;
  background:#fef3c7;
  color:#d97706;
  border: 1px solid #d97706;
  padding: 5px 10px 7px 10px
}

.vis-badge{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}


.vis-badge.live{
  background:#dcfce7;
  color:#16a34a;
  border: 1px solid #16a34a;
}

.vis-badge.private{
  background:#fef3c7;
  color:#d97706;
  border: 1px solid #d97706;
}
.vis-badge03{
  width:45px;
  height:45px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.vis-badge03.live{
  background:#dcfce7;
  color:#16a34a;
  border: 1px solid #16a34a;
}

.vis-badge03.private{
  background:#fef3c7;
  color:#d97706;
  border: 1px solid #d97706;
}
.swal-rounded {
  border-radius: 1rem !important;
}

/* text */
.vis-title{
  font-weight:700;
  font-size:16px;
}

.vis-sub{
  font-size:12.5px;
  color:#000;
}

.vis-title-nowrap {
  white-space: nowrap;
}
.vis-badge.booking {
  background:#f3f4f6;
  color:#4c4f52;
  border: 1px solid #d1d5db;
}
.vis-badge.upcoming {
  background:#F3E8FF;
  color:#9333EA;
  border: 1px solid #9333EA;
}
.acclive{
  color: #16a34a;
}
.accpra{
  color: #d97706;
}
@media (max-width:768px){

  .vis-banner{
    flex-direction: row;
    align-items: flex-start !important;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .vis-left {
    flex: 1 1 100%;
    min-width: 0;
  }

  .btncl{
    width:100%;
    margin-left: auto;
    margin-top:6px;
    display:flex;
    justify-content:flex-end;
    text-align: right;
  }

  .btncl label{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    white-space: nowrap;
  }

  .protoggle-switch span{
    margin-right:8px;
  }

  .vis-badge i {
    font-size: 16px;
  }

  .vrtual-chip .fa-check {
    font-size: 11px;
  }
}


/* Mobile Responsive for Sessions */
@media (max-width: 768px) {
  .vrtual-session-secondary-actions {
    display: none !important;
  }
  
  .vrtual-kebab-session {
    display: inline-flex !important;
  }
  
  .vrtual-session-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .vrtual-session-actions {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    position: relative;
    text-align: right;
  }
  
  .vrtual-session-info-row {
    flex-direction: row;
    gap: 8px;
  }
  
  /* Ensure session menu appears below the kebab button */
  .vrtual-session-card {
    position: relative;
  }
  
  .vrtual-session-menu-pop {
    position: absolute;
    right: 8px;
    top: calc(100% + 6px);
    z-index: 100;
  }
  .vrtual-session-actions{
    display: unset;
  }
}
@media (max-width: 460px) {
  .vrtual-menu-pop {     
      top: calc(43% + 6px);      
  }
  .vrtual-session-actions{
    display: unset;
    width: 60%;
  }
  .vrtual-section .btn.btn-start{
    /*width: 73px;*/
    font-size: 14px!important;
  }
  .vrtual-link-url a, .vrtual-session-title a{
    font-size: 14px;
  }

  .vrtual-session-details .vrtual-chip{
    font-size: 11px!important;
    text-transform: uppercase;
  }
  /*.vrtual-section .headerup-actions{
    padding-top: 0px!important;
  }
  .vrtual-section .btn.headerup-ghost{
    font-size: 14px!important;
  }*/

}

@media (max-width: 460px) {
  .vrtual-session-actions{
    display: unset;
    width: 50%;
  }
}
/* More compact mobile header layout */
@media (max-width: 768px) {
  .headerup_01 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
  }
  
  .headerup-main {
    flex: 1;
    min-width: 0;
    padding-top: 0 !important;
  }
  .headerup-main .vis-left{
    gap: .5rem !important;
  }
  
  .headerup-actions {
    flex-shrink: 0;
    padding-top: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Stack heading and subtitle vertically */
  .headerup-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .headerup-main .vrtual-heading {
   /* font-size: 16px !important;*/
    margin-bottom: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vrtual-section .headerup-main .vis-text{
    min-width: 0px;
  }
  
  .vrtual-section .headerup-main .vrtual-muted {
    /*font-size: 12px !important;*/
    margin-bottom: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 7px;
  }
  
  /* Compact calendar button */
  .vrtual-section .btn.headerup-ghost {
    padding: 6px 12px !important;
    font-size: 14px !important;
    height: auto !important;
    white-space: nowrap;
  }
  
  /* Hide/show appropriate text */
 /* .hideOnPhone {
    display: none !important;
  }
  
  .hideOnComputer {
    display: block !important;
  }*/

  .vis-badge{
    width: 34px;
    height: 34px;
  }
  .vis-badge.private,.vis-badge.live{
    width: 47px;
    height: 34px;
  }
}

/* Very small screen adjustments */
@media (max-width: 400px) {
  .headerup_01 {
    gap: 6px;
  }
  
  .headerup-main .vrtual-heading {
    font-size: 20px !important;
  }
  
  .headerup-main .vrtual-muted {
    font-size: 11px !important;
  }
  
  .vrtual-section .btn.headerup-ghost {
    padding: 5px 10px !important;
    font-size: 13px !important;
  }
}
.serbtn01{
  /*background-color: #E9DBFF;
  color: #7A3AF5!important;*/
  background-color: #00A8A8;
  color: #FFFFFF!important;
  border: unset;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  /*vertical-align: middle;*/
}
.evbtn01{
  /*background-color: #eef2ff;
  color: #4338ca!important;*/
  background-color: #6A51FF;
  color: #FFFFFF!important;
  border: unset;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  vertical-align: middle;
}