/* =========================================================
   МОБИЛЕН ИЗБОР НА ТЕМА
   ========================================================= */

/* Бутонът с палитра в горната навигация */
.mobile-theme-quick-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  padding: 0;

  color: #ffffff !important;

  background:
    rgba(255, 255, 255, .11) !important;

  border:
    1px solid rgba(255, 255, 255, .15) !important;

  border-radius: 14px !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;

  font-size: 1.05rem;

  cursor: pointer;

  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.mobile-theme-quick-btn:hover,
.mobile-theme-quick-btn:focus-visible {
  color: #ffffff !important;

  background:
    rgba(255, 255, 255, .18) !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.mobile-theme-quick-btn:active {
  transform: scale(.95);
}

.mobile-theme-quick-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;

  width: 8px;
  height: 8px;

  background:
    linear-gradient(
      135deg,
      #ff5fa8,
      #f2c94c 48%,
      #43d17a
    );

  border:
    2px solid rgba(7, 16, 25, .85);

  border-radius: 50%;
}


/* =========================================================
   БУТОН В СТРАНИЧНОТО МЕНЮ
   ========================================================= */

.mobile-menu-settings-title {
  margin:
    18px 10px 7px;

  color:
    rgba(255, 255, 255, .58);

  font-size:
    .70rem;

  font-weight:
    850;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

body .offcanvas-nav .mobile-theme-open-row {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;

  min-height: 62px;

  padding:
    8px 10px !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(71, 149, 255, .17),
      rgba(139, 92, 246, .13)
    ) !important;

  border:
    1px solid rgba(147, 197, 253, .16) !important;

  border-radius:
    15px !important;

  text-align:
    left !important;
}

body .offcanvas-nav .mobile-theme-open-row:hover,
body .offcanvas-nav .mobile-theme-open-row:focus {
  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(71, 149, 255, .26),
      rgba(139, 92, 246, .21)
    ) !important;

  border-color:
    rgba(147, 197, 253, .29) !important;
}

.mobile-theme-open-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 39px;
  height: 39px;
  min-width: 39px;

  color: #09233d;

  background:
    linear-gradient(
      135deg,
      #7dd3fc,
      #c4b5fd 55%,
      #fde68a
    );

  border:
    1px solid rgba(255, 255, 255, .55);

  border-radius: 12px;

  box-shadow:
    0 7px 16px rgba(0, 0, 0, .19),
    inset 0 1px 0 rgba(255, 255, 255, .67);
}

