/* :root */
:root {
    /* Colors */
    --color-neutral-05: #F9F8F9;
    --color-neutral-20: #E7E4E5;
    --color-neutral-50: #A19B9D;
    --color-neutral-70: #635F60;
    --color-neutral-60: #777374;
    --color-neutral-80: #444041;
    --color-turquoise-10: #DDF1F3;
    --color-turquoise-30: #6AC9CA;
    --color-turquoise-80: #00645F;
    --color-yellow-10: #FEF0C7;
    --color-yellow-50: #F79009;
    --color-yellow-70: #B54708;
    --color-yellow-80: #93370D;
    --color-blue-50: #44A4D3;

    /* Additional Colors for Input Components */
    --color-input-idle-border: #D7D2D4;
    --color-input-focus-border: #6AC9CA;
    --color-input-focus-ring: #6AC9CA;
    --color-input-text: #374151;
    --color-input-label-idle: #C0BABC;
    --color-input-label-focus: #C0BABC;
    --color-input-bg: #ffffff;
    --color-validation-error: #dc3545;
    --color-cvv-illustration-bg: #F2F8F8;
    --color-cvv-button-border: #D7D2D4;
    --color-cvv-button-text: #635F60;
    --color-cvv-button-hover-bg: #F8F9FA;
    --color-cvv-button-hover-border: #ADB5BD;
    
    /* Additional Colors */
    --color-tooltip-bg: #ffffff;
    --color-tooltip-text: #212529;
    --color-tooltip-border: rgba(0, 0, 0, 0.1);
    --color-tooltip-arrow: #f8f9fa;
    --color-white: #FFFFFF;

    /* Additional Colors for Language Selector */
    --primary-text: #333333;
    --secondary-text: #666666;
    --border-color: #cccccc;
    --hover-bg: #f7f7f7;
    --active-bg: #e6f5f4;
    --active-text: #2a9d8f;

    /* Typography: Body1/Regular */
    --font-body1-size: 16px;
    --font-body1-line-height: 24px;
    --font-body1-weight: 400;

    /* Typography: Body2/Medium */
    --font-body2-size: 14px;
    --font-body2-line-height: 20px;
    --font-body2-weight: 500;

    /* Typography: Caption1/Medium */
    --font-caption1-size: 12px;
    --font-caption1-line-height: 16px;
    --font-caption1-weight: 500;

    /* Typography: Header4/Bold */
    --font-header4-size: 20px;
    --font-header4-line-height: 28px;
    --font-header4-weight: 700;

    /* Typography: Header3/Bold */
    --font-header3-size: 28px;
    --font-header3-line-height: 36px;
    --font-header3-weight: 700;

    /* Typography: Header2/Bold */
    --font-header2-size: 36px;
    --font-header2-line-height: 44px;
    --font-header2-weight: 700;

    /* Font Weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Family */
    --font-family: var(--font-type), sans-serif;
}

/* Typography */
.text-body1 {
    font-size: var(--font-body1-size);
    line-height: var(--font-body1-line-height);
    font-weight: var(--font-body1-weight);
    font-family: var(--font-family);
    font-style: normal;
}

.text-body2 {
    font-size: var(--font-body2-size);
    line-height: var(--font-body2-line-height);
    font-weight: var(--font-body2-weight);
    font-family: var(--font-family);
    font-style: normal;
}

.text-caption1 {
    font-size: var(--font-caption1-size);
    line-height: var(--font-caption1-line-height);
    font-weight: var(--font-caption1-weight);
    font-family: var(--font-family);
}

.text-header4 {
    font-size: var(--font-header4-size);
    line-height: var(--font-header4-line-height);
    font-weight: var(--font-header4-weight);
    font-family: var(--font-family);
}

@media (max-width: 768px) {
    .text-merchant-name {
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
    }

    .text-input-name {
        font-size: var(--font-caption1-size);
        line-height: var(--font-caption1-line-height);
    }
}

.text-header3 {
    font-size: var(--font-header3-size);
    line-height: var(--font-header3-line-height);
    font-weight: var(--font-header3-weight);
    font-family: var(--font-family);
    font-style: normal;
}

.text-header2 {
    font-size: var(--font-header2-size);
    line-height: var(--font-header2-line-height);
    font-weight: var(--font-header2-weight);
    font-family: var(--font-family);
}

