:root {
  --heading-color: #111827;
  --border-color: #fff;
  --background-color: #fbfaf8;
  --card-background-color: rgb(255, 255, 255);
  --card-label-color: #6b7988;
  --card-text-color: #111827;
  --card-heading-color: #111827;
  --card-border-color: #fff;
  --card-border-radius: 12px;
  --card-border-size: 1px;
  --profile-background-color: #111827;
  --font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;

  --container-two-background-color: #fff;
  --container-one-background-color: #fff;
  --main-heading-border-color: #111827;
  --menu-items-color: #111827;
  --menu-items-select-color: #6b7988;
  --card-text-background-color: #fff;
  --card-font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
  --btn-background-color: #00abb8;
  --btn-text-color: #fff;
  --btn-text-hover-color: #ffffff;
  --btn-background-hover-color: #00abb8;
  --btn-border-color: #00abb8;
}




.login-container {
  height: 100vh;
}

.outer-container {
  background-color: var(--container-two-background-color);
  font-family: var(--font-family);
}

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

.header-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.xircls-header-container {
  display: none;
}

.menu-options-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-bar>button {
  padding: 10px;
  background-color: transparent;
  color: #000;
  font-size: 25px;
  border-radius: 0%;
  border: none;
  width: fit-content;
  height: fit-content;
}

.header-bar>button:hover {
  background-color: #FFF9F5;
  color: #000;
  box-shadow: 1px 1px 10px rgba(235, 234, 234, 0.411);
}

.sub-container {
  display: flex;
  background-color: var(--container-two-background-color);
  font-family: var(--font-family);
}

.sub-container {
  padding: 30px;
}
/* Main Container */
.container-1 {
  background-color: #fff; /* bg-white */
  border-radius: 10px;
  padding: 24px; /* p-6  (6 * 4px = 24px) */
  position: sticky; /* sticky */
  top: 96px; /* top-24 (24 * 4px = 96px) */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  width: 25%;
  font-family: var(--font-family);
}
.container-2 {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background-color: #fff;
  display: block;
  width: 100%;
  margin-left: 30px;
  text-align: center;
  padding: 30px;
  font-family: var(--font-family);
}

/* Profile Section */
#xircls-profile h4,
#xircls-profile p {
    color: var(--menu-items-color);
}
.user-avatar {
  text-align: center;
  margin: 20px 10px;
}

.user-avatar h4 {
  font-family: var(--font-family);
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 30px;
  /* line-height: 80px; */
  text-align: center;
  margin: 0 auto;
  background-color: var(--profile-background-color);
  color: var(--card-text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  /* color: #fff; */
}
/* Menu List */
#xircls-menu .menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /*Ensure items are stacked vertically*/
  gap: 16px; /*space-y-4 - (4*4px = 16px) */
  font-family: var(--font-family);
}

#xircls-menu .menu-list li {
  border-bottom: 1px solid #e5e7eb; /* border-b border-gray-100  */
  /* transition-colors not handled by basic CSS; would need JS */
  font-family: var(--font-family);
}

#xircls-logout {
  border: none;
}

  #xircls-menu .menu-list li:last-child{
      border-bottom: none;
      font-family: var(--font-family);
  }

.menu-list li a, .xircls-menu-item {
  display: flex;
  align-items: center;
  font-size: 14px; /* text-sm */
  padding: 8px 0; /* py-2 (2 * 4px = 8px) */
  color: #6b7280; /* text-muted-foreground */
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
  font-family: var(--font-family);

}

.menu-list li a:hover, .xircls-menu-item:hover{
      color: black;
      font-family: var(--font-family);
      font-size: 14px;
    ;
}
.xircls-menu-label{
  margin-top: 6px

}

.xircls-menu-item.active .xircls-menu-label {
  color: black;
  /* Using the predefined variable */
  font-family: var(--font-family);
font-weight: 600;
  /* Using the predefined variable */
}

.xircls-menu-item.active .xircls-menu-icon {
  font-weight: 500;
  color: black;
}

.xircls-menu-icon {
  width: 20px; /* w-5 (5 * 4px = 20px) */
  height: 20px; /* h-5 (5 * 4px = 20px) */
  margin-right: 12px; /* mr-2 (2 * 4px = 8px) */
}

#xircls-loyalty-card {
  /* Styles for the loyalty card content (if any) */
  margin-top: 32px; /* mt-8 (8 * 4px = 32px) */
  padding-top: 16px; /* pt-4 (4 * 4px = 16px) */
  border-top: 1px solid #e5e7eb; /* border-t border-gray-200 */
}

/*Logout Link Styling - using primary color from tailwind */
.logout-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 8px 0;
  color: #3b82f6; /* text-primary  - Tailwind's default primary blue */
  text-decoration: none;
  transition: opacity 0.2s;
}

