/**
 * Casino Hydra - Payment Methods Full Responsive Styles
 * Повна мобільна адаптація для всіх стилів
 * 
 * ЛОГІКА КОЛОНОК:
 * - Style 1,4,5,7 (Cards з багато даних): 1 колонка на <576px
 * - Style 2 (Table): горизонтальний скрол
 * - Style 3,6 (Lists): вже списки → OK
 * - Style 8 (Split Cards): завжди 1 колонка на мобільних
 * - Style 9 (Accordion): 2 колонки до 480px
 * - Style 10 (Badges): вертикальний список
 * - CDP Styles (0-10): простіші → 2 колонки на мобільних
 */

/* ==========================================
   CDP PAYMENTS STYLES (0-10) - RESPONSIVE
   ========================================== */

@media (max-width: 991px) {
    .cdp-payments-wrapper { margin: 16px 0; }
    .cdp-payments-style-0, .cdp-payments-style-3, .cdp-payments-style-5, .cdp-payments-style-9 {
        grid-template-columns: repeat(3, 1fr); gap: 10px;
    }
    .cdp-payments-style-1, .cdp-payments-style-8, .cdp-payments-style-10 {
        grid-template-columns: repeat(4, 1fr); gap: 8px;
    }
    .cdp-payments-style-2, .cdp-payments-style-4, .cdp-payments-style-6 { gap: 8px; }
}

