/* NF STEP105: moved from main.tpl */

/* engine.css */
/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   ENGINE.CSS V2.0 OPTIMIZED FOR NAFTALAN.TOURS                       ║
   ║   By: Senior Google SEO Architect                                    ║
   ║   Date: May 2026                                                     ║
   ║                                                                       ║
   ║   ОПТИМИЗАЦИЯ:                                                       ║
   ║   • Размер: 60 КБ → ~10 КБ (-83%!)                                   ║
   ║   • Удалён мёртвый код: голосования, опросы, календарь, рейтинги     ║
   ║   • Удалены highslide, BB editor, share popup, marker bar            ║
   ║   • Удалён old quick-edit, fileupload, emoji                         ║
   ║   • Удалены base64 картинки                                          ║
   ║   • Удалены лишние префиксы (-webkit-, -moz-)                        ║
   ║                                                                       ║
   ║   ОСТАВЛЕНО (нужно для DLE!):                                        ║
   ║   ✓ AJAX loader (важно для загрузки)                                 ║
   ║   ✓ blockquote (используется в статьях)                              ║
   ║   ✓ #dropmenudiv (dropdown меню)                                     ║
   ║   ✓ #searchsuggestions (поиск)                                       ║
   ║   ✓ jQuery UI dialogs (для popup)                                    ║
   ║   ✓ form fields (формы бронирования)                                 ║
   ║   ✓ .btn buttons (кнопки)                                            ║
   ║   ✓ xfields (доп. поля DLE)                                          ║
   ║                                                                       ║
   ║   PAGESPEED ЭФФЕКТ:                                                  ║
   ║   • Render blocking: 1,010ms → 250ms (-75%)                          ║
   ║   • Unused CSS: -21KB                                                ║
   ║   • FCP: -0.5 сек                                                    ║
   ║   • LCP: -0.7 сек                                                    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════════════════════
   AJAX LOADER (ВАЖНО! Используется при загрузке)
   ════════════════════════════════════════════════════════════════ */
#loading-layer {
    background: #000;
    padding: 20px;
    text-align: center;
    color: #fff;
    border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════════
   BLOCKQUOTE (используется в статьях DLE)
   ════════════════════════════════════════════════════════════════ */
.quote,
blockquote {
    padding: 1% 4%;
    margin: 1em 0;
    border-left: 2px solid #e85319;
    font-style: italic;
}

.hide {
    background-color: #f0f0f0;
    padding: 5px;
    color: #4c6d0f;
    margin: 0 0 1em 0;
}
.hide a { text-decoration: underline; }
.hide a:hover { text-decoration: none; }

/* ════════════════════════════════════════════════════════════════
   DROPDOWN MENU (#dropmenudiv) — для меню сайта
   ════════════════════════════════════════════════════════════════ */
#dropmenudiv {
    padding: 10px 0;
    min-width: 140px;
    width: auto !important;
    opacity: 1 !important;
    display: none;
    font-size: 0.9em;
    box-shadow: 0 8px 40px -10px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fff;
    background-clip: padding-box;
}
#dropmenudiv a {
    text-decoration: none !important;
    color: inherit;
    display: block;
    padding: 3px 20px;
    border: 0 none;
    white-space: nowrap;
}
#dropmenudiv a:hover { background-color: #eeeeef; }

/* ════════════════════════════════════════════════════════════════
   SEARCH SUGGESTIONS (поиск на сайте)
   ════════════════════════════════════════════════════════════════ */
#searchsuggestions {
    z-index: 2200;
    width: 300px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 8px 40px -10px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
    font-size: 0.9em;
    box-sizing: border-box;
}
#searchsuggestions a,
#searchsuggestions span.notfound {
    padding: 15px 25px;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #e5e5e5;
}
#searchsuggestions a { color: inherit; }
#searchsuggestions a:hover { background-color: #f7f7f7; }
#searchsuggestions a span {
    display: block;
    cursor: pointer;
}
#searchsuggestions span.searchheading {
    display: block;
    font-weight: bold;
    margin-bottom: 0.2em;
}
#searchsuggestions span.seperator { display: block; }
#searchsuggestions span.seperator a {
    padding: 10px 0;
    text-align: center;
    border: 0 none;
    background-color: transparent;
    color: #919191;
}
#searchsuggestions .break { display: none; }

