/* Azia City Filter v4.0.0 */
:root { --az: #1a6b5a; --az-light: #e8f5f0; }

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

/* ── Bar ─────────────────────────────────────────────────────────────────── */
.azia-bar {
    background: var(--az);
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.azia-bar-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.azia-bar-sep {
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
    margin: 0 16px;
}

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

.azia-sel-wrap { position: relative; flex: 1; min-width: 0; }

.azia-sel {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 32px 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.azia-sel:focus { outline: 2px solid rgba(255,255,255,0.5); }

.azia-arr {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--az);
}

/* ── Section heading ─────────────────────────────────────────────────────── */
.azia-section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--az-light);
}
.azia-section-head h2 { margin:0; font-size:24px; font-weight:700; color:var(--az); }
.azia-section-head span { font-size:13px; color:#888; }

#azAccPanel { margin-top: 32px; }

/* ── Trip grid & card ────────────────────────────────────────────────────── */
.azia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; }

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

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

.azia-no-img { height:190px; display:flex; align-items:center; justify-content:center; font-size:48px; background:#f5f5f5; }

.azia-card-body { padding:16px 18px; display:flex; flex-direction:column; flex:1; gap:6px; }
.azia-card-title { margin:0; font-size:15px; font-weight:700; }
.azia-card-title a { color:#111; text-decoration:none; }
.azia-card-title a:hover { color:var(--az); }
.azia-card-exc { margin:0; font-size:13px; color:#666; line-height:1.5; flex:1; }

.azia-dates { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0; }
.azia-dl { font-size:12px; font-weight:600; color:#555; width:100%; }
.azia-dp { background:var(--az-light); color:#0f6e56; border-radius:20px; padding:2px 10px; font-size:12px; }

.azia-stars { font-size:14px; margin-bottom:4px; }

.azia-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px solid #f0f0f0; }
.azia-price { font-size:17px; font-weight:700; color:var(--az); }
.azia-price .woocommerce-Price-amount { color:var(--az); }

.azia-btn, .azia-book { background:var(--az); color:#fff!important; text-decoration:none; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; transition:opacity .2s; white-space:nowrap; }
.azia-btn:hover, .azia-book:hover { opacity:.85; }

/* ── Accommodation grid & card ───────────────────────────────────────────── */
.azia-acc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }

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

.azia-acc-img-wrap { height:200px; overflow:hidden; background:#f0f0f0; position:relative; }
.azia-sl { height:100%; position:relative; }
.azia-slide { width:100%; height:200px; object-fit:cover; }
.azia-prev,.azia-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); color:#fff; border:none; width:30px; height:30px; border-radius:50%; font-size:16px; cursor:pointer; z-index:2; }
.azia-prev { left:8px; } .azia-next { right:8px; }

.azia-acc-body { padding:16px 18px; display:flex; flex-direction:column; flex:1; gap:6px; }
.azia-acc-top { display:flex; justify-content:space-between; align-items:center; }
.azia-type { background:var(--az-light); color:var(--az); border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; text-transform:uppercase; }
.azia-acc-title { margin:0; font-size:15px; font-weight:700; }
.azia-acc-title a { color:#111; text-decoration:none; }
.azia-acc-title a:hover { color:var(--az); }
.azia-acc-exc { margin:0; font-size:13px; color:#666; line-height:1.5; flex:1; }
.azia-acc-meta { display:flex; gap:12px; font-size:12px; color:#777; }

.azia-amenities { display:flex; flex-wrap:wrap; gap:5px; }
.azia-am { background:#f5f5f5; color:#555; border-radius:20px; padding:2px 9px; font-size:11px; }

.azia-booking { margin-top:auto; padding-top:12px; border-top:1px solid #f0f0f0; }
.azia-dates-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.azia-df { display:flex; flex-direction:column; gap:3px; }
.azia-df label { font-size:10px; font-weight:700; color:#888; text-transform:uppercase; }
.azia-df input[type=date] { border:1.5px solid #ddd; border-radius:6px; padding:7px 8px; font-size:13px; width:100%; box-sizing:border-box; }
.azia-df input[type=date]:focus { outline:none; border-color:var(--az); }

.azia-acc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid #f0f0f0; }
.azia-ppn { font-size:15px; font-weight:700; color:var(--az); }
.azia-total { font-size:11px; color:#888; margin-top:2px; }

/* ── States ──────────────────────────────────────────────────────────────── */
.azia-loading { text-align:center; padding:50px; color:#888; }
.azia-spin { width:40px; height:40px; border:4px solid #e0f0eb; border-top-color:var(--az); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.azia-empty { text-align:center; padding:40px; color:#aaa; }
.azia-err { color:#c0392b; text-align:center; padding:16px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:700px) {
    .azia-bar { flex-wrap:wrap; padding:14px 16px; gap:10px; }
    .azia-bar-group { flex:1 1 calc(50% - 20px); }
    .azia-bar-sep { display:none; }
    .azia-grid, .azia-acc-grid { grid-template-columns:1fr; }
}
@media (max-width:400px) {
    .azia-bar-group { flex:1 1 100%; }
}