@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --theme-green: #159C2A;
    --theme-green-hover: #159C2AE5; /* Базовий зелений з прозорістю для ховеру */
    --theme-green-dark: #117a21;
    --text-dark: #000000; /* Оновлений колір тексту */
    --card-bg: #ffffff;
    --font: 'Urbanist', sans-serif;
}

.post-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Стили для нового блока SBA (из скриншота) --- */

/* 1. Главный контейнер */
.new-sba-block {
    padding: 14px 14px 21px;
    border-radius: 3px;
    border: 1px solid #EEEEEE;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--font); /* Urbanist */
    margin-bottom: 15px; /* Добавил отступ снизу, чтобы отделить от следующего блока */
}

/* 2. Верхний блок (контент) */
.new-sba-top-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 3. Секция заголовка и баннера */
.new-sba-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 24px 24px;
}

.new-sba-title {
    font-family: var(--font);
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    padding: 14px 0;
    margin: 0;
    color: #232323; /* Взял цвет из .sba-main-title */
}

/* 4. Зеленый баннер */
.new-sba-banner {
    border-left: 2px solid var(--theme-green); /* #159C2A */
    background-color: #00800008;
    padding: 7px 14px;
}

.new-sba-banner p {
    font-family: 'Merriweather', serif; /* Как ты и указал, нужен этот шрифт */
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
    color: #0D661A;
    margin: 0;
}

/* 5. Секция с текстом */
.new-sba-text-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
}

.bg-grey {
    background-color: #F9F9F9 !important;
}

.py-24 {
    padding-block: 24px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pt-14 {
    padding-top: 14px !important;
}

.new-sba-pros-cons-title {
    font-family: var(--font);
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    padding: 7px 0;
    margin: 0;
    color: #0D661A;
}

.new-sba-subtitle {
    font-family: var(--font);
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    padding: 14px 0;
    margin: 0;
    color: #232323; /* Взял цвет из .sba-subtitle */
}

.new-sba-h3 {
    font-family: var(--font);
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: capitalize;
    padding: 14px 0;
    margin: 0;
    color: #232323; /* Взял цвет из .sba-subtitle */
}

/* 6. Параграфы */
.new-sba-paragraphs p {
    font-family: var(--font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #444; /* Взял цвет из .sba-section p */
    margin: 0;
}

.new-sba-paragraphs p:not(:last-child) {
    margin-bottom: 14px; /* Отступ между параграфами */
}

/* 7. Нижний блок (Иконки) */
.new-sba-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 100px; /* Расстояние между блоками */
    padding: 24px;
    text-align: center;
}

.new-sba-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 125px;
}

.new-sba-feature-item--long {
    max-width: 175px;
}