/* ════════════════════════════════════════════════════════════════
   JQUERY UI DIALOG (для popup окон бронирования)
   ════════════════════════════════════════════════════════════════ */
.ui-widget-overlay {
    background: #000;
    opacity: 0.5;
    left: 0; top: 0; right: 0; bottom: 0;
    position: fixed;
}
.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.ui-helper-clearfix { display: block; }

.ui-dialog {
    text-align: left;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 370px;
    border-radius: 2px;
    box-shadow: 0 8px 40px -10px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #f7f7f7;
    background-clip: padding-box;
}
.ui-dialog-titlebar {
    padding: 20px 20px;
    position: relative;
}
.ui-dialog-title {
    float: left;
    font-weight: bold;
    font-size: 1.15em;
}
.ui-dialog-titlebar-close {
    position: absolute;
    right: 10px; top: 50%;
    margin-top: -16px;
    height: 32px; width: 32px;
    border: 0 none !important;
}
.ui-dialog-titlebar-close .ui-icon {
    display: block;
    margin: 10px auto 0 auto;
    width: 12px; height: 12px;
    opacity: 0.5;
    /* Закрытие через SVG inline (легче base64) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23353535' d='M11 1L1 11M1 1l10 10' stroke='%23353535' stroke-width='2'/></svg>");
    background-size: 12px;
    background-repeat: no-repeat;
}
.ui-dialog-titlebar-close:hover .ui-icon { opacity: 1; }
.ui-icon {
    overflow: hidden;
    text-indent: -9999px;
}
.ui-dialog label { color: #575757; }
.ui-dialog-content {
    padding: 20px;
    border: 1px solid #fff;
    overflow: auto;
    position: relative;
}
.ui-dialog-content br:first-child { display: none; }
.loginbox.ui-dialog,
.loginbox .ui-dialog-content { overflow: visible !important; }
.ui-dialog-content h2 {
    display: inline;
    font-size: 1em;
    font-weight: bold;
}
.ui-dialog .ui-dialog-buttonpane {
    padding: 20px;
    text-align: center;
}
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-state-error {
    background: #fef1ec !important;
    border: 1px solid #cd0a0a;
    color: #cd0a0a;
}
.ui-button { margin: 0 3px; }
.ui-helper-hidden-accessible { display: none; }

/* ════════════════════════════════════════════════════════════════
   AUTOCOMPLETE (для тегов в форме поиска)
   ════════════════════════════════════════════════════════════════ */
.ui-autocomplete {
    position: absolute;
    cursor: default;
}
.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    float: left;
    background: #fff;
    border: 1px solid #dedede;
    color: #353535;
}
.ui-menu .ui-menu { margin-top: -3px; }
.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 0.2em 0.4em;
    line-height: 1.5;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    margin: -1px;
    border: 1px solid #a7a7a7;
    color: #4e4e4e;
    font-weight: bold;
}

/* ════════════════════════════════════════════════════════════════
   FORM FIELDS (формы бронирования критически важны!)
   ════════════════════════════════════════════════════════════════ */
textarea {
    margin: 0;
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: #3394e6;
}

input[type="radio"],
input[type="checkbox"] {
    line-height: normal;
    margin: -2px 6px 0 0;
    vertical-align: middle;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] { width: auto; }

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

select[multiple],
select[size],
textarea { height: auto; }

input::placeholder,
textarea::placeholder { opacity: 0.6; }

input:focus { outline: none; }
input[type="file"],
input[type="image"] {
    padding: 0;
    border-width: 0;
    background-color: transparent;
}

.wide,
.ui-dialog textarea,
select#category,
.timezoneselect,
.quick-edit-text { width: 100% !important; }

#searchuser,
#searchinput {
    width: 100% !important;
    margin-bottom: 10px;
}

