/**
 * CDP Mobile Responsive Styles
 * Адаптація всього блоку CDP карти для мобільних пристроїв
 */

/* ===========================================
   GLOBAL MOBILE FIXES (всі пристрої)
=========================================== */

.cdp-casino-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.cdp-casino-card * {
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}

/* ===========================================
   TABLET BREAKPOINT (768px - 1024px)
=========================================== */

@media (max-width: 1024px) {
  /* Header адаптація */
  .cdp-header {
    padding: 20px !important;
    gap: 12px !important;
  }

  /* Row 1: Logo + Description */
  .cdp-top-row {
    grid-template-columns: 120px 1fr !important;
    gap: 16px !important;
  }

  .cdp-logo {
    max-width: 100px !important;
  }

  .cdp-logo-placeholder {
    width: 100px !important;
    height: 100px !important;
    font-size: 42px !important;
  }

  /* Description */
  .cdp-desc-title {
    font-size: 15px !important;
  }

  .cdp-desc-text {
    font-size: 12px !important;
  }

  /* Row 2: Bonus */
  .cdp-bonus-row {
    padding: 16px !important;
    gap: 16px !important;
  }

  .cdp-bonus-amount {
    font-size: 18px !important;
  }

  /* Button */
  .cdp-btn-primary {
    padding: 10px 24px !important;
    font-size: 13px !important;
  }

  /* Ratings Section */
  .cdp-ratings {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  /* Index Circle */
  .index-circle {
    width: 70px !important;
    height: 70px !important;
  }

  .index-number {
    font-size: 24px !important;
  }

  .index-label {
    font-size: 9px !important;
  }

  /* Badges */
  .playscore-badge,
  .expert-badge,
  .rtp-badge {
    min-height: 70px !important;
  }

  .badge-value {
    font-size: 20px !important;
  }

  .badge-label {
    font-size: 10px !important;
  }

  /* Info Section */
  .cdp-info-section {
    padding: 20px !important;
  }

  .cdp-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Games Section */
  .cdp-games-list {
    padding: 16px !important;
  }

  .game-item {
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* Metrics Section */
  .cdp-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  /* Payment Methods */
  .cdp-payment-methods {
    padding: 20px !important;
  }

  .payment-icons {
    gap: 12px !important;
  }

  .payment-icon {
    width: 50px !important;
    height: 32px !important;
  }
}

/* ===========================================
   MOBILE BREAKPOINT (480px - 768px)
=========================================== */

@media (max-width: 768px) {
  /* Header */
  .cdp-header {
    padding: 16px !important;
    gap: 12px !important;
  }

  /* Row 1: Stack vertically */
  .cdp-top-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .cdp-logo-section {
    margin: 0 auto !important;
  }

  .cdp-logo {
    max-width: 90px !important;
  }

  .cdp-logo-placeholder {
    width: 90px !important;
    height: 90px !important;
    font-size: 36px !important;
  }

  .compact-badge {
    justify-content: center !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
  }

  /* Description */
  .cdp-description-box {
    padding: 14px !important;
    text-align: center !important;
  }

  .cdp-desc-title {
    font-size: 14px !important;
    justify-content: center !important;
  }

  .cdp-desc-text {
    font-size: 12px !important;
  }

  /* Row 2: Stack vertically */
  .cdp-bonus-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  .cdp-bonus-section {
    text-align: center !important;
  }

  .cdp-bonus-amount {
    font-size: 17px !important;
    text-align: center !important;
  }

  .cdp-bonus-promo {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 7px 10px !important;
  }

  .promo-code {
    font-size: 12px !important;
  }

  .promo-copy-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  /* Button - full width */
  .cdp-btn-primary {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
  }

  /* Ratings Section - 1 column */
  .cdp-ratings {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  /* Badges stacked */
  .index-circle,
  .playscore-badge,
  .expert-badge,
  .rtp-badge {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 12px !important;
  }

  .index-circle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
  }

  .index-circle-inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .index-number {
    font-size: 28px !important;
    margin: 0 !important;
  }

  .index-label {
    font-size: 11px !important;
    text-align: left !important;
  }

  /* Other badges */
  .playscore-badge,
  .expert-badge,
  .rtp-badge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
  }

  .badge-value {
    font-size: 24px !important;
    margin: 0 !important;
  }

  .badge-label {
    font-size: 11px !important;
    text-align: left !important;
  }

  /* Info Section - 1 column */
  .cdp-info-section {
    padding: 16px !important;
  }

  .cdp-info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .info-item {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .info-label {
    font-size: 11px !important;
  }

  .info-value {
    font-size: 13px !important;
  }

  /* Games Section */
  .cdp-games-list {
    padding: 14px !important;
  }

  .games-header {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .game-item {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .game-icon {
    font-size: 16px !important;
  }

  /* Tags */
  .cdp-tags {
    padding: 14px !important;
    gap: 6px !important;
  }

  .tag {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }

  /* Metrics Section - 1 column */
  .cdp-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  .metric-item {
    padding: 12px !important;
  }

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

  .metric-value {
    font-size: 13px !important;
  }

  .metric-score {
    font-size: 14px !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Payment Methods */
  .cdp-payment-methods {
    padding: 16px !important;
  }

  .payment-title {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .payment-icons {
    padding: 12px !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  .payment-icon {
    width: 45px !important;
    height: 28px !important;
  }

  /* Tooltips as modals on mobile */
  .tooltip-content {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw !important;
    width: auto !important;
    z-index: 10000 !important;
    padding: 16px !important;
  }

  .tooltip-overlay {
    display: block !important;
  }
}

/* ===========================================
   SMALL MOBILE BREAKPOINT (< 480px)
=========================================== */

@media (max-width: 480px) {
  /* Margins */
  .cdp-casino-card {
    margin-left: 4px !important;
    margin-right: 4px !important;
    border-radius: 12px !important;
  }

  /* Header */
  .cdp-header {
    padding: 12px !important;
    gap: 10px !important;
  }

  /* Logo smaller */
  .cdp-logo {
    max-width: 80px !important;
  }

  .cdp-logo-placeholder {
    width: 80px !important;
    height: 80px !important;
    font-size: 32px !important;
  }

  /* Description */
  .cdp-description-box {
    padding: 12px !important;
  }

  .cdp-desc-title {
    font-size: 13px !important;
  }

  .desc-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .cdp-desc-text {
    font-size: 11px !important;
  }

  /* Bonus */
  .cdp-bonus-row {
    padding: 12px !important;
  }

  .cdp-bonus-amount {
    font-size: 16px !important;
  }

  .cdp-bonus-promo {
    padding: 6px 8px !important;
  }

  .promo-code {
    font-size: 11px !important;
  }

  /* Button */
  .cdp-btn-primary {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }

  /* Badges */
  .index-circle,
  .playscore-badge,
  .expert-badge,
  .rtp-badge {
    padding: 12px 14px !important;
  }

  .index-number,
  .badge-value {
    font-size: 22px !important;
  }

  .index-label,
  .badge-label {
    font-size: 10px !important;
  }

  /* All sections reduced padding */
  .cdp-ratings,
  .cdp-info-section,
  .cdp-games-list,
  .cdp-tags,
  .cdp-metrics-grid,
  .cdp-payment-methods {
    padding: 12px !important;
  }

  /* Info grid */
  .info-item {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .info-label {
    font-size: 10px !important;
  }

  .info-value {
    font-size: 12px !important;
  }

  /* Games */
  .game-item {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .game-icon {
    font-size: 14px !important;
  }

  /* Tags */
  .tag {
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  /* Metrics */
  .metric-item {
    padding: 10px !important;
  }

  .metric-label {
    font-size: 11px !important;
  }

  .metric-value {
    font-size: 12px !important;
  }

  .metric-score {
    font-size: 13px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Payment icons smaller */
  .payment-icon {
    width: 40px !important;
    height: 26px !important;
  }

  /* Recommended badge */
  .cdp-recommended-badge {
    padding: 10px 20px !important;
    font-size: 12px !important;
  }

  /* Compact badge */
  .compact-badge {
    padding: 4px 8px !important;
    font-size: 8px !important;
  }

  .compact-badge svg {
    width: 10px !important;
    height: 10px !important;
  }
}

/* ===========================================
   FIX FOR OVERFLOW ISSUES
=========================================== */

@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  .cdp-casino-card,
  .cdp-header,
  .cdp-top-row,
  .cdp-bonus-row,
  .cdp-ratings,
  .cdp-info-section,
  .cdp-games-list,
  .cdp-tags,
  .cdp-metrics-grid,
  .cdp-payment-methods {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Fix payment icons wrapping */
  .payment-icons {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Fix long text overflow */
  .cdp-desc-text,
  .info-value,
  .metric-value,
  .game-item {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Fix button width */
  .cdp-btn-primary {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* ===========================================
   ACCESSIBILITY & UX IMPROVEMENTS
=========================================== */

@media (max-width: 768px) {
  /* Larger tap targets */
  .cdp-btn-primary,
  .promo-copy-btn,
  .game-item,
  .info-item,
  .metric-item,
  .tag {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Better spacing for touch */
  .cdp-info-grid,
  .cdp-games-list,
  .cdp-metrics-grid {
    gap: 12px !important;
  }

  /* Improve readability */
  .cdp-desc-text,
  .info-value,
  .metric-value {
    line-height: 1.5 !important;
  }
}

/* ===========================================
   CDP HEADER STYLES - 17 ВАРІАНТІВ
   Адаптація для мобільних пристроїв
=========================================== */

/* === TABLET (768px - 1024px) === */
@media (max-width: 1024px) {
  /* Всі 17 стилів хедера */
  .ch-cdp-header[class*="ch-cdp-style-"] {
    grid-template-columns: 120px 1fr 200px !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  .ch-cdp-logo {
    max-width: 100px !important;
  }

  .ch-cdp-logo-placeholder {
    width: 70px !important;
    height: 70px !important;
    font-size: 28px !important;
  }

  .ch-cdp-desc-title {
    font-size: 15px !important;
  }

  .ch-cdp-desc-text {
    font-size: 12px !important;
  }

  .ch-cdp-bonus-amount {
    font-size: 17px !important;
  }

  .ch-cdp-btn {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
}

/* === MOBILE (480px - 768px) === */
@media (max-width: 768px) {
  /* Всі 17 стилів хедера - стек вертикально */
  .ch-cdp-header[class*="ch-cdp-style-"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
  }

  /* Logo секція */
  .ch-cdp-header[class*="ch-cdp-style-"] .ch-cdp-logo-section {
    margin: 0 auto !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
  }

  .ch-cdp-logo {
    max-width: 90px !important;
    margin: 0 auto !important;
  }

  .ch-cdp-logo-placeholder {
    width: 80px !important;
    height: 80px !important;
    font-size: 32px !important;
    margin: 0 auto !important;
  }

  .ch-cdp-license-badge {
    justify-content: center !important;
    margin: 8px auto 0 !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  /* Description секція */
  .ch-cdp-header[class*="ch-cdp-style-"] .ch-cdp-description-box {
    padding: 14px !important;
    text-align: center !important;
  }

  .ch-cdp-desc-title {
    font-size: 14px !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
  }

  .ch-cdp-section-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .ch-cdp-desc-text {
    font-size: 12px !important;
    text-align: center !important;
  }

  /* Bonus секція */
  .ch-cdp-header[class*="ch-cdp-style-"] .ch-cdp-bonus-section {
    padding: 14px !important;
    text-align: center !important;
  }

  .ch-cdp-bonus-amount {
    font-size: 16px !important;
    justify-content: center !important;
  }

  .ch-cdp-bonus-content {
    margin-bottom: 12px !important;
  }

  .ch-cdp-bonus-promo {
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 6px 10px !important;
    margin: 6px auto !important;
  }

  .ch-cdp-promo-code {
    font-size: 11px !important;
  }

  .ch-cdp-promo-copy {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  /* Button */
  .ch-cdp-btn {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  /* Спеціальні налаштування для окремих стилів */
  
  /* Style 1-3: Прибрати accent borders на мобільних */
  .ch-cdp-header.ch-cdp-style-1 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-1 .ch-cdp-description-box,
  .ch-cdp-header.ch-cdp-style-1 .ch-cdp-bonus-section,
  .ch-cdp-header.ch-cdp-style-2 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-2 .ch-cdp-description-box,
  .ch-cdp-header.ch-cdp-style-2 .ch-cdp-bonus-section,
  .ch-cdp-header.ch-cdp-style-3 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-3 .ch-cdp-description-box,
  .ch-cdp-header.ch-cdp-style-3 .ch-cdp-bonus-section {
    border-left: none !important;
    border-top: 3px solid !important;
  }

  /* Style 2: Зберегти кольори top border */
  .ch-cdp-header.ch-cdp-style-2 .ch-cdp-logo-section {
    border-top-color: #3b82f6 !important;
  }

  .ch-cdp-header.ch-cdp-style-2 .ch-cdp-description-box {
    border-top-color: #8b5cf6 !important;
  }

  .ch-cdp-header.ch-cdp-style-2 .ch-cdp-bonus-section {
    border-top-color: #dc2626 !important;
  }

  /* Style 4-6: Box shadows адаптація */
  .ch-cdp-header.ch-cdp-style-4 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-4 .ch-cdp-description-box,
  .ch-cdp-header.ch-cdp-style-4 .ch-cdp-bonus-section,
  .ch-cdp-header.ch-cdp-style-5 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-5 .ch-cdp-description-box,
  .ch-cdp-header.ch-cdp-style-5 .ch-cdp-bonus-section,
  .ch-cdp-header.ch-cdp-style-6 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-6 .ch-cdp-description-box,
  .ch-cdp-header.ch-cdp-style-6 .ch-cdp-bonus-section {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }

  /* Style 7-9: Gradient backgrounds */
  .ch-cdp-header.ch-cdp-style-7,
  .ch-cdp-header.ch-cdp-style-8,
  .ch-cdp-header.ch-cdp-style-9 {
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%) !important;
  }

  /* Style 10-12: Modern card styles */
  .ch-cdp-header.ch-cdp-style-10 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-11 .ch-cdp-logo-section,
  .ch-cdp-header.ch-cdp-style-12 .ch-cdp-logo-section {
    border-radius: 12px !important;
  }

  /* Style 13-15: Minimalistic */
  .ch-cdp-header.ch-cdp-style-13,
  .ch-cdp-header.ch-cdp-style-14,
  .ch-cdp-header.ch-cdp-style-15 {
    background: transparent !important;
    border: 1px solid #e5e5e5 !important;
  }

  /* Style 16-17: Premium styles */
  .ch-cdp-header.ch-cdp-style-16,
  .ch-cdp-header.ch-cdp-style-17 {
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  }
}

/* === SMALL MOBILE (< 480px) === */
@media (max-width: 480px) {
  .ch-cdp-header[class*="ch-cdp-style-"] {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 8px !important;
  }

  .ch-cdp-header[class*="ch-cdp-style-"] .ch-cdp-logo-section,
  .ch-cdp-header[class*="ch-cdp-style-"] .ch-cdp-description-box,
  .ch-cdp-header[class*="ch-cdp-style-"] .ch-cdp-bonus-section {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .ch-cdp-logo {
    max-width: 80px !important;
  }

  .ch-cdp-logo-placeholder {
    width: 70px !important;
    height: 70px !important;
    font-size: 28px !important;
  }

  .ch-cdp-license-badge {
    padding: 3px 6px !important;
    font-size: 8px !important;
  }

  .ch-cdp-license-badge svg {
    width: 12px !important;
    height: 12px !important;
  }

  .ch-cdp-desc-title {
    font-size: 13px !important;
  }

  .ch-cdp-section-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .ch-cdp-desc-text {
    font-size: 11px !important;
  }

  .ch-cdp-bonus-amount {
    font-size: 15px !important;
  }

  .ch-cdp-bonus-promo {
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  .ch-cdp-promo-code {
    font-size: 10px !important;
  }

  .ch-cdp-promo-copy {
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  .ch-cdp-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
}

/* ===========================================
   FIX OVERFLOW FOR ALL CDP HEADER STYLES
=========================================== */

@media (max-width: 768px) {
  .ch-cdp-header[class*="ch-cdp-style-"],
  .ch-cdp-header[class*="ch-cdp-style-"] * {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Fix text overflow */
  .ch-cdp-desc-text,
  .ch-cdp-bonus-amount,
  .ch-cdp-promo-code {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Fix button width */
  .ch-cdp-btn {
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

/* ===========================================
   INFO GRID & METRICS - FORCE 1 COLUMN ON MOBILE
   Всі теми - примусово 1 колонка на мобільних
=========================================== */

@media (max-width: 768px) {
  /* Info Grid - 1 column на всю ширину */
  .cdp-info-grid,
  [class*="cdp-info-grid"],
  .cdp-info-section .cdp-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-columns: 100% !important;
    gap: 12px !important;
  }

  .cdp-info-card,
  .cdp-info-item,
  [class*="info-card"],
  [class*="info-item"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  /* Metrics Grid - 1 column на всю ширину */
  .cdp-metrics-grid,
  [class*="cdp-metrics-grid"],
  .cdp-metrics-section .cdp-metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-columns: 100% !important;
    gap: 12px !important;
  }

  .cdp-metrics-grid .cdp-metric-item,
  .cdp-metrics-grid [class*="metric-item"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  /* Info Section padding */
  .cdp-info-section {
    padding: 16px !important;
  }

  /* Metrics Section padding */
  .cdp-metrics-section {
    padding: 20px 16px !important;
  }

  /* Info Card внутрішні елементи */
  .cdp-info-card {
    padding: 14px !important;
    gap: 10px !important;
  }

  .cdp-info-icon {
    font-size: 20px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .cdp-info-label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }

  .cdp-info-value {
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Metric Item внутрішні елементи - ТІЛЬКИ для style 0 (.cdp-metrics-grid) */
  .cdp-metrics-grid .cdp-metric-item {
    padding: 14px !important;
    padding-right: 44px !important;
    gap: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .cdp-metrics-grid .cdp-metric-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }

  .cdp-metrics-grid .cdp-metric-circular {
    width: 55px !important;
    height: 55px !important;
    flex-shrink: 0 !important;
  }

  .cdp-metrics-grid .cdp-metric-circular svg {
    width: 55px !important;
    height: 55px !important;
  }

  .cdp-metrics-grid .cdp-circular-value {
    font-size: 12px !important;
  }

  .cdp-metrics-grid .cdp-metric-content {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .cdp-metrics-grid .cdp-metric-label {
    font-size: 12px !important;
    margin-bottom: 3px !important;
  }

  .cdp-metrics-grid .cdp-metric-values {
    gap: 4px !important;
  }

  .cdp-metrics-grid .cdp-metric-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  .cdp-metrics-grid .cdp-metric-status {
    font-size: 10px !important;
  }

  .cdp-metrics-grid .cdp-metric-value {
    font-size: 13px !important;
  }

  .cdp-metrics-grid .cdp-metric-score {
    font-size: 15px !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .cdp-info-button,
  .metric-info-button {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Ще менші розміри для маленьких екранів */
  .cdp-info-section {
    padding: 12px !important;
  }

  .cdp-metrics-section {
    padding: 16px 12px !important;
  }

  .cdp-info-grid,
  .cdp-metrics-grid {
    gap: 10px !important;
  }

  .cdp-info-card,
  .cdp-metrics-grid .cdp-metric-item {
    padding: 12px !important;
    gap: 10px !important;
  }
  
  .cdp-metrics-grid .cdp-metric-item {
    padding-right: 38px !important;
  }

  .cdp-info-icon,
  .cdp-metrics-grid .cdp-metric-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  .cdp-info-label,
  .cdp-metrics-grid .cdp-metric-label {
    font-size: 10px !important;
  }

  .cdp-info-value,
  .cdp-metrics-grid .cdp-metric-value {
    font-size: 12px !important;
  }

  .cdp-metrics-grid .cdp-metric-score {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .cdp-metrics-title,
  .cdp-info-title {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }
}