:root {
    --modal-overlay: rgba(16, 24, 40, 0.56);

    --modal-bg: #ffffff;
    --modal-border: #EAECF0;
    --modal-text: #101828;
    --modal-text-muted: #344054;
    --modal-text-light: #667085;

    --modal-primary: #155A96;
    --modal-primary-hover: #124D80;

    --modal-radius: 12px;
    --modal-input-radius: 8px;

    --modal-width: 576px;
    --modal-loading-width: 320px;

    --modal-padding: 24px;
    --modal-min-height: 380px;

    --modal-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
}

.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    width: 100%;
    height: 100%;

    box-sizing: border-box;
    padding: 24px 16px;

    overflow-y: auto;

    background: var(--modal-overlay);

    text-align: center;
    white-space: nowrap;
}

.popup-overlay::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.popup-overlay > .popup-content {
    position: relative;

    display: inline-block !important;
    vertical-align: middle;

    box-sizing: border-box;

    width: min(var(--modal-width), calc(100vw - 32px)) !important;
    max-width: 100% !important;
    /*min-height: var(--modal-min-height) !important;*/
    height: auto !important;

    padding: var(--modal-padding) !important;

    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);

    text-align: left;
    white-space: normal;

    overflow: visible;
}

.close-popup {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;

    width: 40px !important;
    height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;

    cursor: pointer !important;
    z-index: 5;
}

.close-popup:hover {
    background: rgba(16, 24, 40, 0.04) !important;
}

.close-popup svg {
    width: 20px !important;
    height: 20px !important;
}

.close-popup svg path {
    fill: var(--modal-text) !important;
}

.popup-content h2,
.popup-content .h2-top {
    margin: 0 56px 4px 0 !important;

    color: var(--modal-text) !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: -0.02em !important;
}

.popup-content h3 {
    margin: 24px 0 12px !important;

    color: var(--modal-text) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

.popup-content p {
    margin: 0 !important;

    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.popup-content .ot {
    color: var(--modal-text-muted) !important;
}

#purchase-popup .row {
    margin: 0 0 24px !important;
}

#purchase-popup .row:not(:has(.h2-top-label)) {
    display: none !important;
    margin: 0 !important;
}

#purchase-popup .h2-top-label,
#purchase-popup .plan-name {
    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

#purchase-popup .hide-on-stripe {
    margin-bottom: 16px !important;
}

#purchase-popup label,
#purchase-popup .input-label {
    display: inline-block !important;

    margin: 0 0 8px !important;

    color: var(--modal-text) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

#purchase-popup input:not([type="checkbox"]):not([type="radio"]),
#purchase-popup select {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    box-sizing: border-box !important;

    padding: 10px 14px !important;

    border: 1px solid #D0D5DD !important;
    border-radius: var(--modal-input-radius) !important;

    background: #ffffff !important;
    color: var(--modal-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    outline: none !important;
}

#purchase-popup input:focus,
#purchase-popup select:focus {
    border-color: var(--modal-primary) !important;
    box-shadow: 0 0 0 3px rgba(21, 90, 150, 0.12) !important;
}

#purchase-popup input::placeholder {
    color: var(--modal-text-light) !important;
}

#purchase-popup input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;

    margin: 0 8px 0 0 !important;

    accent-color: var(--modal-primary);
}

#purchase-popup input[type="checkbox"] + label,
#purchase-popup .hide-on-stripe[style*="display: flex"] label {
    margin: 0 !important;

    color: var(--modal-text-muted) !important;

    font-weight: 400 !important;
}

#purchase-popup .error-message,
#purchase-popup #payment-message {
    margin: 8px 0 0 !important;

    color: #C70036 !important;

    font-size: 14px !important;
    line-height: 20px !important;
}

#purchase-popup .details {
    margin: 0 !important;
}

#purchase-popup .details table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#purchase-popup .details td {
    padding: 3px 0 !important;

    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

#purchase-popup .details td:first-child {
    width: 50% !important;
}

#purchase-popup #payment-element:empty {
    display: none !important;
    margin: 0 !important;
}

#purchase-popup #payment-element:not(:empty) {
    display: block !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

.popup-buttons {
    box-sizing: border-box !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    margin-top: 24px !important;
    padding-top: 24px !important;

    border-top: 1px solid var(--modal-border) !important;
}

#purchase-popup .popup-buttons {
    justify-content: space-between !important;
}

#purchase-popup .popup-buttons > div {
    width: auto !important;
    flex: 1 1 auto !important;
}