.new-sba-feature-icon {
    color: var(--theme-green);
    font-size: 48px; /* Подобрал размер по скриншоту */
    margin-bottom: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-sba-feature-item--long .new-sba-feature-icon {
    height: 120px;
}

.new-sba-feature-title {
    font-family: var(--font);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 4px;
    margin-top: 0;
    color: #232323; /* Взял цвет из .feature-title */
}

.new-sba-feature-detail {
    font-family: var(--font);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0;
    text-align: center;
    margin: 0;
    color: #232323; /* Взял цвет из .feature-detail */
}

/* --- Стили для блока "Types Of SBA Loans" --- */

/* Контейнер для списка */
.new-sba-list-content {
    padding: 0 24px; /* Сохраняем боковые отступы, как у .new-sba-text-content */
}

/* Стилизация списка */
.new-sba-loan-types {
    list-style: none; /* Убираем стандартные маркеры */
    padding-left: 0;
    margin: 0;
    counter-reset: loan-counter; /* Инициализируем CSS-счетчик */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Отступ между элементами списка */
}

.new-sba-loan-types li {
    position: relative; /* Нужно для позиционирования номера */
    padding-left: 35px; /* Место для кружка (25px) + отступ (10px) */
    counter-increment: loan-counter; /* Увеличиваем счетчик для каждого <li> */
    display: flex; /* Для вертикального выравнивания кружка и текста */
    align-items: flex-start; /* Выравнивание по верху */
    min-height: 25px; /* Минимальная высота, равная кружку */
}

.new-sba-loan-types li::before {
    content: counter(loan-counter); /* Отображаем значение счетчика */
    position: absolute;
    left: 0;
    top: 3px; /* Выравниваем по верху */
    
    /* Стилизация кружка с номером */
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Запрещаем кружку сжиматься */
    border-radius: 50%;
    background-color: var(--theme-green); /* Зеленый цвет */
    color: #fff;
    
    /* Стили текста в кружке */
    font-family: var(--font);
    font-weight: 600;
    font-size: 16px;
    line-height: 1; /* 100% */
    letter-spacing: 0;
    text-transform: capitalize;
}

.new-sba-loan-types li p {
    margin: 0;
    /* Стили текста из .new-sba-paragraphs p */
    font-family: var(--font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #232323; 
    /* Небольшая корректировка для идеального 
      визуального выравнивания с кружком 
    */
    padding-top: 1px; 
}

.new-sba-loan-types li p strong {
    color: #232323; /* Делаем заголовок пункта темнее */
    font-weight: 700;
}

/* --- Стили для блока "How Do SBA Loans Work" (список с галочками) --- */
.new-sba-checklist {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Такой же отступ, как у .new-sba-loan-types */
}

.new-sba-checklist li {
    position: relative;
    padding-left: 35px; /* 25px (иконка) + 10px (отступ) */
    display: flex;
    align-items: flex-start;
    min-height: 25px;
}

.new-sba-checklist li::before {
    content: '';
    
    position: absolute;
    left: 0;
    top: 3px; /* Выравнивание как у .new-sba-loan-types */
    
    width: 25px; /* Контейнер для иконки */
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    background-color: var(--theme-green); /* Без фона */
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='9' viewBox='0 0 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.57687 7.22823L0.919266 3.70585L0 4.59134L4.57683 9L13 0.885489L12.0807 0L4.57687 7.22823Z' fill='white'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
    border-radius: 50%;
}

.new-sba-checklist li p {
    margin: 0;
    /* Стили текста из .new-sba-paragraphs p */
    font-family: var(--font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #444; 
    padding-top: 1px; /* Выравнивание как у .new-sba-loan-types li p */
}

.new-sba-checklist li p strong {
    color: #232323; /* Как у .new-sba-loan-types li p strong */
    font-weight: 700;
}

.new-sba-text-footer {
    padding: 24px;
}

/* --- Стили для блока "Documents" --- */
.new-sba-documents-list {
    list-style: none;
    padding: 0;
    margin: 7px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px; /* Отступ между элементами списка */
}

.new-sba-document-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Для мобильных, если кнопка не поместится */
    gap: 15px; /* Отступ между инфо и кнопкой на мобильных */
}

.new-sba-document-info {
    display: flex;
    align-items: center;
    gap: 7px; /* Отступ между иконкой и текстом */
}

.new-sba-document-info svg {
    width: 24px;
}

.new-sba-document-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.document-name {
    font-family: var(--font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #232323;
}

.document-size {
    font-family: var(--font);
    color: #808080;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-transform: capitalize;
}

.new-sba-download-btn {
    background-color: var(--theme-green);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    font-family: var(--font);
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.new-sba-download-btn:hover {
    background-color: var(--theme-green-dark); /* Используем переменную для ховера */
}

/* --- Стили для блока FAQ --- */
.new-sba-faq-container {
    margin-top: 15px; /* Отступ от списка документов */
}

.new-sba-faq-container h3 {
    text-align: center;
    margin-bottom: 7px;
}

.new-sba-faq-item {
    margin-bottom: 14px;
}

.new-sba-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    list-style: none;
    width: 100%;
    background-color: #fff;
    border: 1px solid #C4C4C4B2;
    border-radius: 3px;
}

/* Убираем стандартный маркер (стрелку) в WebKit-браузерах */
.new-sba-faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-question {
    font-family: var(--font);
    font-weight: 600;
    font-size: 16px; /* Как .new-sba-h3 */
    line-height: 19px;
    color: #232323;
}

.new-sba-faq-icons {
    flex-shrink: 0; /* Не сжимать иконки */
    margin-left: 15px;
    color: var(--theme-green);
}

/* Логика переключения иконок */
.new-sba-faq-icons .icon-arrow-down {
    display: none;
}
.new-sba-faq-icons .icon-arrow-right {
    display: block;
}

/* Стили для ОТКРЫТОГО состояния */
.new-sba-faq-item[open] > summary {
    background-color: #E8F6EA;
    border-color: #E8F6EA;
}

.new-sba-faq-item[open] > summary .faq-question {
    color: #0D661A;
}

.new-sba-faq-item[open] > summary .new-sba-faq-icons .icon-arrow-down {
    display: block;
}
.new-sba-faq-item[open] > summary .new-sba-faq-icons .icon-arrow-right {
    display: none;
}

/* Контентная часть */
.new-sba-faq-content {
    background-color: #F6FBF6;
    padding: 24px;
}

/* Переопределяем стили для списков ВНУТРИ FAQ, 
  чтобы убрать лишние боковые отступы, 
  так как они уже есть у .new-sba-faq-content 
*/
.new-sba-faq-content .new-sba-checklist,
.new-sba-faq-content .new-sba-paragraphs,
.new-sba-faq-content .new-sba-documents-list {
    padding-left: 0;
    padding-right: 0;
}

/* --- START: Адаптация страницы Post (внутри .right_cp_bar) --- */

/* 1. Снимаем ограничение по ширине с .right_cp_bar (глобально) */
@media (max-width: 1200px) {
	.right_cp_bar {
		min-width: 320px;
		width: 100%;
		padding: 10px;
		overflow-x: hidden;
	}
}

/* 2. Уменьшаем боковые отступы для всех контентных блоков */
@media (max-width: 575.98px) {

	.post-wrapper {
		/* Убираем отступы у главной обертки */
		padding: 0;
	}

	.new-sba-block {
		/* Убираем отступы у самих блоков */
		padding-left: 0;
		padding-right: 0;
	}

	/* Уменьшаем боковые отступы у всех дочерних элементов */
	.new-sba-header,
	.new-sba-text-content,
	.new-sba-features,
	.new-sba-list-content,
	.new-sba-text-footer,
	.new-sba-faq-content {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 3. Уменьшаем заголовки */
	.new-sba-title,
	.new-sba-subtitle,
	.new-sba-pros-cons-title {
		font-size: 20px;
	}

	.new-sba-h3 {
		font-size: 18px;
	}

	.faq-question {
		font-size: 15px;
	}

	/* 4. Уменьшаем гигантский отступ (gap) между иконками */
	.new-sba-features {
		gap: 40px;
		/* Было 100px */
	}

	/* 5. Уменьшаем отступы у списков, чтобы текст был ближе к иконке */
	.new-sba-loan-types li,
	.new-sba-checklist li {
		padding-left: 32px;
		/* Было 35px */
	}

	.new-sba-loan-types li::before,
	.new-sba-checklist li::before {
		top: 2px;
		/* Чуть-чуть ровняем иконку/цифру */
	}

	/* 6. Адаптация списка документов в FAQ */
	.new-sba-document-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.new-sba-download-btn {
		width: 100%;
		justify-content: center;
	}
}

/* --- END: Адаптация страницы Post --- */