/* Mobile Accordion Styles for Credit Card Pattern */

/* Main card container mobile adjustments */
@media (max-width: 768px) {
    /* Card box main container */
    .wp-block-group[style*="border-radius:1rem"] {
        padding: var(--wp--preset--spacing--30) !important;
        border-radius: 1rem !important;
        background: white !important;
        border: 1px solid var(--wp--preset--color--black-alpha-7) !important;
    }

    /* Main content layout - stack vertically on mobile */
    .wp-block-group[data-name="Main Content"] {
        flex-direction: column !important;
        padding: var(--wp--preset--spacing--30) !important;
    }

    /* Left column adjustments */
    .wp-block-group[data-name="Left Column"] {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: var(--wp--preset--spacing--40) !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Card image mobile size */
    .wp-block-group[data-name="Left Column"] .wp-block-image {
        max-width: 280px !important;
        width: 100% !important;
        margin-bottom: var(--wp--preset--spacing--30) !important;
    }

    .wp-block-group[data-name="Left Column"] .wp-block-image img {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }

    /* Apply Now button mobile */
    .wp-block-group[data-name="Left Column"] .wp-block-button {
        width: 100% !important;
        max-width: 280px !important;
    }

    .wp-block-group[data-name="Left Column"] .wp-block-button .wp-block-button__link {
        width: 100% !important;
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        color: white !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Terms text mobile */
    .wp-block-group[data-name="Left Column"] .has-text-align-center {
        max-width: 280px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-top: var(--wp--preset--spacing--20) !important;
    }

    /* Right column mobile */
    .wp-block-group[data-name="Right Column"] {
        width: 100% !important;
    }

    /* Card title mobile */
    .wp-block-group[data-name="Right Column"] h3 {
        margin-bottom: var(--wp--preset--spacing--30) !important;
    }

    /* Rating and info section mobile - stack vertically */
    .wp-block-group[data-name="Right Column"] > .wp-block-group {
        flex-direction: column !important;
        gap: var(--wp--preset--spacing--20) !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* Individual info groups mobile - align left */
    .wp-block-group[data-name="Right Column"] .wp-block-group .wp-block-group {
        text-align: left !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* Rating and credit recommendation text alignment */
    .wp-block-group[data-name="Right Column"] .wp-block-group p {
        text-align: left !important;
    }

    /* Force left alignment for specific rating and credit elements */
    .wp-block-group[data-name="Right Column"] .wp-block-group .wp-block-group p.wp-block-heading {
        text-align: left !important;
    }

    .wp-block-group[data-name="Right Column"] .wp-block-group .wp-block-group p[style*="font-size:14px"] {
        text-align: left !important;
    }

    /* Info grid mobile - stack in single column */
    .wp-block-group[data-name="Right Column"] .wp-block-columns {
        flex-direction: column !important;
        gap: var(--wp--preset--spacing--20) !important;
    }

    .wp-block-group[data-name="Right Column"] .wp-block-column {
        width: 100% !important;
    }

    /* Accordion containers mobile */
    .wp-block-group.has-white-background-color[style*="border-radius:0.5rem"] {
        margin-top: var(--wp--preset--spacing--30) !important;
        border-radius: 12px !important;
    }

    /* Accordion summary mobile */
    .wp-block-details summary {
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Accordion content mobile */
    .wp-block-details .wp-block-list,
    .wp-block-details .wp-block-paragraph,
    .wp-block-details .wp-block-heading,
    .wp-block-details .wp-block-columns {
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
        padding-bottom: var(--wp--preset--spacing--30) !important;
    }

    /* Pros/Cons mobile - stack vertically */
    .wp-block-details .wp-block-columns {
        flex-direction: column !important;
        gap: var(--wp--preset--spacing--30) !important;
    }

    .wp-block-details .wp-block-column {
        width: 100% !important;
    }

    /* Button in accordion mobile */
    .wp-block-details .wp-block-button {
        width: 100% !important;
    }

    .wp-block-details .wp-block-button .wp-block-button__link {
        width: 100% !important;
        padding: var(--wp--preset--spacing--30) !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .wp-block-group[style*="border-radius:1rem"] {
        padding: var(--wp--preset--spacing--20) !important;
    }

    .wp-block-group[data-name="Main Content"] {
        padding: var(--wp--preset--spacing--20) !important;
    }

    .wp-block-group[data-name="Left Column"] .wp-block-image {
        max-width: 100% !important;
    }

    .wp-block-group[data-name="Left Column"] .wp-block-button {
        max-width: 100% !important;
    }

    .wp-block-group[data-name="Left Column"] .has-text-align-center {
        max-width: 100% !important;
    }

    .wp-block-group[data-name="Right Column"] h3 {
        font-size: 20px !important;
    }

    .wp-block-details summary {
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
        font-size: 15px !important;
    }
}