@media (max-width: 768px) {
    .text-header2 {
        font-size: var(--font-header3-size);
        line-height: var(--font-header3-line-height);
    }
}

@media (min-width: 768px) {
    .text-md-body1 {
        font-size: var(--font-body1-size);
        line-height: var(--font-body1-line-height);
    }

    .text-md-body2 {
        font-size: var(--font-body2-size);
        line-height: var(--font-body2-line-height);
    }

    .text-md-header3 {
        font-size: var(--font-header3-size);
        line-height: var(--font-header3-line-height);
    }

    .text-md-header4 {
        font-size: var(--font-header4-size);
        line-height: var(--font-header4-line-height);
    }

    .text-weight-md-semibold {
        font-weight: var(--font-weight-semibold) !important;
    }
}

/* Font Weights */
.text-weight-regular {
    font-weight: var(--font-weight-regular);
}

.text-weight-medium {
    font-weight: var(--font-weight-medium);
}

.text-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

/* Font Colors */
.text-yellow-70 {
    color: var(--color-yellow-70);
}

.text-yellow-80 {
    color: var(--color-yellow-80);
}

.text-neutral-60 {
    color: var(--color-neutral-60);
}

.text-neutral-70 {
    color: var(--color-neutral-70);
}

.text-neutral-80 {
    color: var(--color-neutral-80);
}

.text-turquoise-80 {
    color: var(--color-turquoise-80);
}

.text-blue-50 {
    color: var(--color-blue-50);
}

.text-nicepay-amount {
    color: var(--amount-font-color);
}

.text-nicepay-header {
    color: var(--font-header-color);
}

.input-container {
    width: 100%;
    max-width: 450px;
    padding: 0 20px;
    box-sizing: border-box;
}
.nicepay-form-field {
    position: relative;
    background-color: var(--color-input-bg);
    border-radius: 8px;
    border: 1px solid var(--color-input-idle-border);
    box-sizing: border-box;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    cursor: text;
}

.nicepay-form-field.is-active {
    border-color: var(--color-input-focus-ring);
    box-shadow: 0 0 0 1px var(--color-input-focus-ring);
}
.nicepay-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    /* Default padding */
    padding: 18px 16px 0 16px;
    font-size: var(--font-body1-size);
    color: var(--color-input-text);
    font-weight: 500;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
}

.input-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-input-label-idle);
    font-size: var(--font-body1-size);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    transform-origin: top left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 32px);
}
.nicepay-form-field.is-active .input-label,
.nicepay-form-field.has-content .input-label {
    top: 8px;
    transform: translateY(0);
    font-size: var(--font-caption1-size);
    color: var(--color-input-label-focus);
}

.input-icon-group {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}

.input-icon-group i {
    font-size: 24px;
}
.nicepay-form-field.has-icon .nicepay-input {
    padding-right: 140px; /* Sesuaikan dengan lebar total ikon */
}

#cvv.nicepay-input {
    padding-right: 50px;
}
.card-logos img {
    width: 24px !important;
    height: auto !important;
}

.input-icon-group.card-logos {
    display: flex;
    align-items: center;
}

.input-icon-group.card-logos img {
    display: none;
}
.input-icon-group.card-logos img {
    width: 36px;
    height: 24px;
    object-fit: none;
    display: block;
}

.input-group .nicepay-form-field {
    flex: 1;
}

.input-group .nicepay-form-field .nicepay-input {
    padding-left: 16px;
}
.modal .nicepay-form-field {
    margin-bottom: 1rem;
}

.nicepay-form-field .invalid-feedback {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    font-size: var(--font-body2-size);
    color: var(--color-validation-error);
    display: none;
}

.nicepay-form-field.is-invalid .invalid-feedback {
    display: block;
}

/* Handle invalid-feedback when positioned outside nicepay-form-field */
.nicepay-form-field.is-invalid + .invalid-feedback {
    display: block;
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    margin-top: 5px;
    font-size: var(--font-body2-size);
    color: var(--color-validation-error);
}

.nicepay-form-field.is-invalid {
    border-color: var(--color-validation-error);
}

.nicepay-form-field.is-invalid.is-active {
    border-color: var(--color-validation-error);
    box-shadow: 0 0 0 1px var(--color-validation-error);
}