.mobile-theme-open-copy {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.mobile-theme-open-copy strong {
  color: #ffffff !important;

  font-size: .82rem;
  line-height: 1.15;
}

.mobile-theme-open-copy small {
  margin-top: 3px;

  color:
    rgba(255, 255, 255, .62) !important;

  font-size: .66rem;
  line-height: 1.1;
}

.mobile-theme-current-mini {
  max-width: 105px;
  margin-left: auto;
  padding: 4px 7px;

  overflow: hidden;

  color:
    #dceeff !important;

  background:
    rgba(255, 255, 255, .08);

  border:
    1px solid rgba(255, 255, 255, .10);

  border-radius:
    999px;

  font-size:
    .61rem;

  font-weight:
    750;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.mobile-theme-open-arrow {
  color:
    rgba(255, 255, 255, .58);

  font-size:
    .72rem;
}


/* =========================================================
   ЦВЕТОВЕ НА МОБИЛНИЯ ПАНЕЛ
   ========================================================= */

body .mobile-theme-modal {
  --mobile-theme-bg: #0b1724;
  --mobile-theme-surface: #102234;
  --mobile-theme-surface-soft: rgba(255, 255, 255, .045);
  --mobile-theme-card: rgba(255, 255, 255, .045);
  --mobile-theme-card-hover: rgba(255, 255, 255, .075);
  --mobile-theme-text: #f8fbff;
  --mobile-theme-muted: #aebdcc;
  --mobile-theme-border: rgba(255, 255, 255, .09);
  --mobile-theme-active-border: rgba(125, 211, 252, .70);
}

/* Светлите теми получават светъл панел */
body.theme-light .mobile-theme-modal,
body.theme-aurora .mobile-theme-modal,
body.theme-sunrise .mobile-theme-modal {
  --mobile-theme-bg: #f8fafc;
  --mobile-theme-surface: #ffffff;
  --mobile-theme-surface-soft: rgba(15, 23, 42, .025);
  --mobile-theme-card: rgba(15, 23, 42, .025);
  --mobile-theme-card-hover: rgba(37, 99, 235, .065);
  --mobile-theme-text: #172033;
  --mobile-theme-muted: #64748b;
  --mobile-theme-border: rgba(15, 23, 42, .09);
  --mobile-theme-active-border: rgba(37, 99, 235, .48);
}


/* =========================================================
   BOTTOM SHEET
   ========================================================= */

body .mobile-theme-modal .modal-dialog {
  display: flex;
  align-items: flex-end;

  min-height: 100%;
  max-width: 620px;
  margin:
    0 auto !important;
}

body .mobile-theme-modal .modal-content {
  max-height:
    min(89vh, 820px);

  overflow: hidden;

  color:
    var(--mobile-theme-text) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(59, 130, 246, .11),
      transparent 32%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(139, 92, 246, .08),
      transparent 34%
    ),
    var(--mobile-theme-bg) !important;

  border:
    1px solid var(--mobile-theme-border) !important;

  border-bottom:
    0 !important;

  border-radius:
    26px 26px 0 0 !important;

  box-shadow:
    0 -20px 60px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.mobile-theme-sheet-handle {
  width: 48px;
  height: 5px;

  margin:
    9px auto 0;

  background:
    var(--mobile-theme-muted);

  border-radius:
    999px;

  opacity:
    .35;
}

body .mobile-theme-modal .mobile-theme-modal-header {
  display: flex;
  align-items: flex-start;

  padding:
    14px 18px 12px !important;

  background:
    transparent !important;

  border-bottom:
    1px solid var(--mobile-theme-border) !important;
}

body .mobile-theme-modal .modal-title {
  margin: 0;

  color:
    var(--mobile-theme-text) !important;

  font-size:
    1.08rem;

  font-weight:
    900;

  text-shadow:
    none !important;
}

.mobile-theme-modal-subtitle {
  margin:
    4px 0 0;

  color:
    var(--mobile-theme-muted) !important;

  font-size:
    .72rem;

  line-height:
    1.25;
}

.mobile-theme-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;

  color:
    var(--mobile-theme-text) !important;

  background:
    var(--mobile-theme-surface-soft) !important;

  border:
    1px solid var(--mobile-theme-border) !important;

  border-radius:
    12px !important;

  font-size:
    .96rem;
}

.mobile-theme-close:hover {
  background:
    var(--mobile-theme-card-hover) !important;
}

body .mobile-theme-modal .mobile-theme-modal-body {
  padding:
    14px 14px calc(24px + env(safe-area-inset-bottom)) !important;

  overflow-y:
    auto !important;

  color:
    var(--mobile-theme-text) !important;
}


/* =========================================================
   СЕКЦИИ
   ========================================================= */

.mobile-theme-section + .mobile-theme-section {
  margin-top: 18px;
}

.mobile-theme-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom:
    10px;

  padding:
    0 2px;
}

.mobile-theme-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  min-width: 34px;

  color:
    #0b2945;

  background:
    linear-gradient(
      135deg,
      #7dd3fc,
      #c4b5fd 56%,
      #fde68a
    );

  border:
    1px solid rgba(255, 255, 255, .60);

  border-radius:
    11px;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .68);
}

