/* Header span wrapper to anchor the triangle */
.rankings-grid .rankings-header .hdr .header-span {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.rankings-grid .rankings-header .hdr .header-span.two-lines {
  align-items: center;
}

.rankings-grid .rankings-header .hdr .header-span.two-lines .sort-indicator {
  bottom: 6px;
}

:root {
  --ideas-radius-lg: 12px;
  --ideas-shadow: 0 6px 18px rgba(0,0,0,0.06);
  --ideas-separator: rgba(0,0,0,0.08);
}

.wp-block-button.is-style-orange.integra a.wp-element-button {
  padding: 12px 30px 12px 54px;
}

.wp-block-button.is-style-orange.integra a.wp-element-button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11150_210)'%3E%3Cpath d='M8.5 0C6.91775 0 5.37103 0.469192 4.05544 1.34824C2.73985 2.22729 1.71447 3.47672 1.10897 4.93853C0.503466 6.40034 0.34504 8.00887 0.653721 9.56072C0.962403 11.1126 1.72433 12.538 2.84315 13.6569C3.96197 14.7757 5.38743 15.5376 6.93928 15.8463C8.49113 16.155 10.0997 15.9965 11.5615 15.391C13.0233 14.7855 14.2727 13.7602 15.1518 12.4446C16.0308 11.129 16.5 9.58225 16.5 8C16.4977 5.87897 15.6541 3.84547 14.1543 2.34568C12.6545 0.845886 10.621 0.00229405 8.5 0ZM8.5 14.6667C7.18146 14.6667 5.89253 14.2757 4.7962 13.5431C3.69987 12.8106 2.84539 11.7694 2.34081 10.5512C1.83622 9.33305 1.7042 7.9926 1.96144 6.6994C2.21867 5.40619 2.85361 4.21831 3.78596 3.28595C4.71831 2.3536 5.9062 1.71867 7.1994 1.46143C8.49261 1.2042 9.83305 1.33622 11.0512 1.8408C12.2694 2.34539 13.3106 3.19987 14.0431 4.2962C14.7757 5.39253 15.1667 6.68146 15.1667 8C15.1647 9.76751 14.4617 11.4621 13.2119 12.7119C11.9621 13.9617 10.2675 14.6647 8.5 14.6667ZM11.8333 8C11.8333 8.17681 11.7631 8.34638 11.6381 8.4714C11.5131 8.59643 11.3435 8.66667 11.1667 8.66667H9.16667V10.6667C9.16667 10.8435 9.09643 11.013 8.97141 11.1381C8.84639 11.2631 8.67682 11.3333 8.5 11.3333C8.32319 11.3333 8.15362 11.2631 8.0286 11.1381C7.90358 11.013 7.83334 10.8435 7.83334 10.6667V8.66667H5.83334C5.65653 8.66667 5.48696 8.59643 5.36193 8.4714C5.23691 8.34638 5.16667 8.17681 5.16667 8C5.16667 7.82319 5.23691 7.65362 5.36193 7.5286C5.48696 7.40357 5.65653 7.33333 5.83334 7.33333H7.83334V5.33333C7.83334 5.15652 7.90358 4.98695 8.0286 4.86193C8.15362 4.7369 8.32319 4.66667 8.5 4.66667C8.67682 4.66667 8.84639 4.7369 8.97141 4.86193C9.09643 4.98695 9.16667 5.15652 9.16667 5.33333V7.33333H11.1667C11.3435 7.33333 11.5131 7.40357 11.6381 7.5286C11.7631 7.65362 11.8333 7.82319 11.8333 8Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11150_210'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  width: 17px;
  height: 17px;
  right: initial;
  left: 18px;
  top: 18px;
  background-size: 18px 16px;
}

/* Rankings section container */
.ranking-brands-section-wrap {
  width: 100%;
  background-color: #F4F7F9;
}
.brand-header-section {
  background-color: #fff;
  width: 100%;
}

/* ===== Accessibility: Visually Hidden but Focusable ===== */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== Accessibility: Skip Link & Focus Targets ===== */
.skip-link,
.main-content-focus-target {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: #E36C05;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: top 0.3s ease;
}

.skip-link:focus,
.main-content-focus-target:focus {
  top: 20px;
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.skip-link:hover,
.main-content-focus-target:hover {
  background: #d15e04;
  color: #ffffff;
}

/* Main content focus target - different positioning */
.main-content-focus-target {
  left: auto;
  right: 20px;
  transform: none;
}

.main-content-focus-target:focus {
  top: 80px; /* Below header */
}

/* Focus styles for buttons and links */
.brand-action-btn:focus-visible,
.btn-share:focus-visible,
.brand-nav-link:focus-visible {
  outline: 2px solid #E36C05;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(227, 108, 5, 0.2);
}

.mobile-bottom-nav-toggle:focus-visible {
  outline: 2px solid #E36C05;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(227, 108, 5, 0.25);
}

/* ===== Responsive utilities ===== */
.brand-section {
  margin-bottom: 32px;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .brand-section {
    margin-bottom: 48px;
  }
}

.section-header.is-outside {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.section-title-wrap .section-title {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1;
}

.section-title-wrap .section-subtitle {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8aa0b5;
}

.section-title-wrap .section-desc {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--bs-heading-color);
}

.section-header .section-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.section-header .section-icon img {
  width: 40px;
  height: 40px;  
}

.brand-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(31, 47, 70, 0.08);
}

.brand-card .chart-container,
.brand-card canvas {
  width: 100% !important;
}

.legend-disabled {
  text-decoration: line-through;
}

/* Full-bleed gauge: extend gauge canvas to card edges */
.brand-card #chart-widocznosc-branza-canvas {
  display: block;
  width: 100% !important;
  margin: 0;
}

/* Legend container for line chart */
.brand-card .legend-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
  margin-top: 12px;
  line-height: 1.1;
  font-size: 11px;
}

/* Comparison pills row */
.brand-card .comparison-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.brand-card .comparison-brand {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.brand-card .comparison-brand.pill-blue {
  background: #e3f2fd;
  color: #1976d2;
}

.brand-card .comparison-brand.pill-green {
  background: #e8f5e8;
  color: #2e7d32;
}

/* Date range info block */
.brand-card .date-range {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #f0f4f8;
  border-radius: 8px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.brand-card .date-range .label {
  font-size: 14px;
  color: #5a6c7d;
  font-weight: 600;
}

/* Value display (exposure) */
.brand-card .value-display {
  margin-bottom: 24px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: #fff;
}

.brand-card .value-display .label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.brand-card .value-display .value {
  font-size: 36px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.brand-card .value-display .note {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 8px;
}

.brand-card .section-description {
  margin-top: 24px;
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.brand-card .section-description p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/* Brand card chart canvases - kwadratowe */
#wartosc-ekspozycji-branza .chart-filters {
  width: 100%;
}

#medialnosc-marki .brand-card canvas,
#wartosc-ekspozycji .brand-card canvas {
    aspect-ratio: 1 / 1;
    max-height: 400px;
}

.brand-card canvas#chart-medialnosc-branza-canvas {
  max-height: 600px;
}

.brand-card canvas#chart-wartosc-ekspozycji-branza-canvas {
  max-height: 800px;
}

/* Zmniejszone paddingi dla dwóch górnych kart */
#medialnosc-marki .brand-card,
#wartosc-ekspozycji .brand-card {
  padding: 12px;
}

/* Legenda w jednej linii pod wykresem (fallback, jeśli inline style zostanie nadpisany) */
.brand-card .chart-legend-inline {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: auto;
  white-space: nowrap;
  font-size: 10px; /* zmniejszona o 2px */
}

/* --- Share Widget & Modal --- */
.brand-share-widget {
    border: 1px solid #E3E3E3;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 1rem;
}

.brand-share-widget .share-widget-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 160%;
    color: #002752;
}


.share-widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #0A1B2A;
    margin-bottom: 4px;
}

.share-widget-subtitle {
    font-size: 14px;
    color: #70869E;
    margin-bottom: 1rem;
}

.share-widget-buttons {
  gap: 6px;
}

.btn-share {
  background: transparent;
  border: none;
  border-radius: 8px;
  width: 52px;
  height: 52px;
  transition: all ease 0.3s;
  padding: 0;
  cursor: pointer;
  transform: scale3d(1, 1, 1);
}

.btn-share:hover {
    transform: scale3d(1.1, 1.1, 1.1);
}

.btn-share img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#immShareModal .modal-body {
  padding: 0;
}

#immShareModal .modal-content {
    border-radius: 16px;
    max-width: 600px;
}

.share-widget-preview {
  max-width: 100%;
}

.share-widget-preview-wrapper {
    background-color: #f4f7f9;
    padding: 10px 0;
}

.share-widget-preview {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: left;
    max-width: 550px;
    margin: 0 auto;
}

.share-widget-preview .brand-name {
    font-size: 34px;
    font-weight: 700;
    color: #0A1B2A;
    text-align: center;
}

.share-widget-preview .brand-sector {
    font-size: 16px;
    color: #70869E;
    margin-bottom: 1.5rem;
    text-align: center;
}

.share-widget-preview .imm-rank-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F9F9F9;
    border: 1px solid #E3E3E3;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 1.5rem;
}