/* Label error state styling */
.nicepay-form-field.is-invalid .input-label {
    color: var(--color-validation-error);
}

.nicepay-form-field.is-invalid.is-active .input-label,
.nicepay-form-field.is-invalid.has-content .input-label {
    color: var(--color-validation-error);
}

.input-group {
    flex-wrap: wrap;
}

.input-group .invalid-feedback {
    flex-basis: 100%;
    width: 100%;
    margin-top: 5px;
    font-size: var(--font-body2-size);
    color: var(--color-validation-error);
    display: none;
}

.input-group .nicepay-form-field.is-invalid ~ .invalid-feedback {
    display: block;
}

.cvv-help-modal .modal-dialog{
    height: 534px;
    max-width: 668px;
    width: 100%;
}

.cvv-help-modal .modal-header {
    padding: 24px 24px 0 24px;
}

.cvv-help-modal .modal-title {
    color: var(--color-neutral-80);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-body1-size);
    line-height: 1.5em;
}

.cvv-help-modal .modal-body {
    padding: 24px;
}

.cvv-help-modal .cvv-illustration {
    background-color: var(--color-cvv-illustration-bg);
    height: 302px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 16px;
}

.cvv-help-modal .cvv-illustration img {
    width: 440px;
    height: 237px;
}

.cvv-help-modal .cvv-description {
    color: var(--color-neutral-80);
    font-size: var(--font-header4-size);
    font-weight: 500;
    line-height: 1.4em;
    text-align: left;
    margin-bottom: 0;
}

.cvv-help-modal .modal-footer {
    padding: 0 24px 24px 24px;
    border: none;
}

.cvv-help-modal .cvv-understand-button {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid var(--color-cvv-button-border);
    background-color: var(--color-white);
    color: var(--color-cvv-button-text);
    border-radius: 4px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-body1-size);
    line-height: 1.5em;
    transition: all 0.2s ease-in-out;
}

.cvv-help-modal .cvv-understand-button:hover {
    background-color: var(--color-cvv-button-hover-bg);
    border-color: var(--color-cvv-button-hover-border);
}

.cvv-help-modal .cvv-understand-button:focus {
    outline: none;
    box-shadow: unset;
}

#cvv-help-button {
    background: none !important;
    pointer-events: all !important;
}

#cvv-help-button svg {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .cvv-help-modal .modal-body {
        padding: 20px;
    }

    .cvv-help-modal .modal-header {
        padding: 20px 20px 0 20px;
    }

    .cvv-help-modal .modal-footer {
        padding: 0 20px 20px 20px;
    }

    .cvv-help-modal .cvv-illustration {
        height: 250px;
    }

    .cvv-help-modal .cvv-description {
        font-size: 18px;
    }
}

/* Custom Cashtag Input Styles */
.input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.input-addons {
    width: 100%;
    padding: 24px 16px 8px 16px;
    font-size: 16px;
    color: #333;
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    height: 60px;
    font-weight: 600;
    line-height: normal;
}

.input-addons:focus,
.input-addons:not(:placeholder-shown) {
    border-color: #52bdc4;
    padding-left: 30px;
}

.input-prefix {
    position: absolute;
    left: 16px;
    top: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-addons:focus ~ .input-prefix,
.input-addons:not(:placeholder-shown) ~ .input-prefix {
    opacity: 1;
    transform: translateX(0);
}

.input-label {
    position: absolute;
    left: 16px;
    top: 30px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: transparent;
}

.input-addons:focus ~ .input-label,
.input-addons:not(:placeholder-shown) ~ .input-label {
    top: 14px;
    font-size: 12px;
    color: #52bdc4;
    left: 16px;
}

.invalid-feedback {
    display: none;
    color: #e74c3c;
    font-size: 14px;
    margin-top: 6px;
    padding-left: 4px;
}

.input-wrapper.is-error .input-addons {
    border-color: #e74c3c;
}

.input-wrapper.is-error .input-label {
    color: #e74c3c !important;
}

.input-wrapper.is-error .error-message {
    display: block;
}

.input-wrapper.is-error .invalid-feedback {
    display: block;
}

.input-addons.prefix-phone-number {
    padding-left: 46px;
}