.mobile-theme-section-heading h6 {
  margin: 0;

  color:
    var(--mobile-theme-text) !important;

  font-size:
    .82rem;

  font-weight:
    900;

  line-height:
    1.15;
}

.mobile-theme-section-heading p {
  margin:
    3px 0 0;

  color:
    var(--mobile-theme-muted) !important;

  font-size:
    .66rem;

  line-height:
    1.2;
}


/* =========================================================
   КАРТИ НА ТЕМИТЕ
   ========================================================= */

.mobile-theme-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    9px;
}

body .mobile-theme-modal .mobile-theme-card {
  position: relative;

  display: flex !important;
  align-items: center !important;
  gap: 9px !important;

  min-width: 0;
  min-height: 68px;

  padding:
    9px !important;

  color:
    var(--mobile-theme-text) !important;

  background:
    var(--mobile-theme-card) !important;

  border:
    1px solid var(--mobile-theme-border) !important;

  border-radius:
    16px !important;

  text-decoration:
    none !important;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

body .mobile-theme-modal .mobile-theme-card:hover,
body .mobile-theme-modal .mobile-theme-card:focus-visible {
  color:
    var(--mobile-theme-text) !important;

  background:
    var(--mobile-theme-card-hover) !important;

  border-color:
    rgba(125, 211, 252, .30) !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 21px rgba(0, 0, 0, .11) !important;
}

body .mobile-theme-modal .mobile-theme-card:active {
  transform:
    scale(.97);
}

body .mobile-theme-modal .mobile-theme-card.is-active {
  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, .16),
      rgba(139, 92, 246, .13)
    ) !important;

  border-color:
    var(--mobile-theme-active-border) !important;

  box-shadow:
    0 9px 24px rgba(37, 99, 235, .12),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.mobile-theme-preview {
  display: block;

  width: 39px;
  height: 39px;
  min-width: 39px;

  border:
    2px solid rgba(255, 255, 255, .72);

  border-radius:
    13px;

  box-shadow:
    0 6px 15px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

.mobile-theme-card-copy {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.mobile-theme-card-copy strong {
  color:
    var(--mobile-theme-text) !important;

  font-size:
    .75rem;

  font-weight:
    850;

  line-height:
    1.14;

  overflow-wrap:
    anywhere;
}

.mobile-theme-card-copy small {
  margin-top:
    4px;

  color:
    var(--mobile-theme-muted) !important;

  font-size:
    .60rem;

  line-height:
    1.18;

  overflow-wrap:
    anywhere;
}

.mobile-theme-selected {
  position: absolute;
  top: 6px;
  right: 6px;

  display: inline-flex;
  align-items: center;
  gap: 3px;

  padding:
    3px 6px;

  color:
    #07314f !important;

  background:
    #ffffff;

  border:
    1px solid rgba(125, 211, 252, .42);

  border-radius:
    999px;

  font-size:
    .54rem;

  font-weight:
    900;

  line-height:
    1;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, .14);
}


/* =========================================================
   ЦВЕТНИ МИНИАТЮРИ
   ========================================================= */

.mobile-theme-preview-dark {
  background:
    linear-gradient(
      135deg,
      #08121d,
      #334155
    );
}

.mobile-theme-preview-light {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #e2e8f0 55%,
      #bfdbfe
    );
}

.mobile-theme-preview-aurora {
  background:
    linear-gradient(
      135deg,
      #d9f4ff 0%,
      #9cebd4 50%,
      #c9bdff 100%
    );
}

.mobile-theme-preview-sunrise {
  background:
    linear-gradient(
      135deg,
      #ffb99d 0%,
      #ffd492 52%,
      #d6c9ff 100%
    );
}

.mobile-theme-preview-stranger {
  background:
    linear-gradient(
      135deg,
      #080609 0%,
      #7b1025 55%,
      #ed2547 100%
    );
}

.mobile-theme-preview-anime {
  background:
    linear-gradient(
      135deg,
      #ff72c6 0%,
      #a884ff 52%,
      #6ee7ff 100%
    );
}