.share-widget-preview .imm-rank-box .rank-info {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.share-widget-preview .imm-rank-box .imm-logo-img {
    height: 28px;
    width: auto;
}

.share-widget-preview .rank-info .imm-logo {
    font-weight: 700;
    color: #E36C05;
    letter-spacing: 2px;
}

.share-widget-preview .rank-info .rank-text {
    font-weight: 600;
    color: #476382;
}

.share-widget-preview .rank-info .month {
    font-size: 14px;
    color: #70869E;
    display: block;
    margin-top: 4px;
    width: 100%;
    display: block;
}

.share-widget-preview .rank-position {
    font-size: 60px;
    font-weight: 700;
    color: #002752;
}

.share-widget-preview .brand-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.share-widget-preview .metric-item img {
    height: 32px;
    margin-bottom: 8px;
}

.share-widget-preview .metric-value {
    font-size: 20px;
    font-weight: 700;
}

.share-widget-preview .metric-label {
  font-size: 14px;
  color: #476382;
  max-width: 120px;
  margin: 10px auto 0 auto;
  text-align: center;
}

.share-widget-preview .metric-value:nth-child(1) {
    color: #24BD9E;
}

.share-widget-preview .metric-value:nth-child(2) {
    color: #14778E;
}

.share-widget-preview .metric-value:nth-child(3) {
    color: #00A8E8;
}

/* Single marka header card and texts */
.brand-ranking-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #DBE0E6;
  border-radius: 16px;
}

.brand-position {
  font-weight: 700;
  font-size: 56px;
  line-height: 100%;
  color: #002752;
}

.brand-ranking-card .rank-title {
  font-weight: 600;
  color: var(--immdefaultimm-orange-dark);
}

.brand-ranking-card .current-month {
  font-weight: 600;
  font-size: 11px;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #476382;
}

.brand-header-content .back-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--immdefaultimm-orange-dark);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.brand-header-content .back-link a:hover {
  text-decoration: underline;
}

.brand-header-content .rank-ttile {
  font-weight: 700;
  font-size: 40px;
  line-height: 120%;
  color: #002752;
}

.brand-header-content .brand-sector {
  font-weight: 600;
  font-size: 16px;
  color: #476382;
}

.brand-header-content .brand-sector span {
  font-weight: 400;
}

/* Change value styling */
.rankings-cell.col-change {
  font-weight: 600;
  text-align: center;
}

.rankings-cell.col-change.positive {
  color: #28a745;
}

.rankings-cell.col-change.negative {
  color: #dc3545;
}

.rankings-cell.col-change.neutral {
  color: #6c757d;
}

/* Change icons styling */
.change-icon {
  font-size: 12px;
  margin-left: 4px;
  display: inline-block;
}

.change-icon.positive {
  color: #28a745;
}

.change-icon.negative {
  color: #dc3545;
}

.change-icon.neutral {
  color: #6c757d;
}

/* Exposure value styling */
.rankings-cell.col-exp {
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.ranking-brands-search {
  max-width: 1270px;
  margin: 0 auto;
}

.ranking-brands-section-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem 1rem;
}

#rankings-grid {
  min-height: 200px;
}

.rankings-grid.rankings-grid--enhanced {
  position: relative;
  min-height: 200px;
}

.rankings-grid__loader {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
  z-index: 5;
}

.rankings-grid.is-loading .rankings-grid__loader {
  display: block;
}

.rankings-grid__loader-svg {
  width: 90px;
  height: 90px;
}

.rankings-grid__content {
  min-height: 200px;
}

.rankings-grid .rankings-table {
  background: var(--immdefaultwhite, #fff);
  border: 2px solid #ffffff;
  border-radius: 10px;
  overflow: visible; /* Changed from hidden to allow sticky header */
  width: 100%;
}

.rankings-grid .rankings-scrollable {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.rankings-grid .rankings-scrollable.has-custom-scroll {
  overflow-x: hidden;
}

/* Ukryj natywny scrollbar gdy używamy custom */
.rankings-grid .rankings-scrollable.has-custom-scroll::-webkit-scrollbar {
  display: none;
}

.rankings-grid .rankings-scrollable.has-custom-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Padding dla custom scrollbarów u góry i na dole */
.rankings-grid .rankings-scrollable.has-custom-scroll {
  padding-bottom: 16px;
}

/* Style dla górnego scrollbara */
.rankings-grid .os-scrollbar-horizontal-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
}

.rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
  background: rgba(0, 0, 0, 0.4);
  min-width: 50px;
}

/* Wymuszenie widoczności scrollbarów - zawsze widoczne */
.rankings-grid .os-scrollbar-horizontal,
.rankings-grid .os-scrollbar-horizontal-top {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rankings-grid .os-scrollbar-horizontal .os-scrollbar-track,
.rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-track {
  background: rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
}

.rankings-grid .os-scrollbar-horizontal .os-scrollbar-handle,
.rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
  background: rgba(0, 0, 0, 0.35) !important;
  opacity: 1 !important;
  min-width: 50px;
}

/* Hover state dla lepszej interakcji */
.rankings-grid .os-scrollbar-horizontal:hover .os-scrollbar-handle,
.rankings-grid .os-scrollbar-horizontal-top:hover .os-scrollbar-handle {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Touch-friendly scrollbars na mobilnych */
@media (max-width: 767px), (pointer: coarse) {
  .rankings-grid .os-scrollbar-horizontal,
  .rankings-grid .os-scrollbar-horizontal-top {
    height: 6px /* Większy obszar dotyku */
  }
  
  .rankings-grid .os-scrollbar-horizontal .os-scrollbar-track,
  .rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-track {
    height: 6px;
    padding: 6px 0; /* Padding dla komfortu */
  }
  
  .rankings-grid .os-scrollbar-horizontal .os-scrollbar-handle,
  .rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
    height: 6px !important; /* Grubszy handle */
    min-width: 60px !important; /* Szerszy handle */
    border-radius: 6px;
  }
  
  /* Zwiększona widoczność na touch */
  .rankings-grid .os-scrollbar-horizontal .os-scrollbar-handle,
  .rankings-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
    background: rgba(0, 0, 0, 0.45) !important;
  }
}

.rankings-grid .rankings-body {
  overflow: visible;
}

/* Wrapper dla header+body - przesuwany jako całość */
.rankings-grid .rankings-content-wrapper {
  min-width: 100%;
  width: max-content;
}

/* Rankings table layout using flexbox */
.rankings-grid .rankings-header,
.rankings-grid .rankings-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e5e5e5;
  min-height: 60px;
  position: relative;
  width: 100%;
  justify-content: flex-start;
}

.rankings-grid .rankings-table--dynamika .rankings-header,
.rankings-grid .rankings-table--dynamika .rankings-row {
  min-width: initial;
  padding: 0 10px;
}