.logout-link:hover {
  opacity: 0.8;
}
table, th, td {
  border-collapse: collapse !important;
  border: none !important;
  box-shadow: none !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.item-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scales image nicely */
  transition: transform 0.3s ease;
}

.item-card:hover .item-card-image {
  transform: scale(1.05);
  /* Slight zoom on hover */
}
.xircls-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  gap:5px;
  height: 60px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  justify-content: space-around;
  align-items: stretch;
  z-index: 1000;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
}

/* Mobile menu items */
.xircls-mobile-nav .xircls-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: var(--menu-items-color);
  font-size: 11px;
  text-decoration: none;
  position: relative; /* For positioning the badge */
}

.xircls-mobile-nav .xircls-menu-item .xircls-menu-icon svg {
  width: 22px ;
  height: 22px;
  margin-bottom: 3px;
 
}

.xircls-mobile-nav .xircls-menu-item .xircls-menu-label {
  font-size: 11px;
  font-weight: normal;
}

/* Active state */
.xircls-mobile-nav .xircls-menu-item.active {
  color: var(--menu-items-select-color);
}
.xircls-mobile-nav .xircls-menu-item.active .xircls-menu-label,
.xircls-mobile-nav .xircls-menu-item.active .xircls-menu-icon {
  color: var(--menu-items-select-color);

  font-weight: bold;
}

.xircls-mobile-nav {
  overflow-x: auto; /* Enable horizontal scroll */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Firefox: hide scrollbar */
}

/* Hide scrollbar on WebKit browsers (Chrome, Safari) */
.xircls-mobile-nav::-webkit-scrollbar {
  display: none;
}

.mobile-order-actions{
  display: flex;
  justify-content: space-between;
}
.xircls-orders-card:hover{
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .xircls-mobile-nav {
      display: flex !important;
   
  }
  .xircls-menu-icon {
      margin-right: 0px !important;
      width: 24px;
      height: 24px;
      color: var(--menu-items-color);
      margin-left: 0px !important;
      /* Using the predefined variable */
  }

  .image-container-wrapper {
      position: relative !important;
      width: 128px !important;
      height: 128px !important;
      margin: auto;
  }
}
@media (max-width: 768px) {
  #xircls-menu-container {
      display: none;
      /* Initially hide the menu */
      width: 100%;
      /* Take full width when shown */
      position: absolute;
      /* Position over the content */
      top: 135px;
      /* Adjust as needed */
      left: 0;
      background-color: var(--container-one-background-color);
      /* Ensure background */
      z-index: 10;
      /* Ensure it's above other content */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Optional shadow */

  }

  #xircls-menu-container.show {
      display: block;
      /* Make the menu visible */
  }

  .container-2 {
      width: 100%;
      /* Take full width on smaller screens */
      margin-left: 0;
      /* Remove margin */
      background-color: var(--container-two-background-color);
  }

  /* Mobile menu items */
  .xircls-menu-list {
      flex-direction: column;
      /* Stack menu items */
      align-items: stretch;
      /* Full width */
  }

  .xircls-menu-item {
      margin: 0;
      /* Remove margins */
      padding: 15px;
      /* Adjust padding */
      /* border-bottom: 1px solid #eee; Add separators */
      text-align: left;
      /* Left-align text */
      margin: 0;
  }

  .sub-container {
      flex-direction: column;
      padding: 16px !important;
  }

  .xircls-header-container {
      display: block !important;
  }

  .container-1 {
      display: none;
  }
  .xircls-dashboard-cards{
    flex-direction: column;
  }
  .xircls-order-header{
    flex-direction: column;
  }
  .xircls-order-filter{
    flex-direction: column;
  }
  .xircls-order-item-header{
    flex-direction: column;
  }
  .xircls-order-item-grid{
    grid-template-columns: 1fr !important;
  }
  .xircls-order-item-title{
    width: min-content;
    text-align: left;
    max-width: 50% !important; 
  }
  .xircls-profile-form{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
 .xircls-gender-option{
  gap: 14px !important;
 }
 .xircls-dashboard-header-subtitle{
  max-width: 100% !important;
 }

 .recent-order-buy-again{
  display: flex; 
 }
 .recent-item-details{
  flex-wrap: wrap !important;
 }
 .xircls-order-header-subtitle{
  max-width: 100% !important;
 }
 .order-modal-status{
  font-size: 10px !important;
 }
 .dwnld-svg-modal{
  height: 12px !important;
  width: 12px !important;
 }
 .modal-invoice-btn{
  font-size: 10px !important;
 }
 .order-modal-tablist{
  font-size: 10px !important;
 }
 .order-details-modal-content{
  width: 90vw !important;
  padding: 16px !important;
 }
 .modal-items-table{
  font-size: 10px !important;
 }
 .modal-order-summary{
  font-size: 10px !important;
 }
 .modal-order-summary-header{
  font-size: 12px !important;
 }
 .modal-order-total{
  font-size: 10px !important;
 }
 .shipping-cards-mobile{
  flex-direction: column !important;
 }
 .modal-shipping-data{
  font-size: 10px !important;
 }
 .modal-shipping-title{
  font-size: 12px !important;
 }
 .modal-tracking-title{
  font-size: 12px !important;
 }
 .modal-tracking-content{
  font-size: 10px !important;
 }
 .track-ord-svg{
  height: 12px !important;
  width: 12px !important;
 }
 .track-order-btn{
  font-size: 10px !important;
 }
 .modal-payment-title{
  font-size: 12px !important;
 }
 .modal-payment-content{
  font-size: 10px !important;
 }
 .modal-action-buttons{
  font-size: 10px !important;
  height: 32px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
 }
 .modal-action-svg{
  height: 12px !important;
  width: 12px !important;
 }
 #wishlistItemsContainer{
  grid-template-columns: 1fr !important;
 }
 #recentlyItemsContainer{
  grid-template-columns: 1fr !important;
 }
 .data-usage-cards{
  width: 90% !important;
 }
 input:checked + .slider:before {
  transform: translateX(14px) !important;
}
#tab-privacy{
  font-size: 8px !important;
  padding: 4px !important;
}
#tab-account{
  font-size: 8px !important;
  padding: 4px !important;
}
#tab-password{
  font-size: 8px !important;
  padding: 4px !important;
}
.xircls-security-tablist{
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.loyalty-main-cards{
  flex-direction: column !important;
}
}