.mobile-theme-preview-pink {
  background:
    linear-gradient(
      135deg,
      #ff5fa8 0%,
      #ffadd3 54%,
      #c8a7ff 100%
    );
}

.mobile-theme-preview-cr7 {
  background:
    linear-gradient(
      135deg,
      #111820 0%,
      #f2c94c 58%,
      #e6243f 100%
    );
}

.mobile-theme-preview-messi {
  background:
    linear-gradient(
      135deg,
      #75c9f5 0%,
      #ffffff 57%,
      #f3c85b 100%
    );
}

.mobile-theme-preview-bulgaria {
  background:
    linear-gradient(
      180deg,
      #ffffff 0% 33.33%,
      #2ea35a 33.33% 66.66%,
      #d0323a 66.66% 100%
    );
}


/* =========================================================
   МАЛКИ ТЕЛЕФОНИ
   ========================================================= */

@media (max-width: 380px) {
  .mobile-theme-grid {
    grid-template-columns:
      1fr;
  }

  .mobile-theme-card {
    min-height:
      62px !important;
  }

  .mobile-theme-preview {
    width:
      36px;

    height:
      36px;

    min-width:
      36px;
  }
}


/* Показва новите контроли само под XL */
@media (min-width: 1200px) {
  .mobile-theme-quick-btn,
  .mobile-theme-open-row,
  .mobile-menu-settings-title {
    display:
      none !important;
  }
}
/* =========================================================
   ДИНАМИЧЕН БУТОН „ИЗБЕРИ ТЕМА“
   Цветът следва текущо избраната тема
   Постави най-отдолу в CSS блока
   ========================================================= */


/* =========================================================
   ЦВЕТОВЕ ПО ПОДРАЗБИРАНЕ
   ========================================================= */

body {
  --mobile-theme-row-text: #ffffff;
  --mobile-theme-row-muted: rgba(255, 255, 255, .66);

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      rgba(71, 149, 255, .17),
      rgba(139, 92, 246, .13)
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      rgba(71, 149, 255, .27),
      rgba(139, 92, 246, .22)
    );

  --mobile-theme-row-border:
    rgba(147, 197, 253, .19);

  --mobile-theme-row-border-hover:
    rgba(147, 197, 253, .34);

  --mobile-theme-row-shadow:
    rgba(37, 99, 235, .14);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #7dd3fc,
      #8b5cf6
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #7dd3fc,
      #c4b5fd 55%,
      #fde68a
    );

  --mobile-theme-row-icon-text:
    #09233d;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .09);

  --mobile-theme-row-chip-border:
    rgba(255, 255, 255, .13);

  --mobile-theme-row-chip-text:
    #dceeff;
}


/* =========================================================
   ТЪМНА ТЕМА
   ========================================================= */

body.theme-dark {
  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      rgba(51, 65, 85, .80),
      rgba(15, 23, 42, .92)
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      rgba(71, 85, 105, .88),
      rgba(30, 41, 59, .96)
    );

  --mobile-theme-row-border:
    rgba(148, 163, 184, .25);

  --mobile-theme-row-border-hover:
    rgba(203, 213, 225, .38);

  --mobile-theme-row-shadow:
    rgba(15, 23, 42, .32);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #cbd5e1,
      #64748b
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #e2e8f0,
      #94a3b8
    );

  --mobile-theme-row-icon-text:
    #172033;
}


/* =========================================================
   СВЕТЛА ТЕМА
   ========================================================= */