/* Header refinements to match mockup */
.rankings-grid .rankings-header {
  background: #F8FAFC;
  border-bottom: 2px solid #E5E7EB;
  display: flex;
  align-items: end;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Sticky header state (controlled by JavaScript scroll spy) - LARGE DESKTOP ONLY */
@media (min-width: 1280px) {
  .rankings-grid .rankings-header.is-sticky {
    position: fixed;
    top: 89px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: calc(100% - 30px); /* 15px padding on each side */
    max-width: 1140px; /* Match Bootstrap container width */
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
  }
}

/* Fade in animation for sticky header */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade out animation when removing sticky */
.rankings-grid .rankings-header.is-fading-out {
  animation: fadeOut 0.2s ease-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Placeholder to prevent page jump when header becomes fixed */
.rankings-grid .rankings-header-placeholder {
  display: none;
  height: 0;
}

.rankings-grid .rankings-header-placeholder.is-active {
  display: block;
}

/* Responsive width for sticky header - LARGE DESKTOP ONLY */
@media (min-width: 1280px) {
  .rankings-grid .rankings-header.is-sticky {
    max-width: 1140px;
  }

  .rankings-grid .rankings-scrollable {
    overflow: visible !important;
  }
}

/* Tablets and smaller: No sticky behavior, header scrolls with table */
@media (max-width: 1279px) {
  .rankings-grid .rankings-header.is-sticky {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  
  .rankings-grid .rankings-header-placeholder.is-active {
    display: none !important;
    height: 0 !important;
  }
}

.rankings-grid .rankings-header .rankings-cell.hdr {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 160%;
  display: flex;
  align-items: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #476382;
  padding: 10px 4px 20px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.rankings-grid .rankings-header .hdr .two-lines {
  position: static;
}

.rankings-grid .rankings-header .hdr.hdr-exp,
.rankings-grid .rankings-header .hdr .two-lines {
  text-align: center;
}

.rankings-grid .rankings-header .hdr .two-lines .abbr,
.rankings-grid .rankings-header .hdr.two-lines .abbr {
  letter-spacing: 0.03em;
}

.rankings-grid .rankings-header .hdr .two-lines small,
.rankings-grid .rankings-header .hdr.two-lines small {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rankings-grid .rankings-header .hdr.hdr-group-ideas {
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Header alignment per column type */
.rankings-grid .rankings-header .hdr.hdr-rank,
.rankings-grid .rankings-header .hdr.hdr-name,
.rankings-grid .rankings-header .hdr.hdr-sector {
  justify-content: flex-start; /* Left align */
}

.rankings-grid .rankings-header .hdr.hdr-change,
.rankings-grid .rankings-header .hdr.hdr-medialness,
.rankings-grid .rankings-header .hdr.hdr-exp,
.rankings-grid .rankings-header .hdr.hdr-i,
.rankings-grid .rankings-header .hdr.hdr-d,
.rankings-grid .rankings-header .hdr.hdr-e,
.rankings-grid .rankings-header .hdr.hdr-a,
.rankings-grid .rankings-header .hdr.hdr-s {
  justify-content: center; /* Center align IDEAS columns */
}

/* Sortable header indicators and interactions */
.rankings-grid .rankings-header .hdr[data-sort] {
  cursor: pointer;
  position: relative;
}

.rankings-grid .rankings-header .hdr .sort-indicator {
  position: absolute;
  left: 50%;
  bottom: -14px; /* place under label */
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  opacity: 1;
}

/* Active sorted state brightens the indicator */
.rankings-grid .rankings-header .hdr.is-sorted .sort-indicator {
  opacity: 1;
}

/* Ascending: small up triangle */
.rankings-grid .rankings-header .hdr.sorted-asc .sort-indicator {
  border-bottom: 8px solid #E36C05; /* unified orange triangle */
  border-top: none;
}

/* Descending: small down triangle */
.rankings-grid .rankings-header .hdr.sorted-desc .sort-indicator {
  border-top: 8px solid #E36C05;
  border-bottom: none;
}

/* Two-line headers: keep indicator aligned with the top line */
/* two-line variant uses same absolute positioning under header-span */

/* Centered indicator variant (e.g., exposure value header) */
.rankings-grid .rankings-header .hdr .sort-indicator.center {
  align-self: center;
}

/* Hover feedback on sortable headers */
.rankings-grid .rankings-header .hdr[data-sort]:hover,
.rankings-grid .rankings-header .hdr[data-sort]:hover span,
.rankings-grid .rankings-header .hdr[data-sort]:hover small {
  color: #E36C05;
}

.rankings-grid .rankings-header .hdr[data-sort]:hover .sort-indicator {
  opacity: 0.7;
}

.rankings-grid .rankings-row .col-rank,
.rankings-grid .rankings-header .hdr.hdr-rank {
  padding-left: 15px !important;
}

/* Rows styling */
.rankings-grid .rankings-row {
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  min-height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.home .rankings-grid .rankings-row:hover .rankings-cell {
  color: rgba(0, 143, 114, 1);
}

.home .rankings-grid .rankings-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36, 189, 158, 0.04);
  border: 3px solid #008F72;
  box-shadow: 0px 8px 24px rgba(36, 189, 158, 0.16);
  border-radius: 6px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  width: calc(100% - 4px);
}

.rankings-grid .rankings-row:hover::before {
  opacity: 1;
  visibility: visible;
}

.rankings-grid .rankings-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden; /* Clip content to rounded corners */
}

/* Highlight current brand row - bold all cells */
.rankings-grid .rankings-row.active-brand .rankings-cell {
  font-weight: 700;
}

.rankings-grid .rankings-row.active-brand .rankings-cell.is-bold {
  font-weight: 700;
}

/* Content alignment and sizing per column type */
.rankings-grid .rankings-row .rankings-cell,
.rankings-grid .rankings-header .rankings-cell {
  padding: 10px 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: #002752;
  min-height: 40px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.rankings-grid .rankings-table--dynamika .rankings-header .rankings-cell.hdr-brand {
  flex: 1 1 20%;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
}

.rankings-grid .rankings-table--dynamika .rankings-row .rankings-cell {
  font-size: 14px;
}

.rankings-grid .rankings-table--dynamika .rankings-row .rankings-cell.col-month {
  text-transform: capitalize;
  flex: 1 1 20%;
}

.rankings-grid .rankings-table--dynamika .rankings-header .rankings-cell:not(.hdr-brand),
.rankings-grid .rankings-table--dynamika .rankings-row .rankings-cell:not(.col-month) {
  flex: 1 1 16%;
}

.rankings-grid .rankings-table--dynamika .rankings-row.dynamika-row .rankings-cell {
  font-size: 16px;
}

.rankings-grid .rankings-table--dynamika .rankings-header .rankings-cell.hdr-brand {
  font-size: 11px;
  text-transform: uppercase;
}

/* Rankings table column widths using percentages for proper alignment */
.rankings-grid .rankings-row .col-rank,
.rankings-grid .rankings-row .rankings-cell.col-lp,
.rankings-grid .rankings-header .rankings-cell.hdr-lp,
.rankings-grid .rankings-header .hdr-rank {
  width: 4%;
  min-width: 30px;
  flex: 0 0 4%;
}

.rankings-grid .rankings-row .col-name,
.rankings-grid .rankings-header .hdr-name {
  width: 12%;
  min-width: 107px;
  flex: 0 0 12%;
}

.rankings-grid .rankings-row .col-sector,
.rankings-grid .rankings-header .hdr-sector {
  width: 20%;
  min-width: 133px;
  flex: 0 0 20%;
  cursor: pointer;
}

.rankings-grid .rankings-row .col-i,
.rankings-grid .rankings-header .hdr-i {
  width: 8%;
  min-width: 50px;
  flex: 0 0 8%;
}

.rankings-grid .rankings-row .col-d,
.rankings-grid .rankings-header .hdr-d {
  width: 8%;
  min-width: 50px;
  flex: 0 0 8%;
}

.rankings-grid .rankings-row .col-e,
.rankings-grid .rankings-header .hdr-e {
  width: 8%;
  min-width: 50px;
  flex: 0 0 8%;
}

.rankings-grid .rankings-row .col-a,
.rankings-grid .rankings-header .hdr-a {
  width: 8%;
  min-width: 50px;
  flex: 0 0 8%;
}

.rankings-grid .rankings-row .col-s,
.rankings-grid .rankings-header .hdr-s {
  width: 8%;
  min-width: 50px;
  flex: 0 0 8%;
}

.rankings-grid .rankings-row .col-exp,
.rankings-grid .rankings-header .hdr-exp {
  width: 11%;
  min-width: 65px;
  flex: 0 0 11%;
}

/* === Medialność branży table (7 columns: Marka + I D E A S + Medialność) === */
.rankings-grid .rankings-table--medialnosc-branza .rankings-header,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row {
  display: flex;
  align-items: stretch;
  min-width: initial;
  padding: 0 10px;
}

/* Column widths sum to 100%: 28% + (5 * 10%) + 22% */
.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-name,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-name,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-name,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-name {
  flex: 0 0 28%;
  max-width: 28%;
  justify-content: flex-start;
}

.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-i,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-i,
.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-d,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-d,
.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-e,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-e,
.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-a,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-a,
.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-s,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-s,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-i,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-i,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-d,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-d,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-e,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-e,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-a,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-a,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-s,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-s {
  flex: 0 0 10%;
  max-width: 10%;
  justify-content: center;
  text-align: center;
}

.rankings-grid .rankings-table--medialnosc-branza .rankings-header .hdr-medialness,
.rankings-grid .rankings-table--medialnosc-branza .rankings-row .col-medialness,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-header .hdr-medialness,
.rankings-grid .rankings-table--wartosc-ekspozycji-branza .rankings-row .col-medialness {
  flex: 0 0 22%;
  max-width: 22%;
  justify-content: flex-end;
  text-align: right;
}

.rankings-grid .rankings-row .col-medialness,
.rankings-grid .rankings-header .hdr-medialness {
  width: 8%;
  min-width: 65px;
  flex: 0 0 8%;
}


.rankings-grid .rankings-row .col-change,
.rankings-grid .rankings-header .hdr-change {
  width: 5%;
  min-width: 40px;
  flex: 0 0 5%;
}

/* LP Column */
.rankings-grid .rankings-row .col-rank {
  justify-content: flex-start;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
  color: #002752;
}

/* Marka Column */
.rankings-grid .rankings-row .col-name {
  justify-content: flex-start;
  font-weight: 600;
}

/* Branża Column */
.rankings-grid .rankings-row .col-sector {
  justify-content: flex-start;
  font-size: 14px;
  line-height: 160%;
}

/* I, D, E, A, S Columns - center aligned within groups */
.rankings-grid .rankings-row .col-i,
.rankings-grid .rankings-row .col-d,
.rankings-grid .rankings-row .col-e,
.rankings-grid .rankings-row .col-a,
.rankings-grid .rankings-row .col-s {
  justify-content: center;
  font-size: 13px;
  line-height: 160%;
}

/* Medialność Column */
.rankings-grid .rankings-row .col-medialness {
  justify-content: center;
  font-size: 13px;
  line-height: 160%;
  text-align: center;
}

/* Wartość ekspozycji Column */
.rankings-grid .rankings-row .col-exp {
  justify-content: center;
  font-size: 13px;
  line-height: 160%;
  text-align: center;
}

/* ZMIANA column styling with color states */
.rankings-grid .rankings-row .col-change {
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  line-height: 160%;
  justify-content: center;
}

/* Column widths for brand-section grids */
.brand-section .rankings-grid .rankings-header .hdr-name,
.brand-section .rankings-grid .rankings-row .col-name {
  flex: 0 0 16%;
  max-width: 16%;
}

.brand-section .rankings-grid .rankings-header .hdr-medialness,
.brand-section .rankings-grid .rankings-row .col-medialness,
.brand-section .rankings-grid .rankings-header .hdr-i,
.brand-section .rankings-grid .rankings-row .col-i,
.brand-section .rankings-grid .rankings-header .hdr-d,
.brand-section .rankings-grid .rankings-row .col-d,
.brand-section .rankings-grid .rankings-header .hdr-e,
.brand-section .rankings-grid .rankings-row .col-e,
.brand-section .rankings-grid .rankings-header .hdr-a,
.brand-section .rankings-grid .rankings-row .col-a,
.brand-section .rankings-grid .rankings-header .hdr-s,
.brand-section .rankings-grid .rankings-row .col-s {
  flex: 0 0 13.3333%;
  max-width: 13.3333%;
}

/* Change column color states */
.rankings-grid .rankings-row .col-change.positive {
  color: rgba(0, 143, 114, 1);
}

.rankings-grid .rankings-row .col-change.negative {
  color: #E00D0D;
}

.rankings-grid .rankings-row .col-change.neutral {
  color: rgba(112, 134, 158, 1);
}

/* Triangle icons for change values */
.rankings-grid .rankings-row .col-change.positive::before {
  content: '▲';
  margin-right: 4px;
}

.rankings-grid .rankings-row .col-change.negative::before {
  content: '▼';
  margin-right: 4px;
}

.rankings-grid .rankings-row .col-change.neutral::before {
  content: '▶';
  margin-right: 4px;
}


/* Section title styling */
.ranking-brands-section .section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  color: #002752;
}

/* Loading state styling */
.rankings-grid .text-muted {
  text-align: center;
  font-size: 16px;
  color: #6B7280;
  padding: 3rem 1rem;
}

/* Subtle vertical separators between columns (align with 12px grid gap) */
.rankings-grid .rankings-header .rankings-cell.hdr {
  display: flex;
  align-items: flex-end; 
  cursor: pointer;
}

.rankings-grid .rankings-row .rankings-cell.col-medialness,
.single .rankings-grid .rankings-header .rankings-cell.hdr.hdr-medialness {
  justify-content: center;
}

/* Front-page filters row: align labels and inputs to start */
.ranking-brands-section .row.g-3.align-items-start label.form-label {
  align-self: flex-start;
}

.rankings-grid .rankings-header .rankings-cell:not(.hdr-rank)::before,
.rankings-grid .rankings-row .rankings-cell:not(.col-rank)::before {
  content: '';
  position: absolute;
  left: -6px; /* half of the grid gap (12px) */
  top: 18%;
  bottom: 18%;
  width: 1px;
  /* background: var(--ideas-separator); */
}

/* Filter controls styling */
.brand-section  .form-select,
.ranking-brands-section .form-select,
.ranking-brands-section select {
  background: #ffffff;
  border: 1px solid #C2CBD5;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #002752;
  transition: all 0.2s ease;
  height: 48px;
  width: 100%;
}

.brand-section  .form-select:focus,
.ranking-brands-section .form-select:focus,
.ranking-brands-section select:focus {
  outline: 2px solid var(--immdefaultimm-orange);
  outline-offset: 2px;
  border-color: var(--immdefaultimm-orange);
  box-shadow: 0 0 0 3px rgba(227, 108, 5, 0.15);
}

/* Filter row spacing and alignment */
.ranking-brands-section .row.g-3.align-items-center {
  margin-bottom: 2rem;
}

/* Search container with background and shadow */
.ranking-brands-section .search-container {
  background: #F4F7F9;
  border: 4px solid #FFFFFF;
  box-shadow: 0px 4px 24px rgba(0, 10, 20, 0.24);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ranking-brands-section .search-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.ranking-brands-section .search-icon {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.ranking-brands-section .search-input-wrapper .form-control {
  width: 100%;
  height: 48px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #C2CBD5;
  padding: 12px 16px 12px 40px;
  background: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
}

.ranking-brands-section .search-input-wrapper .form-control:focus {
  border-color: #E36C05;
  box-shadow: 0 0 0 3px rgba(227, 108, 5, 0.15);
  outline: 2px solid #E36C05;
  outline-offset: 2px;
}

.ranking-brands-section .search-input-wrapper .form-control::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

/* Search button styling */
.ranking-brands-section .search-container .btn-primary {
  background: #E36C05;
  border: 1px solid #E36C05;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  transition: all 0.2s ease;
  height: 48px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  width: 200px;
  text-align: center;
}

.ranking-brands-section .search-container .btn-primary:hover {
  background: #CC5F04;
  border-color: #CC5F04;
  box-shadow: 0 2px 8px rgba(227, 108, 5, 0.3);
}

.ranking-brands-section .search-container .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(227, 108, 5, 0.2);
}

/* Remove default select arrow and add custom caret */
.brand-section  .form-select,
.ranking-brands-section select,
.ranking-brands-section .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.67505 7.5H14.9917C15.1565 7.50069 15.3174 7.55024 15.4541 7.64237C15.5907 7.73451 15.697 7.8651 15.7594 8.01762C15.8219 8.17015 15.8377 8.33776 15.8049 8.49927C15.772 8.66078 15.6921 8.80894 15.575 8.925L10.925 13.575C10.8476 13.6531 10.7554 13.7151 10.6539 13.7574C10.5523 13.7997 10.4434 13.8215 10.3334 13.8215C10.2234 13.8215 10.1144 13.7997 10.0129 13.7574C9.91135 13.7151 9.81918 13.6531 9.74171 13.575L5.09172 8.925C4.9747 8.80894 4.89473 8.66078 4.86191 8.49927C4.82909 8.33776 4.84489 8.17015 4.90733 8.01762C4.96977 7.8651 5.07603 7.73451 5.21269 7.64237C5.34934 7.55024 5.51024 7.50069 5.67505 7.5Z' fill='%23E36C05'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px;
}

/* Form layout improvements */
.ranking-brands-section .row {
  align-items: end;
}

.ranking-brands-section .form-group,
.ranking-brands-section .mb-3 {
  margin-bottom: 1.5rem;
}

/* Inline labels for filters */
.ranking-brands-section .row.g-3.align-items-center .col-12,
.ranking-brands-section .row.g-3.align-items-center .col-md-4,
.ranking-brands-section .row.g-3.align-items-center .col-lg-4 {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ranking-brands-section .row.g-3.align-items-center label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #002752;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.ranking-brands-section .row.g-3.align-items-center .form-select {
  flex: 1;
}

.ranking-brands-section label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #002752;
  margin-bottom: 12px;
  display: block;
}

/* Month navigation styling - complete date selector with border */
.ranking-brands-section .month-modal {
  background: #ffffff;
  border: 1px solid #C2CBD5;
  border-radius: 8px;
  padding: 8px 12px;
  height: 48px;
  justify-content: space-between;
  flex: 1;
  position: relative;
}

.ranking-brands-section .month-prev,
.ranking-brands-section .month-next {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.ranking-brands-section .month-prev svg,
.ranking-brands-section .month-next svg {
  width: 21px;
  height: 20px;
}

.ranking-brands-section .month-next svg {
  transform: rotate(180deg);
}

.ranking-brands-section .month-prev:hover,
.ranking-brands-section .month-next:hover {
  color: #CC5F04;
  background: rgba(227, 108, 5, 0.1);
  border-radius: 8px;
}

.ranking-brands-section #current-month {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #002752;
  flex: 1;
  text-align: center;
  margin: 0 8px;
}

.ranking-brands-section .clickable-date {
  cursor: pointer;
  position: relative;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.ranking-brands-section .clickable-date:hover {
  background-color: rgba(227, 108, 5, 0.1);
}

/* Date dropdown menu */
.ranking-brands-section .date-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #C2CBD5;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 10, 20, 0.15);
  z-index: 9999;
  min-width: 200px;
  max-width: 300px;
  max-height: 300px;
  overflow-y: auto;
  display: none;
  white-space: nowrap;
}

/* Date selection modal styles */
.chart-dynamika-zmian-grid {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  cursor: default;
}

/* Apply same scrollable styles as main rankings grid */
.chart-dynamika-zmian-grid .rankings-scrollable {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.chart-dynamika-zmian-grid .rankings-scrollable.has-custom-scroll {
  overflow-x: hidden;
}

/* Ukryj natywny scrollbar gdy używamy custom */
.chart-dynamika-zmian-grid .rankings-scrollable.has-custom-scroll::-webkit-scrollbar {
  display: none;
}

.chart-dynamika-zmian-grid .rankings-scrollable.has-custom-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Padding dla custom scrollbarów u góry i na dole */
.chart-dynamika-zmian-grid .rankings-scrollable.has-custom-scroll {
  padding-bottom: 16px;
}

/* Style dla górnego scrollbara */
.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
}

.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
  background: rgba(0, 0, 0, 0.4);
  min-width: 50px;
}

/* Wymuszenie widoczności scrollbarów - zawsze widoczne */
.chart-dynamika-zmian-grid .os-scrollbar-horizontal,
.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top {
  top: 4px;
}

.chart-dynamika-zmian-grid .os-scrollbar-horizontal {
  bottom: 4px;
}

.chart-dynamika-zmian-grid .os-scrollbar-horizontal .os-scrollbar-track,
.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-track {
  background: rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
}

.chart-dynamika-zmian-grid .os-scrollbar-horizontal .os-scrollbar-handle,
.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
  background: rgba(0, 0, 0, 0.35) !important;
  opacity: 1 !important;
  min-width: 50px;
}

/* Hover state dla lepszej interakcji */
.chart-dynamika-zmian-grid .os-scrollbar-horizontal:hover .os-scrollbar-handle,
.chart-dynamika-zmian-grid .os-scrollbar-horizontal-top:hover .os-scrollbar-handle {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Touch-friendly scrollbars na mobilnych dla tabeli dynamika zmian */
@media (max-width: 767px), (pointer: coarse) {
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal,
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal-top {
    height: 6px !important;
  }
  
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal .os-scrollbar-track,
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-track {
    height: 6px !important;
    padding: 6px 0;
  }
  
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal .os-scrollbar-handle,
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
    height: 6px !important;
    min-width: 60px !important;
    border-radius: 6px;
  }

  .chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
    height: 6px !important;
  }
  
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal .os-scrollbar-handle,
  .chart-dynamika-zmian-grid .os-scrollbar-horizontal-top .os-scrollbar-handle {
    background: rgba(0, 0, 0, 0.45) !important;
  }
}

