/*!
 * Mobile-only overrides
 * Existing HTML and class names remain unchanged.
 */



/* ========================================
   Mobile: Quickfind filters
   Existing HTML and classes unchanged
   ======================================== */

@media screen and (max-width: 767px) {

    .quickfind {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 16px 0 22px !important;
        padding: 16px !important;

        box-sizing: border-box !important;
        border-radius: 12px;
    }

    .quickfind .quickfind__title {
        display: block !important;
        width: 100% !important;

        margin: 0 0 4px !important;
        padding: 0 !important;

        font-size: 19px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;

        overflow-wrap: break-word;
    }

    .quickfind select.url-selector {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 10px 36px 10px 12px !important;

        box-sizing: border-box !important;
        font-family: inherit !important;
        font-size: 16px !important;
        line-height: 1.4 !important;

        white-space: normal;
        border-radius: 8px;
        cursor: pointer;
    }

}

/* Extra-small phones */
@media screen and (max-width: 380px) {

    .quickfind {
        padding: 12px !important;
        gap: 10px !important;
    }

    .quickfind .quickfind__title {
        font-size: 18px !important;
    }

    .quickfind select.url-selector {
        min-height: 46px !important;
        padding-left: 10px !important;
        font-size: 15px !important;
    }

}


/* ========================================
   Mobile match listings
   Existing HTML and classes unchanged
   ======================================== */

@media screen and (max-width: 767px) {

    /* List container */
    .list-widget.flex-widget {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Individual match card */
    .list-widget.flex-widget .tease--tip {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 16px !important;

        box-sizing: border-box !important;
        border-radius: 12px;
        overflow: hidden;
    }

    /* Match date */
    .tease--tip .tease--tip__date {
        display: block !important;
        margin: 0 0 8px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
    }

    /* Match title */
    .tease--tip .tease--tip__title {
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 19px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere;
    }

    .tease--tip .tease--tip__title-link {
        font-size: inherit !important;
        line-height: inherit !important;
        text-decoration: none;
    }

    /* Subtitle */
    .tease--tip .tease--tip__subtitle {
        margin: 0 0 16px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Team and competition logo area */
    .tease--tip .competition_img {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
    }

    .tease--tip .competition_img .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        margin: 0 !important;
    }

    /* Override Bootstrap column widths on small screens */
    .tease--tip .competition_img .team1,
    .tease--tip .competition_img .team2 {
        display: flex !important;
        flex: 1 1 0 !important;
        align-items: center !important;
        justify-content: center !important;

        width: 33.333% !important;
        max-width: 33.333% !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        float: none !important;
    }

    .tease--tip .competition_img .league {
        display: flex !important;
        flex: 1 1 0 !important;
        align-items: center !important;
        justify-content: center !important;

        width: 33.333% !important;
        max-width: 33.333% !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        float: none !important;
    }

    /* Keep all logos contained and evenly sized */
    .tease--tip .competition_img img.img--full {
        display: block !important;
        width: 100% !important;
        max-width: 76px !important;
        height: 64px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* Prediction and action */
    .tease--tip .cta-line {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tease--tip .cta-line__text {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
    }

    .tease--tip .cta-line__button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 12px 16px !important;

        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

}

/* Smaller phones */
@media screen and (max-width: 380px) {

    .list-widget.flex-widget {
        gap: 12px !important;
    }

    .list-widget.flex-widget .tease--tip {
        padding: 12px !important;
    }

    .tease--tip .tease--tip__title {
        font-size: 17px !important;
    }

    .tease--tip .competition_img img.img--full {
        max-width: 60px !important;
        height: 54px !important;
    }

    .tease--tip .competition_img .team1,
    .tease--tip .competition_img .team2,
    .tease--tip .competition_img .league {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

}


/* ========================================
   Featured first match card — mobile only
   ======================================== */

@media screen and (max-width: 767px) {

    .list-widget.flex-widget > .tease--tip:first-child {
        padding: 20px !important;
        border: 2px solid #b8d96c !important;
        border-radius: 16px !important;
        background: #f7faef !important;
        box-shadow: 0 4px 14px rgba(38, 61, 50, 0.10) !important;
    }

    /* Featured match title */
    .list-widget.flex-widget > .tease--tip:first-child
    .tease--tip__title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    /* Featured team and competition logos */
    .list-widget.flex-widget > .tease--tip:first-child
    .competition_img img.img--full {
        max-width: 88px !important;
        height: 76px !important;
    }

    /* Highlight the prediction */
    .list-widget.flex-widget > .tease--tip:first-child
    .cta-line__text {
        padding: 12px !important;
        background: #eaf2d9 !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Featured action button */
    .list-widget.flex-widget > .tease--tip:first-child
    .cta-line__button {
        min-height: 50px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

}

/* Keep the featured card proportional on very small phones */
@media screen and (max-width: 380px) {

    .list-widget.flex-widget > .tease--tip:first-child {
        padding: 14px !important;
    }

    .list-widget.flex-widget > .tease--tip:first-child
    .tease--tip__title {
        font-size: 20px !important;
    }

    .list-widget.flex-widget > .tease--tip:first-child
    .competition_img img.img--full {
        max-width: 68px !important;
        height: 60px !important;
    }

}