/* ==========================================================
   XPRESIM PLAN PICKER
   ========================================================== */

#countryPlanPicker {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   DESKTOP LAYOUT
   LEFT = SELECTED PLAN
   RIGHT = OPTIONS
   DETAILS = FULL WIDTH BELOW
   ========================================================== */

.xpresim-picker-top {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.85fr)
        minmax(0, 1.15fr);

    gap: 24px;
    align-items: start;
}


/* ==========================================================
   SELECTED PLAN CARD
   ========================================================== */

.xpresim-selected-plan-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    padding: 20px;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.05);
}


/* ==========================================================
   SELECTOR AREA
   ========================================================== */

.xpresim-plan-options {
    min-width: 0;
}


.plan-selector {
    appearance: none;

    min-width: 86px;

    background: #ffffff;

    border:
        1px solid #cbd5e1;

    border-radius: 12px;

    padding:
        11px 14px;

    color: #334155;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


.plan-selector:hover {
    transform: translateY(-1px);

    border-color:
        #94a3b8;
}


/* ==========================================================
   SELECTED DATA PLAN
   ========================================================== */

.plan-selector-data.is-selected {
    background:
        #1B2CC1 !important;

    border-color:
        #1B2CC1 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 5px 14px
        rgba(
            27,
            44,
            193,
            0.20
        );
}


/* ==========================================================
   SELECTED UNLIMITED PLAN
   ========================================================== */

.plan-selector-unlimited.is-selected {
    background:
        #ef4444 !important;

    border-color:
        #ef4444 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 5px 14px
        rgba(
            239,
            68,
            68,
            0.18
        );
}


/* ==========================================================
   TEXT INSIDE SELECTED BUTTON
   ========================================================== */

.plan-selector.is-selected
.plan-selector-main {
    color:
        #ffffff !important;
}


.plan-selector.is-selected
.plan-selector-duration {
    color:
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;
}


/* ==========================================================
   MULTI-COUNTRY BADGE
   ========================================================== */

.plan-multi-badge {
    display:
        inline-flex;

    margin-top:
        5px;

    background:
        #dcfce7;

    color:
        #166534;

    border-radius:
        999px;

    padding:
        2px 7px;

    font-size:
        9px;

    line-height:
        1.2;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.plan-selector.is-selected
.plan-multi-badge {
    background:
        rgba(
            255,
            255,
            255,
            0.18
        ) !important;

    color:
        #ffffff !important;
}


/* ==========================================================
   DETAILS
   ========================================================== */

.xpresim-plan-details-card {
    margin-top:
        22px;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        20px;

    padding:
        20px;

    box-shadow:
        0 3px 10px
        rgba(
            15,
            23,
            42,
            0.04
        );
}


.xpresim-detail-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        0 20px;
}


/* ==========================================================
   COVERAGE
   ========================================================== */

#detailCoverage,
#coverageCountries {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(
            100,
            116,
            139,
            0.40
        )
        transparent;
}


#detailCoverage {
    max-height:
        92px;

    overflow-y:
        auto;
}


/* ==========================================================
   MOBILE
   Match Flutter much more closely
   ========================================================== */

@media (
    max-width:
    767px
) {

    #countryPlanPicker {
        margin-top:
            20px;

        border-radius:
            18px;
    }


    .xpresim-picker-top {
        display:
            block;
    }


    /*
     * Static card.
     * Keep it compact.
     */

    .xpresim-selected-plan-card {
        padding:
            16px;

        border-radius:
            16px;
    }


    /*
     * Options immediately under card.
     */

    .xpresim-plan-options {
        margin-top:
            16px;

        padding-top:
            16px;

        border-top:
            1px solid #e2e8f0;
    }


    /*
     * Smaller mobile buttons.
     * Similar proportions to Flutter.
     */

    .plan-selector {
        min-width:
            76px;

        min-height:
            46px;

        padding:
            9px 11px;

        border-radius:
            11px;
    }


    .plan-selector-main {
        font-size:
            12px !important;
    }


    .plan-selector-duration {
        font-size:
            9px !important;

        margin-top:
            2px !important;
    }


    .plan-multi-badge {
        font-size:
            7.5px;

        padding:
            2px 5px;

        margin-top:
            4px;
    }


    /*
     * Make option groups horizontally scrollable
     * instead of making a very tall page.
     */

    .xpresim-plan-options-row {
        display:
            flex;

        flex-wrap:
            nowrap;

        gap:
            8px;

        overflow-x:
            auto;

        padding-bottom:
            6px;

        scrollbar-width:
            none;
    }


    .xpresim-plan-options-row::-webkit-scrollbar {
        display:
            none;
    }


    .xpresim-plan-options-row
    .plan-selector {
        flex:
            0 0 auto;
    }


    /*
     * Details below.
     */

    .xpresim-plan-details-card {
        margin-top:
            16px;

        padding:
            16px;

        border-radius:
            16px;
    }


    .xpresim-detail-grid {
        display:
            block;
    }
}