/* ============================================================
   VISA CHECKER KT - Know.Travel v7 Redesign
   Fully theme-aware: dark / light / sunset via general.css vars
   ============================================================ */

/* Visa-specific color palette */
:root {
    --visa-free:  #22c55e;
    --visa-voa:   #f59e0b;
    --visa-evisa: #3b82f6;
    --visa-eta:   #8b5cf6;
    --visa-req:   #ef4444;
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

/* ══════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════ */
.rm-breadcrumb-bar { padding: 16px 24px 0; background: var(--bg-base); }
.ap-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-tertiary); flex-wrap: wrap; }
.ap-breadcrumb a { color: var(--accent-blue); text-decoration: none; transition: color 0.15s; }
.ap-breadcrumb a:hover { color: var(--accent-blue); text-decoration: underline; }
.ap-breadcrumb .sep { opacity: 0.5; }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.vc-hero {
    text-align: center;
    padding: 16px 24px 28px;
    position: relative;
    z-index: 10;
}
.vc-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -.5px;
    line-height: 1.1;
    color: var(--text-primary);
}
.vc-hero h1 span { color: var(--accent-blue); }

/* Subtitle: visually part of the heading block, not a caption */
.vc-hero p {
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0.72;
    max-width: 620px;
    margin: 0 auto 28px;
    line-height: 1.35;
    letter-spacing: -.2px;
}

/* ── Passport selector ── */
.vc-passport-box { max-width: 460px; margin: 0 auto; position: relative; }
.vc-passport-box svg {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: var(--text-tertiary); pointer-events: none;
}
.vc-passport-box input {
    width: 100%; padding: 14px 48px 14px 50px;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    font: 15px 'Outfit', sans-serif;
    color: var(--text-primary);
    outline: none;
    transition: all .2s;
    box-shadow: var(--shadow-sm);
}
.vc-passport-box input:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-blue-muted);
}
.vc-passport-box input::placeholder { color: var(--text-tertiary); }
.vc-passport-box .pb-reset {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-elevated);
    border: none; color: var(--text-tertiary); font-size: 14px; cursor: pointer;
    display: none; align-items: center; justify-content: center; transition: all .15s;
}
.vc-passport-box .pb-reset:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.vc-passport-box.has-value .pb-reset { display: flex; }