.chart-dynamika-zmian-grid .rankings-body {
  overflow: visible;
}

/* Wrapper dla header+body - przesuwany jako całość */
.chart-dynamika-zmian-grid .rankings-content-wrapper {
  min-width: 100%;
  width: max-content;
}

/* Disable pointer cursor for all elements in dynamika zmian grid */
.chart-dynamika-zmian-grid .rankings-header .hdr,
.chart-dynamika-zmian-grid .rankings-header .hdr[data-sort],
.chart-dynamika-zmian-grid .rankings-row,
.chart-dynamika-zmian-grid .rankings-row.can-click,
.chart-dynamika-zmian-grid .rankings-cell {
  cursor: default !important;
}

/* Disable hover effects that suggest interactivity */
.chart-dynamika-zmian-grid .rankings-header .hdr[data-sort]:hover,
.chart-dynamika-zmian-grid .rankings-header .hdr[data-sort]:hover span,
.chart-dynamika-zmian-grid .rankings-header .hdr[data-sort]:hover small {
  color: inherit !important;
}

.chart-dynamika-zmian-grid .rankings-header .hdr[data-sort]:hover .sort-indicator {
  opacity: 0.3 !important;
}

.chart-dynamika-zmian-grid .rankings-grid {
  min-width: 1024px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.available-months-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.available-month-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
}

