.doctor-search-wrapper {
          background: #5c8db2;
          padding: 15px;
          text-align: center;
        }
        #doctor-search-form {
          display: flex;
          margin-left: 150px;
          gap: 12px;
          flex-wrap: wrap;
        }
        #doctor-search-form input {
          width: 260px;
          max-width: 100%;
          border: 1px solid #ccc;
          border-radius: 6px;
          font-size: 14px;
          outline: none;
        }
        #doctor-search-form input:focus {
          border-color: #2e6f9e;
          box-shadow: 0 0 4px rgba(46,111,158,0.4);
        }
        #no-results {
          text-align: center;
          margin-top: 15px;
          font-size: 16px;
          font-weight: 500;
          color: #fff;
          display: none;
        }

        /* === Doctor List === */
        /*#doctor-list {
          max-height: 200px;
          overflow-y: auto;
          overflow-x: hidden;
        }*/

        /*  doctor card      */
        .doctor-card {
          width: 100%;
          height: 233px;
          display: flex;
          align-items: center;
          border: 1px solid #e5e5e5;
          border-radius: 8px;
          padding: 15px;
          margin-bottom: 15px;
          background: #fff;
          box-shadow: 0 2px 6px rgba(0,0,0,0.05);
          transition: box-shadow 0.2s ease-in-out;
        }
        .doctor-card:hover {
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .doctor-photo img {
          width: 80px;
          height: 80px;
          object-fit: cover;
          border-radius: 6px;
          margin-right: 15px;
        }
        .doctor-info h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #222;
        }
        .doctor-type {
          margin: 4px 0;
          color: #7BAFD5;
          font-size: 16px;
          padding-top: 7px;
        }
        .doctor-address {
          font-size: 14px;
          color: #7BAFD5;
          display: flex;
          align-items: center;
          padding-top: 7px;
        }

/*map popup css*/
        .doctor-marker-popup {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 250px;
        }
        .doctor-marker-popup img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
        }
        .doctor-marker-popup .popup-info a {
            font-weight: bold;
            font-size: 14px;
            color: #333;
            text-decoration: none;
        }
        .doctor-marker-popup .popup-info p {
            margin: 4px 0 0;
            font-size: 12px;
            color: #555;
        }

        .doctor-marker-wrapper {
    position: relative;
    width: 55px;
    height: 70px; /* total height including pin */
}

.doctor-marker-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    background: #fff;
}

.doctor-marker-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pin triangle */
.doctor-marker-pin {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent; /* increase width */
    border-right: 12px solid transparent; /* increase width */
    border-top: 18px solid #fff; /* increase height if needed */
}


/*map popup css end*/

        @media (max-width: 480px) {
            .doctor-card {
                gap: 20px;
            }
        }


          @media (max-width: 768px) {
          #doctor-search-form {        
            justify-content: center;
            margin-left: 0px;

          }
        }