/* =================================== */
/*      GENERAL LAYOUT & STRUCTURE     */
/* =================================== */
.container {
  max-width: 100%;
  width: 100%;
  margin-bottom: 0px;
  margin-top: 30px;
  padding: 0 60px;
}

.for-padding {
  padding: 10px 60px 20px 60px !important;
}

.latest-updates {
  padding: 0 !important;
}

.tender-header {
  margin-bottom: 25px;
}

.back-btn {
  display: inline-block;
    padding: 5px 12px;
    background: #f7f8fd;
    border: .7px solid #343434;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    -webkit-text-stroke: 0.3px;
}

.breadcrumb-nav {
  font-size: 15px;
  color: #000;
  -webkit-text-stroke: 0.3px;
}

.breadcrumb-nav span {
  margin: 0 3px;
  color: #000;
}

.page-title {
  color: #4C39DD;
  font-size: 25px;
  font-weight: 700;
  margin: 0;
}

.days-left {
  background: #4c39dd;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 20px;
  border-radius: 20px;
}

/* =================================== */
/*      TENDER DESCRIPTION             */
/* =================================== */
.tender-description p {
  font-size: 15px;
  color: #444;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tender-description p.clamped {
  -webkit-line-clamp: 2;
  -webkit-text-stroke: 0.3;
  max-height: 3.4em;
}
.location-tag {
    display: inline-flex; /* Use inline-flex for alignment */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    background-color: #4C39DD; /* Themed blue color */
    color: #fff; /* White text */
    padding: 6px 16px; /* Vertical and horizontal padding */
    border-radius: 20px; /* This makes it a "pill" shape */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none; /* Remove underline from the link */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.location-tag:hover {
    background-color: #3a2db7; /* A darker blue on hover */
    color: #fff; /* Ensure text stays white */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

/* Ensure the icon inside the tag is also white */
.location-tag .fa-map-marker-alt {
    color: #fff;
}

.read-toggle {
  color: #4C39DD;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
  display: block;
  text-align: right;
  margin-top: -4px;
}

.read-toggle:hover {
  text-decoration: underline;
}

/* =================================== */
/*         NEW TIMELINE SECTION        */
/* =================================== */
.timeline-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.clock-icon {
  width: 24px;
  height: 24px;
  color: #4c39dd;
}

.timeline-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 20px;
}

.timeline-line {
  position: absolute;
  top: 10%;
  left: 0px;
  right: 0px;
  height: 3px;
  background: #e8e8e8;
  z-index: 0;
}

.timeline-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #34a853;
  width: 0%;
  /* Controlled by inline style */
  transition: width 0.5s ease-in-out;
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 1;
}

.timeline-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
}

.timeline-icon.completed {
  background-color: #34a853;
}

.timeline-icon.active {
  background-color: #4c39dd;
}

.timeline-icon.pending {
  background-color: #e8e8e8;
}

.timeline-icon svg {
  width: 18px;
  height: 18px;
  fill: white;
}

.timeline-icon.pending svg {
  fill: #bbb;
}

.timeline-content {
  text-align: center;
  max-width: 180px;
}

.timeline-title {
  font-size: 14px;
  font-weight: 600;
  color: #202124;
  margin-bottom: 4px;
}

.timeline-title.pending {
  color: #999;
}

.timeline-date {
  font-size: 12px;
  color: #5f6368;
  margin-bottom: 12px;
}

.timeline-date.pending {
  color: #bbb;
}

.timeline-info {
  background-color: #EFF5FE;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  color: #1967d2;
  text-align: center;
}

.timeline-info.green {
  background-color: #e6f4ea;
  color: #137333;
}

.completed-text .timeline-title {
  color: #34a754;
}

.active-text .timeline-title {
  color: #4c39dd;
}

/* =================================== */
/*         TABS & CONTENT SECTIONS     */
/* =================================== */
.tabs-wrapper {
  position: relative;
}

.tabs-nav {
  position: sticky;
  background: #fff;
  z-index: 100;
  display: flex;
  gap: 15px;
  margin: 8px 60px 30px !important;
  
  border-bottom: 1px solid #e0e0e0;
}

.tab-btn {
  padding: 6px 20px;
  border: none; /* Changed from #000 to a light grey */
  border-radius: 0;        /* Changed from #f5f5f7 to white for a cleaner look */
  font-size: 16px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: 0.2s;
  /* width: 125px; */
    -webkit-text-stroke: 0.3px;
}

.tab-btn:hover {
  background: #4C39DD;
  color: #fff;
  border-color: #4C39DD;
}

.tab-btn.active {
  background: #4C39DD;
  color: #fff;
  border: none;
}