body.theme-light {
  --mobile-theme-row-text:
    #172033;

  --mobile-theme-row-muted:
    #64748b;

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      #ffffff,
      #f1f5f9
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      #ffffff,
      #eaf2ff
    );

  --mobile-theme-row-border:
    rgba(15, 23, 42, .11);

  --mobile-theme-row-border-hover:
    rgba(37, 99, 235, .25);

  --mobile-theme-row-shadow:
    rgba(15, 23, 42, .10);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #60a5fa,
      #2563eb
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #ffffff,
      #dbeafe
    );

  --mobile-theme-row-icon-text:
    #1d4ed8;

  --mobile-theme-row-chip-bg:
    #eaf2ff;

  --mobile-theme-row-chip-border:
    rgba(37, 99, 235, .15);

  --mobile-theme-row-chip-text:
    #1e40af;
}


/* =========================================================
   СЕВЕРНО СИЯНИЕ
   ========================================================= */

body.theme-aurora {
  --mobile-theme-row-text:
    #173943;

  --mobile-theme-row-muted:
    #52727a;

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      rgba(217, 244, 255, .98),
      rgba(156, 235, 212, .91) 52%,
      rgba(201, 189, 255, .90)
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      #e8f9ff,
      #b4f1df 52%,
      #d9d0ff
    );

  --mobile-theme-row-border:
    rgba(77, 169, 173, .25);

  --mobile-theme-row-border-hover:
    rgba(77, 169, 173, .42);

  --mobile-theme-row-shadow:
    rgba(77, 169, 173, .19);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #55d6c2,
      #9b8cf2
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #ffffff,
      #9cebd4 52%,
      #c9bdff
    );

  --mobile-theme-row-icon-text:
    #17454b;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .48);

  --mobile-theme-row-chip-border:
    rgba(42, 128, 137, .18);

  --mobile-theme-row-chip-text:
    #245b63;
}


/* =========================================================
   УТРИННО СИЯНИЕ
   ========================================================= */

body.theme-sunrise {
  --mobile-theme-row-text:
    #4a302d;

  --mobile-theme-row-muted:
    #80625c;

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      #fff4ed,
      #ffd8bd 46%,
      #fff0bf 69%,
      #e6ddff
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      #fff9f5,
      #ffe1ca 46%,
      #fff4cf 69%,
      #eee8ff
    );

  --mobile-theme-row-border:
    rgba(190, 105, 85, .20);

  --mobile-theme-row-border-hover:
    rgba(190, 105, 85, .34);

  --mobile-theme-row-shadow:
    rgba(190, 105, 85, .17);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #ef7f72,
      #e8b950,
      #b9a6e7
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #ffb99d,
      #ffd492 52%,
      #d6c9ff
    );

  --mobile-theme-row-icon-text:
    #4a302d;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .55);

  --mobile-theme-row-chip-border:
    rgba(161, 92, 75, .17);

  --mobile-theme-row-chip-text:
    #805048;
}


/* =========================================================
   ОБЪРНАТИЯТ СВЯТ
   ========================================================= */

body.theme-stranger {
  --mobile-theme-row-text:
    #ffffff;

  --mobile-theme-row-muted:
    #d8abb2;

  --mobile-theme-row-bg:
    radial-gradient(
      circle at 100% 0%,
      rgba(237, 37, 71, .19),
      transparent 43%
    ),
    linear-gradient(
      135deg,
      rgba(55, 16, 25, .97),
      rgba(23, 12, 18, .98)
    );

  --mobile-theme-row-hover:
    radial-gradient(
      circle at 100% 0%,
      rgba(237, 37, 71, .28),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(76, 19, 31, .98),
      rgba(29, 13, 21, .99)
    );

  --mobile-theme-row-border:
    rgba(237, 37, 71, .29);

  --mobile-theme-row-border-hover:
    rgba(255, 96, 121, .46);

  --mobile-theme-row-shadow:
    rgba(237, 37, 71, .18);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #ff5e75,
      #b80f2d
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #ff6d82,
      #b91532 57%,
      #2b1119
    );

  --mobile-theme-row-icon-text:
    #ffffff;

  --mobile-theme-row-chip-bg:
    rgba(237, 37, 71, .13);

  --mobile-theme-row-chip-border:
    rgba(255, 102, 126, .23);

  --mobile-theme-row-chip-text:
    #ffd3da;
}


