/* Grid container */
.reqstar, .myaddlisting #select2-ulp-category-select-container {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><text x='0' y='25' font-size='30' fill='red'>*</text></svg>");
    background-repeat: no-repeat;
    background-position: right 3px center; /* 10px from right, vertically centered */
    background-size: 16px 16px; /* match the SVG font-size */
    padding-right: 30px; /* add space so text doesn't overlap star */
}
#ulp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;    padding-top: 30px;width:100%;
    align-items: start;
}
#ulp-verified-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;    padding-top: 30px;width:100%;
    align-items: start;
}

@media (max-width: 992px) {
    #ulp-grid { grid-template-columns: repeat(2, 1fr); }
    #ulp-verified-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    #ulp-grid { grid-template-columns: 1fr; }
     #ulp-verified-grid { grid-template-columns: 1fr; }
}

.ulp-more{
  display:none;
}

.ulp-toggle{
  color:#0073aa;
  cursor:pointer;
  font-size:13px;
}
form.ulp-form input,form.ulp-form textarea {
    display: block;
    margin-bottom: 20px;
}
.imageuploader
 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
    display: flex;
    margin-top: 30px;
    gap: 30px;
}

.upload-box {margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;padding:0 30px;
    color: #666;
    text-align: center;
}

.upload-box:hover {
    border-color: #0073ff;
    background: #f0f6ff;
    color: #0073ff;
}

.upload-box input[type="file"] {
    display: none;
}
.imageuplaoder{  display: block;
    margin-bottom: 20px;margin-top: 20px;}
/* Card */
.ulp-card {
    border: 1px solid #ddd;
    padding: 10px 10px 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border-radius: 6px;
    transition: box-shadow 0.2s ease;
}

.ulp-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* Image wrapper - fixed height container */
.ulp-card .ulp-card-image {
    width: 312px;
    height: 312px;        /* fixed height for all images */
    overflow: hidden;
    border-radius: 4px;position: relative;
}
p.dirbox {padding:0 1px!important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}
p.dirbox img {
width:16px !important;
    height:16px !important;margin-right:7px;
}
p.dirbox img.locationicon {
width:21px !important;
    height:21px !important;margin-right:2px;
}
p.dirbox img.locationicon2 {
width:18px !important;
    height:18px !important;margin-right:5px;
}
.ulp-badge {
    position: absolute;
    top: 3px;
    background:#0f194b;
    color:#ffffff!important;
    font-size:14px;
    padding:3px 15px!important;
    border-radius:20px;
    margin-left:6px;
    z-index: 1;
       display: flex;
    right: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
.ulp-badge svg {
    margin-right:3px !important;
    width:14px !important;
    height:14px !important;
}
.ulp-badge svg path {
    fill: #ffffff !important;
}
.ulp-card .ulp-card-image img {
    width: 100%;
    height: 100%;
        border: 1px solid #c3c3c3;
    border-radius: 5px;
    object-fit: cover;    /* fills container, crops if needed */
    display: block;
}

/* Card title and badge */
.ulp-card h3 {
    margin: 7px 0 0 0;
    font-size: 18px;
    display: flex;font-weight:600;
    align-items: center;text-align:center;
        width: 100% !important;
    justify-content: center;
}

/* Card description */
.ulp-card p {padding:10px 5px;
    margin: 2px 0;
    font-size: 15px;
    color: #333;
}

/* Table and pagination (unchanged from before) */
.ulp-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.ulp-table th, .ulp-table td { border: 1px solid #ccc; padding: 8px 10px; text-align: left; font-size: 15px; }
.ulp-table th { background: #f7f7f7; }
.ulp-success-message { padding: 10px; margin-bottom: 10px; background: #d4edda; color: #155724; border:1px solid #c3e6cb; border-radius: 4px; }
#ulp-pagination { margin-top:15px; text-align:center; }
#ulp-pagination button { margin:2px; padding:6px 12px; cursor:pointer; border:1px solid #ccc; background:#fff; border-radius:4px; transition:all 0.2s ease; }
#ulp-pagination button:hover, #ulp-pagination button.active { background:#0073aa; color:#fff; border-color:#0073aa; }
/* Wrapper flex to align dropdown and grid */
.ulp-grid-wrapper2 {
    display: flex;
    flex-direction: column;
    gap: 15px;align-items: flex-end;
}

/* Dropdown styling */
.ulp-grid-wrapper2 #ulp-filter {
    max-width: 360px;      /* limit width */
    width: 100%;            /* full width on smaller screens */
    margin-left: auto;       /* push to right */
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Optional: make grid below dropdown full width */
#ulp-grid2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    #ulp-grid2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ulp-card .ulp-card-image {
           width: 100%;
        height: 100%;        /* fixed height for all images */
    overflow: hidden;
    border-radius: 4px;
}
    #ulp-grid2 {
        grid-template-columns: 1fr;
    }
   .ulp-grid-wrapper2 #ulp-filter {
    max-width: 100% !important;      /* limit width */
    width: 100%;            /* full width on smaller screens */
    margin-left: auto;       /* push to right */
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
}