.available-month-item:hover {
  background: #F9FAFB;
  border-color: #E36C05;
}

.available-month-item.active {
  background: #FEF3E2;
  border-color: #E36C05;
  color: #E36C05;
}

.available-month-item .month-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.available-month-item .current-indicator {
  font-size: 12px;
  font-weight: 500;
  color: #E36C05;
  background: #FEF3E2;
  padding: 2px 8px;
  border-radius: 4px;
}

.ranking-brands-section .date-dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid #F3F4F6;
  transition: background-color 0.2s ease;
}

.ranking-brands-section .date-dropdown-item:last-child {
  border-bottom: none;
}

.ranking-brands-section .date-dropdown-item:hover {
  background-color: #F9FAFB;
}

.ranking-brands-section .date-dropdown-item.active {
  background-color: rgba(227, 108, 5, 0.1);
  color: #E36C05;
  font-weight: 700;
}

.ranking-brands-section .date-dropdown-item.active:hover {
  background-color: rgba(227, 108, 5, 0.15);
}

/* ===== Gauge chart texts (label + value) ===== */
.brand-gauge-label {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 160%;
  color: #476382;
}

.brand-gauge-value {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  display: flex;
  align-items: center;
  text-align: right;
  color: #002752;
}

/* ===== BRAND ANALYSIS PAGE STYLES ===== */

/* Brand Analysis Layout */
.brand-analysis-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.brand-content-row {
  margin-top: 2rem;
  gap: 2rem;
}

/* Brand Header */
.brand-header {
  background: linear-gradient(135deg, var(--immdefaultimm-dark-100) 0%, var(--immdefaultimm-dark-70) 100%);
  color: white;
  padding: 3rem 2rem;
  border-radius: 0 0 16px 16px;
  margin-bottom: 2rem;
}

.brand-info {
  max-width: 1200px;
  margin: 0 auto;
}

.brand-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.brand-meta {
  display: flex;
  gap: 2rem;
  font-size: 1rem;
  opacity: 0.9;
}

.brand-id, 
.brand-sector {
  background: rgba(255, 255, 255, 0.1);
  padding: 0;
  border-radius: 6px;
  backdrop-filter: blur(10px);
}

.rank-title {
  color: var(--immdefaultimm-orange-dark);
  font-weight: 700;
}

/* Left Navigation */
.brand-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  text-decoration: none;
  color: var(--immdefaultimm-dark-70);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.kb-nav-desktop-horizontal-layout-standard a.kb-nav-link-content {
  padding-left: 0;
}

.wp-block-kadence-navigation-link.current-menu-item a,
.kb-nav-desktop-horizontal-layout-standard a.kb-nav-link-content:hover,
.kb-nav-desktop-horizontal-layout-standard a.kb-nav-link-content.active,
.brand-nav-link:hover,
.brand-nav-link.active {
  color: var(--immdefaultimm-orange-dark);
  text-decoration: none;
}

/* Sidebar nav icon defaults */
.brand-nav-link .nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: filter 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

/* On hover/active, visually tint monochrome SVGs to orange using CSS filters */
.brand-nav-link:hover .nav-icon,
.brand-nav-link.active .nav-icon {
  /* This filter approximates #E36C05 on typical dark icons */
  filter: brightness(0) saturate(100%) invert(50%) sepia(73%) saturate(719%) hue-rotate(357deg) brightness(92%) contrast(96%);
  opacity: 1;
}

/* Right Charts Column */
.brand-charts-col {
  padding-left: 0;
}

.brand-charts-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Chart Sections */
.brand-chart-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  scroll-margin-top: 120px;
}

.chart-locked-overlay {
  position: relative;
  z-index: 1;
}

.chart-locked-inner .user-icon-plus-white {
  background-position: 10px 50%;
  background-size: 16px 16px;
}

.chart-locked-inner .locked-cta {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* Locked charts CTA styles */
.chart-locked-inner .locked-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-locked-inner .locked-cta .btn span {
  color: #fff;
}

.chart-locked-inner .locked-or {
  color: var(--immdefaultimm-orange-dark);
  opacity: 0.9;
  padding: 10px 20px;
}

/* Chart Wrappers */
.chart-wrapper {
  position: relative;
  min-height: 350px;
}

/* Chart States */
.chart-no-data,
.chart-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  color: var(--immdefaultimm-dark-70);
}

.no-data-icon,
.error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.chart-no-data p,
.chart-error p {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.chart-no-data small,
.chart-error small {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Changes Table Styling */
.changes-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.changes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.changes-table th,
.changes-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.changes-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: var(--immdefaultimm-dark-100);
  position: sticky;
  top: 0;
}

.changes-table tbody tr:hover {
  background-color: rgba(255, 107, 53, 0.05);
}

.changes-table .positive {
  color: #22c55e;
  font-weight: 600;
}

.changes-table .negative {
  color: #ef4444;
  font-weight: 600;
}

.changes-table .neutral {
  color: var(--immdefaultimm-dark-70);
}

/* forms */
.modal h5 {
  color: var(--immdefaultimm-dark-100);
}

.modal,
.wpcf7-form-control-wrap input {
  color: var(--immdefaultimm-dark-70);
}

.v-spacer {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  opacity: 0.1;
  background-color: var(--immdefaultimm-grey-10);
}

/* ===== Modal overrides for IMM Ideas ===== */
/* Make whole modal-content transparent and style its direct children as cards */
.modal .modal-dialog .modal-content {
  background: #fff !important;
  border: 0;
  box-shadow: none;
  padding: 10px; /* spacing around inner sections */
  display: flex;
  flex-direction: column;
  gap: 10px; /* spacing between header/body/footer */
}

.modal .modal-dialog .modal-content > .modal-header,
.modal .modal-dialog .modal-content > .modal-body,
.modal .modal-dialog .modal-content > .modal-footer {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  margin: 0; /* cards spacing handled by gap */
  border: 1px solid #e5e7eb; 
}

.modal .modal-dialog .modal-content > .modal-footer {
  padding: 0 !important;
}

/* Section card used inside modal bodies (optional) */
.modal .section-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.modal .imm-icon.envelope { 
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  margin-right: 10px; 
}

/* Survey icon radios */
.survey-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.survey-icons .rating-option {
  display: inline-block;
}

.survey-icons .rating-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.survey-icons .rating-option label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.survey-icons .rating-option label:hover {
  border-color: var(--immdefaultimm-orange);
  box-shadow: 0 4px 10px rgba(227,108,5,0.15);
}

.survey-icons .rating-option input[type="radio"]:checked + label {
  border-color: var(--immdefaultimm-orange);
  background: #FEF3E2;
}

.survey-icons .rating-option img {
  width: 26px;
  height: 26px;
  display: block;
}

#immThankYouModal .star-rating-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#immThankYouModal .star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

#immThankYouModal .star-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#immThankYouModal .star-btn:hover {
  transform: scale(1.15);
}