/* =========================================================
   АНИМЕ
   ========================================================= */

body.theme-anime {
  --mobile-theme-row-text:
    #ffffff;

  --mobile-theme-row-muted:
    #efdafa;

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      rgba(255, 95, 181, .27),
      rgba(139, 92, 246, .25) 54%,
      rgba(34, 211, 238, .19)
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      rgba(255, 95, 181, .38),
      rgba(139, 92, 246, .35) 54%,
      rgba(34, 211, 238, .27)
    );

  --mobile-theme-row-border:
    rgba(255, 156, 216, .29);

  --mobile-theme-row-border-hover:
    rgba(255, 191, 229, .46);

  --mobile-theme-row-shadow:
    rgba(218, 90, 185, .19);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #ff72c6,
      #a884ff,
      #6ee7ff
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #ff72c6,
      #a884ff 52%,
      #6ee7ff
    );

  --mobile-theme-row-icon-text:
    #210d2c;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .11);

  --mobile-theme-row-chip-border:
    rgba(255, 255, 255, .17);

  --mobile-theme-row-chip-text:
    #fff1fb;
}


/* =========================================================
   РОЗОВА МЕЧТА
   ========================================================= */

body.theme-pink {
  --mobile-theme-row-text:
    #ffffff;

  --mobile-theme-row-muted:
    #f0cddd;

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      rgba(255, 95, 168, .30),
      rgba(200, 167, 255, .23)
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      rgba(255, 95, 168, .42),
      rgba(200, 167, 255, .34)
    );

  --mobile-theme-row-border:
    rgba(255, 159, 207, .30);

  --mobile-theme-row-border-hover:
    rgba(255, 190, 223, .49);

  --mobile-theme-row-shadow:
    rgba(255, 95, 168, .20);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #ff5fa8,
      #c8a7ff
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #ff73b5,
      #ffadd3 54%,
      #c8a7ff
    );

  --mobile-theme-row-icon-text:
    #3b1430;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .11);

  --mobile-theme-row-chip-border:
    rgba(255, 255, 255, .17);

  --mobile-theme-row-chip-text:
    #fff1f8;
}


/* =========================================================
   СТАДИОН CR7
   ========================================================= */

body.theme-cr7 {
  --mobile-theme-row-text:
    #ffffff;

  --mobile-theme-row-muted:
    #d6d9dc;

  --mobile-theme-row-bg:
    radial-gradient(
      circle at 100% 0%,
      rgba(230, 36, 63, .20),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(53, 47, 25, .96),
      rgba(14, 17, 20, .99)
    );

  --mobile-theme-row-hover:
    radial-gradient(
      circle at 100% 0%,
      rgba(230, 36, 63, .29),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      rgba(70, 60, 26, .98),
      rgba(20, 23, 28, .99)
    );

  --mobile-theme-row-border:
    rgba(242, 201, 76, .31);

  --mobile-theme-row-border-hover:
    rgba(255, 226, 119, .48);

  --mobile-theme-row-shadow:
    rgba(242, 201, 76, .16);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #f2c94c,
      #e6243f
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #f2c94c,
      #fff0a1 60%,
      #e6243f
    );

  --mobile-theme-row-icon-text:
    #111111;

  --mobile-theme-row-chip-bg:
    rgba(242, 201, 76, .11);

  --mobile-theme-row-chip-border:
    rgba(242, 201, 76, .22);

  --mobile-theme-row-chip-text:
    #ffe997;
}


/* =========================================================
   МАГИЯТА НА МЕСИ
   ========================================================= */

