/* START Desktop view */
@media (min-width: 1025px) {
    #custom-footer {
        background: #f3f4f8;
        color: #000;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        display: flex;
        margin: 0;
    }

    #custom-footer .lx-logo {
        margin: 2rem 0 0 0;
        padding-left: 0.5rem;
        text-align: left;
        height: auto;
        width: auto;
    }

    #custom-footer .lx-mega-row {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
    }

    #custom-footer .lx-mega-row > .lx-mega-column {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
        width: auto;
        padding: 1rem 0.5rem;
    }

    #custom-footer .lx-mega-column {
        display: grid;
        align-content: start;
    }

    #custom-footer .lx-mega-column > .lx-mega-title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    #custom-footer .lx-mega-column .row > div > .lx-mega-title {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.1rem;
        padding-left: 0;
        margin-top: 1rem;
    }

    .lx-mega-column ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    #custom-footer .lx-mega-column ul.lx-list-unstyled li a {
        font-size: 0.8rem;
        font-weight: 400;
        display: block;
        margin-bottom: 0.2rem;
        padding-left: 0;
        color: #333;
        text-decoration: none;
        transition: color 0.2s;
    }

    #custom-footer .lx-mega-column ul.lx-list-unstyled li a:hover {
        color: #199caa;
    }

    #custom-footer .lx-footer-copy-right h6 {
        margin-top: 1rem;
        padding-top: 0.5rem;
        font-size: 0.8rem;
        color: #5E6282;
        font-weight: normal;
    }

    #custom-footer .lx-footer-divider {
        border: 0;
        border-top: 1px solid rgba(0,0,0,0.15);
        margin: 14px 0 14px;
    }

    #custom-footer .lx-footer-social-app {
        width: 100%;
    }

    #custom-footer .lx-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #475569;
        color: #fff;
        font-size: 1rem;
        margin-right: 6px;
        transition: all 0.2s ease, transform 0.2s ease;
    }

    #custom-footer .lx-footer-social a:hover {
        background: #199caa;
        color: #fff;
        transform: translateY(-1px);
    }

    #custom-footer .lx-footer-social-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    #custom-footer .lx-footer-social {
        display: inline-flex;
        flex-shrink: 0;
    }

    #custom-footer .lx-footer-enquiry {
        font-style: normal;
        font-size: 0.9rem;
        color: #374151;
        margin-left: 1rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #custom-footer .lx-footer-enquiry strong {
        display: block;
        font-weight: 600;
        font-size: 0.95rem;
        color: #111827;
    }

    #custom-footer .lx-footer-enquiry a {
        display: block;
        color: #0082D3;
        text-decoration: none;
        font-size: 0.9rem;
    }

    #custom-footer .lx-footer-enquiry a:hover {
        text-decoration: underline;
    }

    #custom-footer .lx-footer-app {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #custom-footer .lx-footer-app img {
        height: auto;
        width: auto;
        vertical-align: middle;
        margin: 0;
    }

    .lx-footer-disclaimer {
        width: 100%;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* Let the disclaimer span its parent's full width instead of being
       constrained again by Bootstrap's nested .container max-width.
       Keep the default side padding so the inner .row's negative margins
       (-0.75rem) resolve to the parent edge, not past it. */
    #custom-footer .lx-footer-disclaimer > .container {
        max-width: 100%;
    }

    /* Wrap long CJK strings cleanly so words don't get split or clipped. */
    #custom-footer .lx-footer-content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .lx-footer-disclaimer .lx-footer-legal {
        font-size: 0.875rem;
        color: #9ca3af;
    }

    .lx-footer-disclaimer .lx-footer-policy,
    .lx-footer-disclaimer .lx-footer-tnc {
        font-size: 0.875rem;
        color: #0082D3;
        text-decoration: none;
    }

    .lx-footer-disclaimer .lx-footer-policy:hover,
    .lx-footer-disclaimer .lx-footer-tnc:hover {
        text-decoration: underline;
    }

    .lx-footer-disclaimer .lx-footer-content {
        font-size: 0.9rem;
        color: #5E6282;
        font-weight: normal;
        line-height: 1.4;
    }

    .lx-footer-disclaimer .lx-footer-content .lx-footer-risk-warning,
    .lx-footer-disclaimer .lx-footer-content .lx-footer-regional-restrictions,
    .lx-footer-disclaimer .lx-footer-content .lx-footer-risk-disclosure {
        color: #F32013;
        font-weight: bold;
    }

    .lx-footer-disclaimer .lx-footer-content a.lx-footer-risk-disclosure {
        text-decoration: none;
    }

    .lx-footer-disclaimer .lx-footer-content a.lx-footer-risk-disclosure:hover {
        text-decoration: underline;
    }
}