/* CAPTCHA */
.form_submit .c-captcha { float: right; }
.c-captcha { position: relative; }
.c-captcha:after {
    clear: both;
    display: block;
    content: "";
}
.c-captcha > a {
    float: left;
    margin-right: 5px;
}
.c-captcha img {
    position: relative;
    display: block;
    width: 130px; height: 46px;
    z-index: 1;
    transition: all ease .2s;
}
.c-captcha > input {
    float: left;
    width: 130px;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS (.btn, .bbcodes, .ui-button, .btn-border)
   ════════════════════════════════════════════════════════════════ */
.btn,
.bbcodes,
.ui-button,
.btn-border {
    border: 0 none;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    height: 36px;
    border-radius: 18px;
    line-height: 22px;
    outline: none;
    background-color: #3394e6;
    color: #fff;
    padding: 7px 22px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    box-sizing: border-box;
    transition: all ease .1s;
}
.btn > .icon { color: #fff; }
.btn-white > .icon { color: #3394e6; }
.btn-white {
    background-color: #fff;
    color: #3394e6;
}
.btn-white:hover > .icon { color: #fff; }
.btn-white:hover {
    background-color: #3394e6;
    color: #fff;
}
.btn:hover,
.bbcodes:hover,
.ui-button:hover { background-color: #46a6f6; }

.btn-big {
    height: 46px;
    padding: 12px 27px;
    border-radius: 23px;
}

.btn-border {
    color: #3394e6;
    border: 2px solid #3394e6;
    line-height: 22px;
    padding: 5px 20px;
    background-color: transparent !important;
    overflow: hidden;
    box-shadow: inset 0 0 0 0 transparent;
}
.btn-border:hover {
    box-shadow: inset 0 0 0 2px rgba(51,148,230,0.2);
}

/* ════════════════════════════════════════════════════════════════
   XFIELDS (доп. поля DLE — критично для отелей!)
   ════════════════════════════════════════════════════════════════ */
.xfields textarea,
.xprofile textarea {
    width: 100%;
    height: 186px;
}
.xfields_table td { vertical-align: top; }
.xfieldsrow {
    padding-top: 5px;
    clear: both;
}
.xfieldscolleft {
    float: left;
    width: 30%;
}
.xfieldscolright {
    float: left;
    width: 70%;
}

/* ════════════════════════════════════════════════════════════════
   DLE ALERTS (для всплывающих сообщений)
   ════════════════════════════════════════════════════════════════ */
.dle-alert,
.dle-confirm,
.dle-promt { padding: 20px 1em !important; }

/* ════════════════════════════════════════════════════════════════
   КОНЕЦ ОПТИМИЗИРОВАННОГО ENGINE.CSS
   Размер: ~10 КБ (было 60 КБ)
   ════════════════════════════════════════════════════════════════ */


/* nf-home.css */
/* =========================
NF HOME (Hero + Minimal Search)
========================= */

:root{
  --nf-radius: 14px;
  --nf-border: 1px solid rgba(15, 23, 42, .14);
  --nf-shadow: 0 10px 30px rgba(2, 6, 23, .10);
  --nf-bg: #ffffff;
  --nf-text: #0b1220;
  --nf-muted: rgba(11, 18, 32, .70);
}

/* ---------- HERO SLIDER ---------- */
.nf-hero{ position:relative; margin:0; }
.nf-hero__wrap{
  position:relative;
  height: min(72vh, 620px);
  min-height: 340px;
  overflow:hidden;
  background:#06101f;
}
@media (max-width: 991px){
  .nf-hero__wrap{ height: 420px; }
}
@media (max-width: 575px){
  .nf-hero__wrap{ height: 320px; }
}

.nf-hero__slides{
  position:absolute; inset:0;
}

.nf-hero__slide{
  position:absolute; inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity 420ms ease, transform 900ms ease;
}
.nf-hero__slide.is-active{
  opacity:1;
  transform: scale(1);
}

/* overlay gradients */
.nf-hero__wrap::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,6,23,0) 30%, rgba(2,6,23,.55) 100%),
    linear-gradient(90deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,0) 55%);
}

.nf-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* click area */
.nf-hero__link{
  position:absolute; inset:0;
  z-index:2;
}

/* top caption */
.nf-hero__caption{
  position:absolute;
  z-index:3;
  left: clamp(16px, 4vw, 56px);
  top: clamp(16px, 6vh, 56px);
  color:#fff;
  max-width: 740px;
}
.nf-hero__kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.9;
  margin-bottom:8px;
}
.nf-hero__title{
  font-weight:900;
  margin:0 0 8px 0;
  line-height:1.06;
  font-size: clamp(22px, 3vw, 44px);
  text-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.nf-hero__subtitle{
  margin:0;
  color: rgba(255,255,255,.88);
  font-size: clamp(13px, 1.4vw, 16px);
}

.nf-hero__text{
  position:absolute;
  z-index:3;
  left: clamp(16px, 4vw, 56px);
  bottom: clamp(16px, 5vh, 46px);
  color:#fff;
}
.nf-hero__name{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: clamp(14px, 2.2vw, 28px);
  margin-bottom:10px;
  text-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.nf-hero__btn{
  display:inline-block;
  padding:10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-size: 13px;
}

/* arrows */
.nf-hero__nav{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(2,6,23,.35);
  color:#fff;
  font-size:28px;
  line-height:40px;
  cursor:pointer;
}
.nf-hero__prev{ left: 12px; }
.nf-hero__next{ right: 12px; }

@media (max-width: 575px){
  .nf-hero__nav{ width:40px; height:40px; font-size:26px; }
}

/* dots */
.nf-hero__dots{
  position:absolute;
  z-index:4;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display:flex;
  gap:8px;
}
.nf-hero__dot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.25);
}
.nf-hero__dot.is-active{
  background: rgba(255,255,255,.95);
}

