:root {
    --widget-min-width: 327px;
    --widget-max-width: 572px;

    --spacing--small: 4px;
    --spacing--medium: 8px;
    --spacing--large: 16px;
    --spacing--extra-large: 24px;

    --font-size--defualt: 12px;
    --font-size--header: 18px;

    --color--text--primary: #161515;
    --color--text--surface: #FFFFFF;
    --color--accent--green: #0B8313;
    --color--accent--light-green: #EAFFEB;
    --color--accent--gray: #E0E0E0;
    --color--accent--light-gray: #F3F3F3;

    --icon-size: 16px;
    --border-radius: 12px;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
    min-width: var(--widget-min-width);
    max-width: var(--widget-max-width);
    font-family: sans-serif;

    * {
        box-sizing: border-box;
    }
}

.widget-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--small);
}

#refundable-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--medium);
}

.option__header--refundable {
    background: var(--color--accent--green);
}

.header-container {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing--extra-large);
}

.header__left {
    flex: 1;
    padding: var(--spacing--medium) 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing--medium);
}

.header__title {
    color: var(--color--text--primary);
    font-size: var(--font-size--header);
    font-weight: 700;
    line-height: 130%;
    word-wrap: break-word;
    margin-left: var(--spacing--medium);

    @media (max-width: 400px) {
        font-size: 14px;
    }
}

.header__security-notice {
    padding: var(--spacing--medium);
    background: var(--color--accent--light-green);
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing--medium);
}

.header__security-notice__icon {
    width: var(--icon-size);
    height: var(--icon-size);
    position: relative;
}


.option__header {
    width: 100%;
    height: 100%;
    padding: var(--spacing--extra-large) var(--spacing--large);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing--medium);
}

.option__header--refundable {
    background: var(--color--accent--green);

    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border: 2px solid var(--color--accent--green);
    border-bottom: none;
}

.option-wrapper {
    cursor: pointer;
}

.option-wrapper--refundable .option__body {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border: 2px solid var(--color--accent--light-gray);
    border-top: none;
}

.option-wrapper--refundable.selected {
    .option__body {
        border-color: var(--color--accent--green) !important;
    }

    .option__body__container {
        background-color: #EAFFEB80;
    }
}

.option-wrapper--refundable:hover {
    .option__body {
        border-color: #0B83134D;
    }

    .option__body__container {
        background-color: #EAFFEB80;
    }
}


.option-wrapper--non-refundable {
    background: transparent;
    border: 2px var(--color--accent--light-gray) solid;
    border-radius: var(--border-radius);

    .option__header {
        color: var(--color--text--primary);
    }
}

.option-wrapper--non-refundable:hover,
.option-wrapper--non-refundable.selected {
    border-color: var(--color--text--primary);

    .radio-icon {
        background-color: var(--color--text--primary);
    }

    .option__body__container {
        background-color: #00000003;
    }
}

.option__header {
    color: var(--color--text--surface);
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    word-wrap: break-word;
}

.option__header__left {
    display: flex;
    flex-direction: row;
    gap: var(--spacing--medium);
    align-items: center;
    flex-wrap: wrap;
}

.option-wrapper--non-refundable {
    .option__header__left {
        flex-wrap: nowrap;
    }

    .total-price {
        color: black;
    }
}

.option__header__label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing--medium);
    align-items: center;
    cursor: pointer;
}

.option__header__badge {
    padding: var(--spacing--small) var(--spacing--medium);
    background: #eaffeb;
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing--small);
}

.option__header__badge-text {
    flex: 1;
    text-align: center;
    color: var(--color--accent--green);
    font-size: var(--font-size--defualt);
    font-weight: 400;
    line-height: 130%;
    word-wrap: break-word;
}

.option__header__price-container {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing--small);
}

.total-price {
    align-self: stretch;
    text-align: right;
    color: var(--color--text--surface);
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    text-wrap: nowrap;
}

.additional-cost {
    align-self: stretch;
    text-align: right;
    color: var(--color--text--surface);
    font-size: 10px;
    font-weight: 400;
    line-height: 130%;
    text-wrap: nowrap;
}

.option__body__container {
    width: 100%;
    height: 100%;
    padding: var(--spacing--extra-large);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing--extra-large);
}

.option__body__header {
    align-self: stretch;
}

.main-text,
.highlight-text {
    color: #202022;
    font-size: var(--font-size--defualt);
    word-wrap: break-word;
}

.highlight-text {
    font-weight: 700;
}

.option__body__reasons {
    align-self: stretch;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing--extra-large);
    flex-wrap: wrap;
}

.option__body__reasons__left-column,
.option__body__reasons__right-column {
    display: inline-flex;
    flex-direction: column;
    gap: var(--spacing--small);
}

.option__body__reasons__item {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing--medium);
}

.checkbox {
    width: var(--icon-size);
    height: var(--icon-size);
    position: relative;
}

.checkbox::after {
    content: '';
    width: 10px;
    height: 6px;
    position: absolute;
    left: 3px;
    top: 4px;
    border: 2px black solid;
}

.option__body__reasons__item-text {
    color: #202022;
    font-size: var(--font-size--defualt);
    word-wrap: break-word;
}

.option__body__footer {
    align-self: stretch;
    color: #202022;
    font-size: var(--font-size--defualt);
    line-height: 130%;
    word-wrap: break-word;
}

.bold-text {
    font-weight: 700;
}

.link-text {
    color: #202022;
}

.option__body__notification {
    align-self: stretch;
    padding: var(--spacing--medium);
    background: #eaffeb;
    border-radius: 4px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing--small);
}

.option__body__notification-text {
    flex: 1;
    color: var(--color--text--primary);
    font-size: var(--font-size--defualt);
    line-height: 130%;
    word-wrap: break-word;
}

#trustpilot-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trustpilot-widget {
    max-width: fit-content;

    iframe {
        max-height: 115px;
    }
}

input[type="radio"] {
    display: none;
}

.radio-icon {
    --radio-size: 24px;

    -webkit-mask: url('assets/tabler-icon-radio-unselected.svg') no-repeat center;
    mask: url('assets/tabler-icon-radio-unselected.svg') no-repeat center;
    width: var(--radio-size);
    height: var(--radio-size);
    min-width: var(--radio-size);
    min-height: var(--radio-size);
    background-size: contain;
    background-repeat: no-repeat;
    transition: filter 0.3s ease;
    background-color: var(--color--accent--gray);
    cursor: pointer;
}

.radio-icon-white {
    background-color: var(--color--text--surface);
}

.option-wrapper.selected {
    .radio-icon {
        -webkit-mask: url('assets/tabler-icon-radio-selected.svg') no-repeat center;
        mask: url('assets/tabler-icon-radio-selected.svg') no-repeat center;
    }
}