:root {
        --color-main: #FF6F3C ;
        --color-black: #1F222B ;
        --color-secondary-black: #2A2E38 ;
        --color-secondary: #00CFFF;
        --color-blue-shadow: #0A2E45;
        --color-white: #EAEAEA;
        --color-grey: #B0B3BA;
        --color-orange-shadow: #FF914D;
    }

::selection {
  background-color: #FF6F3C !important;
}

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

.text-muted{
    color: var(--color-grey) !important;
}

.form-label{
    color: var(--color-white) !important;
}

.btn-primary{
background: linear-gradient(135deg, var(--color-orange-shadow), var(--color-main));
border: none; /* optional, removes solid border */
color: #fff; /* keeps text visible */
transition: 0.3s ease;
}

.btn-primary:hover {
background: linear-gradient(135deg, var(--color-main), var(--color-main));
transform: scale(1.01); /* nice hover lift */
}

.btn-light {
    color: var(--color-black);
}

.btn-light:focus {
    color: var(--color-black);
}

.form-select {
        border: 1px solid var(--color-secondary-black);
        background-color: var(--color-secondary-black);
        color: var(--color-grey);
}

.switch-pass{
    color: var(--color-white);
    background-color: var(--color-secondary-black);
    border-color: var(--color-secondary-black);
}

.switch-pass:focus {
    color: var(--color-white);
    background-color: var(--color-secondary-black);
    border-color: var(--color-secondary-black);
}

.switch-pass:hover {
    color: var(--color-white);
    background-color: var(--color-secondary-black);
    border-color: var(--color-secondary-black);
}

.alert-danger {
    color: var(--color-white);
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.main-content{
    margin-left:0;
}

.footer {
    left:0;
    background-color: var(--color-black);
    color: var(--color-grey);
}

.page-content{
    padding: 20px;
    padding-bottom: 70px;
}

.nav-pills .nav-link.active{
background: linear-gradient(135deg, var(--color-orange-shadow), var(--color-main));
color: #fff; /* keeps text visible */
}

.chat-conversation-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-conversation {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: thin;          /* Firefox */
    scrollbar-color: #ccc transparent; /* Firefox */
}

/* Webkit browsers (Chrome, Edge, Safari) */
.chat-conversation::-webkit-scrollbar {
    width: 6px;                     /* thin scrollbar */
}

.chat-conversation::-webkit-scrollbar-track {
    background: transparent;        /* or light grey if you want */
}

.chat-conversation::-webkit-scrollbar-thumb {
    background-color: #ccc;         /* grey color */
    border-radius: 3px;             /* rounded corners */
}

.tab-content {
    scrollbar-width: thin;               /* Firefox */
    scrollbar-color: rgba(150, 150, 150, 0.6) transparent;
}

/* Webkit (Chrome, Edge, Safari) */
.tab-content::-webkit-scrollbar {
    width: 8px;                          /* slightly wider for usability */
}

.tab-content::-webkit-scrollbar-track {
    background: transparent;             /* clean background */
}

.tab-content::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.6); /* semi-transparent thumb */
    border-radius: 10px;                 /* smooth rounded edges */
    transition: background 0.3s ease;    /* smooth hover effect */
}

.tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.8); /* darker on hover */
}

.typing-indicator {
  display: flex;
  gap: 5px;
  align-items: center;
  display:none;

}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--color-grey);
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.3s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

.nav-pills{
    margin-bottom: 20px;
}