/* ── Autocomplete dropdown ── */
.vc-passport-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 260px; overflow-y: auto; display: none; z-index: 900;
}
.vc-passport-dropdown.open { display: block; }
.pd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer; transition: background .1s; font-size: 14px;
    color: var(--text-primary);
}
.pd-item:hover, .pd-item.active { background: var(--bg-hover); }
.pd-item .pdi-flag { font-size: 20px; }
.pd-item .pdi-flag .flag-icon { width: 20px; height: 20px; vertical-align: middle; }
.dd-flag .flag-icon { width: 20px; height: 20px; vertical-align: middle; }
.pd-item .pdi-name { flex: 1; }
.pd-item .pdi-iso { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* ══════════════════════════════════════════════
   SUMMARY RINGS
   ══════════════════════════════════════════════ */
.vc-summary { display: flex; justify-content: center; gap: 28px; padding: 0 24px 28px; flex-wrap: wrap; }
.ring-stat { text-align: center; cursor: pointer; transition: transform .15s; }
.ring-stat:hover { transform: scale(1.06); }
.ring-stat.active .ring-circle {
    box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px currentColor;
}
.ring-circle {
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; font-weight: 700; margin: 0 auto 5px;
    border: 3px solid; transition: box-shadow .2s;
}
.ring-label { font-size: 11px; color: var(--text-tertiary); letter-spacing: .3px; }
.ring-free .ring-circle  { border-color: var(--visa-free);  color: var(--visa-free);  background: rgba(34,197,94,.06); }
.ring-voa .ring-circle   { border-color: var(--visa-voa);   color: var(--visa-voa);   background: rgba(245,158,11,.06); }
.ring-evisa .ring-circle { border-color: var(--visa-evisa); color: var(--visa-evisa); background: rgba(59,130,246,.06); }
.ring-eta .ring-circle   { border-color: var(--visa-eta);   color: var(--visa-eta);   background: rgba(139,92,246,.06); }
.ring-req .ring-circle   { border-color: var(--visa-req);   color: var(--visa-req);   background: rgba(239,68,68,.06); }

/* ══════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════ */
.vc-progress { max-width: 1200px; margin: 0 auto 28px; padding: 0 24px; }
.vc-progress-bar { height: 5px; border-radius: 3px; background: var(--border-default); display: flex; overflow: hidden; }
.vc-progress-bar div { height: 100%; transition: width .5s ease; }
.pb-free  { background: var(--visa-free); }
.pb-voa   { background: var(--visa-voa); }
.pb-evisa { background: var(--visa-evisa); }
.pb-eta   { background: var(--visa-eta); }
.pb-req   { background: var(--visa-req); }

/* ══════════════════════════════════════════════
   MAP SECTION
   ══════════════════════════════════════════════ */
.vc-map-section { max-width: 1200px; margin: 0 auto 28px; padding: 0 24px; position: relative; z-index: 1; }
.vc-map-container {
    position: relative; height: 420px;
    border-radius: 16px;
    border: 1px solid var(--border-default);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
#visa-map { width: 100%; height: 100%; background: #1a1a2e; }

/* Map legend — stays dark regardless of theme (overlaid on map) */
.vc-map-legend {
    position: absolute; bottom: 12px; left: 12px; z-index: 800;
    display: flex; gap: 10px; padding: 8px 14px;
    background: rgba(12,12,20,.82); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
}
.lg-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255,255,255,.6); }
.lg-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Map style switcher — always dark (on top of map) */
.vc-map-styles {
    position: absolute; top: 12px; right: 12px; z-index: 800;
    display: flex; gap: 4px; padding: 3px;
    background: rgba(12,12,20,.82); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.07); border-radius: 8px;
}
.ms-btn {
    width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: rgba(255,255,255,.55);
    cursor: pointer; transition: all .15s;
}
.ms-btn:hover { color: #eaeaf0; background: rgba(255,255,255,.08); }
.ms-btn.active { background: rgba(79,195,247,.25); color: #93d8fc; }

/* Fix tile seams */
.leaflet-tile-pane { will-change: transform; }
.leaflet-tile { outline: 1px solid transparent; }

/* Leaflet zoom controls — theme-aware */
.leaflet-control-zoom {
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}
.leaflet-control-zoom a {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    width: 30px !important; height: 30px !important;
    line-height: 30px !important; font-size: 14px !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-hover) !important; }

/* Leaflet tooltip */
.visa-tooltip {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 6px !important; padding: 4px 10px !important;
    font: 12px 'Outfit', sans-serif !important;
    box-shadow: var(--shadow-md) !important;
}
.visa-tooltip::before { border-top-color: var(--bg-elevated) !important; }

/* ─── Sticky header search ─── */
.vc-header-search {
    display: none; /* Replaced by KT site header with $show_header_search */
}
.vc-header-search.visible { opacity: 1; }
.vc-header-search.visible .vc-hs-field { pointer-events: auto; }
.vc-hs-inner {
    max-width: 1200px; margin: 0 auto; height: 64px;
    display: flex; align-items: center;
    padding: 0 320px 0 220px;
}
.vc-hs-field {
    position: relative; width: 100%; max-width: 460px; margin: 0 auto;
    display: flex; align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.vc-hs-field:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-blue-muted);
}
.vc-hs-field svg {
    width: 16px; height: 16px; margin-left: 12px;
    color: var(--text-tertiary); flex-shrink: 0;
}
.vc-hs-field input {
    width: 100%; padding: 10px 12px; border: none; outline: none;
    font-family: 'Outfit', sans-serif; font-size: 14px;
    background: transparent; color: var(--text-primary);
}
.vc-hs-field input::placeholder { color: var(--text-tertiary); }
.vc-hs-field .vc-hs-reset {
    display: none; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-right: 6px; border-radius: 50%;
    border: none; background: var(--bg-elevated); color: var(--text-secondary);
    font-size: 13px; cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.vc-hs-field .vc-hs-reset:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.vc-hs-field.has-value .vc-hs-reset { display: flex; }

/* Sticky dropdown */
.vc-hs-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 12px; margin-top: 4px;
    max-height: 260px; overflow-y: auto; display: none;
    box-shadow: var(--shadow-lg); z-index: 900;
}
.vc-hs-dropdown.open { display: block; }
.vc-hs-dropdown .dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; transition: background .12s;
    font-size: 14px; color: var(--text-primary);
}
.vc-hs-dropdown .dd-item:hover { background: var(--bg-hover); }
.vc-hs-dropdown .dd-iso {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-tertiary); margin-left: auto;
}

