/* ============================================================
   DiBeauTy — Doplnkové štýly k dibeauty-rezervacie.css
   Triedy použité v HTML/JS, ktoré nie sú v pôvodnom 1000-riadkovom
   CSS: utility, kalendárové stavy, admin panel, slot-grid, atď.
   ============================================================ */

/* --- Utility --- */
.hidden { display: none !important; }
/* Default HTML `hidden` atribut (UA stylesheet nastavi display:none, ale
   triedy ako .rez-btn { display:inline-block } to prebijaju). Tymto je
   pravidlo na rovnakej specificite ako trieda a zaruci skrytie. */
[hidden] { display: none !important; }

/* Cancel/reschedule action row – flex iba keď element NIE JE hidden */
.rez-cancel-actions:not([hidden]) {
  margin-top: 1.5rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.rez-link {
  color: var(--rez-primary);
  text-decoration: underline;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.rez-link:hover { color: var(--rez-primary-hover); }

/* --- Kontajnerové varianty --- */
.rez-container-narrow { max-width: 520px; margin: 0 auto; padding: 2rem 1rem; }
.rez-container-wide   { max-width: 1200px; margin: 0 auto; padding: 1rem; }

/* --- Výsledkové karty (potvrdene.html, chyba.html) --- */
.rez-result-card { text-align: center; padding: 2.5rem 1.5rem; }
.rez-result-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;
}
.rez-result-icon.success { background: rgba(25,135,84,0.12); color: var(--rez-success, #198754); }
.rez-result-icon.error   { background: rgba(220,53,69,0.12); color: var(--rez-error, #dc3545); }
.rez-result-summary {
  max-width: 520px; margin: 1.25rem auto 0;
  background: var(--rez-surface); border-radius: 12px; padding: 1rem 1.25rem;
  text-align: left;
}

/* --- Zhrnutie výberu pred ďalším krokom --- */
.rez-selection-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 1rem; border: 1px solid var(--rez-border);
  border-radius: 10px; background: var(--rez-surface);
  margin-bottom: 1.25rem;
}

/* --- Login card --- */
.rez-login-card {
  background: var(--rez-surface);
  border: 1px solid var(--rez-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* --- Form actions --- */
.rez-form-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.rez-checkbox-inline {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--rez-text); cursor: pointer;
}
.rez-checkbox-inline input[type="checkbox"] { transform: scale(1.15); }

/* --- Kalendár: jemné odlíšenie víkendu ---
   Grid má 7 stĺpcov v poradí Po, Ut, St, Št, Pi, So, Ne.
   Leading blanks v mesačnom pohľade tiež zaberajú grid sloty, takže
   :nth-child(7n+6) a :nth-child(7n) cielia na So a Ne stĺpce spoľahlivo.
   Týždenný pohľad má presne 7 buniek v rovnakom poradí. */
.rez-calendar-weekdays > .rez-calendar-weekday:nth-child(6),
.rez-calendar-weekdays > .rez-calendar-weekday:nth-child(7) {
  color: #6c7a8c; /* trochu chladnejšia sivomodrá oproti pracovným dňom */
}
.rez-calendar-grid > .rez-calendar-day:nth-child(7n+6),
.rez-calendar-grid > .rez-calendar-day:nth-child(7n) {
  background: rgba(100,120,150,.05); /* veľmi jemný cool-gray podklad */
}
/* Zachovaj biele pozadie otvorených dní aj na víkende — akcent sa prejaví
   iba cez jemný border-tint, aby víkend bol rozoznateľný ale nie dominantný. */
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n+6),
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n) {
  background: #fafbfd;
}
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n+6):hover,
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n):hover {
  background: rgba(31,100,71,.06);
}

/* --- Kalendár: stavy dní --- */
.rez-calendar-day { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem; padding: .5rem .25rem; min-height: 72px; border-radius: 8px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.rez-calendar-day.open   { background: #fff; border-color: rgba(31,100,71,.25); cursor: pointer; }
.rez-calendar-day.open:hover { background: rgba(31,100,71,.06); }
.rez-calendar-day.full   { background: var(--rez-surface); color: var(--rez-text-faint); cursor: not-allowed; }
.rez-calendar-day.closed { background: transparent; color: var(--rez-text-faint); text-decoration: line-through; cursor: not-allowed; }
.rez-calendar-day.past   { opacity: .4; cursor: not-allowed; }
.rez-calendar-day.selected { outline: 2px solid var(--rez-primary); background: rgba(31,100,71,.14); }
.rez-calendar-day.blocked-day {
  background: rgba(220,53,69,.10);
  border-color: rgba(220,53,69,.35);
  color: var(--rez-error, #dc3545);
  cursor: pointer; /* admin môže kliknúť na detail */
  text-decoration: none;
}
.rez-calendar-day.blocked-day .rez-calendar-day-num { text-decoration: line-through; }
.rez-calendar-day.blocked-partial::after {
  content: '';
  display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rez-error, #dc3545);
  margin-top: 2px;
}
/* Admin pohľad: aj „closed" dni sú klikateľné, aby admin vedel spraviť override */
.rez-admin .rez-calendar-day.closed { cursor: pointer; }
.rez-admin .rez-calendar-day.closed:hover { background: rgba(0,0,0,.04); }
/* Override — admin jednorazovo otvoril inak zatvorený deň */
.rez-calendar-day.override {
  background: rgba(25,135,84,.12);
  border-color: rgba(25,135,84,.5);
  border-style: dashed;
  color: var(--rez-text);
  text-decoration: none;
}
.rez-calendar-day.override .rez-calendar-day-num { text-decoration: none; }

/* Stacked alert modal musí byť nad prompt-modalom (DOM order: alert je pred prompt) */
#alert-modal { z-index: 1200; }

/* Inline error v prompt modale (ponechané pre budúce využitie — momentálne sa používa popup) */
.rez-prompt-error {
  background: rgba(220,53,69,.08);
  border: 1px solid rgba(220,53,69,.4);
  color: var(--rez-error, #dc3545);
  padding: .5rem .75rem;
  border-radius: 6px;
  font-size: .9rem;
  margin: .5rem 0 .75rem;
}
/* Info banner v prompt modale (read-only kontext ako pracovný čas dňa) */
.rez-prompt-info {
  background: rgba(31,100,71,.06);
  border: 1px solid rgba(31,100,71,.25);
  color: var(--rez-text);
  padding: .5rem .75rem;
  border-radius: 6px;
  font-size: .9rem;
  margin-bottom: .75rem;
}
/* Preset chipy */
.rez-prompt-presets {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem;
}
.rez-chip {
  background: var(--rez-surface);
  border: 1px solid var(--rez-border);
  color: var(--rez-text);
  padding: .35rem .75rem;
  border-radius: 999px;
  font: inherit; font-size: .85rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rez-chip:hover {
  background: var(--rez-primary);
  color: var(--rez-text-inverse);
  border-color: var(--rez-primary);
}

/* Info banner v detaile dňa keď je celý deň blokovaný (zobrazí dôvod blokácie) */
.rez-admin-block-banner {
  padding: .5rem .75rem; margin: .5rem 0;
  background: rgba(220,53,69,.08);
  border: 1px solid rgba(220,53,69,.35);
  border-left: 4px solid rgba(220,53,69,.7);
  border-radius: 6px;
  font-size: .9rem; color: var(--rez-text);
}
.rez-admin-block-banner strong { color: #b02434; }
.rez-admin-block-reason { color: var(--rez-text-muted); }

/* Info banner v detaile dňa keď je deň otvorený cez override (víkendová akcia) */
.rez-admin-override-banner {
  padding: .5rem .75rem; margin: .5rem 0;
  background: rgba(40,167,69,.08);
  border: 1px solid rgba(40,167,69,.35);
  border-left: 4px solid rgba(40,167,69,.7);
  border-radius: 6px;
  font-size: .9rem; color: var(--rez-text);
}
.rez-admin-override-banner strong { color: #1e7c3a; }
.rez-admin-override-reason { color: var(--rez-text-muted); }

/* Zoznam blokovaných slotov v detaile dňa */
.rez-admin-blocked-list { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.rez-admin-blocked-row {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .4rem .75rem;
  background: rgba(220,53,69,.08);
  border: 1px solid rgba(220,53,69,.3);
  border-radius: 6px;
  font-size: .9rem;
}

.rez-calendar-day-status {
  font-size: .75rem; color: var(--rez-text-muted); text-align: center; line-height: 1.2;
}
.rez-calendar-day-more {
  font-size: .7rem; color: var(--rez-text-muted);
}

/* --- Grid slotov pre jeden deň --- */
.rez-time-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .5rem; margin-top: .75rem;
}
.rez-time-slot {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .75rem; border: 1px solid var(--rez-border); border-radius: 8px;
  background: var(--rez-surface); color: var(--rez-text); font-family: var(--rez-font-body);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.rez-time-slot:hover { background: var(--rez-primary-light); border-color: var(--rez-primary); }
.rez-time-slot.booked { text-decoration: line-through; color: var(--rez-text-faint); cursor: not-allowed; }
.rez-time-slot.blocked { opacity: .5; cursor: not-allowed; }
.rez-time-slot.pending { border-style: dashed; color: var(--rez-text-muted); }

.rez-skeleton-slot { height: 36px; border-radius: 8px; }

/* ============================================================
   Admin panel
   ============================================================ */
.rez-admin .rez-container,
.rez-admin .rez-container-wide {
  background: transparent;
}

/* Navigácia */
.rez-admin-nav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  background: var(--rez-primary);
  color: var(--rez-text-inverse);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.rez-admin-nav-brand {
  font-family: var(--rez-font-display);
  font-size: 1.25rem;
  margin-right: auto;
}
.rez-admin-nav-link {
  color: var(--rez-text-inverse);
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: 6px;
}
.rez-admin-nav-link { transition: background .2s ease, color .2s ease; }
.rez-admin-nav-link:hover,
.rez-admin-nav-link.active {
  background: rgba(255,255,255,.85);
  color: var(--rez-text);
}
.rez-admin-nav-logout {
  background: transparent; border: 1px solid rgba(255,255,255,.4);
  color: var(--rez-text-inverse); cursor: pointer;
  padding: .4rem .75rem; border-radius: 6px;
  font: inherit;
  transition: background .2s ease, color .2s ease;
}
.rez-admin-nav-logout:hover { background: rgba(255,255,255,.85); color: var(--rez-text); }

/* Toolbar */
.rez-admin-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.rez-admin-toolbar-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}

.rez-admin-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}

/* View switch (mesiac/týždeň/deň) */
.rez-view-switch {
  display: inline-flex; border: 1px solid var(--rez-border); border-radius: 8px; overflow: hidden;
}
.rez-view-btn {
  background: var(--rez-surface); color: var(--rez-text);
  border: 0; padding: .4rem .8rem; cursor: pointer; font: inherit;
  border-right: 1px solid var(--rez-border);
}
.rez-view-btn:last-child { border-right: 0; }
.rez-view-btn.active {
  background: var(--rez-primary); color: var(--rez-text-inverse);
}

/* Tabuľky */
.rez-admin-table-wrap { overflow-x: auto; }
.rez-admin-table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--rez-surface); border-radius: 10px; overflow: hidden;
}
.rez-admin-table th, .rez-admin-table td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--rez-border);
  text-align: left; vertical-align: middle;
}
.rez-admin-table th {
  background: rgba(31,100,71,.05); font-weight: 600; color: var(--rez-text);
}
.rez-admin-table tbody tr:last-child td { border-bottom: 0; }
.rez-admin-table tbody tr.status-cancelled td { color: var(--rez-text-faint); text-decoration: line-through; }
.rez-admin-table tbody tr.status-pending td { background: rgba(255,193,7,.06); }
.drag-handle { cursor: grab; color: var(--rez-text-faint); text-align: center; user-select: none; }

/* Pagination */
.rez-admin-pagination {
  display: flex; gap: .5rem; justify-content: center; margin-top: 1rem;
}

/* Detail dňa (admin dashboard) */
.rez-admin-day-list {
  display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem;
}
.rez-admin-day-row {
  display: grid;
  grid-template-columns: 80px 1.5fr 2fr 120px auto;
  gap: .75rem; align-items: center;
  padding: .5rem .75rem; background: var(--rez-surface); border-radius: 8px;
  border: 1px solid var(--rez-border);
}
.rez-admin-day-row.status-cancelled { opacity: .6; text-decoration: line-through; }
.rez-admin-day-row.status-pending { border-color: rgba(255,193,7,.5); }

.rez-admin-day-actions { display: flex; gap: .5rem; }

/* Badges */
.rez-badge {
  display: inline-block; padding: .15rem .55rem;
  border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: var(--rez-surface); color: var(--rez-text-muted);
}
.rez-badge.badge-active    { background: rgba(25,135,84,.12);  color: var(--rez-success, #198754); }
.rez-badge.badge-pending   { background: rgba(255,193,7,.18);  color: #8a6d00; }
.rez-badge.badge-cancelled { background: rgba(220,53,69,.12);  color: var(--rez-error, #dc3545); }

/* Credit badge */
.rez-credit-badge {
  display: inline-block;
  padding: .3rem .75rem; border-radius: 999px;
  background: var(--rez-surface); border: 1px solid var(--rez-border);
  font-size: .85rem; color: var(--rez-text-muted);
}

/* Mobile */
@media (max-width: 768px) {
  .rez-admin-day-row { grid-template-columns: 70px 1fr; }
  .rez-admin-day-procs, .rez-admin-day-status { grid-column: 2; }
  .rez-admin-day-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .rez-admin-nav-brand { flex-basis: 100%; margin-right: 0; }
}

/* Password show/hide toggle ("ocko") */
.rez-password-wrap {
  position: relative;
}
.rez-password-wrap .rez-input-with-toggle {
  padding-right: 2.75rem; /* miesto na tlacidlo */
}
.rez-password-toggle {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--rez-text-muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color .15s, color .15s;
}
.rez-password-toggle:hover,
.rez-password-toggle:focus {
  background: var(--rez-surface);
  color: var(--rez-primary);
  outline: none;
}
.rez-password-toggle.is-on {
  color: var(--rez-primary);
}
.rez-password-toggle .rez-eye {
  pointer-events: none;
}

/* SMS preview box */
.rez-preview-pre {
  margin: 0;
  padding: .75rem;
  background: #f5f7fa;
  border: 1px solid rgba(31, 100, 71, .15);
  border-radius: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: .95rem;
  color: #1f2a36;
}

/* Category accordion (výber procedúr) */
.rez-cat-accordion {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.rez-cat-panel {
  border: 1px solid rgba(31, 100, 71, .15);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.rez-cat-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rez-text, #1f2a36);
  text-align: left;
  transition: background-color .15s;
}
.rez-cat-header:hover {
  background: #f5f7fa;
}
.rez-cat-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}
.rez-cat-icon-placeholder {
  display: inline-block;
  background: linear-gradient(135deg, #e3ecf0 0%, #d5e8f0 100%);
  border-radius: 6px;
}
.rez-cat-name {
  flex: 1;
}
.rez-cat-count {
  font-size: .85rem;
  font-weight: 400;
  color: var(--rez-text-faint, #6b7886);
}
.rez-cat-chevron {
  font-size: .9rem;
  color: var(--rez-text-faint, #6b7886);
  transition: transform .2s;
}
.rez-cat-panel.open .rez-cat-chevron {
  transform: rotate(180deg);
}
.rez-cat-body {
  border-top: 1px solid rgba(31, 100, 71, .1);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: #fafcfd;
}

/* Procedure row (inside category panel) */
.rez-proc-row {
  border: 1px solid rgba(31, 100, 71, .15);
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.rez-proc-row.active {
  border-color: var(--rez-primary, #1f6447);
  background: #eef7f2;
  box-shadow: 0 0 0 1px var(--rez-primary, #1f6447) inset;
}
.rez-proc-row:hover:not(.active) {
  border-color: rgba(31, 100, 71, .35);
}
.rez-proc-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  cursor: pointer;
  flex-wrap: wrap;
}
.rez-proc-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--rez-text, #1f2a36);
}
.rez-proc-meta {
  display: flex;
  gap: .9rem;
  align-items: center;
  font-size: .95rem;
  color: var(--rez-text-faint, #6b7886);
}
.rez-proc-price {
  font-weight: 600;
  color: var(--rez-text, #1f2a36);
}
.rez-proc-info-btn {
  background: transparent;
  border: 1px solid rgba(31, 100, 71, .25);
  color: var(--rez-text-faint, #6b7886);
  font-size: .8rem;
  padding: .2rem .55rem;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.rez-proc-info-btn:hover {
  background: #f5f7fa;
  color: var(--rez-text, #1f2a36);
}
.rez-proc-details {
  padding: 0 .9rem .7rem;
  border-top: 1px dashed rgba(31, 100, 71, .15);
  margin-top: 0;
}
.rez-proc-desc {
  margin: .6rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--rez-text-faint, #6b7886);
  white-space: pre-wrap;
}

/* Highlight kategórie pri vybranej procedúre */
.rez-cat-panel.has-selected {
  border-color: var(--rez-primary, #1f6447);
  box-shadow: 0 0 0 1px var(--rez-primary, #1f6447) inset;
}
.rez-cat-panel.has-selected > .rez-cat-header {
  background: #eef7f2;
}
.rez-cat-panel.has-selected .rez-cat-name {
  color: var(--rez-primary, #1f6447);
}
.rez-cat-badge {
  display: inline-block;
  background: var(--rez-primary, #1f6447);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  line-height: 1.2;
}

/* Cancel page: zarovnať nadpis, box a tlačidlá na rovnakú šírku */
.rez-cancel-page {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.rez-cancel-page .rez-result-summary {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Zoskupenie procedúr podľa kategórie — detailný blok (confirm modal, cancel, reschedule) */
.rez-procs-grouped {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
  width: 100%;
  font-weight: 400;
}
.rez-procs-group {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.rez-procs-cat-header {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rez-primary, #1f6447);
  margin-bottom: .1rem;
}
.rez-procs-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding-left: .1rem;
}
.rez-procs-name {
  flex: 1;
  min-width: 0;
  color: var(--rez-text, #1f2a36);
  font-weight: 500;
}
.rez-procs-dur {
  flex-shrink: 0;
  font-size: .85em;
  color: var(--rez-text-faint, #6b7886);
  font-variant-numeric: tabular-nums;
}
/* V .rez-modal-row-value zruš text-align:right pre blok so zoskupenými procedúrami */
.rez-modal-row-value:has(.rez-procs-grouped) {
  text-align: left;
  font-weight: 400;
  flex: 1;
}

/* Inline verzia pre admin tabuľku */
.rez-procs-group-inline {
  margin: 0 0 .2rem;
}
.rez-procs-group-inline:last-child { margin-bottom: 0; }
.rez-procs-cat-inline {
  color: var(--rez-text-faint, #6b7886);
  font-size: .88em;
  margin-right: .25rem;
}

/* --- Info tooltip (otáznik vedľa hlavičky stĺpca / labelu) --- */
.rez-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .35rem;
  padding: 0;
  border: 1px solid var(--rez-border, #d6dde4);
  border-radius: 50%;
  background: var(--rez-surface-muted, #f4f6f8);
  color: var(--rez-text-muted, #5b6672);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background .15s, color .15s;
}
.rez-tip-btn:hover,
.rez-tip-btn.active {
  background: var(--rez-primary, #2a7de1);
  color: #fff;
  border-color: var(--rez-primary, #2a7de1);
}
.rez-tip-popover {
  position: absolute;
  z-index: 300;
  max-width: 320px;
  padding: .6rem .75rem;
  background: #1f2933;
  color: #fff;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  white-space: normal;
}
.rez-tip-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 16px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #1f2933;
}