/* Modal Overlay */
.customRedeemModal.xircls-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;
}

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

@keyframes slideIn {
  from { 
    opacity: 0; 
    transform: translate(-50%, -48%) scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Modal Container */
.xircls-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  width: 90%;
  max-width: 425px;
  padding: 24px;
  display: grid;
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: slideIn 0.2s ease-out;
}

/* Close Button */
.xircls-modal-close {
  position: absolute;
  right: 16px;
  top: 16px;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  color: #64748b;
}

.xircls-modal-close:hover {
  opacity: 1;
}

.xircls-modal-close svg {
  width: 16px;
  height: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */
.xircls-modal-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.xircls-modal-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #0f172a;
  display: flex;
  align-items: center;
  margin: 0;
}

.gift-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.xircls-modal-description {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* Content */
.xircls-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

/* Input Section */
.xircls-input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xircls-label {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1;
}

.xircls-input {
  display: flex;
  height: 40px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  padding: 8px 12px;
  font-size: 14px;
  color: #0f172a;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.xircls-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.xircls-input::placeholder {
  color: #9ca3af;
}

.xircls-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Balance Info */
.xircls-balance-info {
  font-size: 14px;
  color: #64748b;
}

.xircls-balance-amount {
  font-weight: 500;
  color: #0f172a;
}

/* Rewards Section */
.xircls-rewards-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xircls-rewards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.xircls-reward-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #0f172a;
  height: 40px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.xircls-reward-button:hover:not(:disabled) {
  background-color: #f8fafc;
  border-color: #94a3b8;
}

.xircls-reward-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.xircls-reward-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.xircls-reward-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-color: #f1f5f9;
  color: #475569;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  transition: colors 0.2s;
}

/* Footer */
.xircls-modal-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

@media (min-width: 640px) {
  .xircls-modal-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.xircls-cancel-btn,
.xircls-proceed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #d1d5db;
}

.xircls-cancel-btn {
  background-color: #ffffff;
  color: #374151;
}

.xircls-cancel-btn:hover {
  background-color: #f8fafc;
  color: #1f2937;
}

.xircls-proceed-btn {
  background-color: #3b82f6;
  color: #ffffff;
  border: 1px solid #3b82f6;
}

.xircls-proceed-btn:hover:not(:disabled) {
  background-color: #2563eb;
}

.xircls-proceed-btn:disabled {
  background-color: #94a3b8;
  border-color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.5;
}
.xircls-error-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background-color: #fef2f2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 12px;
}
@media (max-width: 768px) {
  .loyaltyTabButton{
    font-size: 10px !important;
  }
  .redeem-section-tab{
    grid-template-columns: 1fr !important;
  }
  .tier-options-section{
    flex-direction: column;
  }
  .earn-section-tab{
    grid-template-columns: 1fr !important;

  }
}

/* Add to your Auth/styles.css - z-index 2147483647 ensures modal stays above header-sidebar drawer */
#Axentra-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--axentra-overlay-bg, rgba(0, 0, 0, 0.5));
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#Axentra-modal-overlay.Axentra-modal-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#Axentra-modal-overlay .Axentra-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#Axentra-modal-overlay .Axentra-auth-container {
  position: relative; /* To be above the backdrop */
  z-index: 2147483647;
  pointer-events: auto;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

#Axentra-modal-overlay.Axentra-modal-active .Axentra-auth-container {
    transform: scale(1);
}