/* Font definitions */
@font-face {
  font-family: 'Publico Banner Cond Web';
  src: url('https://sdassets.encoretravel.com/fonts/PublicoBannerCondensed-Black-Web.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

/* Base styles */
body {
  font-family: 'Publico Banner Condensed', sans-serif !important;
  background-image: url('https://sdassets.encoretravel.com/img/background/sdback.jpg') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-color: #f0f0f0 !important;
}

/* Force apply to headings */
h1, h2, h3, h4, h5, h6, .article-title, .section-name {
  font-family: 'Publico Banner Condensed', sans-serif !important;
}

.PublicoBannerCondensed-Black-Web {
  font-family: 'Publico Banner Cond Web';
  font-weight: 800;
  font-style: normal;
}

/* Remove background overrides */
.main-wrapper, .portal-wrapper, .zohodesk-portal-wrapper {
  background: none !important;
}

/* Hidden elements */
.TicketDetailRightContainer__widgetRight,
.ArticleCmd__socialShareLt,
.ArticleCmd__articleDetail,
.TicketListLeftContainer1__filterArea,
#field_subject,
.TicketFormLeftContainer__sectionName.Additional_Details,
label[for="cf_employee_location"],
#cf_employee_location {
  display: none;
}

/* Field label modifications */
#field_subject .Form__labelText, 
#field_description .Form__labelText {
  font-size: 0px;
}

#field_description .Form__labelText:before {
  font-size: 16px;
  content: 'Additional Information';
}

/* Template rename */
#templates .Form__label {
  font-size: 0;
}

#templates .Form__label::after {
  content: "Select company first*";
  font-size: 1rem;
  color: red;
}

/* Severity disclaimer */
#field_cf_select_a_common_issue .Form__labelText::after {
  font-size: 11px;
  color: red;
  content: '  For urgent matters and security incidents, contact the service desk at 1-855-ENCORE-9 or 514-909-2998.';
}

/* Urgent styling */
.urgent {
  color: white;
  font-size: 0.7em;
}

/* Announcements */
a[data-id="kb_section_What's_New"] {
  color: transparent;
  text-decoration: none;
  cursor: pointer;
}

a[data-id="kb_section_What's_New"]::before {
  content: "Service Desk Spotlight";
  font-size: 18px;
  font-weight: bold;
  color: #002f86;
  animation: flash-blue 10s infinite;
}

a[data-id="kb_section_What's_New"]:hover::before {
  text-decoration: underline;
}