#purchase-popup .total {
    margin: 0 !important;

    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    line-height: 20px !important;
}

#purchase-popup .total strong {
    font-weight: 600 !important;
}

.popup-content button,
.popup-content .btn-green,
.popup-content .btn-blue,
.popup-content .btn-light-gray,
.popup-content .btn-grey {
    height: 44px !important;
    min-height: 44px !important;

    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 0 20px !important;

    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
    cursor: pointer !important;
}

.popup-content .btn-green,
.popup-content .btn-blue,
#purchase-popup #issue-btn {
    width: auto !important;
    min-width: 122px !important;
    max-width: none !important;

    margin-left: 0 !important;

    border: 1px solid var(--modal-primary) !important;
    background: var(--modal-primary) !important;
    color: #ffffff !important;
}

.popup-content .btn-green:hover,
.popup-content .btn-blue:hover,
#purchase-popup #issue-btn:hover {
    border-color: var(--modal-primary-hover) !important;
    background: var(--modal-primary-hover) !important;
}

.popup-content .btn-light-gray,
.popup-content .btn-grey {
    width: auto !important;
    min-width: 86px !important;

    border: 1px solid #D0D5DD !important;
    background: #ffffff !important;
    color: var(--modal-text-muted) !important;
}

.popup-content .btn-light-gray:hover,
.popup-content .btn-grey:hover {
    background: #F9FAFB !important;
}

.popup-content button:disabled,
.popup-content .btn-green:disabled,
.popup-content .btn-blue:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

#purchase-popup #issue-btn {
    flex: 0 0 auto !important;
}

#order-success-popup > .popup-content,
#order-failed-popup > .popup-content {
    display: inline-flex !important;
    flex-direction: column !important;

    width: min(var(--modal-width), calc(100vw - 32px)) !important;
    min-height: var(--modal-min-height) !important;

    padding: 32px 24px 24px !important;

    text-align: center !important;
}

#order-success-popup .popup-body,
#order-failed-popup .popup-body {
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

#order-success-popup .popup-body > div:first-child,
#order-failed-popup .popup-body > div:first-child {
    width: 64px !important;
    height: 64px !important;

    margin: 0 auto 32px !important;
}

#order-success-popup h2,
#order-failed-popup h2 {
    margin: 0 56px 12px !important;

    color: var(--modal-text) !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: -0.02em !important;
}

#order-success-popup p,
#order-failed-popup p {
    max-width: 420px !important;

    margin: 0 auto 16px !important;

    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    line-height: 20px !important;
}

#order-success-popup p:last-child,
#order-failed-popup p:last-child {
    margin-bottom: 0 !important;
}


#order-success-popup .popup-buttons,
#order-failed-popup .popup-buttons {
    width: 100% !important;

    justify-content: center !important;

    margin-top: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-top: 24px !important;

    border-top: 1px solid var(--modal-border) !important;
}

#order-success-popup .popup-buttons button {
    flex: 1 1 0 !important;
}

#order-success-popup .popup-buttons button:only-child,
#order-failed-popup .popup-buttons button:only-child {
    width: 100% !important;
    min-width: 100% !important;
}

#order-failed-popup .popup-buttons button {
    width: 100% !important;
}

#loading-popup > .popup-content {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(var(--modal-loading-width), calc(100vw - 32px)) !important;
    min-height: 120px !important;
    height: auto !important;

    padding: 24px !important;

    text-align: center !important;
}

#loading-popup p {
    margin: 12px 0 0 !important;
}

#loading-popup .spinner {
    width: 32px;
    height: 32px;

    border: 3px solid #EAECF0;
    border-top-color: var(--modal-primary);
    border-radius: 50%;

    animation: modal-spin 0.8s linear infinite;
}

@keyframes modal-spin {
    to {
        transform: rotate(360deg);
    }
}


#purchase-popup #amount {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    padding: 10px 14px !important;

    border: 1px solid #D0D5DD !important;
    border-radius: var(--modal-input-radius) !important;

    background: #ffffff !important;
    color: var(--modal-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

#purchase-popup #custom-amount {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    box-sizing: border-box !important;

    padding: 10px 14px !important;

    border: 1px solid #D0D5DD !important;
    border-radius: var(--modal-input-radius) !important;

    background: #ffffff !important;
    color: var(--modal-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    outline: none !important;
}

#purchase-popup #custom-amount:focus {
    border-color: var(--modal-primary) !important;
    box-shadow: 0 0 0 3px rgba(21, 90, 150, 0.12) !important;
}