.section-title {
  font-size: 25px;
  color: #4C39DD;
  font-weight: 700;
  margin: 0 0 25px;
}

/* =================================== */
/*      FINAL TENDER OVERVIEW TABLE    */
/* =================================== */
.overview{
  padding: 0px 60px 0px 60px !important;
}
.tender-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
}
.tender-heading-flex {
    /* This restores the vertical centering for desktop view */
    align-items: center;
}

.overview-item {
    padding: 10px 15px;
    background-color: #fff;
    display: grid;
    border-bottom: 1px solid #d9d9d9;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 20px;
}
.timeline-mobile {
    display: none;
}

/* Rows 1-2 get blue background (items 1,2) */
/* Rows 3-4 stay white (items 3,4) */
/* Rows 5-6 get blue background (items 5,6) */
/* Pattern: 1st and 2nd of every 4 items */
.overview-item:nth-child(4n+1),
.overview-item:nth-child(4n+2) {
    background-color: #eff5fe;
}

.overview-item h6 {
    margin: 0 ;
    font-size: 16px;
    font-weight: 600;
    color: #4A4A4A;
    -webkit-text-stroke: 0.1px;
}

.overview-item p {
    margin: 0 ;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    -webkit-text-stroke: 0.3px;
    /* word-break: break-word; */
}

.overview-item p a {
    font-weight: 400;
    color: #4C39DD;
    text-decoration: none;
}

.overview-item p a:hover {
    text-decoration: underline;
}

/* =================================== */
/*      RESPONSIVENESS (for Table)     */
/* =================================== */

@media (max-width: 1024px) {
    .tender-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-item {
        grid-template-columns: 180px 1fr;
    }
    
    .overview-item:nth-child(odd) {
        border-right: none;
    }
    
    .overview-item:not(:last-child) {
        border-bottom: 1px solid #e9ecef;
    }

    /* Single column - simple odd/even alternation */
    .overview-item:nth-child(4n+1),
    .overview-item:nth-child(4n+2) {
        background-color: #fff;
    }
    
    .overview-item:nth-child(odd) {
        background-color: #eff5fe;
    }
    
    .overview-item:nth-child(even) {
        background-color: #fff;
    }
}

@media (max-width: 767px) {
    .overview-item {
        grid-template-columns: 130px 1fr; /* Adjusted grid for better balance on small screens */
        padding: 10px; /* INCREASED padding for more vertical space */
        align-items: flex-start; /* Aligns items to the top for multi-line content */
    }
    
    .overview-item h6 {
        font-size: 14px;
        line-height: 1.5; /* ADDED for better alignment and spacing */
        padding-top: 2px; /* Small tweak for vertical alignment with the text */
    }
    
    .overview-item p {
        font-size: 14px;
        line-height: 1.6; /* ADDED to increase spacing for readability, especially for addresses */
        word-break: break-word; /* Ensures long text like URLs or IDs wraps correctly */
        -webkit-text-stroke: 0px !important;

    }
    .latest-updates-controls.desktop-only {
    display: none; /* Hide desktop controls on mobile */
  }
  
}
/* =================================== */
/*         TENDER DOCUMENTS            */
/* =================================== */
.tender-documents {
  background-color: #EFF5FE;
  margin-top: 48px !important;
  padding: 40px 60px 40px 60px !important;
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  row-gap: 20px;
  column-gap: 45px;
}

.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 12px 14px;
  border: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.doc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  border-radius: 10px;
}