#immThankYouModal .star-btn:active {
  transform: scale(0.95);
}

#immThankYouModal .star-btn:focus {
  outline: 2px solid var(--immdefaultimm-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

#immThankYouModal .star-icon {
  width: 36px;
  height: 36px;
  stroke: #d1d5db;
  fill: #f3f4f6;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

#immThankYouModal .star-btn:hover .star-icon {
  stroke: #f59e0b;
  fill: #fef3c7;
}

#immThankYouModal .star-btn.active .star-icon,
#immThankYouModal .star-btn.filled .star-icon {
  stroke: var(--immdefaultimm-orange, #E36C05);
  fill: var(--immdefaultimm-orange, #E36C05);
}

#immThankYouModal .star-rating-label {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  min-height: 20px;
  font-weight: 500;
}

/* Touch improvements for iPad/mobile */
@media (hover: none) and (pointer: coarse) {
  #immThankYouModal .star-btn {
    padding: 8px;
  }
  
  #immThankYouModal .star-icon {
    width: 40px;
    height: 40px;
  }
  
  #immThankYouModal .star-rating {
    gap: 12px;
  }
}

/* Custom Tooltip Styling */
.custom-tooltip {
  background: white;
  padding: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  font-size: 0.9rem;
  line-height: 1.4;
}


/* ===== Login modal: Remember me switch ===== */
#immUserLoginModal .remember-field .form-check-input {
  width: 20px;
  height: 20px;
  border: 2px solid #D1D5DB;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#immUserLoginModal .remember-field .form-check-input:focus {
  border-color: var(--immdefaultimm-orange, #E36C05);
  box-shadow: 0 0 0 3px rgba(227, 108, 5, 0.2);
  outline: 2px solid var(--immdefaultimm-orange, #E36C05);
  outline-offset: 2px;
}

#immUserLoginModal .remember-field .form-check-input::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  width: 12px;
  height: 6px;
  border-radius: 4px;
  background: var(--immdefaultimm-orange, #fff);
  left: 2px;
  top: 2px;
  transition: all 0.2s ease;
  transform: scale(0);
}

#immUserLoginModal .remember-field .form-check-input:checked::before {
  transform: scale(1);
  background: var(--immdefaultimm-orange, #E36C05); /* pomarańczowy knob */
}

#immUserLoginModal .remember-field .form-check-label {
  font-weight: 600;
  color: #475569;
}

/* ===== Add Brands Modal (align with registration modal) ===== */
#immAddBrandModal .imm-section-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

/* Table */
.imm-add-brands-table {
  width: 100%;
}

#immAddBrandModal .imm-add-brands-table th {
  font-weight: 700;
  letter-spacing: .02em;
}

#immAddBrandModal .imm-add-brands-table td { 
  vertical-align: bottom; 
  text-align: center;
}

#immAddBrandModal .imm-add-brands-table td:nth-child(3) {
 border-left: 8px solid #fff;
 border-right: 8px solid #fff;
}

/* Subtle dashed separators like in mock */
#immAddBrandModal .imm-add-brands-table thead tr {
  border-bottom: 5px solid #fff
}

#immAddBrandModal .imm-add-brands-table tbody tr + tr td {
  border-top: 1px dashed var(--ideas-separator);
}

#immAddBrandModal .imm-row-index {
  display: flex;
  width: 28px;
  color: #64748B;
  font-weight: 600;
  height: 46px;
  align-items: center;
  justify-content: center;
}

/* Text input with left icon */
#immAddBrandModal .wpcf7-form-control {
  height: 48px;
  border-radius: 8px;
  cursor: pointer;
}

/* Upload control */
#immAddBrandModal .imm-upload {
  display: flex;
  width: 100%;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}

#immAddBrandModal .imm-upload .imm-upload-btn {
  width: 100%;
}

#immAddBrandModal .imm-file-input { position: absolute; left: -9999px; }

#immAddBrandModal .imm-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px; height: 48px;
  border: 1px solid var(--immdefaultimm-grey-10);
  border-radius: 8px; background: #fff; color: #475569; font-weight: 600;
}

#immAddBrandModal .imm-upload-filename {
  height: 48px; display: inline-flex; align-items: center;
  padding: 0 14px; border: 1px dashed var(--immdefaultimm-grey-10);
  border-radius: 8px; color: #475569; background: #fff;
  min-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#immAddBrandModal .imm-upload-clear { color: #94A3B8; }

#immAddBrandModal .imm-upload-hint { color: #94A3B8; font-size: 12px; margin-left: 6px; }

/* ===== Add Brands modal: upload UI and column layout ===== */
/* Truncate long filenames displayed on the upload button/label */
label.imm-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

label.imm-upload .imm-upload-btn,
label.imm-upload .imm-upload-filename {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.imm-sector-select {
  background-position: 95% 50%;
}

/* Remove row button */
#immAddBrandModal .imm-upload-clear,
#immAddBrandModal .btn-icon.imm-remove-row {
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: none;
}

#immAddBrandModal .imm-upload:after {
  content: "";
  width:  36px;
  height:  36px;
  display: block;
}

#immAddBrandModal .imm-upload:after,
#immAddBrandModal .imm-upload-clear {
  position: absolute;
  right: 5px;
  top: 5px;
}

#immAddBrandModal .imm-upload.active-upload:after {
  display: none;
}

/* Footer buttons */
#immAddBrandModal .btn-send-wrapp .wpcf7-submit { 
  height: 100%;
  padding: 0 50px 0 30px;
}

#immAddBrandModal .wpcf7-response-output { 
  margin-top: 12px; 
}

#hu.hu-position-bottom.hu-display-floating {
  max-width: 100% !important;
  width: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

/* ===== Thank You Modal (survey) ===== */
#immThankYouModal .imm-section-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

#immThankYouModal .modal-header .modal-title {
  font-weight: 800;
  color: #102B45;
}

.modal-header .alert {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--bs-heading-color);
}

/* ===== Registration modal: auto close animation ===== */
#immUserRegistrationModal.auto-close-anim .modal-dialog {
  transition: transform .25s ease, opacity .25s ease;
}

#immUserRegistrationModal .modal-dialog.closing {
  transform: scale(0.95);
  opacity: 0;
}

#immThankYouModal .modal-body p { color: #476382; }

/* Question rows: label left, controls right */
#immThankYouModal #immSurveyForm .mb-3,
#immThankYouModal #immSurveyForm .mb-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

#immThankYouModal #immSurveyForm .form-label { margin: 0; white-space: nowrap; }

/* Yes / No group */
#immThankYouModal .yesno-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(220px, 40%, 360px);
  flex: 0 0 auto;
  margin-left: 16px;
  gap: 0;
}

.required-txt {
  color:#dc3545 !important;
}

#immUserRegistrationModal .required-mark { 
  color:#dc3545; 
  font-weight:900 ;
  margin-left:6px; 
  font-size:10px; 
  line-height:1; 
  vertical-align: top; 
}

#immThankYouModal .yesno-option { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }

#immThankYouModal .yesno-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

#immThankYouModal .yesno-option .dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C2CBD5; display: inline-block; position: relative;
}

#immThankYouModal .yesno-option .label-text { font-weight: 600; color: #476382; }

#immThankYouModal .yesno-option input[type="radio"]:checked + .dot { border-color: var(--immdefaultimm-orange, #E36C05); }

#immThankYouModal .yesno-option input[type="radio"]:checked + .dot::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--immdefaultimm-orange, #E36C05);
}

#immThankYouModal .yesno-option input[type="radio"]:checked ~ .label-text { color: var(--immdefaultimm-orange, #E36C05); }

/* Rating icons 44x48 */
#immThankYouModal .survey-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: clamp(220px, 40%, 360px);
  flex: 0 0 auto;
  margin-left: 16px;
}

#immThankYouModal .survey-icons .rating-option { flex: 0 0 auto; }

#immThankYouModal .survey-icons .rating-option label {
  width: 44px; height: 48px; border-radius: 8px; border: 1px solid #fff; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

#immThankYouModal .survey-icons .rating-option label:hover { border-color: var(--immdefaultimm-orange, #E36C05); }

#immThankYouModal .survey-icons .rating-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

#immThankYouModal .survey-icons .rating-option input[type="radio"]:checked + label {
  box-shadow: 0 2px 8px rgba(0, 10, 20, 0.16);
  border-color: #e5e7eb;
  background: #FFFFFF;
}

#immThankYouModal .survey-icons img { width: 24px; height: 24px; display: block; }

#immThankYouModal .btn-send-wrapp .wpcf7-submit { height: 100%; padding: 0 50px 0 30px; }

#immThankYouModal .wpcf7-spinner { vertical-align: middle; }