/* ══════════════════════════════════════════════
   INFO BLOCK (passport summary text + 3 stat tiles)
   ══════════════════════════════════════════════ */
.vc-info { max-width: 820px; margin: 0 auto 28px; padding: 0 24px; }

/* "With ___ passport you can travel to..." */
.vi-text { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 20px; }
.vi-text strong { color: var(--text-primary); font-weight: 600; }

/* 3 stat tiles */
.vi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.vi-stat {
    padding: 16px 20px; border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
}
.vi-stat-num { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.vi-stat-label { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.vi-stat-free .vi-stat-num  { color: var(--visa-free); }
.vi-stat-online .vi-stat-num { color: var(--accent-blue); }
.vi-stat-req .vi-stat-num   { color: var(--visa-req); }

/* Notable countries chips */
.vi-notable { margin-top: 4px; }
.vi-notable-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.vi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vi-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
    background: var(--tint-green-bg);
    color: var(--status-success);
    border: 1px solid var(--tint-green-border);
}
.vi-chip .flag-icon { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════
   FILTER TABS
   ══════════════════════════════════════════════ */
.vc-tabs { display: flex; justify-content: center; gap: 6px; padding: 0 24px 20px; flex-wrap: wrap; }
.vc-tab {
    padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    cursor: pointer; transition: all .2s;
}
.vc-tab:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--bg-elevated);
}
.vc-tab.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    font-weight: 600;
}

/* ── Country search within grid ── */
.vc-grid-search { max-width: 1200px; margin: 0 auto 16px; padding: 0 24px; }
.vc-grid-search-field { position: relative; max-width: 360px; }
.vc-grid-search-field svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-tertiary); pointer-events: none;
}
.vc-grid-search-field input {
    width: 100%; padding: 9px 14px 9px 40px;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    font: 13px 'Outfit', sans-serif;
    color: var(--text-primary); outline: none; transition: all .2s;
}
.vc-grid-search-field input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-blue-muted);
}
.vc-grid-search-field input::placeholder { color: var(--text-tertiary); }

/* ══════════════════════════════════════════════
   CARDS GRID
   ══════════════════════════════════════════════ */
.vc-grid-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.vc-grid-empty { text-align: center; padding: 48px 24px; color: var(--text-tertiary); font-size: 14px; }