/* Animations */
@keyframes flash-blue {
  0%, 50% { color: #002f86; }
  100% { color: transparent; }
}

@keyframes bounce-in {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

.Header__welcomeTitle {
  animation: bounce-in 2s ease forwards;
}

#new_ticket_btn {
  animation: gentleWiggle 1.5s ease-in-out infinite;
}

/* Media queries - Desktop styles (tablet and up) */
@media (min-width: 769px) {
  .Header__container ul li:first-child span:first-child {
    font-size: 0 !important;
    visibility: visible;
    margin: 0;
  }
  
  .Header__container ul li:first-child span:first-child:after {
    content: "Submit a Ticket";
    font-size: 14px;
    visibility: visible;
    background-color: transparent;
    white-space: nowrap;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Header text replacement */
  .Header__container ul li:first-child span:first-child {
    font-size: 0 !important;
    visibility: visible;
    margin: 0;
  }
  
  .Header__container ul li:first-child span:first-child:after {
    content: "Submit a Ticket";
    font-size: 14px;
    visibility: visible;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    color: #FFC2A5;
  }
  
  /* Header structure */
  .Header__menuWrapper {
    height: auto !important;
    background-color: #0D2025 !important;
    position: relative;
  }
  
  .Header__menuBox {
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  
  /* Logo and menu button */
  .Header__logoPart {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  
  .Header__navbtn {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .Header__menuClick {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Navigation menu */
  .Header__nav {
    background-color: #0D2025 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    order: 99 !important;
    padding-top: 50px !important;
    padding-bottom: 20px !important;
    margin: 0 !important;
  }
  
  /* Hide pipe separators */
  .Header__pipe, .Header__responsivefreez {
    display: none !important;
  }
  
  /* Menu items */
  .Header__nav > li:not(.Header__pipe),
  .Header__nav > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }
  
  /* Clean divider styling */
  .Header__nav *,
  .Header__nav *::before,
  .Header__nav *::after {
    border: none !important;
  }
  
  .Header__nav hr {
    display: none !important;
  }
  
  .Header__nav > li:not(.Header__pipe)::after,
  .Header__nav > a::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: rgba(255, 194, 165, 0.35);
    margin: 14px auto 0;
  }
  
  /* Submit ticket button */
  .Header__container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 28px 0 18px !important;
  }
  
  .Header__containerUl {
    width: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .Header__container ul li {
    display: inline-flex !important;
    justify-content: center !important;
    border: none !important;
  }
  
  .Header__container ul li:first-child span:first-child:after {
    display: block;
    font-weight: 700;
    color: #0D2025 !important;
    background-color: #FFC2A5 !important;
    padding: 12px 30px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  }
  
  .Header__container::after {
    display: none !important;
  }
  
  /* Profile section */
  .Header__nav > li:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 20px 0 10px !important;
  }
  
  .Header__nav > li:last-child * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .Header__nav > li:last-child::after {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Remove the pill/button styling on mobile for Submit a Ticket */
  #new_ticket_button {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;   /* match your other menu item padding */
    text-transform: none !important;
    letter-spacing: normal !important;
    display: inline !important;   /* behave like normal menu text */
  }

  /* Make the text match your other mobile menu links */
  #new_ticket_button .Header__tClr {
    color: #FFC2A5 !important;
    font-weight: bold !important; /* optional — remove if you want normal weight */
  }

  /* Optional: hide the ticket icon so it matches the plain items */
  #new_ticket_button .Header__dropicon {
    display: none !important;
  }
}
@media (max-width: 768px) {
  #new_ticket_btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  /* Remove the divider under the Submit a Ticket menu item only */
  .Header__nav > li:has(#new_ticket_btn)::after {
    display: none !important;
  }
}

/* --- What's New "Hover" Dropdown Styles --- */

/* 1. The Container (Holds button + content) */
.wn-hover-container {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 99999; /* Ensure it sits on top of everything */
    font-family: inherit; /* Use your site's default font */
}

/* 2. The Trigger Button (Vertical Version) */
.wn-hover-btn {
    background-color: #132a36; /* Brand Blue */
    color: white;
    padding: 20px 10px; /* Taller padding for vertical look */
    border-radius: 6px 0 0 6px; /* Round the corners facing the page */
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
    cursor: default;
    display: flex;
    align-items: center;
    gap: 12px; /* Space between icon and text */
    font-weight: 600;
    font-size: 14px;
    width: max-content;
    margin-left: auto;
    transition: background 0.2s;
    
    /* --- THE MAGIC SAUCE --- */
    writing-mode: vertical-rl; /* Runs text top-to-bottom vertically */
    text-orientation: mixed;   /* Rotates characters 90deg naturally */
}

/* Optional: Rotate the bell icon so it stays upright */
.wn-hover-btn span {
    transform: rotate(90deg);
}

/* Change color when you mouse over the button */
.wn-hover-container:hover .wn-hover-btn {
    background-color: #1d3d4d;
}

/* 3. The Dropdown Content Box (Hidden by default) */
.wn-hover-content {
    visibility: hidden; /* Invisible */
    opacity: 0;
    position: absolute;
    top: 0;
    right: 100%; /* Position it to the LEFT of the button */
    width: 300px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: 0;
    
    /* Connect the box to the button so the mouse doesn't "fall" in the gap */
    margin-right: 0px; 
    
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(10px); /* Start slightly shifted right */
}

/* 4. THE INTERACTION: Show content when container is hovered */
.wn-hover-container:hover .wn-hover-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-10px); /* Slide it into place */
}

/* 5. Internal Styling for the list */
.wn-h-header { 
    background: #132a36; 
    padding: 15px; 
    color: white; 
    border-radius: 5px 5px 0 0; 
}
.wn-h-header h3 { margin: 0; font-size: 15px; color: white; }

.wn-h-list { 
    padding: 15px; 
    background: #f9f9f9; 
    max-height: 300px; 
    overflow-y: auto; 
    border-radius: 0 0 5px 5px;
}

.wn-h-item { 
    margin-bottom: 12px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
}
.wn-h-item:last-child { border: none; margin: 0; padding: 0; }

.wn-h-date { 
    font-size: 11px; 
    color: #888; 
    font-weight: bold; 
    display: block; 
    margin-bottom: 4px; 
}
.wn-h-title { 
    font-size: 14px; 
    font-weight: bold; 
    color: #333; 
    display: block; 
    margin-bottom: 4px; 
}
.wn-h-desc { 
    font-size: 13px; 
    color: #555; 
    margin: 0; 
    line-height: 1.4; 
}

/*KNOWLEDGE BASE TRANSFORMATION*/
/* --- 1. Main Layout (Strict 3-Column) --- */
.KBSubCategoryContainer__boxView {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 30px; 
    padding: 20px 0; 
    border: none !important;
    box-shadow: none !important; 
    background: transparent !important;
}

/* Mobile Responsive Rule */
@media screen and (max-width: 900px) {
    .KBSubCategoryContainer__boxView {
        grid-template-columns: 1fr; 
    }
}