@media (max-width: 767px) {
    .cdp-payments-wrapper { margin: 12px 0; }
    .cdp-payments-style-0, .cdp-payments-style-3 {
        grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .cdp-payments-style-0 .cdp-payment-item, .cdp-payments-style-3 .cdp-payment-item {
        padding: 10px 8px; gap: 5px; border-radius: 6px;
    }
    .cdp-payments-style-1, .cdp-payments-style-8 {
        grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .cdp-payments-style-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cdp-payments-style-9, .cdp-payments-style-10 {
        grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .cdp-payments-style-2, .cdp-payments-style-4, .cdp-payments-style-6 { gap: 6px; }
    .cdp-payments-style-2 .cdp-payment-item { padding: 5px 10px 5px 5px; gap: 6px; }
    .cdp-payments-style-2 .cdp-payment-logo { width: 32px; height: 22px; }
    .cdp-payments-style-2 .cdp-payment-name { font-size: 11px; }
    .cdp-payment-logo { width: 38px; height: 26px; }
    .cdp-payment-name { font-size: 11px; }
}

@media (max-width: 575px) {
    .cdp-payments-wrapper { margin: 10px 0; }
    .cdp-payments-style-0, .cdp-payments-style-3, .cdp-payments-style-5 {
        grid-template-columns: repeat(2, 1fr); gap: 6px;
    }
    .cdp-payments-style-0 .cdp-payment-item, .cdp-payments-style-3 .cdp-payment-item {
        padding: 8px 6px; gap: 4px; border-radius: 5px;
    }
    .cdp-payments-style-1, .cdp-payments-style-8, .cdp-payments-style-9, .cdp-payments-style-10 {
        grid-template-columns: repeat(2, 1fr); gap: 6px;
    }
    .cdp-payments-style-2, .cdp-payments-style-4, .cdp-payments-style-6 { gap: 5px; }
    .cdp-payments-style-2 .cdp-payment-item { padding: 4px 8px 4px 4px; gap: 5px; }
    .cdp-payments-style-2 .cdp-payment-logo { width: 28px; height: 20px; }
    .cdp-payments-style-2 .cdp-payment-name { font-size: 10px; }
    .cdp-payment-logo { width: 34px; height: 24px; }
    .cdp-payment-name { font-size: 10px; }
}

@media (max-width: 479px) {
    .cdp-payments-wrapper { margin: 8px 0; }
    .cdp-payments-style-0, .cdp-payments-style-3 {
        grid-template-columns: repeat(2, 1fr); gap: 5px;
    }
    .cdp-payments-style-0 .cdp-payment-item, .cdp-payments-style-3 .cdp-payment-item {
        padding: 6px 5px; gap: 3px; border-radius: 4px;
    }
    .cdp-payments-style-1, .cdp-payments-style-5, .cdp-payments-style-8, 
    .cdp-payments-style-9, .cdp-payments-style-10 {
        grid-template-columns: repeat(2, 1fr); gap: 5px;
    }
    .cdp-payments-style-2, .cdp-payments-style-4, .cdp-payments-style-6 { gap: 4px; }
    .cdp-payments-style-2 .cdp-payment-item { padding: 3px 6px 3px 3px; gap: 4px; }
    .cdp-payments-style-2 .cdp-payment-logo { width: 24px; height: 18px; }
    .cdp-payments-style-2 .cdp-payment-name { font-size: 9px; }
    .cdp-payment-logo { width: 30px; height: 22px; }
    .cdp-payment-name { font-size: 9px; }
}

/* ==========================================
   HPM STYLES (1-10) - RESPONSIVE
   ========================================== */

/* === Tablet (768px - 991px) === */
@media (max-width: 991px) {
    .hpm--1 .hpm__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
    .hpm--1 .hpm__logo-wrap { padding: 16px 12px !important; min-height: 80px !important; }
    .hpm--1 .hpm__logo { max-width: 90px !important; max-height: 48px !important; }
    .hpm--1 .hpm__name { font-size: 13px !important; }
    .hpm--1 .hpm__label, .hpm--1 .hpm__value { font-size: 11px !important; }
    
    .hpm--2 .hpm__table th, .hpm--2 .hpm__table td { padding: 10px 12px !important; font-size: 13px !important; }
    .hpm--2 .hpm__icon { width: 36px !important; height: 24px !important; }
    
    .hpm--3 .hpm__row { grid-template-columns: 60px 1fr 110px 110px !important; gap: 12px !important; padding: 12px 14px !important; }
    
    .hpm--4 { padding: 16px !important; }
    .hpm--4 .hpm__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    
    .hpm--5 .hpm__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    
    .hpm--6 .hpm__item { padding: 10px 14px !important; }
    
    .hpm--7 .hpm__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    
    .hpm--8 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    
    .hpm--9 .hpm__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    
    .hpm--10 .hpm__badges { gap: 8px !important; }
}

/* === Mobile Large (576px - 767px) === */
@media (max-width: 767px) {
    .hpm--1 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .hpm--1 .hpm__logo-wrap { padding: 14px 10px !important; min-height: 70px !important; margin: 8px !important; }
    .hpm--1 .hpm__logo { max-width: 80px !important; max-height: 42px !important; }
    .hpm--1 .hpm__name { font-size: 12px !important; padding: 6px 8px !important; }
    .hpm--1 .hpm__detail { padding: 5px 6px !important; }
    .hpm--1 .hpm__label, .hpm--1 .hpm__value { font-size: 10px !important; }
    
    .hpm--2 { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .hpm--2 .hpm__table { min-width: 480px !important; }
    .hpm--2 .hpm__table th, .hpm--2 .hpm__table td { padding: 8px 10px !important; font-size: 12px !important; }
    .hpm--2 .hpm__icon { width: 32px !important; height: 22px !important; }
    
    .hpm--3 .hpm__row { grid-template-columns: 50px 1fr !important; gap: 10px !important; padding: 10px 12px !important; }
    .hpm--3 .hpm__row-limit, .hpm--3 .hpm__row-time { display: none !important; }
    .hpm--3 .hpm__row-name { font-size: 12px !important; }
    
    .hpm--4 { padding: 12px !important; }
    .hpm--4 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .hpm--4 .hpm__card { padding: 10px !important; }
    .hpm--4 .hpm__logo { width: 38px !important; height: 26px !important; }
    .hpm--4 .hpm__name { font-size: 11px !important; }
    .hpm--4 .hpm__card-label { font-size: 9px !important; }
    .hpm--4 .hpm__card-value { font-size: 11px !important; }
    
    .hpm--5 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .hpm--5 .hpm__card-header { padding: 8px !important; gap: 6px !important; }
    .hpm--5 .hpm__logo { width: 36px !important; height: 24px !important; }
    .hpm--5 .hpm__name { font-size: 11px !important; }
    .hpm--5 .hpm__card-footer { flex-direction: column !important; padding: 6px 8px !important; gap: 4px !important; }
    .hpm--5 .hpm__tag { font-size: 10px !important; padding: 4px 6px !important; }
    
    .hpm--6 .hpm__list { gap: 6px !important; }
    .hpm--6 .hpm__item { padding: 8px 10px !important; flex-wrap: wrap !important; }
    .hpm--6 .hpm__item-logo { width: 44px !important; height: 30px !important; }
    .hpm--6 .hpm__item-name { font-size: 12px !important; }
    .hpm--6 .hpm__item-time { font-size: 10px !important; }
    .hpm--6 .hpm__item-limit { font-size: 11px !important; padding: 5px 10px !important; }
    
    .hpm--7 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .hpm--7 .hpm__card-head { padding: 12px !important; }
    .hpm--7 .hpm__logo { max-width: 56px !important; max-height: 32px !important; padding: 6px 8px !important; }
    .hpm--7 .hpm__card-body { padding: 10px !important; }
    .hpm--7 .hpm__name { font-size: 12px !important; margin-bottom: 8px !important; }
    .hpm--7 .hpm__meta-item { padding: 5px 4px !important; }
    .hpm--7 .hpm__meta-label { font-size: 8px !important; }
    .hpm--7 .hpm__meta-value { font-size: 10px !important; }
    
    .hpm--8 .hpm__grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .hpm--8 .hpm__card-left { padding: 10px !important; gap: 10px !important; }
    .hpm--8 .hpm__logo { width: 44px !important; height: 30px !important; }
    .hpm--8 .hpm__name { font-size: 12px !important; }
    .hpm--8 .hpm__info { padding: 8px 12px !important; min-width: 70px !important; }
    .hpm--8 .hpm__info-value { font-size: 12px !important; }
    .hpm--8 .hpm__info-label { font-size: 8px !important; }
    
    .hpm--9 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .hpm--9 .hpm__card { padding: 8px !important; gap: 8px !important; }
    .hpm--9 .hpm__card-logo { width: 42px !important; height: 30px !important; }
    .hpm--9 .hpm__name { font-size: 11px !important; }
    .hpm--9 .hpm__card-meta { font-size: 9px !important; }
    .hpm--9 .hpm__sep { display: none !important; }
    .hpm--9 .hpm__card-meta span { display: block !important; }
    .hpm--9 .hpm__toggle { padding: 10px !important; font-size: 12px !important; margin-top: 10px !important; }
    
    .hpm--10 .hpm__badges { flex-direction: column !important; gap: 6px !important; }
    .hpm--10 .hpm__badge { padding: 8px 10px !important; width: 100% !important; }
    .hpm--10 .hpm__badge-icon { width: 38px !important; height: 38px !important; }
    .hpm--10 .hpm__img { max-width: 26px !important; max-height: 18px !important; }
    .hpm--10 .hpm__badge-name { font-size: 12px !important; }
    .hpm--10 .hpm__badge-meta { font-size: 10px !important; }
}

/* === Mobile (480px - 575px) - 1 КОЛОНКА ДЛЯ СКЛАДНИХ СТИЛІВ === */
@media (max-width: 575px) {
    /* Style 1: 1 колонка, горизонтальний layout */
    .hpm--1 .hpm__grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .hpm--1 .hpm__card { display: flex !important; flex-direction: row !important; align-items: stretch !important; border-radius: 8px !important; }
    .hpm--1 .hpm__logo-wrap { padding: 12px 10px !important; min-height: auto !important; margin: 0 !important; border-radius: 8px 0 0 8px !important; flex: 0 0 80px !important; border: none !important; border-right: 1px solid #e5e7eb !important; }
    .hpm--1 .hpm__logo { max-width: 60px !important; max-height: 36px !important; }
    .hpm--1 .hpm__name { font-size: 12px !important; padding: 8px 10px !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: left !important; }
    .hpm--1 .hpm__details { padding: 0 10px 8px !important; display: flex !important; gap: 6px !important; }
    .hpm--1 .hpm__detail { flex: 1 !important; padding: 4px 6px !important; margin-bottom: 0 !important; }
    .hpm--1 .hpm__label, .hpm--1 .hpm__value { font-size: 9px !important; }
    
    /* Style 2: компактна таблиця */
    .hpm--2 .hpm__table { min-width: 400px !important; }
    .hpm--2 .hpm__table th, .hpm--2 .hpm__table td { padding: 6px 8px !important; font-size: 11px !important; }
    .hpm--2 .hpm__icon { width: 28px !important; height: 20px !important; }
    
    /* Style 3: компактні рядки */
    .hpm--3 .hpm__row { grid-template-columns: 44px 1fr !important; gap: 8px !important; padding: 8px 10px !important; }
    .hpm--3 .hpm__row-logo { width: 44px !important; height: 30px !important; }
    .hpm--3 .hpm__row-logo img { max-width: 34px !important; max-height: 22px !important; }
    .hpm--3 .hpm__row-name { font-size: 11px !important; }
    
    /* Style 4: 1 колонка, горизонтальний layout */
    .hpm--4 { padding: 10px !important; border-radius: 8px !important; }
    .hpm--4 .hpm__grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .hpm--4 .hpm__card { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 8px 10px !important; border-radius: 6px !important; }
    .hpm--4 .hpm__card-top { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; flex: 1 !important; gap: 8px !important; }
    .hpm--4 .hpm__logo { width: 34px !important; height: 24px !important; }
    .hpm--4 .hpm__name { font-size: 11px !important; }
    .hpm--4 .hpm__card-bottom { flex-direction: row !important; gap: 12px !important; flex-shrink: 0 !important; }
    .hpm--4 .hpm__card-meta { flex-direction: column !important; gap: 0 !important; text-align: right !important; }
    .hpm--4 .hpm__card-label { font-size: 8px !important; }
    .hpm--4 .hpm__card-value { font-size: 10px !important; }
    
    /* Style 5: 1 колонка */
    .hpm--5 .hpm__grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .hpm--5 .hpm__card-header { padding: 8px !important; gap: 8px !important; }
    .hpm--5 .hpm__logo { width: 38px !important; height: 26px !important; }
    .hpm--5 .hpm__name { font-size: 12px !important; }
    .hpm--5 .hpm__card-footer { flex-direction: row !important; padding: 6px 8px !important; gap: 6px !important; }
    .hpm--5 .hpm__tag { font-size: 9px !important; padding: 4px 6px !important; }
    
    /* Style 6: вертикальний layout */
    .hpm--6 .hpm__list { gap: 5px !important; }
    .hpm--6 .hpm__item { flex-direction: column !important; align-items: flex-start !important; padding: 8px !important; gap: 6px !important; }
    .hpm--6 .hpm__item-left { width: 100% !important; gap: 8px !important; }
    .hpm--6 .hpm__item-logo { width: 40px !important; height: 28px !important; }
    .hpm--6 .hpm__item-logo img { max-width: 32px !important; max-height: 20px !important; }
    .hpm--6 .hpm__item-name { font-size: 11px !important; }
    .hpm--6 .hpm__item-time { font-size: 9px !important; }
    .hpm--6 .hpm__item-limit { width: 100% !important; text-align: center !important; font-size: 10px !important; padding: 4px 8px !important; background: #f8fafc !important; border-radius: 4px !important; }
    
    /* Style 7: 1 колонка, горизонтальний layout */
    .hpm--7 .hpm__grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .hpm--7 .hpm__card { display: flex !important; flex-direction: row !important; align-items: stretch !important; border-radius: 8px !important; }
    .hpm--7 .hpm__card-head { padding: 10px !important; flex: 0 0 70px !important; border-radius: 8px 0 0 8px !important; }
    .hpm--7 .hpm__logo { max-width: 50px !important; max-height: 28px !important; padding: 5px 6px !important; border-radius: 4px !important; }
    .hpm--7 .hpm__card-body { padding: 8px !important; flex: 1 !important; }
    .hpm--7 .hpm__name { font-size: 11px !important; margin-bottom: 6px !important; text-align: left !important; }
    .hpm--7 .hpm__meta-item { padding: 4px 5px !important; }
    .hpm--7 .hpm__meta-label { font-size: 7px !important; }
    .hpm--7 .hpm__meta-value { font-size: 9px !important; }
    
    /* Style 8: вертикальний layout */
    .hpm--8 .hpm__card { flex-direction: column !important; }
    .hpm--8 .hpm__card-left { border-right: none !important; border-bottom: 1px solid #e5e7eb !important; padding: 8px 10px !important; gap: 8px !important; }
    .hpm--8 .hpm__logo { width: 40px !important; height: 28px !important; }
    .hpm--8 .hpm__name { font-size: 11px !important; }
    .hpm--8 .hpm__card-right { width: 100% !important; }
    .hpm--8 .hpm__info { flex: 1 !important; padding: 6px 10px !important; min-width: auto !important; }
    .hpm--8 .hpm__info-value { font-size: 11px !important; }
    .hpm--8 .hpm__info-label { font-size: 7px !important; }
    
    /* Style 9: 2 колонки */
    .hpm--9 .hpm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    .hpm--9 .hpm__card { padding: 6px !important; gap: 6px !important; }
    .hpm--9 .hpm__card-logo { width: 36px !important; height: 26px !important; }
    .hpm--9 .hpm__card-logo img { max-width: 28px !important; max-height: 20px !important; }
    .hpm--9 .hpm__name { font-size: 10px !important; }
    .hpm--9 .hpm__card-meta { font-size: 8px !important; }
    .hpm--9 .hpm__toggle { padding: 8px !important; font-size: 11px !important; margin-top: 8px !important; }
    
    /* Style 10: вертикальний список */
    .hpm--10 .hpm__badges { gap: 5px !important; }
    .hpm--10 .hpm__badge { padding: 6px 8px !important; gap: 8px !important; }
    .hpm--10 .hpm__badge-icon { width: 34px !important; height: 34px !important; }
    .hpm--10 .hpm__img { max-width: 22px !important; max-height: 16px !important; }
    .hpm--10 .hpm__badge-name { font-size: 11px !important; }
    .hpm--10 .hpm__badge-meta { font-size: 9px !important; }
}

/* === Mobile Extra Small (<480px) === */
@media (max-width: 479px) {
    .hpm--1 .hpm__grid { gap: 6px !important; }
    .hpm--1 .hpm__logo-wrap { padding: 10px 8px !important; flex: 0 0 70px !important; }
    .hpm--1 .hpm__logo { max-width: 52px !important; max-height: 32px !important; }
    .hpm--1 .hpm__name { font-size: 11px !important; padding: 6px 8px !important; }
    .hpm--1 .hpm__details { padding: 0 8px 6px !important; gap: 4px !important; }
    .hpm--1 .hpm__detail { padding: 3px 5px !important; }
    .hpm--1 .hpm__label, .hpm--1 .hpm__value { font-size: 8px !important; }
    
    .hpm--2 .hpm__table { min-width: 340px !important; }
    .hpm--2 .hpm__table th, .hpm--2 .hpm__table td { padding: 5px 6px !important; font-size: 10px !important; }
    .hpm--2 .hpm__icon { width: 24px !important; height: 18px !important; }
    
    .hpm--3 .hpm__row { grid-template-columns: 40px 1fr !important; gap: 6px !important; padding: 6px 8px !important; }
    .hpm--3 .hpm__row-logo { width: 40px !important; height: 28px !important; }
    .hpm--3 .hpm__row-name { font-size: 10px !important; }
    
    .hpm--4 { padding: 8px !important; }
    .hpm--4 .hpm__grid { gap: 5px !important; }
    .hpm--4 .hpm__card { padding: 6px 8px !important; }
    .hpm--4 .hpm__logo { width: 30px !important; height: 22px !important; }
    .hpm--4 .hpm__name { font-size: 10px !important; }
    .hpm--4 .hpm__card-label { font-size: 7px !important; }
    .hpm--4 .hpm__card-value { font-size: 9px !important; }
    
    .hpm--5 .hpm__grid { gap: 5px !important; }
    .hpm--5 .hpm__card-header { padding: 6px !important; gap: 6px !important; }
    .hpm--5 .hpm__logo { width: 34px !important; height: 24px !important; }
    .hpm--5 .hpm__name { font-size: 10px !important; }
    .hpm--5 .hpm__card-footer { padding: 5px 6px !important; gap: 4px !important; }
    .hpm--5 .hpm__tag { font-size: 8px !important; padding: 3px 5px !important; }
    
    .hpm--6 .hpm__list { gap: 4px !important; }
    .hpm--6 .hpm__item { padding: 6px !important; gap: 5px !important; }
    .hpm--6 .hpm__item-logo { width: 36px !important; height: 26px !important; }
    .hpm--6 .hpm__item-name { font-size: 10px !important; }
    .hpm--6 .hpm__item-time { font-size: 8px !important; }
    .hpm--6 .hpm__item-limit { font-size: 9px !important; padding: 3px 6px !important; }
    
    .hpm--7 .hpm__grid { gap: 5px !important; }
    .hpm--7 .hpm__card-head { padding: 8px !important; flex: 0 0 60px !important; }
    .hpm--7 .hpm__logo { max-width: 44px !important; max-height: 26px !important; padding: 4px 5px !important; }
    .hpm--7 .hpm__card-body { padding: 6px !important; }
    .hpm--7 .hpm__name { font-size: 10px !important; margin-bottom: 4px !important; }
    .hpm--7 .hpm__meta-item { padding: 3px 4px !important; }
    .hpm--7 .hpm__meta-label { font-size: 6px !important; }
    .hpm--7 .hpm__meta-value { font-size: 8px !important; }
    
    .hpm--8 .hpm__grid { gap: 5px !important; }
    .hpm--8 .hpm__card-left { padding: 6px 8px !important; gap: 6px !important; }
    .hpm--8 .hpm__logo { width: 36px !important; height: 26px !important; }
    .hpm--8 .hpm__name { font-size: 10px !important; }
    .hpm--8 .hpm__info { padding: 5px 8px !important; }
    .hpm--8 .hpm__info-value { font-size: 10px !important; }
    .hpm--8 .hpm__info-label { font-size: 6px !important; }
    
    /* Style 9: 1 колонка на найменших */
    .hpm--9 .hpm__grid { grid-template-columns: 1fr !important; gap: 5px !important; }
    .hpm--9 .hpm__card { flex-direction: row !important; padding: 6px !important; gap: 6px !important; }
    .hpm--9 .hpm__card-logo { width: 34px !important; height: 24px !important; }
    .hpm--9 .hpm__card-content { flex: 1 !important; }
    .hpm--9 .hpm__name { font-size: 10px !important; }
    .hpm--9 .hpm__card-meta { font-size: 8px !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
    .hpm--9 .hpm__card-meta span { display: inline !important; }
    .hpm--9 .hpm__sep { display: inline !important; margin: 0 2px !important; }
    .hpm--9 .hpm__toggle { padding: 6px !important; font-size: 10px !important; margin-top: 6px !important; }
    
    .hpm--10 .hpm__badges { gap: 4px !important; }
    .hpm--10 .hpm__badge { padding: 5px 6px !important; gap: 6px !important; }
    .hpm--10 .hpm__badge-icon { width: 30px !important; height: 30px !important; }
    .hpm--10 .hpm__img { max-width: 20px !important; max-height: 14px !important; }
    .hpm--10 .hpm__badge-name { font-size: 10px !important; }
    .hpm--10 .hpm__badge-meta { font-size: 8px !important; }
}

/* Touch-friendly */
@media (hover: none) and (pointer: coarse) {
    .hpm__card, .hpm__badge, .hpm__item, .hpm__row, .cdp-payment-item { min-height: 44px; }
    .hpm__toggle { min-height: 44px !important; }
}

/* Landscape */
@media (max-height: 500px) and (orientation: landscape) {
    .hpm--1 .hpm__grid, .hpm--4 .hpm__grid, .hpm--5 .hpm__grid, .hpm--7 .hpm__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hpm--9 .hpm__grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Print */
@media print {
    .hpm__toggle, .hpm__hidden { display: none !important; }
}