/* ==========================================================================
   The home page's «تخفیف های ویژه» section (Components/HomepageDeals): its frame, not its
   cards. The section sits on a picture the store owner picks in the admin, and its head was
   white text straight on that picture - on a light one it could not be read. The head is two
   chips now, opaque, so they read on any picture:
   - the title on the store's own colour, white, with the gift in a ring;
   - «همه» on white, in ink.
   The picture covers the frame (it tiled from its top-left corner, so a desktop showed it
   twice). Flat: no shadows. Desktop: .vp-special-discount, phone: .amazing-offer (a full-width
   band on the store's colour, see below).
   ========================================================================== */

html body .vp-special-discount,
html body .amazing-offer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/* ------------------------------------------------------------- the two chips */

html body .vp-special-discount .head,
html body .amazing-offer .header-amazing-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
}

html body .vp-special-discount .head .title,
html body .amazing-offer .header-amazing-offer .title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    border-radius: 999px;
    background: rgb(var(--ryan-primary-rgb, 239, 64, 86));
}

html body .vp-special-discount .head .title .icon,
html body .amazing-offer .header-amazing-offer .title .icon {
    display: grid;
    flex: none;
    place-items: center;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

html body .vp-special-discount .head .title .icon img,
html body .amazing-offer .header-amazing-offer .title .icon img {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
}

html body .vp-special-discount .head .title h3,
html body .amazing-offer .header-amazing-offer .title h3 {
    margin: 0;
    padding: 0;
    color: #FFF;
    font-weight: 700;
    white-space: nowrap;
}

html body .vp-special-discount .head .more,
html body .amazing-offer .header-amazing-offer .more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #0C0C0C;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

html body .vp-special-discount .head .more i,
html body .amazing-offer .header-amazing-offer .more i {
    margin: 0;
    color: inherit;
    line-height: 1;
}

/* ------------------------------------------------------------------ phone */

/* The phone gets the section's original, flat design back: a full-width band on the store's
   own colour, edge to edge, square, no shadow, the head in white straight on it. The picture
   chosen in the admin is a desktop banner (1500x580, words and rounded corners drawn into it):
   a phone could only show a slice of it, so it is the desktop's only. */
@media only screen and (max-width: 959px) {

    html body .amazing-offer {
        margin: 0 calc(50% - 50vw) !important;
        padding: 16px 0 !important;
        border-radius: 0;
        background: rgb(var(--ryan-primary-rgb, 239, 64, 86)) !important;
    }

    html body .amazing-offer .header-amazing-offer {
        margin: 0 0 14px !important;
        padding: 0 16px !important;
    }

    html body .amazing-offer .header-amazing-offer .title,
    html body .amazing-offer .header-amazing-offer .more {
        height: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: #FFF;
    }

    html body .amazing-offer .header-amazing-offer .title .icon {
        width: 24px;
        height: 24px;
        background: none;
    }

    html body .amazing-offer .header-amazing-offer .title .icon img {
        width: 100%;
        height: 100%;
    }

    html body .amazing-offer .header-amazing-offer .title h3 {
        font-size: 16px;
        line-height: 26px;
    }

    html body .amazing-offer .header-amazing-offer .more {
        font-size: 13px;
        font-weight: 500;
        line-height: 22px;
    }

    html body .amazing-offer .header-amazing-offer .more i {
        font-size: 11px;
    }
}

/* ---------------------------------------------------------------- desktop */

@media only screen and (min-width: 960px) {

    html body .vp-special-discount {
        padding: 20px 24px 24px !important;
        border-radius: 24px !important;
    }

    html body .vp-special-discount .head {
        margin: 0 0 20px !important;
    }

    html body .vp-special-discount .head .title {
        height: 44px;
        padding: 0 6px 0 18px;
    }

    html body .vp-special-discount .head .title .icon {
        width: 32px;
        height: 32px;
    }

    html body .vp-special-discount .head .title h3 {
        font-size: 16px;
        line-height: 26px;
    }

    html body .vp-special-discount .head .more {
        height: 38px;
        padding: 0 16px 0 12px;
        font-size: 14px;
        line-height: 22px;
    }

    html body .vp-special-discount .head .more i {
        font-size: 12px;
    }
}