/* START Tablet view */
@media (min-width: 768px) and (max-width: 1024px) {
    #custom-footer {
        background: #f3f4f8;
        color: #000;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        display: flex;
        margin: 0;
    }

    #custom-footer .lx-logo {
        margin: 2rem 0rem 0rem 1rem;
        width: auto;
        height: auto;
    }

    /* Tablet uses the same accordion layout as mobile — single column,
       collapsed by default, click title to expand. The accordion JS in
       footer-custom.js already targets <1025px viewports. */
    #custom-footer .row {
        display: flex;
        flex-wrap: wrap;
    }

    #custom-footer .lx-mega-row {
        margin: 0;
    }

    #custom-footer .lx-mega-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    #custom-footer .lx-mega-column > .lx-mega-title {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
        padding: 1rem 0.75rem 1rem 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: color 0.2s ease;
    }

    #custom-footer .lx-mega-column > .lx-mega-title:hover,
    #custom-footer .lx-mega-column.is-open > .lx-mega-title {
        color: #199caa;
    }

    #custom-footer .lx-mega-column > .lx-mega-title::after {
        content: "";
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.3s ease;
        margin-left: 0.5rem;
        flex-shrink: 0;
    }

    #custom-footer .lx-mega-column.is-open > .lx-mega-title::after {
        transform: translateY(2px) rotate(-135deg);
    }

    #custom-footer .lx-mega-column .row > div > .lx-mega-title {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.1rem;
        padding-left: 0;
        margin-top: 1rem;
    }

    .lx-mega-column ul.lx-list-unstyled {
        list-style: none;
        margin: 0;
        padding: 0 0.75rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    #custom-footer .lx-mega-column.is-open > ul.lx-list-unstyled {
        max-height: 600px;
        padding: 0.25rem 0.75rem 1rem 0.75rem;
    }

    #custom-footer .lx-mega-column ul.lx-list-unstyled li a {
        font-size: 0.875rem;
        font-weight: 400;
        display: block;
        padding: 0.4rem 0.5rem;
        color: #374151;
        text-decoration: none;
        transition: color 0.2s, padding-left 0.2s;
    }

    #custom-footer .lx-mega-column ul.lx-list-unstyled li a:hover {
        color: #199caa;
        padding-left: 0.75rem;
    }

    #custom-footer .lx-footer-copy-right h6 {
        margin-top: 1rem;
        padding-top: 0.5rem;
        font-size: 0.75rem;
        color: #5E6282;
        font-weight: normal;
        margin-bottom: 4dvb;
    }

    #custom-footer .lx-footer-divider {
        border: 0;
        border-top: 1px solid rgba(0,0,0,0.15);
        margin: 0;
    }

    #custom-footer .lx-footer-social-app {
        width: 100%;
    }

    #custom-footer .lx-footer-social-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    #custom-footer .lx-footer-social {
        display: inline-flex;
        flex-shrink: 0;
        text-align: left;
    }

    #custom-footer .lx-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #475569;
        color: #fff;
        font-size: 1rem;
        margin-right: 6px;
        transition: all 0.2s ease, transform 0.2s ease;
    }

    #custom-footer .lx-footer-social a:hover {
        background: #199caa;
        color: #fff;
        transform: translateY(-1px);
    }

    #custom-footer .lx-footer-enquiry {
        font-style: normal;
        font-size: 0.9rem;
        color: #374151;
        text-align: left;
        margin-left: 1rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #custom-footer .lx-footer-enquiry strong {
        display: block;
        font-weight: 600;
        font-size: 0.95rem;
        color: #111827;
    }

    #custom-footer .lx-footer-enquiry a {
        display: block;
        color: #0082D3;
        text-decoration: none;
        font-size: 0.9rem;
    }

    #custom-footer .lx-footer-enquiry a:hover {
        text-decoration: underline;
    }

    #custom-footer .lx-footer-app {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        gap: 8px;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #custom-footer .lx-footer-app img {
        height: auto;
        width: auto;
        vertical-align: middle;
        margin: 0;
    }

    .lx-footer-disclaimer {
        width: 100%;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* Let the disclaimer span its parent's full width instead of being
       constrained again by Bootstrap's nested .container max-width.
       Keep the default side padding so the inner .row's negative margins
       (-0.75rem) resolve to the parent edge, not past it. */
    #custom-footer .lx-footer-disclaimer > .container {
        max-width: 100%;
    }

    /* Wrap long CJK strings cleanly so words don't get split or clipped. */
    #custom-footer .lx-footer-content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .lx-footer-disclaimer .lx-footer-policy,
    .lx-footer-disclaimer .lx-footer-tnc {
        font-size: 0.875rem;
        color: #0082D3;
        text-decoration: none;
    }

    .lx-footer-disclaimer .lx-footer-policy:hover,
    .lx-footer-disclaimer .lx-footer-tnc:hover {
        text-decoration: underline;
    }

    .lx-footer-disclaimer .lx-footer-content {
        font-size: 0.9rem;
        color: #5E6282;
        font-weight: normal;
        line-height: 1.4;
    }

    .lx-footer-disclaimer .lx-footer-content .lx-footer-risk-warning,
    .lx-footer-disclaimer .lx-footer-content .lx-footer-regional-restrictions,
    .lx-footer-disclaimer .lx-footer-content .lx-footer-risk-disclosure {
        color: #F32013;
        font-weight: bold;
    }

    .lx-footer-disclaimer .lx-footer-content a.lx-footer-risk-disclosure {
        text-decoration: none;
    }

    .lx-footer-disclaimer .lx-footer-content a.lx-footer-risk-disclosure:hover {
        text-decoration: underline;
    }
}
/* END Tablet view */