body.theme-messi {
  --mobile-theme-row-text:
    #08213a;

  --mobile-theme-row-muted:
    #345c76;

  --mobile-theme-row-bg:
    linear-gradient(
      135deg,
      #75c9f5,
      #d9f3ff 48%,
      #ffffff 68%,
      #f3c85b
    );

  --mobile-theme-row-hover:
    linear-gradient(
      135deg,
      #8bd5f8,
      #e8f8ff 48%,
      #ffffff 68%,
      #ffe28b
    );

  --mobile-theme-row-border:
    rgba(255, 255, 255, .62);

  --mobile-theme-row-border-hover:
    rgba(255, 255, 255, .92);

  --mobile-theme-row-shadow:
    rgba(76, 168, 219, .22);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #75c9f5,
      #ffffff,
      #f3c85b
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      135deg,
      #75c9f5,
      #ffffff 58%,
      #f3c85b
    );

  --mobile-theme-row-icon-text:
    #08213a;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .47);

  --mobile-theme-row-chip-border:
    rgba(8, 59, 94, .14);

  --mobile-theme-row-chip-text:
    #083b5e;
}


/* =========================================================
   БЪЛГАРСКИ ДУХ
   ========================================================= */

body.theme-bulgaria {
  --mobile-theme-row-text:
    #ffffff;

  --mobile-theme-row-muted:
    #d6e7dc;

  --mobile-theme-row-bg:
    radial-gradient(
      circle at 100% 0%,
      rgba(208, 50, 58, .17),
      transparent 41%
    ),
    linear-gradient(
      135deg,
      rgba(37, 99, 59, .95),
      rgba(12, 30, 18, .99)
    );

  --mobile-theme-row-hover:
    radial-gradient(
      circle at 100% 0%,
      rgba(208, 50, 58, .26),
      transparent 43%
    ),
    linear-gradient(
      135deg,
      rgba(47, 125, 73, .97),
      rgba(15, 39, 23, .99)
    );

  --mobile-theme-row-border:
    rgba(93, 203, 133, .28);

  --mobile-theme-row-border-hover:
    rgba(132, 224, 165, .45);

  --mobile-theme-row-shadow:
    rgba(46, 163, 90, .20);

  --mobile-theme-row-accent:
    linear-gradient(
      180deg,
      #ffffff 0% 33%,
      #2ea35a 33% 66%,
      #d0323a 66% 100%
    );

  --mobile-theme-row-icon-bg:
    linear-gradient(
      180deg,
      #ffffff 0% 33%,
      #2ea35a 33% 66%,
      #d0323a 66% 100%
    );

  --mobile-theme-row-icon-text:
    #102016;

  --mobile-theme-row-chip-bg:
    rgba(255, 255, 255, .10);

  --mobile-theme-row-chip-border:
    rgba(255, 255, 255, .16);

  --mobile-theme-row-chip-text:
    #e4f7ea;
}


/* =========================================================
   КРАЕН ДИЗАЙН НА РЕДА
   ========================================================= */

body .offcanvas-nav .mobile-theme-open-row {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    42px minmax(0, 1fr) 36px !important;

  grid-template-rows:
    auto auto !important;

  column-gap:
    11px !important;

  row-gap:
    3px !important;

  align-items:
    center !important;

  min-height:
    76px !important;

  padding:
    9px 10px 9px 13px !important;

  overflow:
    hidden !important;

  color:
    var(--mobile-theme-row-text) !important;

  background:
    var(--mobile-theme-row-bg) !important;

  border:
    1px solid
    var(--mobile-theme-row-border) !important;

  border-radius:
    17px !important;

  text-align:
    left !important;

  box-shadow:
    0 10px 26px
    var(--mobile-theme-row-shadow),
    inset 0 1px 0
    rgba(255, 255, 255, .12) !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}


/* Цветна линия според темата */
body .offcanvas-nav
.mobile-theme-open-row::before {
  content: "";

  position: absolute;

  top: 11px;
  bottom: 11px;
  left: 0;

  width: 4px;

  background:
    var(--mobile-theme-row-accent);

  border-radius:
    0 999px 999px 0;

  box-shadow:
    0 0 12px
    var(--mobile-theme-row-shadow);
}


