/* ── Kapadokya Balon Durum Plugin Styles ── */
.kbd-app { font-family: inherit; color: #1a1a2e; }

/* Loading */
.kbd-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:16px; color:#666; }
.kbd-spinner { width:40px; height:40px; border:4px solid #e0e0e0; border-top-color:#015FC9; border-radius:50%; animation:kbd-spin .8s linear infinite; }
@keyframes kbd-spin { to { transform:rotate(360deg); } }

/* Error banner */
.kbd-alert { background:#fff3cd; border:1px solid #ffc107; border-radius:8px; padding:12px 16px; margin-bottom:20px; font-size:13px; color:#856404; }

/* Forecast tabs row */
.kbd-tabs-wrap { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); padding:20px; margin-bottom:20px; }
.kbd-tabs-title { font-size:16px; font-weight:600; margin:0 0 16px; }
.kbd-tabs-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; cursor:grab; }
.kbd-tabs-scroll:active { cursor:grabbing; }
.kbd-tabs-scroll::-webkit-scrollbar { height:4px; }
.kbd-tabs-scroll::-webkit-scrollbar-thumb { background:#ddd; border-radius:2px; }

.kbd-tab { min-width:180px; border:2px solid #e8e8e8; border-radius:10px; padding:14px; cursor:pointer; background:#f9f9f9; text-align:left; transition:all .2s; }

@media(max-width:640px) {
    .kbd-tabs-scroll { flex-direction:column; overflow-x:visible; }
    .kbd-tab { min-width:0; width:100%; box-sizing:border-box; }
}
.kbd-tab:hover { border-color:#015FC9; background:#fff; }
.kbd-tab.active { border-color:#015FC9; background:#fff; box-shadow:0 2px 8px rgba(1,95,201,.15); }
.kbd-tab-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.kbd-tab-date { font-weight:600; font-size:13px; }
.kbd-tab-stats { font-size:11px; color:#666; margin-top:8px; }
.kbd-tab-stats div { display:flex; justify-content:space-between; margin-bottom:2px; }
.kbd-tab-stats span:last-child { color:#1a1a2e; font-weight:500; }
.kbd-tab-reason { font-size:11px; color:#c0392b; margin-top:6px; }

/* Badge */
.kbd-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.kbd-badge-today   { background:#015FC9; color:#fff !important; margin-left:4px; }
.kbd-badge-success { background:#198754; color:#fff !important; }
.kbd-badge-warning { background:#f59e0b; color:#fff !important; }
.kbd-badge-danger  { background:#E8534A; color:#fff !important; }

/* Donut SVG */
.kbd-donut-wrap { display:flex; flex-direction:column; align-items:center; }

/* Main card */
.kbd-main-card { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); padding:24px; margin-bottom:20px; }
.kbd-main-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.kbd-main-title { font-size:20px; font-weight:700; margin:0 0 4px; }
.kbd-main-subtitle { font-size:13px; color:#666; margin:0; }
.kbd-update-pill { background:#e8f0fe; border:1px solid #c5d8fb; border-radius:20px; padding:6px 14px; font-size:12px; color:#015FC9; white-space:nowrap; }
.kbd-update-pill strong { font-weight:600; }

.kbd-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.kbd-status-grid > div { display:flex; flex-direction:column; }
.kbd-status-grid > div > .kbd-status-card,
.kbd-status-grid > div > .kbd-shm-card { flex:1; }
.kbd-status-grid-single { width:100%; }
.kbd-status-grid-single .kbd-status-card { width:100%; box-sizing:border-box; }
@media(max-width:640px){ .kbd-status-grid { grid-template-columns:1fr; } }

/* Status card */
.kbd-status-card { border-radius:10px; padding:20px; background:#fff; border:1px solid #e8e8e8; border-left:4px solid #e8e8e8; box-sizing:border-box; }
.kbd-status-card.success { border-left-color:#198754; }
.kbd-status-card.warning { border-left-color:#f59e0b; }
.kbd-status-card.danger  { border-left-color:#E8534A; }
.kbd-status-card.past    { border-left-color:#015FC9; }
.kbd-status-inner { display:flex; align-items:center; gap:20px; }
.kbd-status-text p { margin:0; }
.kbd-status-label { font-size:11px; font-weight:600; text-transform:uppercase; color:#555; margin-bottom:4px !important; }
.kbd-status-name { font-size:26px; font-weight:700; }
.kbd-status-icon { font-size:28px; margin-right:6px; }
.kbd-status-weather { font-size:13px; color:#444; margin-top:12px !important; }
.kbd-status-updated { text-align:right; font-size:12px; color:#666; }

/* SHM panel */
.kbd-shm-card { border-radius:10px; border:1px solid #e0e0e0; padding:20px; background:#fff; }
.kbd-shm-title { font-size:14px; font-weight:600; margin:0 0 14px; }
.kbd-shm-table { width:100%; border-collapse:collapse; font-size:13px; text-align:center; }
.kbd-shm-table th { text-align:center; color:#999; font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:0 0 8px; border-bottom:2px solid #f0f0f0; }
.kbd-shm-table td { padding:10px 0; border-bottom:1px solid #f5f5f5; vertical-align:middle; text-align:center; }
.kbd-shm-table tr:last-child td { border-bottom:none; }
.kbd-shm-meta { font-size:12px; color:#666; margin-top:14px; border-top:1px solid #f0f0f0; padding-top:10px; }
.kbd-shm-meta p { margin:4px 0; }
.kbd-shm-alert { background:#fff3cd; border:1px solid #ffc107; border-radius:6px; padding:10px 14px; font-size:13px; color:#856404; }

/* Weather grid */
.kbd-weather-section { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); padding:24px; margin-bottom:20px; }
.kbd-section-title { font-size:16px; font-weight:600; margin:0 0 4px; }
.kbd-section-sub { font-size:13px; color:#666; margin:0 0 16px; }
.kbd-weather-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .kbd-weather-grid { grid-template-columns:1fr 1fr; } }
.kbd-weather-cell { background:#f7f8fa; border:1px solid #e8e8e8; border-radius:8px; padding:14px; }
.kbd-weather-cell-label { font-size:12px; color:#888; font-weight:500; margin:0 0 6px; }
.kbd-weather-cell-value { font-size:15px; font-weight:600; margin:0; }
.kbd-weather-cell-sub { font-size:12px; color:#888; font-weight:400; }

/* METAR */
.kbd-metar-section { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); padding:24px; margin-bottom:20px; }
.kbd-metar-pre { background:#1a1a2e; color:#e0e0e0; border-radius:6px; padding:12px 16px; font-size:12px; max-height:140px; overflow:auto; margin:8px 0 0; white-space:pre-wrap; word-break:break-all; }
.kbd-metar-empty { font-size:13px; color:#888; margin:8px 0 0; }
.kbd-disclaimer { font-size:12px; color:#888; margin:16px 0 0; line-height:1.6; }
.kbd-disclaimer a { color:#015FC9; text-decoration:none; font-weight:600; }
.kbd-disclaimer a:hover { text-decoration:underline; }

/* SHM empty state */
.kbd-shm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    gap: 8px;
    text-align: center;
}
.kbd-shm-empty svg {
    opacity: 0.85;
}
.kbd-shm-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #015FC9;
    margin: 0;
}
.kbd-shm-empty-sub {
    font-size: 12px;
    color: #888;
    margin: 0;
}

/* Booking CTA */
.kbd-cta-block {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #015FC9 0%, #0147a3 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.kbd-cta-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kbd-cta-icon svg { stroke: #fff !important; }
.kbd-cta-text { flex: 1; min-width: 180px; }
.kbd-cta-title { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.kbd-cta-sub { font-size: 13px; color: rgba(255,255,255,0.8); margin: 0; }
.kbd-cta-btn {
    flex-shrink: 0;
    display: inline-block;
    background: #FF9D3D;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.kbd-cta-btn:hover { background: #e8892a; transform: translateY(-1px); }
@media(max-width:600px) {
    .kbd-cta-block { flex-direction: column; text-align: center; }
    .kbd-cta-btn { width: 100%; text-align: center; }
}