/* Azia City Filter v2.0.0 */

:root { --azia-bar-color: #1a6b5a; }

.azia-city-filter-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Dropdown bar ────────────────────────────────────────────────────────── */

.azia-dropdown-row {
    background: var(--azia-bar-color);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.azia-label {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.azia-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
    margin: 0 8px;
}

.azia-select-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.azia-city-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 44px 13px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: box-shadow .2s;
}

.azia-city-select:focus {
    outline: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.35);
}

.azia-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--azia-bar-color);
}

/* ── City heading ────────────────────────────────────────────────────────── */

.azia-city-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 8px 0 24px;
    border-bottom: 2px solid #e0ede9;
    padding-bottom: 14px;
}

.azia-city-heading h2 { margin: 0; font-size: 26px; font-weight: 700; color: var(--azia-bar-color); }
#azia-trip-count { font-size: 14px; color: #888; }

/* ── Grid ────────────────────────────────────────────────────────────────── */

.azia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
    margin-top: 8px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.azia-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.22s, box-shadow 0.22s;
    display: flex;
    flex-direction: column;
}

.azia-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.13); }

.azia-card-img { display:block; height:200px; overflow:hidden; background:#f0f0f0; }
.azia-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.azia-card:hover .azia-card-img img { transform: scale(1.05); }

.azia-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f5f5f5; }

.azia-card-body { padding: 18px 20px; display:flex; flex-direction:column; flex:1; gap:6px; }

.azia-card-title { margin:0; font-size:16px; font-weight:700; line-height:1.35; }
.azia-card-title a { color:#1a1a1a; text-decoration:none; }
.azia-card-title a:hover { color: var(--azia-bar-color); }

.azia-card-excerpt { margin:0; font-size:13px; color:#666; line-height:1.5; flex:1; }

/* ── Availability dates ──────────────────────────────────────────────────── */

.azia-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
}

.azia-dates-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 2px;
}

.azia-date-pill {
    background: #e8f5f0;
    color: #0f6e56;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Stars ───────────────────────────────────────────────────────────────── */

.azia-stars { display:flex; align-items:center; gap:2px; margin-bottom:8px; }
.azia-stars span { font-size:12px; color:#888; margin-left:4px; }

/* ── Card footer ─────────────────────────────────────────────────────────── */

.azia-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.azia-price { font-size:18px; font-weight:700; color: var(--azia-bar-color); }
.azia-price .woocommerce-Price-amount { color: var(--azia-bar-color); }

.azia-btn {
    background: var(--azia-bar-color);
    color: #fff !important;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity .2s;
}
.azia-btn:hover { opacity:.82; color:#fff !important; }

/* ── States ──────────────────────────────────────────────────────────────── */

.azia-loading { text-align:center; padding:60px 20px; color:#888; }
.azia-spinner {
    width:44px; height:44px;
    border:4px solid #e0f0eb;
    border-top-color: var(--azia-bar-color);
    border-radius:50%;
    animation: azia-spin .7s linear infinite;
    margin: 0 auto 16px;
}
@keyframes azia-spin { to { transform:rotate(360deg); } }

.azia-no-trips { text-align:center; padding:50px 20px; color:#888; font-size:15px; }
.azia-error { color:#c0392b; text-align:center; padding:20px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
    .azia-dropdown-row { padding: 18px 20px; flex-direction: column; align-items: stretch; gap: 12px; }
    .azia-label { font-size: 14px; }
    .azia-divider { width: 100%; height: 1px; margin: 4px 0; }
    .azia-select-wrapper { min-width: unset; }
    .azia-grid { grid-template-columns: 1fr; }
    .azia-city-heading { flex-direction: column; gap: 4px; }
    .azia-city-heading h2 { font-size: 20px; }
}