body .offcanvas-nav
.mobile-theme-open-row:hover,

body .offcanvas-nav
.mobile-theme-open-row:focus {
  color:
    var(--mobile-theme-row-text) !important;

  background:
    var(--mobile-theme-row-hover) !important;

  border-color:
    var(--mobile-theme-row-border-hover) !important;

  transform:
    translateY(-1px) !important;

  box-shadow:
    0 14px 31px
    var(--mobile-theme-row-shadow),
    inset 0 1px 0
    rgba(255, 255, 255, .17) !important;
}


/* Иконката */
body .offcanvas-nav
.mobile-theme-open-row
.mobile-theme-open-icon {
  grid-column:
    1 !important;

  grid-row:
    1 / 3 !important;

  width:
    42px !important;

  height:
    42px !important;

  min-width:
    42px !important;

  color:
    var(--mobile-theme-row-icon-text) !important;

  background:
    var(--mobile-theme-row-icon-bg) !important;

  border:
    1px solid
    rgba(255, 255, 255, .48) !important;

  border-radius:
    13px !important;

  box-shadow:
    0 7px 17px
    var(--mobile-theme-row-shadow),
    inset 0 1px 0
    rgba(255, 255, 255, .72) !important;
}


/* Заглавие и описание */
body .offcanvas-nav
.mobile-theme-open-row
.mobile-theme-open-copy {
  grid-column:
    2 !important;

  grid-row:
    1 !important;
}

body .offcanvas-nav
.mobile-theme-open-row
.mobile-theme-open-copy strong {
  color:
    var(--mobile-theme-row-text) !important;
}

body .offcanvas-nav
.mobile-theme-open-row
.mobile-theme-open-copy small {
  color:
    var(--mobile-theme-row-muted) !important;
}


/* Текущата тема вече е на отделен ред и не се реже */
body .offcanvas-nav
.mobile-theme-open-row
.mobile-theme-current-mini {
  grid-column:
    2 !important;

  grid-row:
    2 !important;

  justify-self:
    start !important;

  max-width:
    100% !important;

  margin:
    0 !important;

  padding:
    3px 8px !important;

  color:
    var(--mobile-theme-row-chip-text) !important;

  background:
    var(--mobile-theme-row-chip-bg) !important;

  border:
    1px solid
    var(--mobile-theme-row-chip-border) !important;

  border-radius:
    999px !important;

  font-size:
    .60rem !important;

  line-height:
    1.15 !important;

  overflow:
    visible !important;

  text-overflow:
    clip !important;

  white-space:
    normal !important;
}


/* Стрелката */
body .offcanvas-nav
.mobile-theme-open-row
.mobile-theme-open-arrow {
  grid-column:
    3 !important;

  grid-row:
    1 / 3 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    36px !important;

  height:
    42px !important;

  color:
    var(--mobile-theme-row-text) !important;

  background:
    rgba(255, 255, 255, .065) !important;

  border:
    1px solid
    var(--mobile-theme-row-border) !important;

  border-radius:
    12px !important;

  opacity:
    .86;
}


/* =========================================================
   МАЛКИ ТЕЛЕФОНИ
   ========================================================= */

@media (max-width: 360px) {
  body .offcanvas-nav .mobile-theme-open-row {
    grid-template-columns:
      39px minmax(0, 1fr) 32px !important;

    column-gap:
      9px !important;

    padding:
      8px 8px 8px 11px !important;
  }

  body .offcanvas-nav
  .mobile-theme-open-row
  .mobile-theme-open-icon {
    width:
      39px !important;

    height:
      39px !important;

    min-width:
      39px !important;
  }

  body .offcanvas-nav
  .mobile-theme-open-row
  .mobile-theme-open-arrow {
    width:
      32px !important;

    height:
      39px !important;
  }
}