.op3-element[data-op3-element-type="onetimeoffer"] {
    max-width: 100%;

    .op3-element[data-op3-element-type="input"],
    .op3-element[data-op3-element-type="select"] {
        padding: 20px;

        [data-op3-background="overlay"]::before,
        [data-op3-background="overlay"]::after {
            background: #fff;
        }
    }

    // Card entry is dummy field, will be
    // replaced with stripe iframe
    .op3-element[data-op3-element-type="input"][data-op3-element-spec="card-entry"] {
        // The field's css will be sent to stripe
        // so it can style it's input like dummy
        // one. Our dummy field is disabled, let's
        // style it like the normal one.
        input[name="oto_card_entry"][disabled] {
            color: currentColor;
        }
    }

    .op3-element[data-op3-element-type="formsection"] {
        margin: 0 0 24px 0;
        padding: 0;
        width: 345px;
        display: none;
    }

    [data-op3-edit-finish-text="1"] {
        > .op3-element[data-op3-element-type="formsection"] {
            display: block;
        }
    }

    // Before stripe iframe loads the field
    // is left as designed in live-editor.
    // When stripe iframe loads there is no
    // need for input/icon (just stripe form).
    .opc-onetimeoffer[data-opc-payment-status="ready"] .op3-element[data-op3-element-type="input"][data-op3-element-spec="card-entry"] .oto-card-entry-placeholder {
        flex: 1;

        ~ .op3-element-input-edit-text,
        ~ .op3-divider,
        ~ .op3-icon {
            display: none !important;
        }
    }

    .opc-onetimeoffer[data-oto-show-cards="0"] > .op3-element[data-op3-element-type="formsection"] {
        display: none !important;
    }

    .opc-onetimeoffer[data-oto-show-cards="1"] > .op3-element[data-op3-element-type="formsection"] {
        display: block;
    }
}