/* Stylesheet V 3.0.2 */
/* Search container */
/* 2026 - Color changed from #01de92 to #FF0D3B */
.pax8-search-container {
    border-left: 10px solid var(--pax8-search-frame-color, #FF0D3B);
    border-top: 5px solid var(--pax8-search-frame-color, #FF0D3B);
    border-right: 5px solid var(--pax8-search-frame-color, #FF0D3B);
    border-bottom: 5px solid var(--pax8-search-frame-color, #FF0D3B);
    box-shadow: 0 2px 4px rgba(var(--pax8-search-frame-rgb, 1, 222, 146), 0.1); /* Subtle shadow with your green */
    transition: box-shadow 0.2s ease;      /* Smooth interaction */
    font-family: var(--pax8-search-font-family, "Poppins", Arial, sans-serif);
}
 
.pax8-search-container:hover {
    box-shadow: 0 4px 8px rgba(var(--pax8-search-frame-rgb, 1, 222, 146), 0.15); /* Lift on hover */
}
 
/* Search Form Layout */
.search-form-div {
    display: flex; 
    align-items: center;
    gap: 0;                                /* No gap for seamless look */
    overflow: hidden;                      /* Clean corners when combined */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Input field depth */
}
 
/* Search Input - Enhanced */
.pax8-search-form input[type="text"] {
    flex-grow: 1; 
    padding: 10px 16px;                    /* More comfortable padding */
    border: none !important;
    border-radius: 0;
    background: #ffffff;
    font-size: 14px;
    color: var(--pax8-search-text-color, #333333) !important;
    font-family: var(--pax8-search-font-family, "Poppins", Arial, sans-serif);
    outline: none;
    transition: background-color 0.2s ease;
}

/* Also try targeting placeholder color */
.pax8-search-form input[type="text"]::placeholder {
    color: rgba(var(--pax8-search-text-color, 51, 51, 51), 0.7) !important;
    font-style: italic;
}
 
.pax8-search-form input[type="text"]:focus {
    background: #fafffe;                   /* Very subtle focus state */
}
 
/* Search Button - Enhanced */
.pax8-search-form button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--pax8-search-button-color, #FF0D3B) 0%, var(--pax8-search-button-dark, #01c082) 100%); /* Gradient */
    color: white;
    border: none;
    cursor: pointer;
    font-family: "PAX8B25", "Poppins", Arial, Helvetica, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.2s ease;
    min-width: 240px;                       /* Consistent button width */
    align-self: stretch;
    border-radius: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
 
.pax8-search-form button:hover {
    background: linear-gradient(135deg, var(--pax8-search-button-dark, #01c082) 0%, var(--pax8-search-button-darker, #01a572) 100%); /* Darker on hover */
    transform: translateX(-1px);          /* Subtle lift effect */
}
 
.pax8-search-form button:active {
    transform: translateY(0);              /* Press down effect */
}

.pax8-search-form button svg {
  width: 20px;
}
 
/* Focus Ring for Accessibility */
.pax8-search-form button:focus,
.pax8-search-form input[type="text"]:focus {
    box-shadow: 0 0 0 3px rgba(var(--pax8-search-frame-rgb, 1, 222, 146), 0.3);
}


/* Copilot Container */
.copilot-container {
  position: relative;
  /* width: 25%; - Removed for 2026*/
  width: 100%;
  margin-left: 0!important;
  z-index: 2; /* Ensure it is above the image */
}

.ticketStyle {
  display: flex;
  gap: 10px;
}

#copilot-area {
  width: 90%;
  flex-grow: 1;
}

/* Ticket Bottom */
.ticketBottom {
  display: flex!important;
  justify-content: space-between!important;
  align-items: center!important;
  background-color: var(--pax8-search-frame-color, #FF0D3B)!important;
  color: white!important;
  cursor: pointer!important;
  height: 50px!important; /* for 2026 can we add height 50px only on bottom */
  z-index: 3!important; /* Ensure it is above the copilot content */
}

.buttonPosition {
  /* position: absolute; - REMOVED FOR 2026 */
  /* top: 0; 
  left: 0; */
  width: 100%; 
  background-color: var(--pax8-search-button-color)!important;
  /* box-shadow: 3px px 0px rgba(0,0,0,0.2);  */
}

/* Copilot Content */
.copilot-content {
  background-color: black;
  color: black;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  border-left: 10px solid var(--pax8-search-frame-color, #FF0D3B);
  border-right: 10px solid var(--pax8-search-frame-color, #FF0D3B);
  box-shadow: 3px 8px 0px rgba(0,0,0,0.2); 
  z-index: 2; /* Ensure it is above the image but below the ticketBottom */
  opacity: 0; /* Start hidden */
  transform: translateY(-100%); /* Start above the ticketBottom */
  transition: opacity 1s ease, transform 1s ease; /* Add transition for opacity and transform */
  height: auto; /* Adjust height automatically */
  overflow: hidden; /* Hide overflow */
  visibility: hidden; /* Start hidden */
}

.ticket-left, .ticket-right {
  display: flex;
  align-items: center;
}

.ticket-left {
  width: 90%;
  text-align: left;
  margin-left: 10px;
}

.ticket-left h5 {
  margin-bottom: 0;
  align-self: center;
  font-family: "PAX8B25", "Poppins", Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em;
  color: var(--pax8-search-button-color);
  font-weight: 400;
}

.ticket-right {
  width: 10%;
  justify-content: flex-end;
  margin-right: 10px;
}

.ticket-left img, .ticket-right img {
  max-height: 30px; /* Adjust as needed */
  object-fit: contain; /* Maintain aspect ratio */
  margin-right: 10px;
}

.ticket-left img {
  height: 30px!important;
}

/* These are needed */
.copilot-content .ticket-left {
  margin-left: 0;
}

.copilot-content .ticket-right {
  margin-right: 0;
}

.copilot-content.visible {
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Drop down into view */
  visibility: visible; /* Make visible */
}

/* Replace iframecontainer with webchat if we revert back to direct line */
.copilot-container #webchat {
  height: 500px;
  overflow: hidden;
  width: 100%;
}

/* TEST FOR BUBBLES */

/* Force typing indicator styling */
#webchat div[class*="typing" i] {
    background-color: transparent !important;
    border-radius: 8px !important;
    border: none !important;
}

/* #webchat .webchat--css-dcwhq-1egyv3b {
  background-color: #000!important;
} */

.webchat__text-content li {
  color: #fff;
}


/* Avatar Style override 1. OVERRIDE BOTH */
/* #webchat .webchat__avatar,
#webchat .webchat__initialsAvatar {
    background-color: white !important;
} */
 
/* Then override ONLY the user avatar to be green */
#webchat .webchat__initialsAvatar--fromUser {
    background-color: var(--pax8-search-button-color, #FF0D3B) !important;
    color: #000;
}


.webchat__stacked-layout__avatar-gutter {
  justify-content: center!important;
}

 
/* Send button */
#webchat .webchat__icon-button, #webchat .webchat__icon-button__shade {
    border-color: var(--pax8-search-frame-color, #8de2c4) !important;
}
 
#webchat .webchat__icon-button:hover, #webchat .webchat__icon-button__shade {
    background-color: var(--pax8-search-frame-color, #8de2c4) !important;
    opacity: 0.8;
}

/* Alternative: Make SVG icon use a CSS variable too */
#webchat .webchat__icon-button svg,
#webchat .webchat__icon-button path {
    fill: var(--pax8-send-icon-color) !important;
}


@media screen and (max-width: 1200px) {
  .copilot-container {
    width: 70%;
    margin: auto!important;
  }
}

@media screen and (max-width: 992px) {
  .copilot-container {
    width: 100%!important;
  }
}

@media screen and (max-width: 767px) {
  .pax8-search-form input[type="text"] {
    padding: 9px 12px;
    font-size: 16px;                   /* Prevent zoom on iOS */
  }
  
  /* .pax8-search-form button {
    padding: 3px;
  } */

  #barcode-area {
    display: none;
  }
}

 @media screen and (max-width: 600px) {
  .pax8-search-form input[type="text"] {
    font-size: 12px;
  }

  .pax8-search-form button {
    min-width: 130px;
    font-size: 16px;
  }

  .pax8-search-form button svg {
    width: 16px;
  }
 }