.doc-icon.pdf {
  background: linear-gradient(180deg, #ff6b6b, #e94b4b);
}

.doc-icon.doc {
  background: linear-gradient(180deg, #6dd7b9, #3cbf9b);
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  color: #2e2e2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.doc-size {
  font-size: 12px;
  color: #8d8d8d;
  margin-top: 4px;
}

.doc-download {
  background: transparent;
  border: none;
  font-size: 16px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: #6b46f6;
  transition: background .15s, transform .08s;
}

.doc-download:hover {
  background: rgba(111, 66, 255, 0.06);
  transform: translateY(-2px);
}

.doc-download-locked {
  background: transparent;
  border: none;
  font-size: 15px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: #d1d5db;
  transition: background .15s, color .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.doc-download-locked:hover {
  background: rgba(239, 68, 68, 0.07);
  color: #ef4444;
}


/* =================================== */
/*         DISCLAIMER & APPLY          */
/* =================================== */
.disclaimer-section{
  margin-top: 40px !important;
  padding: 0px 60px !important;
}
.disclaimer-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.disclaimer-list li {
  margin-bottom: 10px;
  color: #444;
  line-height: 1.5;
  font-size: 16px;
}

.apply-btn-wrap {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 48px;
  padding: 0px 60px !important;
}
/* =================================== */
/*         PULSING GLOW ANIMATION      */
/* =================================== */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 57, 221, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(76, 57, 221, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 57, 221, 0);
  }
}

/* Apply the animation to the active timeline icon */
.timeline-icon.active {
  animation: pulse-glow 2s infinite;
}

/* Create a class we can apply to the "Days Left" button */
.pulsing-alert {
  animation: pulse-glow 2s infinite;
}
.follow-action-btn {
    /* Sizing and Alignment */
    padding: 9px 22px; /* ADJUSTED: Vertical padding is 9px to account for the 1px border */
    font-size: 16px;      /* Standardized with apply-btn */
    font-weight: 600;     /* Standardized with apply-btn */
    
    /* Styling */
    background: #ffffff;
    color: #4c39dd;
    border: 1px solid #4c39dd;
    border-radius: 6px;       /* Standardized with apply-btn */
    
    /* Behavior & Layout */
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: inline-flex; /* Ensures proper vertical alignment of icon and text */
    align-items: center;
    gap: 8px;           /* Standardized with apply-btn */
    text-decoration: none;
    line-height: 1.5;     /* Ensures consistent line height */
}

.apply-btn,
.tender-action-btn {
  color: #fff;
  -webkit-text-stroke: 0.3px;
  /* font-weight: 600; */
  font-size: 16px;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 6px 20px rgba(159, 112, 253, 0.12);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.apply-btn {
  background: #4C39DD;
}

.apply-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(159, 112, 253, 0.15);
  color: #fff;
}

.apply-btn:disabled {
  background: #a5a5a5;
  cursor: not-allowed;
}

.apply-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.tender-action-btn {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
}

.tender-action-btn:hover {
  background-color: #e0e0e0;
  color: #333;
}

.tender-action-btn .fa-solid.fa-heart {
  color: #e53e3e;
}

/* =================================== */
/*         SIMILAR TENDERS             */
/* =================================== */
#similar-tenders {
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 60px;
  margin-top: 30px;
  /* Add position relative for control positioning */
  position: relative; 
}
/* --- NEW RULE --- */
/* Add this right after .latest-updates-controls */
.latest-updates-controls.desktop-only {
    margin-left: auto; /* This pushes the controls to the right */
}
.latest-updates-controls.mobile-only {
    display: none; /* Hide mobile controls on desktop */
    justify-content: center; /* Center them when they appear */
    margin-top: 20px;
}

.similar-updates-header {
  display: flex; /* Use flexbox for alignment */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
    gap: 20px;
}

.similar-updates-header h6 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  color: #333;
}

.similar-updates-header h6 span {
    color: #4C39DD; /* Theming the span */
}

/* --- Carousel Wrapper and Container --- */
.latest-updates-wrapper {
  overflow: hidden; 
}

.latest-updates-container {
  display: flex; /* Aligns cards in a row */
  transition: transform 0.5s ease-in-out; /* The sliding animation */
  gap: 30px; /* Space between the cards */
}

.update-card {
  flex: 0 0 calc(33.333% - 20px); /* Each card takes up 1/3 of the space, minus gap adjustment */
  box-sizing: border-box;
}

/* --- Card Styling (largely the same) --- */
.similar-box {
    background: #EFF5FE;
    border-radius: 0px;
    padding: 25px 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: 100%;
    transition: transform 0.3s ease;
}

.similar-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.similar-box strong {
  font-size: 18px;
  font-weight: 600;
  color: #222 !important;
  display: block;
  -webkit-text-stroke: 0.3px;
}

.similar-box a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  font-size: 12px !important;
}

.similar-box p {
  font-size: 14px;
  color: #555;
  margin-top: 16px !important;
  line-height: 1.5;
}
.teneder-header-breadcrumb{
  margin-bottom: 24px !important;
}

.similar-box .location {
  margin-top: 12px;
  font-size: 14px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 6px;
}
.for-flex-column {
    display: flex;
    flex-direction: column;
    -webkit-text-stroke: 0.3px;
}

/* --- NEW: Carousel Controls (Arrows and Dots) --- */
.latest-updates-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.latest-updates-btn {
  background-color: #4C39DD; /* Themed background color */
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}

.latest-updates-btn:hover {
  background-color: #3a2db7; /* Darker shade on hover */
  transform: scale(1.1);
}

.latest-updates-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d1d1d1;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #4C39DD; /* Themed active dot */
}


/* =================================== */
/*         RESPONSIVENESS              */
/* =================================== */

