.listeo-poi-container {
margin-top: 40px;
margin-bottom: 40px;
}
.listeo-poi-header h3 {
font-size: 22px;
font-weight: 400;
color: #222;
display: flex;
align-items: center;
gap: 10px;
}
.listeo-poi-header h3 i {
color: var(--listeo-primary-color);
font-size: 18px;
} .listeo-poi-map-container {
margin-bottom: 30px;
}
#listeo-poi-map {
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
} .poi-display-tabs .poi-tabs-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
border-bottom: 0px solid #e0e0e0;
margin-bottom: 20px;
}
.poi-display-tabs .poi-tabs-nav li {
margin: 0;
padding: 0;
border-radius: 50px;
}
.poi-display-tabs .poi-tabs-nav li.active {
background: var(--listeo-primary-color-light);
}
.poi-display-tabs .poi-tabs-nav li a {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
padding-top: 4px;
color: #666;
line-height: 25px;
text-decoration: none;
font-weight: 500;
border-bottom: 0px solid transparent;
transition: all 0.3s ease;
position: relative;
margin-bottom: -2px;
font-size: 14px;
}
.poi-display-tabs .poi-tabs-nav li.active a {
color: var(--listeo-primary-color);
border-bottom-color: var(--listeo-primary-color);
}
.poi-display-tabs .poi-tabs-nav li:hover a {
color: var(--listeo-primary-color);
}
.poi-display-tabs .poi-tabs-nav li a i {
font-size: 14px;
}
.poi-count {
background: var(--listeo-primary-color-light);
color: var(--listeo-primary-color);
padding: 2px 6px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
width: 20px;
text-align: center;
height: 20px;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
}
.poi-tab-panel {
display: none;
}
.poi-tab-panel.active {
display: block;
} .poi-display-accordion .poi-accordion-item {
border: 1px solid #e0e0e0;
border-radius: 5px;
margin-bottom: 15px;
overflow: hidden;
}
.poi-display-accordion .poi-accordion-header {
padding: 20px;
background: transparent;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s ease;
}
.poi-display-accordion .poi-accordion-header:hover {
background: #f7f7f7;
}
.poi-display-accordion .poi-accordion-header.active {
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.poi-display-accordion .poi-accordion-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #333;
display: flex;
align-items: center;
gap: 10px;
}
.poi-display-accordion .poi-accordion-header h4 i {
color: var(--listeo-primary-color);
}
.poi-accordion-icon {
color: #999;
transition: transform 0.3s ease;
}
.poi-accordion-header.active .poi-accordion-icon {
transform: rotate(180deg);
}
.poi-accordion-content {
display: none;
padding: 20px;
}
.poi-accordion-content.show {
display: block;
} .poi-items-container {
display: flex;
flex-direction: column;
gap: 15px;
container-type: inline-size;
}
.poi-item {
display: flex;
gap: 15px;
padding: 15px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
transition: all 0.3s ease;
margin-bottom:0;
} .poi-photo {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 5px;
overflow: hidden;
background: #f0f0f0;
}
.poi-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.poi-content {
flex: 1;
min-width: 0;
}
.poi-name {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.poi-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.poi-stars {
color: #ffc107;
display: flex;
gap: 1px;
}
.poi-stars i {
font-size: 14px;
}
.poi-rating-value {
font-weight: 600;
color: #333;
font-size: 14px;
}
.poi-reviews-count {
color: #999;
font-size: 13px;
}
.poi-distance {
display: flex;
align-items: center;
gap: 10px;
color: #666;
font-size: 13px;
margin-bottom: 0;
}
.poi-distance i {
color: var(--listeo-primary-color);
width: 14px;
margin-right: -5px;
}
.poi-distance-separator {
color: #ccc;
}
.poi-distance-meters {
color: #999;
}
.poi-address {
color: #666;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: -5px 0;
}
.poi-actions {
display: flex;
align-items: center;
}
.poi-directions-btn {
padding: 3px 15px;
color: var(--listeo-primary-color);
background: var(--listeo-primary-color-light);
text-decoration: none;
border-radius: 50px;
font-size: 13px;
font-weight: 500;
transition: 0.3s;
display: flex;
align-items: center;
gap: 6px;
}
.poi-directions-btn:hover {
background: var(--listeo-primary-color);
color: white;
}
.poi-directions-btn i {
font-size: 12px;
} .poi-loading {
text-align: center;
padding: 5px;
}
.poi-spinner {
width: 30px;
height: 30px;
margin: 0 auto 5px;
border: 3px solid #f0f0f0;
border-top-color: var(--listeo-primary-color);
border-radius: 50%;
animation: poi-spin 1s linear infinite;
}
@keyframes poi-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.poi-loading p {
color: #777;
font-size: 14px;
margin: 0;
} .poi-no-results {
text-align: center;
padding: 40px;
color: #999;
font-size: 14px;
background: #f8f8f8;
border-radius: 5px;
} .listeo-poi-footer {
margin-top: 20px;
}
.poi-info-text {
display: flex;
align-items: center;
gap: 8px;
color: #777;
font-size: 14px;
margin: 0;
line-height: 20px;
}
.poi-info-text i {
color: var(--listeo-primary-color);
} .poi-map-popup {
min-width: 200px;
}
.poi-map-popup h4 {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}
.poi-map-popup-rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
}
.poi-map-popup-distance {
color: #666;
font-size: 12px;
margin-bottom: 8px;
}
.poi-map-popup-address {
color: #999;
font-size: 12px;
margin-bottom: 10px;
}
.poi-map-popup-directions {
display: inline-block;
padding: 6px 12px;
background: var(--listeo-primary-color);
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.poi-map-popup-directions:hover {
background: var(--listeo-primary-color);
color: #fff;
}  @container (max-width: 400px) {
.poi-item {
flex-direction: column;
gap: 0;
}
.poi-photo {
display: none;
}
.poi-actions {
margin-top: 10px;
}
.poi-directions-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 768px) {
.poi-display-tabs .poi-tabs-nav {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.poi-display-tabs .poi-tabs-nav li {
flex-shrink: 0;
}
.poi-item {
flex-direction: column;
}
.poi-photo {
width: 100%;
height: 200px;
}
.poi-actions {
margin-top: 10px;
}
.poi-directions-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.listeo-poi-header h3 {
font-size: 20px;
}
.poi-distance {
flex-wrap: wrap;
}
.poi-name {
white-space: normal;
}
.poi-address {
white-space: normal;
}
} body#dark-mode .listeo-poi-header h3 {
color: #e0e0e0;
}
body#dark-mode #listeo-poi-map {
border: 1px solid #333;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body#dark-mode .poi-display-tabs .poi-tabs-nav {
border-bottom: 2px solid #333;
}
body#dark-mode .poi-display-tabs .poi-tabs-nav li a {
color: #999;
}
body#dark-mode .poi-display-tabs .poi-tabs-nav li:hover a {
color: var(--listeo-primary-color);
}
body#dark-mode .poi-count {
color: #000;
}
body#dark-mode .poi-display-accordion .poi-accordion-item {
border: 1px solid #333;
background: #1a1a1a;
}
body#dark-mode .poi-display-accordion .poi-accordion-header {
background: #222;
}
body#dark-mode .poi-display-accordion .poi-accordion-header:hover {
background: #2a2a2a;
}
body#dark-mode .poi-display-accordion .poi-accordion-header.active {
background: #1a1a1a;
border-bottom: 1px solid #333;
}
body#dark-mode .poi-display-accordion .poi-accordion-header h4 {
color: #e0e0e0;
}
body#dark-mode .poi-accordion-icon {
color: #666;
}
body#dark-mode .poi-accordion-content {
background: #1a1a1a;
}
body#dark-mode .poi-item {
background: #1a1a1a;
border: 1px solid #333;
}
body#dark-mode .poi-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body#dark-mode .poi-photo {
background: #2a2a2a;
}
body#dark-mode .poi-name {
color: #e0e0e0;
}
body#dark-mode .poi-rating-value {
color: #e0e0e0;
}
body#dark-mode .poi-reviews-count {
color: #666;
}
body#dark-mode .poi-distance {
color: #999;
}
body#dark-mode .poi-distance-separator {
color: #555;
}
body#dark-mode .poi-distance-meters {
color: #666;
}
body#dark-mode .poi-address {
color: #999;
}
body#dark-mode .poi-spinner {
border: 3px solid #333;
border-top-color: var(--listeo-primary-color);
}
body#dark-mode .poi-loading p {
color: #666;
}
body#dark-mode .poi-no-results {
color: #666;
background: #222;
}
body#dark-mode .listeo-poi-footer {
border-top: 1px solid #333;
}
body#dark-mode .poi-info-text {
color: #666;
}
body#dark-mode .poi-map-popup h4 {
color: #e0e0e0;
}
body#dark-mode .poi-map-popup-distance {
color: #999;
}
body#dark-mode .poi-map-popup-address {
color: #666;
}