.card.fade-in {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.card.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.main-content, .black-background{
    background-color: var(--color-black);
}

.card{
    background-color: var(--color-secondary-black);
}

.chat-conversation .right .conversation-list .ctext-wrap{
    background-color: var(--color-main);
    box-shadow: 0 0 10px rgb(255, 145, 77, 0.6);
    color: var(--color-white);
}

.chat-conversation .conversation-list .ctext-wrap{
    background-color: var(--color-black);
    box-shadow: 0 0 10px rgb(0, 207, 255, 0.6);
    color: var(--color-white);
}

.chat-conversation .conversation-list .ctext-wrap .conversation-name{
        color: var(--color-secondary);
}

.chat-conversation .right .conversation-list .ctext-wrap .conversation-name{
    font-weight: 600;
    color: var(--color-white);
}

.ctext-wrap p {
    white-space: pre-wrap; /* preserves \n as line breaks */
}

.chat-time{
    white-space: normal !important;
}

#top-banner{
    background: linear-gradient(90deg, var(--color-main), var(--color-main));
    color: white;
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
    font-size: 14px;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.user-chat-nav .dropdown .nav-btn{
    background-color: var(--color-black);
}

.dropdown-menu{
    background-color: var(--color-black);
    color: var(--color-white);
}

.dropdown-item{
    color: var(--color-white);
}

.dropdown-item:hover {
    color: var(--color-white);
    background-color: var(--color-secondary-black);
}

.chat-input{
    background-color: var(--color-black) !important;
    color: var(--color-white);
    padding-right: 50px;
}

.chat-input::placeholder {
    color: var(--color-grey); 
}

a{
    color: var(--color-main);
}

a:hover{
    color: var(--color-main);
}

#mapSmall {
    width: 100%;
    height: 300px; /* 40% of viewport height */
    border-radius: 8px;
}

#locationPopover{
     display:none;
    position:absolute;
    padding:10px;
    background-color:var(--color-black);
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
    width:300px;
    z-index:1000;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    transform: scale(0.9);
}

#locationPopover.show {
    opacity: 1;
    transform: scale(1);
}

.logo-scroll-container {
  overflow: hidden;
  width: 100%;
}

.logo-scroll {
  display: flex;
  gap: 20px;
  animation: scroll-logos 20s linear infinite;
}

.logo-scroll img {
  flex-shrink: 0;
}

.restaurant-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.restaurant-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.address-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.address-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.modal-content{
    background-color:var(--color-black);
}

.form-control{
    background-color: var(--color-secondary-black);
    color: var(--color-white);
}

.form-control::placeholder{
    color: var(--color-grey);
}

.bg-primary.bg-soft{
    background-color: var(--color-secondary-black) !important;
}

.btn-secondary{
    background-color: var(--color-secondary-black);
    border-color: var(--color-secondary-black);
    color: var(--color-grey) !important;
}

.btn-secondary:hover{
    background-color: var(--color-secondary-black);
    border-color: var(--color-secondary-black);
    color: var(--color-white) !important;
}

.editedp{
    color:var(--color-grey);
}

 /* Smooth fade in */
  .fade-in {
    opacity: 0;
    animation: fadeIn 0.6s forwards;
  }
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

  /* Smooth fade out */
  .fade-out {
    opacity: 0;
    
  }

  .stars span {
    cursor: pointer;
    font-size: 22px;
    color: var(--color-secondary);
    transition: opacity 0.8s ease-out;
  }

/* Completely remove spinner arrows on all browsers */
#otpInput::-webkit-inner-spin-button, 
#otpInput::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

#otpInput {
  -moz-appearance: textfield !important; /* Firefox */
  appearance: textfield !important;      /* Standard */
}

@keyframes colorPulse {
  0% {
    color: var(--color-main);
    transform: scale(1);
  }
  50% {
    color: var(--color-secondary);
    transform: scale(1.2); /* enlarge */
  }
  100% {
    color: var(--color-main);
    transform: scale(1);
  }
}

.color-pulse {
    opacity: 1; /* always fully opaque */
    animation: colorPulse 1s infinite; /* adjust duration if needed */
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-65%);
  }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}


@media (min-width: 920px) {
    .auth-full-bg {
        min-height: 600px !important;
    }
}

@media (min-width: 992px) {
    .chat-leftsidebar {
        width: 40%;
    }
}

@media (min-width: 1200px) {
    .auth-full-bg {
        height: 100% !important;
    }
}

@media (max-width: 592px) {
.form-control{
font-size: 16px;
}

}