/* AJAX spinner visibility in button wrapper */
.btn-send-wrapp .wpcf7-spinner {
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease;
}

form.is-sending .btn-send-wrapp .wpcf7-spinner,
.wpcf7-form.is-sending .btn-send-wrapp .wpcf7-spinner {
  visibility: visible;
  opacity: 1;
}

/* Brand search container styles */
.search-input-wrapper {
  position: relative;
  width: 100%;
}

/* Ensure container doesn't reserve space for removed button */
.brand-search-container {
  display: block;
  width: 100%;
  gap: 0 !important;
}

.search-input-wrapper input {
  width: 100%;
  padding-right: 50px;
  /* Reserve left space permanently so text doesn't jump when loader appears */
  padding-left: 36px;
}

.search-input-wrapper .search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  color: #6c757d;
}

/* Small inline loader in search input */
.search-input-wrapper .brand-input-loader {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--immdefaultimm-orange-dark);
  border-right-color: transparent;
  background: #ffffff; /* mask any underlying input icon */
  box-shadow: 0 0 0 2px #ffffff; /* small white halo to fully cover */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 3; /* above input */
  pointer-events: none;
}

.search-input-wrapper .brand-input-loader.visible {
  opacity: 1;
  visibility: visible;
  animation: imm-inline-spin .75s linear infinite;
}

/* When loader visible, give input left padding */
/* Keep rule for safety: padding is already reserved so no shifting */

@keyframes imm-inline-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Brand autocomplete positioning */
.search-input-wrapper .brand-autocomplete-results {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1050;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.autocomplete-item {
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 1
}

.autocomplete-item:hover {
  opacity: 0.65;
}

.text-muted.small {
  font-size: 11px;
  color: #476382;
}

.imm-section-card .btn-white {
  padding: 0 20px;
  transition: all .3s ease-in-out;
}

.imm-section-card .btn-white:hover {
  opacity: 0.65;
}

.modal-footer span,
.modal-footer p,
.modal-body,
.modal-body p {
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
  color: #476382;
}

.imm-add-brands-table th:nth-child(1),
.imm-add-brands-table td:nth-child(1) { /* Logo column */
  width: 5%;
}

.imm-add-brands-table th:nth-child(2),
.imm-add-brands-table td:nth-child(2) { /* Branża column */
  width: 25%;
}

.imm-add-brands-table th:nth-child(3),
.imm-add-brands-table td:nth-child(3) { /* Logo column */
  width: 40%;
}

.imm-add-brands-table th:nth-child(4),
.imm-add-brands-table td:nth-child(4) { /* Branża column */
  width: 25%;
}

.imm-add-brands-table th:nth-child(5),
.imm-add-brands-table td:nth-child(5) { /* Branża column */
  width: 5%;
}

#immAddBrandModal .imm-add-brands-table {
  table-layout: fixed;
}

#immAddBrandModal .imm-add-brands-table th {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 160%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #476382;
}

@media (min-width: 992px) {
  #immThankYouModal .modal-lg {
    --bs-modal-width: 720px;
  }

  .modal-lg, .modal-xl {
    --bs-modal-width: 990px;
  }

  .kb-nav-desktop-horizontal-layout-standard,
  .brand-navigation-col {
    position: sticky;
    top: 100px;
    height: fit-content;
  }
 
  .brand-sections-container .col-12.col-lg-6 .section-title-wrap .section-desc {
    min-height: 74px;
  }
  
  /* Page: brand-like nav (desktop) */
  body.page-brand-nav-ready .brand-navigation-col {
    position: sticky;
    top: var(--page-side-nav-top, 100px);
    left: 24px;
    width: 280px;
    max-height: calc(100vh - var(--page-side-nav-top, 100px) - 24px);
    overflow: auto;
    z-index: 102;
    padding-right: 8px;
  }

  body.page-brand-nav-ready .entry-content {
    margin-left: 320px;
  }

  .mobile-bottom-nav-toggle-wrapper {
    display: none !important;
  }
}

@media (min-width: 1199px) {
  .modal-lg, .modal-xl {
    --bs-modal-width: 1024px;
  }

  #immThankYouModal .modal-lg {
    --bs-modal-width: 720px;
  }

  .brand-nav-link {
    padding: 12px 6px;
  }
}

/* Modal responsiveness improvements */
@media (max-width: 1366px) {
  .section-title-wrap .section-title {
    font-size: 20px;
  }
  
  /* Responsywne rozmiary kołowych wykresów - mniejsze na tablet/mobile */
  #chart-medialnosc-marki-canvas,
  #chart-wartosc-ekspozycji-canvas {
    max-height: 350px !important;
  }

  h1#hero-rotating-heading {
    font-size: 52px;
    line-height: 1.25;
    height: 132px;
  }
}

@media (max-width: 1199px) {
  #chart-medialnosc-marki-canvas,
  #chart-wartosc-ekspozycji-canvas {
    max-height: 300px !important;
  }

  .rankings-grid .rankings-body,
  #what-is-ideas .wp-container-core-columns-is-layout-9d6595d7 {
    overflow-x: scroll;
  }
}

@media (max-width: 992px) {
  label.imm-upload .imm-upload-btn,
  label.imm-upload .imm-upload-filename {
    max-width: 160px;
  }

  .brand-content-row {
    flex-direction: column;
  }
  
  .brand-charts-col {
    order: 1;
    padding-left: 15px;
  }
  
  .brand-navigation {
    margin-top: 2rem;
  }
  
  .brand-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .brand-nav-item {
    margin-bottom: 0;
  }
  
  .brand-nav-link {
    white-space: wrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .brand-analysis-main .row {
    flex-direction: column;
  }

  .brand-navigation-col {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80vh;
    background: white;
    z-index: 1050;
    transform: translateY(110%);
    transition: transform 0.3s ease-in-out;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }
  
  .brand-navigation-col::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
  }
  
  .brand-navigation-col.show {
    transform: translateY(0);
  }
  
  .brand-nav-list {
    flex-direction: column;
    gap: 8px;
  }
  
  .brand-nav-item {
    width: 100%;
  }
  
  .brand-nav-link {
    padding: 16px 20px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    justify-content: flex-start;
    transition: all 0.2s ease;
  }
  
  .brand-nav-link:hover {
    background: #e9ecef;
    transform: none;
  }
  
  .mobile-bottom-nav-toggle-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1051;
  }

  .mobile-bottom-nav-toggle-wrapper .label {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 73px;
    z-index: 1051;
    background: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
    width: 45px;
    text-align: right;
    line-height: 1.2;
  }

  .mobile-bottom-nav-toggle {
    background: var(--immdefaultimm-orange-dark);
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: white;
    box-shadow: 0 4px 16px rgba(227, 108, 5, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    pointer-events: auto;
  }
  
  .mobile-bottom-nav-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(227, 108, 5, 0.4);
  }
  
  .mobile-bottom-nav-toggle svg {
    width: 22px;
    height: 20px;
    transition: transform 0.3s ease;
    transform-origin: center;
    margin-left: -4px;
  }
  
  .mobile-bottom-nav-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  
  .mobile-bottom-nav-toggle.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

  .mobile-menu-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1060;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .mobile-menu-modal.show {
    display: block;
    transform: translateX(0);
  }
  
  .mobile-menu-modal .menu-elements {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
  }
  
  .mobile-menu-modal .mobile-menu-item {
    border-bottom: 1px solid #e9ecef;
  }
  
  .mobile-menu-modal .menu-link {
    display: block;
    padding: 16px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
  }
  
  .mobile-menu-modal .menu-link::after,
  .mobile-menu-modal .arrow-right-orange {
    display: none !important;
  }
  
  .mobile-menu-modal .menu-link:hover,
  .mobile-menu-modal .menu-link.active {
    color: var(--imm-orange);
  }
  
  .mobile-menu-modal .has-sub-menu {
    position: relative;
  }
  
  .mobile-menu-modal .has-sub-menu > .menu-link {
    padding-right: 50px;
  }
  
  .mobile-menu-modal .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
  }
  
  .mobile-menu-modal .submenu-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #666;
    transition: transform 0.3s ease;
    transform-origin: center center;
  }
  
  .mobile-menu-modal .has-sub-menu.expanded .submenu-toggle::after {
    transform: rotate(90deg);
  }
  
  .mobile-submenu {
    display: none;
    padding-left: 20px;
    background: #f8f9fa;
    margin-top: 8px;
    border-radius: 8px;
  }
  
  .mobile-submenu.show {
    display: block;
  }
  
  .mobile-submenu .simple-menu-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .mobile-submenu .simple-menu-element {
    display: block;
    padding: 12px 0;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #e9ecef;
  }
  
  .mobile-submenu .simple-menu-element:hover {
    color: var(--imm-orange);
  }

  .brand-navigation {
    padding-top: 20px;
  }
  
  .brand-navigation::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
  }
  
  .brand-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }

  .section-title-wrap .section-title {
    font-size: 20px;
  }

  .section-header.is-outside {
    align-items: center;
  }

  .rankings-grid .rankings-table {
    width: 100%;
  }

  #chart-medialnosc-marki-canvas,
  #chart-wartosc-ekspozycji-canvas {
    max-height: 260px !important;
  }

  h1#hero-rotating-heading {
    font-size: 32px;
    line-height: 1.25;
    height: 60vw !important;
  }
}