/* Country cards — transparent, accent on hover */
.vc-card {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 12px; padding: 14px 16px;
    cursor: pointer; transition: all .2s; position: relative;
    display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.vc-card:hover {
    border-color: var(--accent-blue);
    background: var(--accent-blue-muted);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(79,195,247,.1);
}
.vc-card-top { display: flex; align-items: center; gap: 10px; }
.vc-card-flag { font-size: 28px; line-height: 1; }
.vc-card-flag .flag-icon { width: 28px; height: 28px; vertical-align: middle; }
.vc-card-info { flex: 1; min-width: 0; }
.vc-card-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.vc-card-iso { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

.vc-card-badge {
    position: absolute; top: 0; right: 0;
    padding: 5px 12px 5px 14px;
    border-radius: 0 12px 0 10px;
    font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .3px;
}
.cbg-visa_free       { background: var(--visa-free); }
.cbg-visa_on_arrival { background: var(--visa-voa); }
.cbg-evisa           { background: var(--visa-evisa); }
.cbg-eta             { background: var(--visa-eta); }
.cbg-visa_required   { background: var(--visa-req); }

.vc-card-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.vc-card-days { font-weight: 600; color: var(--text-primary); }
.vc-card-continent { color: var(--text-tertiary); }

/* ══════════════════════════════════════════════
   DETAIL MODAL
   ══════════════════════════════════════════════ */
.vc-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    z-index: 2000; display: none; opacity: 0; transition: opacity .25s;
}
.vc-modal-overlay.open { display: block; opacity: 1; }
.vc-modal-content {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2001;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 90%; max-width: 460px; max-height: 85vh; overflow-y: auto;
    display: none; padding: 28px;
}
.vc-modal-content.open { display: block; }
.vc-modal-close {
    position: absolute; top: 12px; right: 12px;
    background: var(--bg-hover);
    border: none; color: var(--text-secondary);
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.vc-modal-close:hover { color: var(--text-primary); background: var(--border-default); }

/* Modal header */
.mh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 36px; }
.mh .flag-icon { width: 32px; height: 32px; flex-shrink: 0; }
.mh-name { font-size: 20px; font-weight: 700; color: var(--text-primary); }

/* Badge bar */
.mbb { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; margin-bottom: 18px; }
.mbb-badge { padding: 5px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.mbb-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.3; }
.mbb-free  { background: rgba(34,197,94,.08); }   .mbb-free .mbb-badge  { background: var(--visa-free); }
.mbb-voa   { background: rgba(245,158,11,.08); }  .mbb-voa .mbb-badge   { background: var(--visa-voa); }
.mbb-evisa { background: rgba(59,130,246,.08); }  .mbb-evisa .mbb-badge { background: var(--visa-evisa); }
.mbb-eta   { background: rgba(139,92,246,.08); }  .mbb-eta .mbb-badge   { background: var(--visa-eta); }
.mbb-req   { background: rgba(239,68,68,.08); }   .mbb-req .mbb-badge   { background: var(--visa-req); }

/* Modal rows */
.mr { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; gap: 12px; }
.mr:last-child { border-bottom: none; }
.mr-label { color: var(--text-secondary); white-space: nowrap; }
.mr-value { font-weight: 600; text-align: right; color: var(--text-primary); }
.mr-value a { color: var(--accent-blue); text-decoration: none; }
.mr-value a:hover { text-decoration: underline; }
.mr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Country info section in modal */
.mi-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-tertiary); margin: 18px 0 10px; padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.mi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 18px; }
.mi-item .mi-label { font-size: 10px; color: var(--text-tertiary); margin-bottom: 1px; }
.mi-item .mi-val { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* CTA buttons */
.m-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 22px; border-radius: 8px;
    background: var(--accent-blue); color: #fff;
    font: 600 14px 'Outfit', sans-serif; text-decoration: none;
    border: none; cursor: pointer; transition: all .2s;
}
.m-cta:hover { opacity: .85; transform: translateY(-1px); text-decoration: none; color: #fff; }
.m-cta-alt { background: var(--accent-purple); }
.mr-note { background: var(--tint-orange-bg); border-radius: 8px; padding: 10px 12px; margin: 6px 0; }
.mr-note .mr-label { color: var(--accent-orange); font-weight: 600; }
.mr-note .mr-value { font-weight: 400; font-size: 13px; color: var(--text-secondary); text-align: right; }

/* ══════════════════════════════════════════════
   LOADING / ERROR
   ══════════════════════════════════════════════ */
.vc-loader { text-align: center; padding: 40px 24px; color: var(--text-tertiary); font-size: 14px; display: none; }
.vc-loader .vc-spinner,
.vc-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: vc-spin .7s linear infinite; margin: 0 auto 10px;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

.vc-error {
    text-align: center; padding: 20px; color: var(--status-error); font-size: 14px;
    background: rgba(239,68,68,.06); border-radius: 8px; margin: 0 24px 16px; display: none;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .vc-header-search { display: none; }
    .rm-breadcrumb-bar { padding: 12px 16px 0; }
    .vc-hero { padding: 12px 16px 24px; }
    .vc-hero h1 { font-size: 28px; }
    .vc-hero p  { font-size: 15px; font-weight: 500; }
    .vc-summary { gap: 14px; padding: 0 16px 20px; }
    .ring-circle { width: 54px; height: 54px; font-size: 17px; }
    .vc-map-container { height: 300px; border-radius: 12px; }
    .vc-map-legend { gap: 6px; padding: 6px 10px; }
    .lg-item { font-size: 9px; }
    .vc-grid { grid-template-columns: 1fr 1fr; }
    .vc-tabs { gap: 4px; padding: 0 16px 16px; }
    .vc-tab { padding: 6px 12px; font-size: 12px; }
    .vc-info { padding: 0 16px; }
    .vi-stats { grid-template-columns: 1fr; gap: 10px; }
    .vi-stat-num { font-size: 22px; }
}
@media (max-width: 480px) {
    .vc-grid { grid-template-columns: 1fr; }
    .ring-circle { width: 48px; height: 48px; font-size: 15px; }
    .vc-map-container { height: 240px; }
    .vc-map-styles { top: 8px; right: 8px; }
}

/* ── Leaflet attribution ── */
.leaflet-control-attribution {
    background: transparent !important;
    color: rgba(255,255,255,0.15) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 1px 4px !important;
}
.leaflet-control-attribution a {
    color: rgba(255,255,255,0.2) !important;
    text-decoration: none !important;
}
[data-theme="light"] .leaflet-control-attribution { color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .leaflet-control-attribution a { color: rgba(0,0,0,0.15) !important; }


.kt-fullwidth-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px 48px;
    box-sizing: border-box;
}
.kt-tips-block,
.kt-steps-block,
.kt-faq-block {
    margin-top: 32px;
}
.kt-tips-heading {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 14px;
}
.kt-tips-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.kt-tip-card {
    background: var(--bg-surface, var(--bg-primary, #fff));
    border: 0.5px solid var(--border-tertiary);
    border-radius: 12px;
    padding: 16px 14px;
}
.kt-tip-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.kt-tip-icon svg { width: 18px; height: 18px; }
.kt-tip-icon--blue  { background: #E6F1FB; color: #185FA5; }
.kt-tip-icon--teal  { background: #E1F5EE; color: #0F6E56; }
.kt-tip-icon--amber { background: #FAEEDA; color: #854F0B; }
.kt-tip-icon--coral { background: #FAECE7; color: #993C1D; }
[data-theme="dark"] .kt-tip-icon--blue  { background: #0C447C; color: #85B7EB; }
[data-theme="dark"] .kt-tip-icon--teal  { background: #085041; color: #5DCAA5; }
[data-theme="dark"] .kt-tip-icon--amber { background: #633806; color: #EF9F27; }
[data-theme="dark"] .kt-tip-icon--coral { background: #712B13; color: #F0997B; }
[data-theme="dark"] .kt-tip-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.kt-tip-card h3 {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 5px;
}
.kt-tip-card p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}


.kt-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--bg-surface, var(--bg-primary, #fff));
    border: 0.5px solid var(--border-tertiary);
    border-radius: 12px;
    overflow: hidden;
}
.kt-step { padding: 20px 18px; }
.kt-step + .kt-step { border-left: 0.5px solid var(--border-tertiary); }
.kt-step-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--border-secondary);
    line-height: 1;
    margin-bottom: 8px;
}
.kt-step h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 5px;
}
.kt-step p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
[data-theme="dark"] .kt-steps-grid {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .kt-step + .kt-step {
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .kt-step-num { color: rgba(255, 255, 255, 0.2); }


.kt-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.kt-faq-item {
    background: var(--bg-surface, var(--bg-primary, #fff));
    border: 0.5px solid var(--border-tertiary);
    border-radius: 12px;
    padding: 16px 16px 14px;
}
[data-theme="dark"] .kt-faq-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.kt-faq-q {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.4;
}
.kt-faq-a {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}


@media (max-width: 767px) {
    .kt-fullwidth-wrap { padding: 0 16px 32px; }
    .kt-tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kt-steps-grid { grid-template-columns: 1fr; }
    .kt-step + .kt-step {
        border-left: none;
        border-top: 0.5px solid var(--border-tertiary);
    }
    [data-theme="dark"] .kt-step + .kt-step { border-color: rgba(255,255,255,0.1); }
    .kt-faq-list { grid-template-columns: 1fr; }
}