/* --- Accordion Items Wrapper (space-y-3) --- */

.accordion-main-container {
    width: min(100%, 925px);
    margin-inline: auto;
    margin-top: 3rem;
}

.accordion-items-wrapper {
    /* Mimics space-y-3 */
}

.accordion-items-wrapper > *:not(:last-child) {
    margin-bottom: 0.75rem; /* Equivalent to space-y-3 (3 * 0.25rem = 0.75rem) */
}

/* --- Accordion Item --- */
.accordion-item {
    background-color: #fff; /* Equivalent to bg-white */
    border: 1px solid #e5e7eb; /* Equivalent to border border-gray-200 */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    overflow: hidden; /* Equivalent to overflow-hidden */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Equivalent to shadow-sm */
    transition: box-shadow 0.3s ease-in-out; /* Equivalent to transition-shadow */
}

    .accordion-item:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Equivalent to hover:shadow-md */
    }

/* --- Accordion Trigger --- */
.accordion-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between; /* To push chevron to the right */
    padding: 1rem 1.5rem; /* Equivalent to px-6 py-4 */
    text-align: left; /* Equivalent to text-left */
    font-weight: 600; /* Equivalent to font-semibold */
    font-size: 1.125rem; /* Equivalent to text-lg */
    background: none;
    border: none;
    cursor: pointer;
    color: #1a202c; /* Default text color */
    transition: background-color 0.2s ease;
}

.accordion-trigger:hover {
    background-color: #f8f8f8; /* A subtle hover background */
    text-decoration: none; /* Equivalent to hover:no-underline */
}

/* Flex container for title and dot */
.accordion-trigger-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Equivalent to gap-3 */
}

.accordion-dot {
    width: 0.5rem; /* Equivalent to w-2 */
    height: 0.5rem; /* Equivalent to h-2 */
    background-color: var(--daikin-blue); /* A representative value for daikin-blue */
    border-radius: 9999px; /* Equivalent to rounded-full */
}

/* Chevron icon for accordion trigger */
.accordion-chevron {
    width: 1.25rem; /* Equivalent to h-5 w-5 */
    height: 1.25rem;
    transition: transform 0.3s ease; /* For smooth rotation */
}

/* Rotate chevron when accordion item is open */
.accordion-item.is-open .accordion-chevron {
    transform: rotate(180deg);
}

/* --- Accordion Content --- */
.accordion-content {
    /* These properties are key for the collapse/expand animation */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Adjust timing function as needed */
    /* padding will be applied by the inner-content-wrapper when open */
}

/* When the item is open, set max-height to a large value */
.accordion-item.is-open .accordion-content {
    max-height: 1000px; /* Needs to be large enough to contain all content */
    /* Re-adjust transition for a smooth expand based on content height */
    transition: max-height 0.5s ease-in-out;
}

.accordion-content-inner {
    padding: 0.5rem 1.5rem 1.5rem 1.5rem; /* Equivalent to px-6 pb-6 pt-2 */
}

/* --- Conditional Content Styling (based on logoCount) --- */

/* Text-only content (logoCount === 0) */
.text-content-wrapper {
    /* Mimics space-y-4 */
}

    .text-content-wrapper > *:not(:last-child) {
        margin-bottom: 1rem; /* Equivalent to space-y-4 (4 * 0.25rem = 1rem) */
    }

    .text-content-wrapper p {
        color: #4b5563; /* Equivalent to text-gray-600 */
        line-height: 1.625; /* Equivalent to leading-relaxed */
        font-size: 1rem; /* Equivalent to text-base */
    }

/* Grid layout content (logoCount > 0) */
.grid-content-wrapper {
    /* Mimics space-y-6 */
}

    .grid-content-wrapper > *:not(:last-child) {
        margin-bottom: 1.5rem; /* Equivalent to space-y-6 (6 * 0.25rem = 1.5rem) */
    }

.description-column p {
    color: #4b5563; /* Equivalent to text-gray-600 */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    font-size: 1rem; /* Equivalent to text-base */
}

.logo-display-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: 2rem; /* Equivalent to gap-8 */
    align-items: flex-start; /* Equivalent to items-start */
}

.logo-display-grid:not(.hasLogos) {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) { /* lg breakpoint */
    .logo-display-grid {
        grid-template-columns: repeat(3, 1fr); /* Equivalent to lg:grid-cols-3 */
    }

    .description-column {
        grid-column: span 2 / span 2; /* Equivalent to lg:col-span-2 */
    }
}

/* Logo display area - space-y-4 */
.logo-area-wrapper {
    /* Mimics space-y-4 */
}

    .logo-area-wrapper > *:not(:last-child) {
        margin-bottom: 1rem; /* Equivalent to space-y-4 */
    }

/* Logo flex container (for 2 logos side-by-side) */
.logos-flex-container {
    display: flex;
    gap: 0.75rem; /* Equivalent to gap-3 */
    justify-content: center; /* Center for the 3-logo layout's top row */
}

/* Individual logo wrapper */
.logo-wrapper {
    display: block; /* block */
    width: 100%; /* w-full */
    max-width: 100px; /* max-w-[100px] */
    height: 3rem; /* Equivalent to h-12 */
    background-color: #fff; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: box-shadow 0.2s ease; /* transition-shadow */
    padding: 0.5rem; /* p-2 */
}

    .logo-wrapper:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* hover:shadow-md */
    }

    .logo-wrapper img {
        max-width: 100%; /* max-w-full */
        max-height: 100%; /* max-h-full */
        object-fit: contain; /* object-contain */
    }

/* Placeholder logo styling (used when actual image path isn't provided) */
.logo-placeholder {
    width: 100%;
    max-width: 90px; /* max-w-[90px] */
    height: 2.5rem; /* h-10 */
    background-color: #f9fafb; /* bg-gray-50 */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

    .logo-placeholder span {
        color: #9ca3af; /* text-gray-400 */
        font-size: 0.75rem; /* text-xs */
        font-weight: 500; /* font-medium */
    }

/* For 3 logos: centered row below two */
.flex.justify-center {
    justify-content: center;
}

/* Vendor Guidance Note */
.vendor-guidance-note {
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
}

.vendor-guidance-note p {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.625; /* leading-relaxed */
}