/* ===== HERO SECTION (background + form container) ===== */
  .hero {
    background-image: url('/images/MandaCare_BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100dvh;
    position: relative;
    display: flex;
    align-items: center;
    }

  
  .hero::after {
    /* Dark overlay over background for readability */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
  }
  .hero-content {
    position: relative;
    z-index: 1; /* Keep text above overlay */
  }

  /* ===== TRACK CONTAINER (form card) ===== */
  .track-container {
    position: relative; z-index: 1;
    width: 90%;
    max-width: 1000px; margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    overflow: hidden;
    min-height: 340px;
  }
  .track-header {
    background: linear-gradient(to right,#004277,#0074B7); /* Blue gradient */
    padding: 30px; color: #fff; text-align: center;
  }
  .track-header h1 { 
    font-size: 2rem; 
    font-weight: bold;    
    margin-bottom: 10px; 
  }
  .track-header p  { 
    font-size: 1rem; 
    margin: 0; 
  }

  .track-form { 
    padding: 30px; 
  }
  .track-form label { 
    font-weight: 600; /* Bold labels */
  }
  .btn-track {
    background: #004277; color: #fff; 
    font-weight: bold;
    transition: background-color .3s ease, box-shadow .3s ease;
  }
  .btn-track:hover { 
    background: #002e55; /* Darker hover */
    box-shadow: 0 4px 12px rgba(0,46,85,.6); 
  }

  /* ===== Mobile adjustments for track container ===== */
  @media (max-width: 767.98px) {
    .track-container {
      margin: 10px 15px;
      max-width: 100%;
      border-radius: 8px;
      min-height: auto;
    }
    .track-header {
      padding: 20px;
    }
    .track-header h1 {
      font-size: 1.5rem;
    }
    .track-form {
      padding: 20px;
    }
  }
    #ticketInfo .resolution {
      background: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: var(--bs-border-radius);
      padding: 10px 15px;
      margin-top: 15px;
    }
    
    #ticketInfo .resolution h6 {
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    #ticketInfo .history {
      margin-top: 10px;
      padding-top: 8px;
    }
    
    
    #ticketInfo .history ul li {
      padding: 3px 0;
      border-bottom: 1px dashed #ddd;
      font-size: 0.9rem;
    }

  /* ===== Ticket details panel (hidden until shown) ===== */
  .ticket-info {
    max-height: 0;        /* Start collapsed */
    opacity: 0;           /* Invisible */
    padding: 0 30px;      /* No vertical padding initially */
    overflow: hidden;
    border-top: 1px solid transparent;
    background: #f9fafb;
    color: #000;
    text-align: left;
    transition: all 0.5s ease; /* Smooth expand */
  }
  .ticket-info.show {
    max-height: 1000px;              /* Expand */
    opacity: 1;                     /* Visible */
    padding: 20px 30px 30px;        /* Add padding */
    border-top: 1px solid #e0e0e0;  /* Divider line */
  }