/**
 * fp-budget-calculator.css
 * Part of SouthKorea theme — extracted from fp-budget-calculator.php
 * @package SouthKorea
 */

/* ════════════════════════════════════════════════
   BUDGET CALCULATOR
════════════════════════════════════════════════ */
.sk-budget {
    padding: 80px 48px;
    position: relative;
    background: linear-gradient(180deg, rgba(0,200,255,.025) 0%, transparent 60%);
}
.sk-budget::before {
    content: '';
    position: absolute; top: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,200,255,.15), transparent);
}
.sk-budget-inner  { max-width: 1400px; margin: 0 auto; }
.sk-budget-header { text-align: center; margin-bottom: 56px; }
.sk-budget-subtitle {
    font-size: 14px; color: rgba(255,255,255,.4);
    font-family: 'DM Sans', sans-serif; font-weight: 300; margin-top: 10px;
}
.sk-budget-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Controls panel ──────────────────────────────────────────── */
.sk-budget-controls {
    display: flex; flex-direction: column; gap: 20px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    padding: 24px 20px;
    position: sticky;
    top: 24px;
}
.sk-bc-group  { display: flex; flex-direction: column; gap: 10px; }
.sk-bc-label  {
    font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
    color: rgba(255,255,255,.4); font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'DM Sans', sans-serif;
}
.sk-bc-val {
    font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: #00c8ff; font-family: 'DM Sans', sans-serif;
}
.sk-bc-select-wrap { position: relative; }
.sk-bc-select {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    padding: 11px 36px 11px 14px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    appearance: none; cursor: pointer;
    transition: border-color .2s;
    font-weight: 500;
}
.sk-bc-select option { background: #0d1117; color: #fff; }
.sk-bc-select:focus  { outline: none; border-color: rgba(0,200,255,.5); }
.sk-bc-arrow {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.35); pointer-events: none;
}
.sk-bc-range {
    width: 100%; accent-color: #00c8ff; cursor: pointer;
    height: 4px; border-radius: 2px;
}
.sk-bc-range-labels {
    display: flex; justify-content: space-between;
    font-size: 10px; color: rgba(255,255,255,.25); font-family: 'DM Sans', sans-serif;
}

/* Pills */
.sk-bc-pills { display: flex; gap: 6px; }
.sk-bc-pill {
    flex: 1; padding: 9px 4px; font-size: 11px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.4); cursor: pointer; transition: all .2s;
    font-family: 'DM Sans', sans-serif; display: flex; align-items: center;
    justify-content: center; gap: 4px;
}
.sk-pill-icon { font-size: 13px; }
.sk-bc-pill--active {
    background: rgba(0,200,255,.08);
    border-color: rgba(0,200,255,.35);
    color: #00c8ff;
}
.sk-bc-pill:hover:not(.sk-bc-pill--active) {
    border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.65);
}
.sk-bc-style-hint {
    font-size: 11px; color: rgba(255,255,255,.28);
    font-family: 'DM Sans', sans-serif; line-height: 1.5;
    font-style: italic; min-height: 16px;
    transition: opacity .25s;
}

/* Flight CTA box */
.sk-bc-flight-cta {
    background: rgba(200,169,110,.06);
    border: 1px solid rgba(200,169,110,.18);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 4px;
}
.sk-bc-flight-label {
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(200,169,110,.8); font-weight: 600; font-family: 'DM Sans', sans-serif;
    display: flex; align-items: center; gap: 6px;
}
.sk-bc-flight-btn {
    display: block; width: 100%;
    background: rgba(200,169,110,.12); border: 1px solid rgba(200,169,110,.3);
    color: #c8a96e; text-align: center; text-decoration: none;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    font-family: 'DM Sans', sans-serif; padding: 10px;
    transition: background .2s, border-color .2s;
}
.sk-bc-flight-btn:hover { background: rgba(200,169,110,.2); border-color: rgba(200,169,110,.5); }
.sk-bc-flight-note {
    font-size: 10px; color: rgba(255,255,255,.2);
    font-family: 'DM Sans', sans-serif; text-align: center;
}

