.tpc-wrapper {
max-width: 1100px;
margin: 40px auto;
padding: 0 20px;
font-family: sans-serif;
}
.tpc-title {
font-size: 2rem;
margin-bottom: 8px;
}
.tpc-meta {
color: #666;
margin-bottom: 24px;
}
.tpc-error {
background: #fdecea;
border-left: 4px solid #e53935;
padding: 12px 16px;
border-radius: 4px;
color: #c62828;
} .tpc-listings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
} .tpc-listing-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
}
.tpc-listing-image img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.tpc-listing-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.tpc-listing-name {
font-size: 1.1rem;
margin: 0;
}
.tpc-listing-name a {
text-decoration: none;
color: #1a1a1a;
}
.tpc-listing-name a:hover {
color: #0073aa;
}
.tpc-listing-address {
font-size: 0.875rem;
color: #555;
margin: 0;
} .tpc-listing-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tpc-badge {
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 20px;
background: #f0f4f8;
color: #333;
}
.tpc-listing-desc {
font-size: 0.875rem;
color: #666;
margin: 0;
} .tpc-amenities {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tpc-amenities li {
font-size: 0.75rem;
background: #fff3e0;
color: #e65100;
padding: 3px 8px;
border-radius: 4px;
} .tpc-btn {
display: inline-block;
margin-top: auto;
padding: 10px 16px;
background: #0073aa;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 0.875rem;
text-align: center;
}
.tpc-btn:hover {
background: #005f8d;
color: #fff;
} .tpc-pagination {
display: flex;
align-items: center;
gap: 16px;
margin-top: 40px;
justify-content: center;
}
.tpc-page-btn {
padding: 8px 16px;
background: #0073aa;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 0.875rem;
}
.tpc-page-btn:hover {
background: #005f8d;
color: #fff;
}
.tpc-page-info {
color: #555;
font-size: 0.875rem;
} .tpc-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.tpc-skeleton-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.tpc-skeleton-img {
width: 100%;
height: 180px;
background: #e0e0e0;
}
.tpc-skeleton-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.tpc-skeleton-line {
height: 14px;
border-radius: 4px;
background: #e0e0e0;
}
.tpc-skeleton-line.wide   { width: 80%; }
.tpc-skeleton-line.narrow { width: 40%; } @keyframes shimmer {
0%   { background-position: -800px 0; }
100% { background-position:  800px 0; }
}
.shimmer {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 800px 100%;
animation: shimmer 1.5s infinite linear;
} .tpc-filter-form {
background: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 28px;
}
.tpc-filter-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
}
.tpc-filter-field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 160px;
}
.tpc-filter-field label {
font-size: 0.8rem;
font-weight: 600;
color: #444;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tpc-filter-field input,
.tpc-filter-field select {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 0.9rem;
background: #fff;
width: 100%;
}
.tpc-filter-actions {
display: flex;
gap: 8px;
align-items: flex-end;
padding-bottom: 1px;
}
.tpc-btn-search {
padding: 9px 20px;
background: #0073aa;
color: #fff;
border: none;
border-radius: 5px;
font-size: 0.9rem;
cursor: pointer;
}
.tpc-btn-search:hover {
background: #005f8d;
}
.tpc-btn-reset {
padding: 9px 16px;
background: #fff;
color: #555;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 0.9rem;
text-decoration: none;
}
.tpc-btn-reset:hover {
background: #f0f0f0;
color: #333;
}