.mk-live-search-wrapper {
max-width: 1200px;
margin: 0 auto 40px;
} .mk-live-search-form {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.mk-live-search-form {
flex-direction: column;
}
} .mk-live-category-wrapper {
flex: 0 0 250px;
}
@media (max-width: 768px) {
.mk-live-category-wrapper {
flex: 1;
}
}
.mk-live-category-select {
width: 100%;
padding: 12px 16px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
background: white;
cursor: pointer;
transition: border-color 0.2s;
}
.mk-live-category-select:hover,
.mk-live-category-select:focus {
border-color: #4CAF50;
outline: none;
} .mk-live-search-input-wrapper {
flex: 1;
position: relative;
}
.mk-live-search-input {
width: 100%;
padding: 12px 50px 12px 16px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.2s;
}
#mk-live-search-input {border-radius:8px}
.mk-live-search-input:focus {
border-color: #4CAF50;
outline: none;
}
.mk-live-search-icon,
.mk-live-search-loading {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
pointer-events: none;
}
.mk-live-search-loading {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
} .mk-live-search-results {
margin-top: 30px;
}
.mk-live-results-heading {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}
.mk-featured-wrapper .mk-live-results-heading {
border-top: 2px solid #eee;
padding-top: 16px;
} .mk-live-results-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 30px;
}
@media (max-width: 1024px) {
.mk-live-results-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.mk-live-results-grid {
grid-template-columns: 1fr;
}
} .mk-live-result-item {
background: white;
border-radius: 8px;
overflow: hidden; } .mk-live-result-link {
display: block;
text-decoration: none;
color: inherit;
}
.mk-live-result-image {
position: relative;
width: 100%;
aspect-ratio: 1200 / 630;
overflow: hidden;
background: #f5f5f5;
}
.mk-live-result-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mk-live-result-content {
padding: 16px 0;
}
.mk-live-result-badge {
display: inline-block;
padding: 4px 12px;
background: #4CAF50;
color: white;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
margin-bottom: 8px;
}
.mk-live-result-title {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
margin: 0;
color: #333;
} .mk-live-no-results {
text-align: center;
padding: 60px 20px;
background: #f9f9f9;
border-radius: 12px;
}
.mk-live-no-results p {
font-size: 18px;
color: #666;
margin: 0;
} .mk-live-show-all-wrapper {
text-align: center;
margin-top: 30px;
}
.mk-live-show-all-btn {
display: inline-block;
padding: 14px 32px;
background: #87A96B;
color: white;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s, transform 0.2s;
}
.mk-live-show-all-btn:hover {
background: #45a049; color: white;
}
@media (max-width: 768px) {
.mk-live-search-form {
flex-direction: column;
gap: 10px;
}
.mk-live-category-wrapper {
width: 100%;
}
.mk-live-search-input-wrapper {
width: 100%;
}
.mk-live-results-grid {
grid-template-columns: 1fr;
gap: 15px;
} .mk-live-result-item {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom:6px
}
.mk-live-result-link {
display: flex;
flex-direction: row;
gap: 12px;
align-items: flex-start;
}
.mk-live-result-image {
flex-shrink: 0;
width: 120px;
margin-top:8px
}
.mk-live-result-image img {
width: 120px;
height: auto;
object-fit: contain;
border-radius: 6px;
}
.mk-live-result-content {
flex: 1;
padding: 0;
}
.mk-live-result-title {
font-size: 14px;
line-height: 1.4;
}
.mk-live-result-badge {
font-size: 11px;
padding: 0;
margin-bottom: 2px;
background-color: #fff;
color: #555;
font-weight: 500;
}
}