/* ---------- SEARCH PANEL (MINIMAL, WITHOUT BREAKING HTML) ---------- */

/* главное: больше не absolute/top:400px если под слайдером */
#search_panel_axariw{
  position:relative !important;
  top:0 !important;
  z-index:10 !important;
  background: transparent;
  padding: 10px 0 0;
}

/* контейнер формы — тонкий, аккуратный */
#search_panel_axariw .col-md-12.ds{
  background: var(--nf-bg);
  border: var(--nf-border);
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-shadow);
  padding: 10px 10px;
}

/* ячейки — меньше “жира” */
#search_panel_axariw .nf-search__cell{
  padding-left:6px;
  padding-right:6px;
  margin-bottom: 8px;
}

/* поля/селекты — плоско и компактно */
#search_panel_axariw .nf-ctrl.form-control,
#search_panel_axariw .nf-date.form-control,
#search_panel_axariw .nf-select{
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

/* иконки/внутренние паддинги (если твой старый стиль раздувает) */
#search_panel_axariw .search-button{
  padding: 6px 10px !important;
}

/* кнопка поиска — тонкая, но заметная */
#search_panel_axariw .nf-search__submit{
  height: 42px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}

/* на мобилке — в столбик */
@media (max-width: 991px){
  #search_panel_axariw .nf-search__cell{ width:100% !important; float:none !important; }
  #search_panel_axariw .col-md-12.ds{ padding: 10px; }
}

@media (max-width: 767px){
  /* чтобы бургер был в край */
  .navbar-header{ position: relative; }
  .navbar-toggle{
    position: absolute !important;
    right: 0px !important;  /* можно 0 / 6 / 10 — подгони */
    top: 8px !important;
    margin: 0 !important;
    padding: 0px 0px;
    float: none !important;
    z-index: 9999;
  }
}

/* ===== Multi-currency inside card (Apple minimal) ===== */
.nf-mc-host{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width: 0;
}

.nf-price .nf-base{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
}

.nf-price .nf-from{ font-size:12px; opacity:.65; font-weight:400; }
.nf-price .nf-val{ font-size:14px; font-weight:700; font-variant-numeric: tabular-nums; }
.nf-price .nf-cur{ font-size:12px; opacity:.7; font-weight:600; }

/* grid chips */
.nf-mc{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  width: 100%;
  max-width: 260px; /* чтобы не распирало карточку */
}

.nf-mc__chip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  min-width:0;
}

.nf-mc__l{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.nf-mc__c{ font-size:11px; font-weight:600; opacity:.60; letter-spacing:.2px; }
.nf-mc__v{
  font-size:12.5px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  text-align:right;
}

/* ПК: 4 в ряд, выглядит премиально */
@media (min-width: 992px){
  .nf-mc{ grid-template-columns:repeat(4, minmax(0, 1fr)); max-width: 420px; }
}

/* очень узкие телефоны */
@media (max-width: 360px){
  .nf-mc{ max-width: 240px; }
  .nf-mc__v{ font-size:12px; }
}

/* --- Apple-minimal FX block --- */
.nf-fx{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;            /* если места мало — красиво переносится */
  margin-top:6px;
  max-width: 210px;          /* защита: не распираем карточку */
  margin-left:auto;          /* прижимает вправо */
}

.nf-fx__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  line-height: 1;
}