/* --- 2. Card Design (Transparent & Borderless) --- */
.ModuleItem__moduleItem {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    padding: 30px !important; /* Increased padding slightly for cleaner look */
    height: 100%; 
    box-sizing: border-box;
    transition: all 0.3s ease; 
    display: flex;
    flex-direction: column;
}

.ModuleItem__moduleItem:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* --- 3. Internal Layout --- */
.ModuleItem__moduleHeader {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* --- 4. Icon Styling --- */
.ModuleItem__kbSubcategoryImg {
    background-color: #fcf4f2; 
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px; 
    margin-right: 0 !important;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ModuleItem__kbSubcategoryImg svg {
    fill: #ea6c4d; 
    width: 32px;
    height: 32px;
}

/* --- 5. Text Styling --- */
.ModuleItem__moduleTitle a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2d3748 !important; 
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.ModuleItem__moduleDescription {
    font-size: 14px;
    color: #718096; 
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; 
}

.List__postdet {
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 15px;
    margin-top: auto; 
    width: 100%;
}

.List__postdet li {
    font-size: 12px;
    color: #a0aec0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/*Update 'My Account' Ticket Listings*/
/* 1. RESET & CONTAINER SPACING */
/* Tighter gap between cards */
.TicketListLeftContainer1__boxView {
    background-color: transparent !important;
    padding: 5px 0;
    gap: 8px; /* Reduced from 15px */
    display: flex;
    flex-direction: column;
}

/* 2. COMPACT CARD DESIGN (ULTIMATE FIX - REMOVES ALL INNER BORDERS) */

/* 2.1. Main Card Container (TICKET LIST ITEM) */
.TicketListItem__container {
    background-color: #ffffff !important;
    
    /* ABSOLUTE FIX 1: Force-remove all borders and outlines from the main card */
    border: 0px none !important; 
    outline: none !important;
    
    /* Soft Shadow (to replace the visual border) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    
    /* Compact Spacing */
    padding: 12px 16px !important; 
    border-radius: 6px;
    margin-bottom: 0px !important;
    transition: all 0.2s ease;
}

/* Hover State */
.TicketListItem__container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

/* 2.2. Inner Wrappers (The most likely culprit for the residual line) */
/* Target the immediate children of the container */
.TicketListItem__container > div {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
}

/* Target the specific element that contains the title/ID */
.TicketListItem__wrapper {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    /* Ensure the title container itself has no residual border */
    box-shadow: none !important;
}

/* 2.3. Safety Rule for the main list view */
.TicketListLeftContainer1__boxView {
    gap: 8px !important; 
    padding: 5px 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* 3. TYPOGRAPHY & TITLE */
.TicketListItem__box a.Link__link {
    font-size: 15px !important; /* Slightly smaller font */
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none;
    line-height: 1.2;          /* Tighter line height */
}

/* Ticket ID adjustments */
.TicketListItem__part.TicketListItem_ticketId {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background-color: #f1f5f9;
    padding: 1px 6px;          /* Smaller padding */
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

/* 4. COMPACT FOOTER */
/* Drastically reduced spacing between title and footer */
.TicketListItem__footerWrapper {
    margin-top: 8px;           /* Reduced from 15px */
    padding-top: 8px;          /* Reduced from 15px */
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Meta info text size */
.List__postdet .List__listItems {
    font-size: 12px;           /* Smaller font */
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;        /* Tighter spacing */
}

.List__postdet .Icon__icon {
    fill: #cbd5e1 !important;
    width: 12px;               /* Smaller icons */
    height: 12px;
    margin-right: 4px;
}

/* 5. SMALLER AVATAR */
.AvatarText__avatarText {
    width: 22px !important;    /* Reduced from 28px */
    height: 22px !important;
    font-size: 10px !important;
    border-radius: 50% !important;
    border: 1px solid #ffffff;
    box-shadow: 0 0 0 1px #e2e8f0;
    font-weight: 600;
    line-height: 22px !important; /* Center text vertically */
}

/* 6. COMPACT BADGES */
.Badge__implement.Badge__badge {
    padding: 2px 10px !important; /* Very slim padding */
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
    display: inline-block;
    line-height: 1.4;
}

/* Keep the colors the same as before */
.Badge__implement.Badge__badge.open {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.Badge__implement.Badge__badge.closed {
    background-color: #f8fafc !important;
    color: #64748b !important;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}

/* 7. REPLY COUNT *//* 1. TICKET DETAIL CONTAINER (The main white box) */
.TicketDetailLeftContainer__boxView {
    /* Apply a clean card background, matching the list cards */
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    
    /* Internal spacing for the entire container */
    padding: 20px 24px !important; 
    margin-bottom: 20px !important;
    
    /* Force remove residual borders/shadows if any */
    border: none !important;
    outline: none !important;
}

/* 2. TICKET TITLE AND TIME HEADER */
/* Make the title large and prominent */
.TicketDetailLeftContainer__tickeTitle {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 5px !important;
}

/* Style the date/time header (Reply/Comment bar) */
.ConversationForm__conversationForm {
    /* Add a clean separator line under the title/date block */
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
}

/* Mute the creation time text */
.ConversationForm__creatoTime span {
    font-size: 13px !important;
    color: #64748b !important;
}

/* Style the Reply/Comment links */
.ConversationForm__rcLabels {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2563eb !important; /* Blue for action links */
}
.ConversationForm__conversationTarea svg {
    fill: #2563eb !important;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* 3. INDIVIDUAL COMMENT/POST CARDS (The user posts) */
/* The main wrapper for a comment/post */
.TicketCommentContainer1__wrapper {
    /* Remove the default border and margin */
    border: none !important; 
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* The inner comment box - apply a subtle "nested" card style */
.CommentOne__container {
    background-color: #f8fafc !important; /* Very light grey background */
    border-radius: 6px;
    padding: 15px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid #f1f5f9 !important;
}

/* 4. COMMENT METADATA (Avatar, Name, Time) */
/* Wrapper for the avatar/name/time list */
.CommentOne__wrapper {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0; /* Separator inside the comment card */
}

/* Small Avatar styling for comments (matches compact list) */
.CommentOne__wrapper .AvatarText__avatarText {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    border-radius: 50% !important;
    border: 1px solid #ffffff;
    box-shadow: 0 0 0 1px #e2e8f0;
    font-weight: 600;
    line-height: 22px !important;
}

/* Style the meta list items (time, comment icon) */
.CommentOne__container .List__postdet .List__listItems {
    font-size: 12px;
    color: #94a3b8; /* Light grey text */
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

/* Style the commenter name to be darker */
.UserStatistics__container .CommentOne__creaColor {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* 5. COMMENT CONTENT (The actual text) */
.description.CommentOne__description {
    font-size: 14px !important;
    line-height: 1.6;
    color: #334155; /* Dark grey text for readability */
    padding-top: 5px;
}
.TicketListItem__repliseCnt {
    color: #2563eb !important;
    font-weight: 600;
    font-size: 11px;
}

/*Ticket Info Visual Modifications*/
/* 1. TICKET DETAIL CONTAINER (The main white box) */
.TicketDetailLeftContainer__boxView {
    /* Apply a clean card background, matching the list cards */
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    
    /* Internal spacing for the entire container */
    padding: 20px 24px !important; 
    margin-bottom: 20px !important;
    
    /* Force remove residual borders/shadows if any */
    border: none !important;
    outline: none !important;
}

/* 2. TICKET TITLE AND TIME HEADER */
/* Make the title large and prominent */
.TicketDetailLeftContainer__tickeTitle {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 5px !important;
}

/* Style the date/time header (Reply/Comment bar) */
.ConversationForm__conversationForm {
    /* Add a clean separator line under the title/date block */
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
}

/* Mute the creation time text */
.ConversationForm__creatoTime span {
    font-size: 13px !important;
    color: #64748b !important;
}

/* Style the Reply/Comment links */
.ConversationForm__rcLabels {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2563eb !important; /* Blue for action links */
}
.ConversationForm__conversationTarea svg {
    fill: #2563eb !important;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* 3. INDIVIDUAL COMMENT/POST CARDS (The user posts) */
/* The main wrapper for a comment/post */
.TicketCommentContainer1__wrapper {
    /* Remove the default border and margin */
    border: none !important; 
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* The inner comment box - apply a subtle "nested" card style */
.CommentOne__container {
    background-color: #f8fafc !important; /* Very light grey background */
    border-radius: 6px;
    padding: 15px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid #f1f5f9 !important;
}

/* 4. COMMENT METADATA (Avatar, Name, Time) */
/* Wrapper for the avatar/name/time list */
.CommentOne__wrapper {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0; /* Separator inside the comment card */
}

/* Small Avatar styling for comments (matches compact list) */
.CommentOne__wrapper .AvatarText__avatarText {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    border-radius: 50% !important;
    border: 1px solid #ffffff;
    box-shadow: 0 0 0 1px #e2e8f0;
    font-weight: 600;
    line-height: 22px !important;
}

/* Style the meta list items (time, comment icon) */
.CommentOne__container .List__postdet .List__listItems {
    font-size: 12px;
    color: #94a3b8; /* Light grey text */
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

/* Style the commenter name to be darker */
.UserStatistics__container .CommentOne__creaColor {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* 5. COMMENT CONTENT (The actual text) */
.description.CommentOne__description {
    font-size: 14px !important;
    line-height: 1.6;
    color: #334155; /* Dark grey text for readability */
    padding-top: 5px;
}