/* ── Total card ──────────────────────────────────────────────── */
.sk-budget-results { display: flex; flex-direction: column; gap: 16px; }
.sk-budget-total-card {
    background: rgba(0,200,255,.05);
    border: 1px solid rgba(0,200,255,.18);
    padding: 24px 28px;
}
.sk-bt-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sk-bt-eyebrow {
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(0,200,255,.65); font-weight: 600; margin-bottom: 8px;
    font-family: 'DM Sans', sans-serif;
}
.sk-bt-amount {
    font-family: 'Bebas Neue', sans-serif; font-size: 60px; letter-spacing: 3px;
    color: #fff; line-height: 1;
    transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.sk-bt-amount-secondary {
    font-size: 14px; font-weight: 300; color: rgba(255,255,255,.4);
    margin-top: 4px; font-family: 'DM Sans', sans-serif;
    transition: opacity .3s;
}
.sk-bt-badge {
    padding: 4px 12px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    background: rgba(0,200,255,.1); border: 1px solid rgba(0,200,255,.25);
    color: rgba(0,200,255,.9); font-family: 'DM Sans', sans-serif;
    white-space: nowrap; align-self: flex-start;
}
.sk-bt-note {
    font-size: 11px; color: rgba(255,255,255,.3); margin-top: 14px;
    font-family: 'DM Sans', sans-serif; font-weight: 300;
    border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px;
}

/* ── Breakdown rows ──────────────────────────────────────────── */
.sk-budget-breakdown {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
}
.sk-bb-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .2s;
}
.sk-bb-row:last-child { border-bottom: none; }
.sk-bb-row:hover { background: rgba(255,255,255,.02); }
.sk-bb-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sk-bb-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.sk-bb-info { min-width: 0; }
.sk-bb-label {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8);
    font-family: 'DM Sans', sans-serif;
}
.sk-bb-sub {
    font-size: 10px; color: rgba(255,255,255,.3); margin-top: 2px;
    font-family: 'DM Sans', sans-serif; letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-bb-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.sk-bb-bar-wrap {
    width: 80px; height: 3px; background: rgba(255,255,255,.06);
    border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.sk-bb-bar {
    height: 100%; border-radius: 2px; width: 0%;
    transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.sk-bb-bar--hotel    { background: linear-gradient(90deg, #00c8ff, #0090cc); }
.sk-bb-bar--meals    { background: linear-gradient(90deg, #c8a96e, #e8c98a); }
.sk-bb-bar--transport{ background: linear-gradient(90deg, #7b5fff, #a080ff); }
.sk-bb-bar--activity { background: linear-gradient(90deg, #5fffb0, #3dcc90); }
.sk-bb-amount {
    font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9);
    font-family: 'DM Sans', sans-serif; min-width: 52px; text-align: right;
}

/* Inline CTAs per row */
.sk-bb-cta {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    font-family: 'DM Sans', sans-serif; text-decoration: none;
    padding: 5px 10px; white-space: nowrap;
    border: 1px solid; transition: all .2s;
}
.sk-bb-cta--hotel {
    color: #00c8ff; border-color: rgba(0,200,255,.25);
    background: rgba(0,200,255,.06);
}
.sk-bb-cta--hotel:hover { background: rgba(0,200,255,.14); border-color: rgba(0,200,255,.5); }
.sk-bb-cta--food {
    color: #c8a96e; border-color: rgba(200,169,110,.25);
    background: rgba(200,169,110,.06);
}
.sk-bb-cta--food:hover { background: rgba(200,169,110,.14); border-color: rgba(200,169,110,.5); }
.sk-bb-cta--trans {
    color: #a080ff; border-color: rgba(160,128,255,.25);
    background: rgba(160,128,255,.06);
}
.sk-bb-cta--trans:hover { background: rgba(160,128,255,.14); border-color: rgba(160,128,255,.5); }
.sk-bb-cta--act {
    color: #5fffb0; border-color: rgba(95,255,176,.25);
    background: rgba(95,255,176,.06);
}
.sk-bb-cta--act:hover { background: rgba(95,255,176,.14); border-color: rgba(95,255,176,.5); }

/* ── Tip bar ─────────────────────────────────────────────────── */
.sk-bc-tip {
    background: rgba(255,255,255,.025);
    border-left: 2px solid rgba(0,200,255,.35);
    padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start;
    transition: border-color .3s;
}
.sk-bc-tip-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
#bc-tip-text {
    font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.6;
    font-family: 'DM Sans', sans-serif; font-weight: 300; font-style: italic;
    transition: opacity .2s;
}

/* ── Book all CTA row ────────────────────────────────────────── */
.sk-bc-book-all {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.sk-bc-book-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 16px 12px;
    text-decoration: none; text-align: center;
    border: 1px solid; font-family: 'DM Sans', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    transition: all .25s; min-height: 70px;
}
.sk-bc-book-btn svg { margin-bottom: 2px; }
.sk-bc-book-sub {
    font-size: 9px; font-weight: 400; letter-spacing: .5px; text-transform: none;
    opacity: .65; font-style: normal; margin-top: 2px;
}
.sk-bc-book-btn--primary {
    background: rgba(0,200,255,.08); border-color: rgba(0,200,255,.3);
    color: #00c8ff;
}
.sk-bc-book-btn--primary:hover {
    background: rgba(0,200,255,.16); border-color: rgba(0,200,255,.6);
    transform: translateY(-2px);
}
.sk-bc-book-btn--secondary {
    background: rgba(255,124,42,.08); border-color: rgba(255,124,42,.3);
    color: #ff7c2a;
}
.sk-bc-book-btn--secondary:hover {
    background: rgba(255,124,42,.16); border-color: rgba(255,124,42,.6);
    transform: translateY(-2px);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .sk-budget-layout { grid-template-columns: 1fr; }
    .sk-budget-controls { position: static; }
    .sk-bc-book-all { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .sk-budget { padding: 48px 20px; }
    .sk-bt-amount { font-size: 44px; }
    .sk-bb-bar-wrap { display: none; }
    .sk-bb-right { gap: 8px; }
    .sk-bc-book-all { grid-template-columns: 1fr; }
    .sk-bb-cta { display: none; } /* Hide per-row CTAs on small screens — book-all buttons take over */
    .sk-bc-book-all { display: flex; flex-direction: column; }
}