.mtp-section {
       margin-top: 80px;
       padding: 20px;
   }

   .mtp-container {
       max-width: 800px;
       padding: 0 10px;

   }


   .mtp-filter-bar select {
       width: 200px;
       border: none;
       border-radius: 4px;
       padding: 5px 14px;
       letter-spacing: normal;
       box-shadow: 0 2px 4px #00000012, 0 0 4px #00000029;
       font-weight: 500;
       display: flex;
       align-items: center;
       cursor: pointer;

   }

   .mtp-filter-bar {
       display: flex;
       gap: 12px;
       flex-wrap: nowrap;
       justify-content: flex-start;
       align-items: center;
       overflow-x: auto;
   }

   .mtp-filter-bar button {
       padding: 2px 12px;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       font-size: 16px;
       font-weight: bold;
       transition: background 0.2s;
       flex-shrink: 0;
   }

   .mtp-filter-bar button:hover {
       background: #f0f0f0;
   }

   /* .mtp-date-range {
       font-size: 15px;
       font-weight: 600;
       white-space: nowrap;
       flex-shrink: 0;
   } */

   .mtp-filter-bar button {
       color: #000;
       /* <-- makes text black */
   }

   .mtp-date-group {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       border-radius: 4px;
       letter-spacing: normal;
       box-shadow: 0 2px 4px #00000012, 0 0 4px #00000029;
       font-weight: 500;
       background-color: #efefef;
   }


   .mtp-day-title {
       font-size: 20px;
       font-weight: bold;
       margin: 15px 0;
       color: #02357B;
   }

   .mtp-match {
       background: white;
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-radius: 5px;
       padding: 5px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
       margin-bottom: 10px;
       position: relative;
       border-bottom: 1px solid rgb(221, 221, 221);
   }

   .mtp-match::before {
       position: absolute;
       left: 10px;
       top: 14px;
       font-size: 12px;
       color: #888;
   }

   .mtp-match-info {
       display: flex;
       align-items: center;
       gap: 10px;
       flex: 1;
       flex-wrap: wrap;
       font-size: 15px;
       font-weight: 600;
   }

   .mtp-team-home-team {
       display: flex;
       align-items: center;
       justify-content: end;
       gap: 6px;
       white-space: nowrap;
   }

   .mtp-team-away-team {
       display: flex;
       align-items: center;
       justify-content: start;
       gap: 6px;
       white-space: nowrap;
   }


   .mtp-team-home-team img {
       width: 30px;
       object-fit: cover;
   }

   .mtp-team-away-team img {
       width: 30px;
       object-fit: cover;
   }




   .mtp-schedule {
       display: flex;
       justify-content: center;
   }

   .mtp-score {
       font-weight: bold;
       background: #f0f0f0;
       padding: 4px 10px;
       border-radius: 6px;
       font-size: 14px;
       min-width: 30px;
       text-align: center;
   }

   .mtp-match-info>div {
       display: flex;
       align-items: center;
   }


   .mtp-match-info>div:first-child,
   .mtp-match-info>div:last-child {
       flex: 1;
       min-width: 0;
   }

   .mtp-match-info>div:nth-child(2) {
       flex: 0 0 auto;
   }







   .mtp-match-details {
       font-size: 13px;
       text-align: right;
       color: #555;
       min-width: 180px;
       line-height: 1.4;
   }

   @media (max-width: 600px) {
       .mtp-match {
           flex-direction: column;
           padding: 14px;
       }

       .mtp-match::before {
           position: static;
           margin-bottom: 6px;
       }

       .mtp-match-info {
           margin-left: 0;
       }

       .mtp-match-details {
           text-align: left;
           margin-top: 8px;
       }
   }

   .mtp-match:hover {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       transition: box-shadow 0.2s ease;
   }



   /* FOR RESPONSIVE */

   @media (max-width: 425px) {
       .mtp-filter-bar {
           display: flex;
           flex-direction: column;
       }

       .mtp-match-info {
           display: flex;
           flex-direction: column;
       }
   }