/* START Mobile view */
@media (min-width: 360px) and (max-width: 767px) {
    #custom-footer {
        background: #f3f4f8;
        color: #000;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        display: flex;
        margin: 0;
    }

    #custom-footer .lx-logo {
        margin: 2rem 0 1rem 0;
        text-align: left;
        height: auto;
    }

    #custom-footer .lx-logo img {
        padding-left: 1rem;
    }

    #custom-footer .row {
        display: flex;
        flex-wrap: wrap;
    }

    #custom-footer .lx-mega-row {
        margin: 0;
    }

    #custom-footer .lx-mega-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    #custom-footer .lx-mega-column > .lx-mega-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
        padding: 1rem 0.75rem 1rem 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: color 0.2s ease;
    }

    #custom-footer .lx-mega-column > .lx-mega-title:hover,
    #custom-footer .lx-mega-column.is-open > .lx-mega-title {
        color: #199caa;
    }

    #custom-footer .lx-mega-column > .lx-mega-title::after {
        content: "";
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.3s ease;
        margin-left: 0.5rem;
        flex-shrink: 0;
    }

    #custom-footer .lx-mega-column.is-open > .lx-mega-title::after {
        transform: translateY(2px) rotate(-135deg);
    }

    #custom-footer .lx-mega-column .row > div > .lx-mega-title {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.1rem;
        padding-left: 0;
        margin-top: 1rem;
    }

    .lx-mega-column ul.lx-list-unstyled {
        list-style: none;
        margin: 0;
        padding: 0 0.75rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    #custom-footer .lx-mega-column.is-open > ul.lx-list-unstyled {
        max-height: 600px;
        padding: 0.25rem 0.75rem 1rem 0.75rem;
    }

    #custom-footer .lx-mega-column ul.lx-list-unstyled li a {
        font-size: 0.875rem;
        font-weight: 400;
        display: block;
        padding: 0.4rem 0.5rem;
        color: #374151;
        text-decoration: none;
        transition: color 0.2s, padding-left 0.2s;
    }

    #custom-footer .lx-mega-column ul.lx-list-unstyled li a:hover {
        color: #199caa;
        padding-left: 0.75rem;
    }

    #custom-footer .lx-footer-copy-right h6 {
        margin-top: 1rem;
        font-size: 1rem;
        color: #5E6282;
        margin-bottom: 5rem;
        font-weight: normal;
    }

    #custom-footer .lx-footer-divider {
        border: 0;
        border-top: 1px solid rgba(0,0,0,0.15);
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }

    #custom-footer .lx-footer-social-app {
        width: 100%;
    }

    #custom-footer .lx-footer-social {
        text-align: left;
        margin: 1rem 0;
    }

    #custom-footer .lx-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #475569;
        color: #fff;
        font-size: 1rem;
        margin-right: 6px;
        transition: all 0.2s ease, transform 0.2s ease;
    }

    #custom-footer .lx-footer-social a:hover {
        background: #199caa;
        color: #fff;
        transform: translateY(-1px);
    }

    #custom-footer .lx-footer-enquiry {
        font-style: normal;
        font-size: 0.9rem;
        color: #374151;
        text-align: left;
        margin-left: 0;
        flex-basis: 100%;
    }

    #custom-footer .lx-footer-enquiry strong {
        display: block;
        font-weight: 600;
        font-size: 0.95rem;
        color: #111827;
    }

    #custom-footer .lx-footer-enquiry a {
        display: block;
        color: #0082D3;
        text-decoration: none;
        font-size: 0.9rem;
    }

    #custom-footer .lx-footer-enquiry a:hover {
        text-decoration: underline;
    }

    #custom-footer .lx-footer-app {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        gap: 8px;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #custom-footer .lx-footer-app img {
        height: auto;
        width: auto;
        vertical-align: middle;
        margin: 0;
    }

    .lx-footer-disclaimer {
        width: 100%;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* Let the disclaimer span its parent's full width instead of being
       constrained again by Bootstrap's nested .container max-width.
       Keep the default side padding so the inner .row's negative margins
       (-0.75rem) resolve to the parent edge, not past it. */
    #custom-footer .lx-footer-disclaimer > .container {
        max-width: 100%;
    }

    /* Wrap long CJK strings cleanly so words don't get split or clipped. */
    #custom-footer .lx-footer-content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .lx-footer-disclaimer .lx-footer-policy,
    .lx-footer-disclaimer .lx-footer-tnc {
        font-size: 0.875rem;
        color: #0082D3;
        text-decoration: none;
    }

    .lx-footer-disclaimer .lx-footer-policy:hover,
    .lx-footer-disclaimer .lx-footer-tnc:hover {
        text-decoration: underline;
    }

    .lx-footer-disclaimer .lx-footer-content {
        font-size: 0.9rem;
        color: #5E6282;
        font-weight: normal;
        line-height: 1.4;
    }

    .lx-footer-disclaimer .lx-footer-content .lx-footer-risk-warning,
    .lx-footer-disclaimer .lx-footer-content .lx-footer-regional-restrictions,
    .lx-footer-disclaimer .lx-footer-content .lx-footer-risk-disclosure {
        color: #F32013;
        font-weight: bold;
    }

    .lx-footer-disclaimer .lx-footer-content a.lx-footer-risk-disclosure {
        text-decoration: none;
    }

    .lx-footer-disclaimer .lx-footer-content a.lx-footer-risk-disclosure:hover {
        text-decoration: underline;
    }
}
/* END Mobile view */