/* Tablet */
@media (max-width: 1024px) {
  .container {
    padding: 0 30px;
  }

  .for-padding {
    padding: 15px 30px !important;
  }

  .page-title {
    font-size: 22px;
  }

  .breadcrumb-nav {
    font-size: 16px;
  }

  .tabs-nav {
    top: 70px;
  }

  

  /* Reset span for smaller screens */
  .docs-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  #similar-tenders {
    margin: 30px;
  }

  .timeline {
    flex-wrap: wrap;
  }

  .timeline-item {
    min-width: 150px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .container {
    padding: 0 20px;
    margin-top: 20px;
  }

  .for-padding {
    padding: 20px !important;
  }

  .tender-header {
    margin-bottom: 20px;
  }

  .tender-heading-flex {
    flex-direction: column;      /* Stacks the items vertically */
    align-items: flex-start;   /* THIS IS THE KEY: Aligns the stacked items to the left */
    gap: 16px;                   /* Adds a nice space between the title and the button */
    text-align: left;            /* Ensures text within the elements is also left-aligned */
  }

  .page-title {
    font-size: 20px;
  }

  .back-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .breadcrumb-nav {
    font-size: 12px;
    text-align: center;
  }
.tender-documents {
  margin-top: 25px !important;
}
.disclaimer-section {
    margin-top: 25px !important;
}
  .days-left {
    font-size: 13px;
    padding: 6px 14px;
  }

 .tabs-nav {
    position: static; /* 1. Removes the sticky behavior */
    top: auto;        /* Unsets the property needed for sticky */
    margin: 20px 0 !important; /* 2. Removes horizontal margins */
    padding: 0 20px;  /* Adds padding so the first tab doesn't touch the screen edge */
    
    /* 3. Makes the container scrollable */
    overflow-x: auto;
    scrollbar-width: none; /* Hides scrollbar for Firefox */
}

.tabs-nav::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome, Safari */
}

/* Add this rule to prevent tab buttons from shrinking */
.tabs-nav .tab-btn {
    flex-shrink: 0;
}

  #overview {
    padding-top: 0 !important;
  }



  .section-title {
    font-size: 20px;
    text-align: left;
  }

  #similar-tenders {
    margin: 20px;
  }

 .apply-btn-wrap {
    display: flex;       /* Use flexbox for the layout */
    gap: 12px;           /* The space between the buttons */
    align-items: stretch;  /* This ensures both buttons have the same height */
    padding: 0px 20px !important;
    margin-bottom: 40px;
  }

  /*
   * Base styles for BOTH buttons
  */
  .apply-btn,
  .follow-action-btn {
    width: auto;             /* Let flexbox determine the width */
    flex-shrink: 0;        /* Prevent buttons from shrinking smaller than their text */
    justify-content: center;
    white-space: nowrap;   /* CRITICAL: Prevents text from wrapping */
    padding: 10px 16px;    /* Adjust padding for a better mobile feel */
    flex-grow: 1;
  }
   .latest-updates-container {
    /* This rule makes the cards slide flush against each other without any space */
    gap: 0; 
  }
  

.similar-updates-header h6 {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

  .update-card {
    /* This is the key rule: it forces each card to take up 100% of the container's width */
    flex: 0 0 100%; 
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
  }
  
  .latest-updates-controls.mobile-only {
    display: flex; /* Make sure the mobile-specific arrows are visible */
  }

 


 /* =================================== */
/*         FINAL MOBILE TIMELINE       */
/* =================================== */

/* 1. HIDE the original desktop timeline on mobile */
.timeline-container {
    display: none !important;
}

/* 2. SHOW our new mobile-specific timeline block */
.timeline-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* 3. STYLE the new mobile timeline cards */
.timeline-item-mobile {
    display: flex;
    align-items: center; /* THIS IS KEY: Vertically centers the icon and the text block */
    gap: 16px;
    padding: 8px;
    border: 1px solid #e8eaf1;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

/* Special background for the "completed" Issue card */
.timeline-item-mobile:first-of-type {
    background-color: #f0f9f4;
    border-color: #b7e1c9;
}

/* Style the mobile icons */
.timeline-item-mobile .timeline-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* --- THIS IS THE MOST IMPORTANT PART --- */
/* Style the content area to prevent wrapping */
.timeline-content-mobile {
    flex-grow: 1; /* Allows the content to fill the remaining space */
    overflow: hidden; /* Prevents oversized content from breaking the layout */
}

/* A new wrapper for the top row to align items */
.timeline-top-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Force all text elements to stay on a single line */
.timeline-content-mobile .timeline-title,
.timeline-content-mobile .timeline-date,
.timeline-content-mobile .timeline-info {
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides any text that overflows */
    text-overflow: ellipsis; /* Adds "..." to overflowing text */
}

.timeline-content-mobile .timeline-date {
    font-size: 13px;
    color: #666;
}
}