.nf-fx__flag{ font-size:14px; }
.nf-fx__sym{ font-size:12px; opacity:.65; font-weight:600; }
.nf-fx__val{
  font-size:13px;
  font-weight:700;                  /* делаем таким же “сочным”, как цена */
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  white-space:nowrap;
}

/* чтобы манатная цена и конвертация визуально были в одном стиле */
.nf-price .nf-val{ font-weight:700; font-variant-numeric: tabular-nums; }
.nf-price .nf-from, .nf-price .nf-cur{ opacity:.65; }

/* узкие телефоны */
@media (max-width: 360px){
  .nf-fx{ max-width: 190px; gap:5px; }
  .nf-fx__chip{ padding:5px 7px; }
  .nf-fx__val{ font-size:12.5px; }
}

/* --- Apple-minimal FX block --- */
.nf-fx{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;            /* если места мало — красиво переносится */
  margin-top:6px;
  max-width: 210px;          /* защита: не распираем карточку */
  margin-left:auto;          /* прижимает вправо */
}

.nf-fx__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  line-height: 1;
}

.nf-fx__flag{ font-size:14px; }
.nf-fx__sym{ font-size:12px; opacity:.65; font-weight:600; }
.nf-fx__val{
  font-size:13px;
  font-weight:700;                  /* делаем таким же “сочным”, как цена */
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  white-space:nowrap;
}

/* чтобы манатная цена и конвертация визуально были в одном стиле */
.nf-price .nf-val{ font-weight:700; font-variant-numeric: tabular-nums; }
.nf-price .nf-from, .nf-price .nf-cur{ opacity:.65; }

/* узкие телефоны */
@media (max-width: 360px){
  .nf-fx{ max-width: 190px; gap:5px; }
  .nf-fx__chip{ padding:5px 7px; }
  .nf-fx__val{ font-size:12.5px; }
}

/* ==============================
   FX chips (USD / RUB / KZT)
   Fix: Windows 7 flags + layout + weight
   ============================== */

/* базовая цена (AZN) — оставляем как у тебя, но выравниваем визуально */
.nf-base .nf-from{ font-weight: 500; opacity: .85; }
.nf-base .nf-val{ font-weight: 700; }
.nf-base .nf-cur{ font-weight: 700; }

/* блок конвертации */
.nf-fx{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;

  max-width: 100%;
  overflow: visible;
}

/* чип */
.nf-fx__chip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;

  padding: 4px 6px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;

  font-size: 12px;
  line-height: 1;
  min-width: 0;

  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.nf-fx__sym{ font-weight: 700; }
