/**
 * Popup installer component styles.
 * Legacy mobile app-install popup overlays displayed on radio pages.
 * Multiple layout variants (a, a3, b, c, e1, e2, top) for A/B testing.
 * Note: This is legacy code with hardcoded values; shared design tokens
 * are not used for visual properties (colors, spacing, border-radius) to
 * preserve exact legacy rendering.
 */

/* Variant A: Centered popup with radio logo and install button */
.mobile-bottom-installer-radio-a {
    position: fixed;
    top: calc(50% - 127px);
    left: calc(50% - 152px);
    width: 300px;
    height: auto;
    z-index: var(--z-popup-installer);
    background: white;
    border-radius: 40px;
    border: 2px solid black;
    overflow: hidden;
}

.mobile-bottom-installer-radio-a ul {
    text-align: left;
}

.mobile-bottom-installer-radio-a li {
    list-style-type: initial;
}

.mobile-bottom-installer-radio-title-a {
    margin: 10px 30px 0 30px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    font-family: helvetica, arial, verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-bottom-installer-radio-image-a {
    margin: 5px auto;
    width: 60px;
    height: 60px;
}

.mobile-bottom-installer-radio-rectangle-a {
    border-radius: 10px;
    padding: 0 5px;
    width: 250px;
    height: 50px;
    background: #046644;
    border: 2px solid black;
    margin: auto;
}

.mobile-bottom-installer-radio-rectangle-a div {
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

.mobile-bottom-installer-radio-ad-image-a {
    width: 250px;
    height: auto;
    margin: 10px 25px;
}

/* Close button (shared across variants) */
.mobile-bottom-installer-radio-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Variant B: Side-by-side image + title */
.mobile-bottom-installer-radio-container-b {
    display: flex;
    margin: auto;
    width: 264px;
}

.mobile-bottom-installer-radio-title-b {
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
    color: black;
    font-family: helvetica, arial, verdana, sans-serif;
}

.mobile-bottom-installer-radio-image-b {
    width: 60px;
    height: 60px;
    margin: 5px;
}

.mobile-bottom-installer-radio-rectangle-b {
    border-radius: 10px;
    padding: 0 5px;
    width: 250px;
    height: 50px;
    background: #046644;
    border: 2px solid black;
    margin: auto;
}

.mobile-bottom-installer-radio-rectangle-b div {
    line-height: 50px;
    font-size: 25px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

.mobile-bottom-installer-radio-ad-image-b {
    width: 264px;
    margin: 10px 18px;
}

.mobile-bottom-installer-radio-subtitle-b {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

/* Variant D: Large image */
.mobile-bottom-installer-radio-image-d {
    width: 110px;
    height: 110px;
}

.mobile-bottom-installer-radio-title-d {
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
    color: black;
    font-family: helvetica, arial, verdana, sans-serif;
}

/* Variant E1: Full-width centered popup */
.mobile-bottom-installer-radio-e1 {
    position: fixed;
    top: calc(50% - 127px);
    left: 2px;
    width: calc(100% - 8px);
    height: 254px;
    z-index: var(--z-popup-installer);
    background: white;
    border-radius: 10px;
    border: 2px solid black;
    overflow: hidden;
}

.mobile-bottom-installer-radio-image-e1 {
    margin: 5px auto;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    width: 58px;
    height: 58px;
}

/* Variant E2: Container with side-by-side layout */
.mobile-bottom-installer-radio-container-e2 {
    display: flex;
}

.mobile-bottom-installer-radio-image-e2 {
    margin: 5px 10px 5px 45px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    width: 58px;
    height: 58px;
}

.mobile-bottom-installer-radio-title-e2 {
    margin: 5px;
    line-height: 60px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    font-family: helvetica, arial, verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-bottom-installer-radio-rectangle-e2 {
    border-radius: 10px;
    padding: 0 5px;
    width: 250px;
    height: 50px;
    background: #046644;
    border: 2px solid black;
    margin: 10px auto;
}

.mobile-bottom-installer-radio-rectangle-e2 div {
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

.mobile-bottom-installer-radio-ad-image-e2 {
    width: 250px;
    height: auto;
    left: calc(50% - 125px);
    position: absolute;
    bottom: 10px;
}

/* Variant A3: Compact centered popup with smaller image */
.mobile-bottom-installer-radio-a3 {
    position: fixed;
    top: calc(50% - 140px);
    left: calc(50% - 152px);
    width: 300px;
    height: 270px;
    z-index: var(--z-popup-installer);
    background: white;
    border-radius: 10px;
    border: 2px solid black;
    overflow: hidden;
}

.mobile-bottom-installer-radio-title-a3 {
    margin: 10px 30px 5px 30px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    font-family: helvetica, arial, verdana, sans-serif;
}

.mobile-bottom-installer-radio-image-a3 {
    width: 120px;
    height: 120px;
}

.mobile-bottom-installer-radio-ad-image-a3 {
    display: block;
    width: 180px;
    height: auto;
    margin: 0px 60px;
}

.mobile-bottom-installer-radio-rectangle-a3 {
    border-radius: 10px;
    padding: 0 5px;
    width: 200px;
    height: 40px;
    background: #046644;
    border: 2px solid black;
    margin: auto;
    position: absolute;
    bottom: 5px;
    left: 42px;
}

.mobile-bottom-installer-radio-rectangle-a3 div {
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

/* New Variant B: Full-screen black background overlay */
.new-mobile-bottom-installer-b {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: var(--z-popup-installer);
    background: black;
}

.new-mobile-bottom-installer-font-b {
    line-height: 50px;
    font-size: 25px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

.new-mobile-bottom-installer-rectangle-b {
    position: absolute;
    border-radius: 10px;
    padding: 0 5px;
    width: 300px;
    height: 50px;
    background: #046644;
    border: 2px solid white;
    bottom: 20px;
    left: calc(50% - 157px);
}

.new-mobile-bottom-installer-image-b {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.new-mobile-bottom-installer-close-b {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* New Variant Top: Fixed-position top overlay */
.new-mobile-bottom-installer-top {
    position: fixed;
    top: 33%;
    left: 0px;
    width: 100%;
    height: auto;
    z-index: var(--z-popup-installer);
    background: black;
}

.new-mobile-bottom-installer-font-top {
    line-height: 35px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

.new-mobile-bottom-installer-container-top {
    position: relative;
}

.new-mobile-bottom-installer-rectangle-top {
    position: absolute;
    border-radius: 40px;
    padding: 0 5px;
    width: 50%;
    height: 35px;
    background: #117E32;
    border: 2px solid #383739;
    left: 43%;
    top: 192px;
}

.new-mobile-bottom-installer-image-top {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.new-mobile-bottom-installer-close-top {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Semi-transparent black backdrop overlay */
.fill-it-black {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: .5;
    min-width: 100%;
    min-height: 100%;
    z-index: 32;
}

/* New Variant C: Rounded centered popup with image background */
.new-mobile-bottom-installer-c {
    position: fixed;
    top: calc(50% - 250px);
    left: calc(50% - 150px);
    width: 300px;
    height: 500px;
    z-index: var(--z-popup-installer);
    background: white;
    border-radius: 40px;
    border: 2px solid black;
    overflow: hidden;
}

.new-mobile-bottom-installer-font-c {
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    font-family: helvetica, arial, verdana, sans-serif;
}

.new-mobile-bottom-installer-rectangle-c {
    position: absolute;
    border-radius: 10px;
    padding: 0 5px;
    width: 240px;
    height: 40px;
    background: red;
    border: 2px solid black;
    bottom: 20px;
    left: calc(50% - 127px);
}

.new-mobile-bottom-installer-image-c {
    top: 30px;
    left: calc(50% - 150px);
    position: absolute;
}

.new-mobile-bottom-installer-close-c {
    position: absolute;
    top: 10px;
    right: 10px;
}