/* =========================================================
   Recharge widget tabs (home2)
   Single number + multiple numbers in one tabbed widget.
   Palette reuses the site variables defined in multi_recharges.css.
   ========================================================= */

/* --- Widget box: keep it in normal flow so the taller multi
       panel can grow instead of overlapping the hero -------- */
.home2-slide {
    height: auto;
    padding-bottom: 40px;
}

.home2-slide .right.home2-recharge-box {
    position: relative;
    right: auto;
    top: auto;
    margin-top: 40px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    padding: 28px;
    border-radius: 14px;
}

/* --- Tab navigation ------------------------------------- */
.rc-tabs-nav {
    display: flex;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--ii-border, #dfe3ea);
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 22px;
}

.rc-tab-btn {
    flex: 1;
    padding: 12px 8px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #6b6b7b;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}

.rc-tab-btn:hover {
    color: var(--ii-purple, #34006A);
}

.rc-tab-btn.active {
    background: var(--ii-purple, #34006A);
    color: #fff;
    box-shadow: 0 4px 14px rgba(52, 0, 106, .25);
}

/* --- Panels --------------------------------------------- */
.rc-tab-panel {
    display: none;
}

.rc-tab-panel.active {
    display: block;
}

/* =========================================================
   Multiple-numbers widget adapted to the narrow widget box.
   The base look comes from multi_recharges.css; here we only
   strip the standalone-page "card" spacing and stack fields.
   ========================================================= */
.home2-multi {
    background: transparent;
}

.home2-multi .multi-intro-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ii-text-dark, #262626);
    margin-bottom: 4px;
}

.home2-multi .multi-intro-sub {
    font-size: 14px;
    color: var(--ii-text-muted, #777);
    margin-bottom: 6px;
}

/* Entries stand out on the beige widget box */
.home2-multi .num-entry {
    margin: 12px 0 0;
    background: #ffffff;
}

.home2-multi .num-entry.completed {
    background: #f0eef8;
}

.home2-multi .num-entry.has-error {
    background: #fff7f7;
}

.home2-multi .add-btn {
    width: 100%;
    margin: 12px 0 0;
}

.home2-multi .order-sum {
    margin: 16px 0 0;
    padding: 16px;
    border-top: none;
    border: 1px solid #ececf3;
    border-radius: 12px;
    background: #ffffff;
}

.home2-multi .btm-section {
    padding: 16px 0 0;
}

/* Force the single-column layout inside the narrow box,
   regardless of viewport width */
.home2-multi .num-fields {
    flex-direction: column;
    gap: 12px;
}

.home2-multi .phone-grp {
    flex: 1 1 100%;
    width: 100%;
}

.home2-multi .amt-grp {
    min-width: 0;
    width: 100%;
}

.home2-multi .amt-row {
    align-items: stretch;
}

/* =========================================================
   Small screens
   Goal: hero copy + the whole single-number form fit in the
   first viewport, so the CTA is visible without scrolling.
   ========================================================= */
@media (max-width: 767px) {
    /* The site hides `.slide .right` on mobile (there is a separate mobile
       block on the real homepage). Here the tabbed widget lives inside the
       hero, so we must keep it visible. */
    .home2-slide .right.home2-recharge-box {
        display: block;
        margin-top: 10px;
        margin-bottom: 0;
        padding: 12px 14px;
    }

    .home2-slide {
        padding-bottom: 20px;
    }

    /* --- Hero copy: compact, one screen worth of text ---- */
    .home2-slide .left {
        padding: 12px 0 0;
    }

    .home2-slide .left h1 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 4px;
    }

    .home2-slide .left p {
        font-size: 13px;
        line-height: 18px;
        padding-right: 0;
        margin-bottom: 0;
    }

    /* The second subline duplicates what the packages section says further
       down the page; drop it here to win vertical space. */
    .home2-slide .left .hero-sub-extra {
        display: none;
    }

    /* --- Tab nav ---------------------------------------- */
    .home2-slide .rc-tabs-nav {
        padding: 3px;
        margin-bottom: 10px;
    }

    .home2-slide .rc-tab-btn {
        padding: 8px 6px;
        font-size: 13.5px;
    }

    /* --- Single-number form ------------------------------ */
    .home2-slide #recharge_form .form {
        padding-bottom: 8px;
    }

    .home2-slide #recharge_form h4 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 1px;
    }

    .home2-slide #recharge_form .form > p {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 5px;
    }

    .home2-slide #recharge_form .form input {
        padding: 7px 10px 7px 14px;
    }

    .home2-slide #recharge_form .logo-operator {
        right: 26px;
    }

    .home2-slide #recharge_form .accept-gdpr {
        margin-bottom: 8px;
        align-items: flex-start;
    }

    .home2-slide #recharge_form .accept-gdpr input[type="checkbox"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-top: 1px;
    }

    .home2-slide #recharge_form .accept-gdpr label {
        font-size: 12.5px;
        line-height: 16px;
        padding-left: 10px;
    }

    .home2-slide #recharge_form .btn-send button {
        padding: 12px 0;
        margin-bottom: 0;
    }

    /* --- Multiple-numbers panel -------------------------- */
    .home2-multi .multi-intro-title {
        font-size: 17px;
    }

    .home2-multi .multi-intro-sub {
        font-size: 12.5px;
        line-height: 17px;
    }
}

@media (max-width: 400px) {
    .home2-slide .left h1 {
        font-size: 21px;
        line-height: 27px;
    }

    .home2-slide .right.home2-recharge-box {
        padding: 14px 12px;
    }
}