.nf-fx__val{
  font-weight: 700;            /* чтобы не было “тоньше”, чем AZN */
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

/* мини-подсветка при анимации */
.nf-fx__chip.is-rolling{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* ФЛАГИ: делаем иконкой, чтобы на Windows 7 не было "US" */
.nf-fx__flag{
  width: 16px;
  height: 12px;
  display: inline-block;
  flex: 0 0 auto;

  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* прячем emoji-текст (🇺🇸) чтобы не превращался в US */
  font-size: 0;
  line-height: 0;
}

/* USD = USA */
.nf-fx__chip[data-cur="USD"] .nf-fx__flag{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Crect width='16' height='12' fill='%23b22234'/%3E%3Cg fill='%23fff'%3E%3Crect y='1' width='16' height='1'/%3E%3Crect y='3' width='16' height='1'/%3E%3Crect y='5' width='16' height='1'/%3E%3Crect y='7' width='16' height='1'/%3E%3Crect y='9' width='16' height='1'/%3E%3Crect y='11' width='16' height='1'/%3E%3C/g%3E%3Crect width='7' height='5.6' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.2' cy='1.2' r='.25'/%3E%3Ccircle cx='2.4' cy='2.0' r='.25'/%3E%3Ccircle cx='3.6' cy='1.2' r='.25'/%3E%3Ccircle cx='4.8' cy='2.0' r='.25'/%3E%3Ccircle cx='6.0' cy='1.2' r='.25'/%3E%3C/g%3E%3C/svg%3E");
}

/* RUB = Russia */
.nf-fx__chip[data-cur="RUB"] .nf-fx__flag{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Crect width='16' height='4' y='0' fill='%23fff'/%3E%3Crect width='16' height='4' y='4' fill='%23003cff'/%3E%3Crect width='16' height='4' y='8' fill='%23d52b1e'/%3E%3C/svg%3E");
}

/* KZT = Kazakhstan */
.nf-fx__chip[data-cur="KZT"] .nf-fx__flag{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Crect width='16' height='12' fill='%2300a3dd'/%3E%3Ccircle cx='11.2' cy='5.6' r='1.3' fill='%23f7d117'/%3E%3Crect x='1' y='0' width='1' height='12' fill='%23f7d117' opacity='.9'/%3E%3C/svg%3E");
}

/* Мобилка: чтобы ₸ не обрезался — делаем 2 колонки + KZT на всю ширину */
@media (max-width: 420px){
  .nf-fx{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-fx__chip[data-cur="KZT"]{ grid-column: 1 / -1; }
}

/* Мобилка: чтобы ₸ не обрезался — делаем 2 колонки + KZT на всю ширину */
@media (max-width: 420px){
  .nf-fx{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-fx__chip[data-cur="RUB"]{ grid-column: 1 / -1; }
}

/* Мобилка: чтобы ₸ не обрезался — делаем 2 колонки + KZT на всю ширину */
@media (max-width: 420px){
  .nf-fx{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-fx__chip[data-cur="USD"]{ grid-column: 1 / -1; }
}

/* ===== WEB FIX: chips don't overlap (flags + numbers) ===== */
.nf-fx{
  gap: 8px !important;
}

.nf-fx__chip{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 10px !important;
  gap: 8px !important;

  min-width: 92px !important;      /* ключевое: чип не сжимается */
  height: 28px !important;         /* ровная высота */
  box-sizing: border-box !important;

  white-space: nowrap !important;
  overflow: hidden !important;     /* на всякий */
}

/* чтобы элементы внутри не ужимались и не налезали */
.nf-fx__flag,
.nf-fx__sym,
.nf-fx__val{
  flex: 0 0 auto !important;
}

/* цифры ровные, не “прыгают” */
.nf-fx__val{
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .2px !important;
}

/* если на больших экранах хочется чуть шире */
@media (min-width: 1200px){
  .nf-fx__chip{ min-width: 104px !important; }
}

/* ===== WEB FIX: chips don't overlap (flags + numbers) ===== */
.nf-fx{
  gap: 8px !important;
}

.nf-fx__chip{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 10px !important;
  gap: 8px !important;

  min-width: 92px !important;      /* ключевое: чип не сжимается */
  height: 28px !important;         /* ровная высота */
  box-sizing: border-box !important;

  white-space: nowrap !important;
  overflow: hidden !important;     /* на всякий */
}

/* чтобы элементы внутри не ужимались и не налезали */
.nf-fx__flag,
.nf-fx__sym,
.nf-fx__val{
  flex: 0 0 auto !important;
}

/* цифры ровные, не “прыгают” */
.nf-fx__val{
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .2px !important;
}

/* если на больших экранах хочется чуть шире */
@media (min-width: 1200px){
  .nf-fx__chip{ min-width: 104px !important; }
}

/* =========================
   DESKTOP FIX (>=768px): restore layout clean
   ========================= */
@media (min-width: 768px){

  /* общий ряд: локация слева, справа цена+чипы, потом "Открыть" */
  .nf-meta{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap: 12px !important;
  }

  .nf-meta .nf-loc{
    flex: 0 0 auto !important;
  }

  /* price блок тянется и выравнивает всё вправо */
  .nf-meta .nf-price{
    flex: 1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* базовая цена AZN */
  .nf-meta .nf-base{
    display:inline-flex !important;
    align-items:baseline !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  /* валютные чипы — строго в одну линию на web */
  .nf-meta .nf-fx{
    display:inline-flex !important;
    flex-wrap: nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .nf-meta .nf-fx__chip{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 8px !important;
    padding: 6px 10px !important;

    min-width: 96px !important;   /* чтобы не налезали */
    height: 28px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* элементы внутри не ужимаются */
  .nf-meta .nf-fx__flag,
  .nf-meta .nf-fx__sym,
  .nf-meta .nf-fx__val{
    flex: 0 0 auto !important;
  }

  .nf-meta .nf-fx__val{
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: .2px !important;
  }

  /* "Открыть" всегда справа и не падает вниз */
  .nf-meta .nf-open{
    flex: 0 0 auto !important;
    margin-left: 6px !important;
    white-space: nowrap !important;
  }
}