@media (max-width: 991px) {
  #chart-medialnosc-marki-canvas,
  #chart-wartosc-ekspozycji-canvas {
    max-height: 280px !important;
  }

  .modal-lg {
    --bs-modal-width: 90vw;
    max-width: 90vw;
  }
    
  .imm-add-brands-table {
    font-size: 0.875rem;
  }
  
  .imm-add-brands-table th,
  .imm-add-brands-table td {
    padding: 0.5rem 0.25rem;
  }

  .wp-block-kadence-navigation.navigation-mobile-orientation-vertical .kb-nav-link-content {
    padding: 12px;
    margin: 10px 0;
  }

  label.imm-upload .imm-upload-btn,
  label.imm-upload .imm-upload-filename {
    max-width: 120px;
  }

  #immAddBrandModal .modal-dialog {
    max-width: 90vw;
  }

  #immAddBrandModal .imm-add-brands-table {
    table-layout: auto;
  }

  #immAddBrandModal .imm-add-brands-table th,
  #immAddBrandModal .imm-add-brands-table td {
    width: auto !important;
    padding: 0.75rem 0.5rem;
  }

  #immAddBrandModal .imm-add-brands-table td:nth-child(3) {
    border-left: 0;
    border-right: 0;
  }

  #immAddBrandModal .imm-add-brands-table .form-control,
  #immAddBrandModal .imm-add-brands-table .form-select {
    width: 100%;
    min-width: 0;
  }

  #immAddBrandModal label.imm-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }

  #immAddBrandModal .imm-upload-btn {
    flex: 1 1 auto;
  }

  .single .rankings-grid .rankings-content-wrapper {
    min-width: 991px;
  }

  .page .rankings-grid .rankings-content-wrapper {
    min-width: 1199px;
  }

  .chart-actions {
    display: none !important;
  }

  .rankings-grid .rankings-scrollable {
      overflow-x: visible !important;
  }
}

@media (max-width: 768px) { 
  .rankings-grid .rankings-header .rankings-cell.hdr {
    font-size: 9px;
    padding: 0 4px 20px 4px;
    line-height: 1.2;
  }
  
  .rankings-grid .rankings-row .rankings-cell {
    font-size: 12px;
    padding: 0 4px;
  }

  .ranking-brands-section .search-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 6px;
  }
  
  .ranking-brands-section .search-input-wrapper {
    min-width: auto;
  }
  
  .ranking-brands-section .search-container .btn-primary {
    width: 100%;
    min-width: auto;
  }
  
  /* Mobile filter layout - stack labels and inputs */
  .ranking-brands-section .row.g-3.align-items-center .col-12,
  .ranking-brands-section .row.g-3.align-items-center .col-md-4,
  .ranking-brands-section .row.g-3.align-items-center .col-lg-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .ranking-brands-section .row.g-3.align-items-center label {
    width: 100%;
  }
  
  .ranking-brands-section .row.g-3.align-items-center .form-select {
    width: 100%;
  }

  label.imm-upload .imm-upload-btn,
  label.imm-upload .imm-upload-filename {
    max-width: 100%;
  }

  .imm-section-card .btn-white {
    width: 100%;
    margin: 20px 0 0;
  }

  #immAddBrandModal .arrow-right-orange {
    width: 24px !important;
    height: 28px !important;
  }

  #immAddBrandModal  .envelope-orange {
    width: 54px !important;
    height: 54px !important;
  }

  #immAddBrandModal .btn-send-wrapp .wpcf7-submit {
    padding: 0 20px 0 0 !important;
  }

  .btn-send-wrapp::after, 
  .wp-block-button.is-style-white a::after, 
  .wp-block-button.is-style-orange a.wp-element-button::after {
    right: 10px;
  }

  .brand-header {
    padding: 2rem 1rem;
  }
  
  .brand-title {
    font-size: 2rem;
  }
  
  .brand-meta {
    flex-direction: column;
    gap: 1rem;
  }
  
  #medialnosc-branza .brand-chart-section {
    padding-bottom: 20px;
  }

  .brand-chart-section {
    padding: 0;
  }
  
  .section-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 767px) {
  .modal-lg,
  .modal-md {
    --bs-modal-width: 95vw;
    max-width: 95vw;
  }

  #immShareModal .modal-header .btn-close {
    top: 28px;
  }
  
  .modal-content {
    margin: 1rem;
  }
  
  .imm-add-brands-table {
    font-size: 0.8rem;
  }
  
  .imm-add-brands-table .form-control,
  .imm-add-brands-table .form-select {
    font-size: 0.8rem;
    padding: 0.375rem 0.5rem;
  }
  
  .imm-upload-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  #immShareModal .share-widget-preview {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .share-widget-preview-wrapper {
    padding: 6px;
  }

  #share-confirm-button.btn {
    font-size: 14px;
    padding: 0;
  }

  .share-widget-preview .metric-label {
    font-size: 12px !important;
  }

  .share-widget-preview .metric-value {
    min-height: 42px;
  }

  .brand-card #chart-widocznosc-branza-canvas {
    height: 24vh !important;
  }

  .section-title-wrap .section-title {
    font-size: 18px;
  }

  .single .rankings-grid .rankings-content-wrapper {
    min-width: 767px;
  }

  .page .rankings-grid .rankings-content-wrapper {
    min-width: 1080px;
  }

  .modal-dialog {
    margin: 0.75rem;
  }
  
  .modal-content {
    margin: 0;
  }
  
  #immThankYouModal #immSurveyForm .mb-3,
  #immThankYouModal #immSurveyForm .mb-2 { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
  }

  #immThankYouModal .survey-icons {
    justify-content: center;
    gap: 12px;
  }

  #immThankYouModal .rating-option img {
    width: 32px;
    height: 32px;
  }

  #immThankYouModal .yesno-group {
    justify-content: center;
    gap: 24px;
  }
  
  #immAddBrandModal .imm-add-brands-table,
  #immAddBrandModal .imm-add-brands-table thead,
  #immAddBrandModal .imm-add-brands-table tbody,
  #immAddBrandModal .imm-add-brands-table th,
  #immAddBrandModal .imm-add-brands-table td,
  #immAddBrandModal .imm-add-brands-table tr {
    display: block;
    width: 100%;
  }

  #immAddBrandModal .imm-add-brands-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  #immAddBrandModal .imm-add-brands-table tbody {
    margin: 0;
    padding: 0;
  }

  #immAddBrandModal .imm-add-brands-table tr {
    background: #fff;
    border: 1px solid var(--ideas-border, #E4EAF0);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
  }

  #immAddBrandModal .imm-add-brands-table tr:last-child {
    margin-bottom: 0;
  }

  #immAddBrandModal .imm-add-brands-table td,
  #immAddBrandModal .imm-add-brands-table th {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    text-align: left;
  }

  #immAddBrandModal .imm-add-brands-table td:first-child {
    margin-bottom: 12px;
    font-weight: 600;
    color: #6B7280;
  }

  #immAddBrandModal .imm-add-brands-table td:first-child::before {
    display: none;
  }

  #immAddBrandModal .imm-add-brands-table td:last-child {
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #immAddBrandModal .imm-add-brands-table td::before {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 6px;
  }

  #immAddBrandModal .imm-add-brands-table td:nth-child(2)::before {
    content: 'Marka';
  }

  #immAddBrandModal .imm-add-brands-table td:nth-child(3)::before {
    content: 'Logo';
  }

  #immAddBrandModal .imm-add-brands-table td:nth-child(4)::before {
    content: 'Branża';
  }

  #immAddBrandModal .imm-add-brands-table td:nth-child(5)::before {
    content: '';
    display: none;
  }

  #immAddBrandModal .imm-add-brands-table .form-control,
  #immAddBrandModal .imm-add-brands-table .form-select {
    width: 100%;
    min-width: 0;
  }

  #immAddBrandModal label.imm-upload {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px dashed var(--ideas-border, #C7D3E0);
    border-radius: 12px;
  }

  #immAddBrandModal .imm-upload-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  #immAddBrandModal .imm-upload-clear {
    flex: 0 0 auto;
  }

  #immAddBrandModal .imm-add-brands-form .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  #immAddBrandModal .imm-add-brands-form .text-muted.small {
    text-align: left;
  }

  #immAddBrandModal .imm-add-row-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .btn-send-wrapp {
    width: 100%;
  }

  .btn-send-wrapp button {
    width: 100%;
  }

  .ranking-brands-section .section-title {
    font-size: 28px;
  }

  .ranking-brands-section-inner {
    padding: 1rem 0;
  }

  .chart-legend-inline {
    gap: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
  }

  .imm-download-btn {
    font-size: 10px;
    padding: 8px;
  }
}
 
@media (max-width: 380px) {
  body:not(.home) h3.wp-block-heading {
    font-size: 23px !important;
    text-align: center;
  }
  
  .modal-title {
    font-size: 1.1rem;
  }
  
  .imm-add-brands-table td:before {
    font-size: 0.75rem;
  }
  
  .form-control,
  .form-select {
    font-size: 0.875rem;
  }

  .section-title-wrap .section-desc {
    font-size: 10px;
  }
}