#purchase-popup #custom-amount::placeholder {
    color: var(--modal-text-light) !important;
}

#purchase-popup .total-amount {
    margin: 8px 0 0 !important;

    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

#purchase-popup .powered-by {
    margin: 0 !important;

    color: var(--modal-text-light) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

#purchase-popup .powered-by strong {
    color: var(--modal-text-muted) !important;
    font-weight: 600 !important;
}

#view-qr-popup.popup-overlay > .popup-content {
    width: min(var(--modal-width), calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: auto !important;

    padding: var(--modal-padding) !important;

    background: var(--modal-bg) !important;
    border: 1px solid var(--modal-border) !important;
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow) !important;

    box-sizing: border-box !important;
}

#view-qr-popup .ed-h2-top,
#view-qr-popup h2 {
    margin: 0 56px 4px 0 !important;

    color: var(--modal-text) !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: -0.02em !important;
}

#view-qr-popup .row {
    margin: 0 0 24px !important;

    color: var(--modal-text-light) !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

#view-qr-popup .esim-details {
    width: 100% !important;
    max-width: 100% !important;

    table-layout: fixed !important;
    border-collapse: collapse !important;
}

#view-qr-popup .esim-details td {
    padding: 8px 0 !important;

    vertical-align: top !important;

    color: var(--modal-text-muted) !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

#view-qr-popup .esim-details td:first-child {
    width: 112px !important;
    min-width: 112px !important;

    padding-right: 24px !important;

    color: var(--modal-text-light) !important;
}

#view-qr-popup .esim-details td:nth-child(2) {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#view-qr-popup .link-text {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    white-space: normal !important;

    color: var(--modal-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

#view-qr-popup #qr-image,
#view-qr-popup .qr-image {
    display: block !important;

    width: 124px !important;
    height: 124px !important;

    object-fit: contain !important;

    margin: 4px 0 12px !important;
}

#view-qr-popup .copy-btn,
#view-qr-popup .download-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 86px !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 0 20px !important;

    border-radius: 10px !important;
    border: 1px solid #D0D5DD !important;
    background: #ffffff !important;
    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;

    box-shadow: none !important;
    cursor: pointer !important;
}

#view-qr-popup .copy-btn:hover,
#view-qr-popup .download-btn:hover {
    background: #F9FAFB !important;
}

#help-popup.popup-overlay > .popup-content {
    display: inline-block !important;

    width: 440px !important;
    max-width: calc(100vw - 32px) !important;

    height: auto !important;
    min-height: auto !important;

    padding: 24px !important;

    text-align: center !important;

    background: var(--modal-bg) !important;
    border: 1px solid var(--modal-border) !important;
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow) !important;
}

#help-popup .close-popup {
    display: none !important;
}

#help-popup .popup-body {
    display: block !important;

    width: 100% !important;

    padding: 0 !important;
    margin: 15px !important;

    text-align: center !important;
}

#help-popup .popup-body > div:first-child {
    width: 64px !important;
    height: 64px !important;

    margin: 0 auto 24px !important;
}

#help-popup .h-h2,
#help-popup h2 {
    margin: 0 0 12px !important;

    color: var(--modal-text) !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: -0.02em !important;

    text-align: center !important;
}

#help-popup #order-success-text {
    display: none !important;
}

#help-popup .h-ot,
#help-popup p {
    max-width: 100% !important;

    margin: 0 auto 12px !important;

    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;

    text-align: center !important;
}

#help-popup .h-ot:last-child,
#help-popup p:last-child {
    margin-bottom: 0 !important;
}

#help-popup a {
    color: var(--modal-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#help-popup a:hover {
    color: var(--modal-primary-hover) !important;
    text-decoration: underline !important;
}

#help-popup .popup-buttons {
    width: 100% !important;

    display: contents !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    margin-top: 24px !important;
    padding-top: 24px !important;

    border-top: 1px solid var(--modal-border) !important;
}

#help-popup .popup-buttons .btn-light-gray,
#help-popup .popup-buttons button {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 20px !important;

    border-radius: 10px !important;
    border: 1px solid #D0D5DD !important;
    background: #ffffff !important;
    color: var(--modal-text-muted) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;

    box-shadow: none !important;
    cursor: pointer !important;
}

#help-popup .popup-buttons .btn-light-gray:hover,
#help-popup .popup-buttons button:hover {
    background: #F9FAFB !important;
}