@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v19-300.woff2) format('woff2');
  }
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v19-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v23-400-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v19-500.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v19-600.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v23-600-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans/ibmplexsans-v19-700.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans-arabic/ibmplexsans-arabic-v12-300.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans-arabic/ibmplexsans-arabic-v12-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans-arabic/ibmplexsans-arabic-v12-500.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans-arabic/ibmplexsans-arabic-v12-600.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://static.fundraiseup.com/common-fonts/ibm-plex-sans-arabic/ibmplexsans-arabic-v12-700.woff2) format('woff2');
}
.modal-desktop{
    background: rgba(0, 0, 0, .7);
    z-index: 999999;
}
.title-50-semibold {
    font-size: 20px !important;
    line-height: /*!rtl:34px*/ 24px;
    font-weight: 600;
}
/* Початковий стан модалки (прихована) */
.rtg-modal-fade {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Стан після активації (fadeIn) */
.rtg-modal-fade.show {
    display: flex; /* або block, залежно від верстки */
    opacity: 1;
}
.price-control.price-control-desktop.d-block.w-100.text-sans-serif.bg-transparent.p-0.border-0.m-0.body-60-regular{
  border: none!important;
}
.btn.btn.btn-primary{
  background: #3371e6!important;
  color: #fff!important;
  font-size: 16px !important;
}
.modal-close.modal-close-desktop{
  font-size: 20px !important;
    color: #000000 !important;
    background: #fff !important;
    opacity: 1 !important;
}
.donate_menu .elementor-nav-menu--dropdown .menu-item a:hover {
    background: none !important;
    color: #263754 !important;
    padding: 0!important;
}
.frequencies.p-rel.d-grid{
  display: block!important;
}
/* Початковий стан рядів */
.row-one, .row-two {
    transition: opacity 0.2s ease-in-out;
}

/* Клас для приховування */
.fade-out-hidden {
    opacity: 0;
    pointer-events: none; /* щоб не можна було клікнути по прихованому */
}

/* Клас для показу */
.fade-in-visible {
    opacity: 1;
    display: flex !important; /* або block, залежно від твоєї верстки */
}
.title-30-medium {
    font-size: 16px !important;
    line-height: /*!rtl:28px*/ 20px;
    font-weight: 500;
}

.fixed-container.grow-1.min-h-0.d-flex.flex-column .opacity-0.mt-auto{
  margin-top: 10px!important;
}
/* Коли інпут у фокусі АБО активний */
.label-for-cc.active-style{
    transform: translateY(-11px) scale(0.8);
    font-weight: bold;
    transition: all 0.2s ease;
}

/* Відміна дії (повернення у вихідний стан), коли фокус зник */
/* Це станеться автоматично завдяки transition, якщо ми просто пропишемо базовий стиль */
.label-for-cc {
    position: absolute;
    pointer-events: none;
    transition: all 0.2s ease;
    opacity: 0.7;
}


/* Фон (затемнення) */
#custom-modal-overlay {
    display: none; /* Спочатку приховано */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Затемнення 0.7 */
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

/* Модальне вікно */
.custom-modal-window {
    position: relative;
    max-height: 90vh;
    border-radius: 15px;
    overflow-y: auto;
}

/* Кнопка закриття */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #000;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    transform: scale(1.2);
    color: #ff4d4d;
}

/* Анімація появи */
.modal-overlay-fade.show {
    display: flex !important;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



.modal-content-inner{
    display: flex;
}

.modal-content-inner .right-side{        width: 516px;background: #fff;height: 100%;border-radius: 16px;overflow: hidden;}
.modal-content-inner .right-side .img-row{

}
.modal-content-inner .right-side .img-row img{


}
.modal-content-inner .right-side .text-row{

}
.modal-content-inner .right-side .text-box{
    padding: 0 20px 28px 20px;
}
.modal-content-inner .right-side .text-row .logo-row{padding: 20px 28px 16px 28px;}
.modal-content-inner .right-side .text-row .logo-row img{max-width: 100%;max-height: 50px;}
.modal-content-inner .right-side .text-row h3{white-space: nowrap;font-size: 20px;line-height: /*!rtl:34px*/ 24px;font-weight: 600;}
.modal-content-inner .right-side .text-row p{font-size: /*!rtl:14px*/ 16px;line-height: 22px;font-weight: 400;line-height: 22px;margin-top: 12px;user-select: text;}
.modal-content-inner .right-side .text-row b{

}

.modal-content-inner .left-side{
    width: 40%;
    height: auto;
    margin-left: 30px;
    width: 350px;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}
.modal-content-inner .left-side svg{
    margin-right: 10px;
}
.modal-content-inner .left-side .items-row{background: #fff;height: 100%;border-radius: 16px;position: relative; 
    display: flex;
    width: 1050px; /* 350px + 350px */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Плавний рух */
    will-change: transform;
}
.modal-content-inner .item-1{

}
.item-1, .item-2, .item-3 {
    width: 350px;
    min-width: 350px;
    position: relative;
    flex-shrink: 0;
}

/* Клас, який ми будемо додавати через JS */
.slide-active .items-row {
    transform: translateX(-350px);
}
.modal-content-inner .items-row .give-once{background-color: #edf3ff;font-size: /*!rtl:14px*/ 16px;line-height: 24px;font-weight: 600;background: #edf3ff;box-shadow: inset 0 0 0 2px #3371e6;z-index: 2;pointer-events: none;height: 45px;display: flex;align-items: center;justify-content: center;border-radius: 10px;}
.modal-content-inner .items-row .give-once span{

}
.modal-content-inner .items-row .sum-row{margin-top: 10px;}
.modal-content-inner .items-row .sum-row ul{margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;justify-content: space-between;}
.modal-content-inner .items-row .sum-row li{transition: 200ms ease; cursor: pointer;width: 30%;display: flex;align-items: center;justify-content: center;font-size: /*!rtl:14px*/ 16px;line-height: 24px;font-weight: 400;box-shadow: inset 0 0 0 1px #c7cdd6;border-radius: 8px;user-select: none;color: #222832;margin-bottom: 10px!important;height: 40px;}
.modal-content-inner .items-row .input-row{

}
.modal-content-inner .items-row .sum-row li.active{
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    background: #edf3ff;
    box-shadow: inset 0 0 0 2px #3371e6;
    pointer-events: none;
}
.modal-content-inner .items-row .sum-row li:hover{
    background: #f3f4fa;
}
.modal-content-inner .items-row .input-row input{
    width: 100%;
    color: #222832;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: /*!rtl:14px*/ 16px;
    line-height: 24px;
    font-weight: 400;
    box-shadow: inset 0 0 0 1px #c7cdd6;
    border-radius: 8px;
    user-select: none;
    color: #222832;
    margin-bottom: 10px !important;
    height: 50px;
    height: 52px;
    line-height: 52px;
    font-family: "IBM Plex Sans", var(--font-system);
    font-size: 24px;
    font-weight: 400;
    padding-left: 12px;
    box-shadow: inset 0 0 0 1px #c7cdd6;
    border-radius: 8px;
    border: none;
}
/* Chrome, Firefox 19+, Safari, Edge */
.modal-content-inner .items-row .input-row input::placeholder {
    font-size: 15px;
    opacity: 1; /* Важливо для Firefox, щоб колір не був занадто світлим */
}

/* Internet Explorer 10-11 */
.modal-content-inner .items-row .input-row input:-ms-input-placeholder {
    font-size: 15px;
}

/* Microsoft Edge (старі версії) */
.modal-content-inner .items-row .input-row input::-ms-input-placeholder {
    font-size: 15px;
}
.modal-content-inner .items-row .input-row .input-box{display: flex;align-items: center;justify-content: space-between;position: relative;}
.amount-curency{
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;user-select: none;color: #222832;position: absolute;padding: 0;font-size:  16px;line-height: 24px;font-weight: 400;/* opacity: .0001; */width: 65px;right: 7px;left: unset;border: none;height: 40px;top: 5px;bottom: unset;transform: unset;cursor: pointer;}
.modal-content-inner .items-row .btn-row{position: absolute;bottom: 0;width: 100%;display: flex;justify-content: center;padding: 0 20px 28px 20px;padding-inline: 32px;flex-wrap: wrap;}
.modal-content-inner .items-row .btn-row span{font-size: 16px;transition: 300ms ease;line-height: 24px;font-weight: 500;position: relative;display: block;width: 100%;height: 48px;color: inherit;text-overflow: ellipsis;text-align: center;text-decoration: none;white-space: nowrap;overflow: hidden;background: none;padding: 0 12px;border-radius: 8px;border: 0;margin: 0;-webkit-user-select: none;user-select: none;transition: background-color .15s ease-in-out;cursor: pointer;color: #fff;background: #3371e6;display: flex;align-items: center;justify-content: center;text-align: center;}
.modal-content-inner .items-row .btn-row span:hover{
    color: #fff;
    background: #2e66cf;
}
.left-form-row{
    padding: 0 32px;
}
.modal-content-inner .item-1 h4{
    margin: 0;
    padding: 28px 16px;
    font-size: 20px;
    line-height: /*!rtl:34px*/ 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-green-60 {
    color: #00c07b;
}
.font-size-28 {
    font-size: 28px;
}

/* Контейнер всієї картки */
.user-details-card {
    width: 350px;
    background: #fff;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Заголовок зі стрілкою */
.details-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.details-header i {
    position: absolute;
    left: 0;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}

.details-header span {
    font-weight: 600;
    font-size: 16px;
    color: #2d3436;
}

/* Рамка для групи інпутів */
.inputs-container {
    border: 1px solid #c7cdd6;
    border-radius: 12px;
    /* overflow: hidden; */
    background: #fff;
}

/* Обгортка кожного поля */
.field-wrapper {
    position: relative;
    padding: 0px 15px;
}

.field-wrapper.border-bottom {
    border-bottom: 1px solid #c7cdd6;
}

/* Стиль самих інпутів */
.field-wrapper input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    color: #2d3436;
    padding: 15px 0px 15px 0px!important;
    background: transparent;
    height: 52px;
    padding-top: 22px!important;
    padding-bottom: 6px!important;
}

/* Твій специфічний плейсхолдер/лейбл */
.field-wrapper label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%); /* Центруємо по вертикалі */
    font-size: 15px;
    color: #b2bec3;
    transition: all 0.2s ease;
    pointer-events: none;
    transform-origin: left top;
    font-size: /*!rtl:14px*/ 16px;
    line-height: 24px;
    color: #49505b;
    font-weight: 300;
    letter-spacing: 0.4px;
}

/* ТА САМА АНІМАЦІЯ З ТВОГО СКРІНШОТА */
.field-wrapper.active label {
    /* Твій код з картинки */
    transform: translate(0, calc(-50% - 12px)) scale(.75); 
    color: #3867d6;
}
.field-wrapper input::placeholder {
    color: transparent;
}
/* Блок телефону з прапором */
.phone-field {
    display: flex;
    align-items: center;
}

.country-select {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
    border-right: 1px solid #f0f0f0;
    margin-right: 10px;
    cursor: pointer;
}

.flag-icon {
    width: 20px;
    border-radius: 2px;
}
#flag-or-code{
    display: flex;
    align-items: center;
    justify-content: center;
}
#flag-or-code img{
    width: 25px;
}

/* Синя кнопка Continue */
.btn-continue {
    width: 100%;
    background: #3867d6; /* Той самий синій */
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 30px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-continue:hover {
    background: #2b52b1;
}
/* Контейнер для позиціонування */
.country-select {
    position: relative; /* Важливо для absolute всередині */
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Сам випадаючий список */
#country-dropdown {
    display: none; /* Спочатку прихований */
    position: absolute;
    bottom: calc(100% + 10px); /* З'являється НАД іконкою */
    left: 0;
    width: 280px;
    max-height: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 1000;
    overflow-y: auto;
    padding: 8px 0;
    list-style: none;
    border: 1px solid #a9a9a9;
}

/* Показуємо при активному класі */
#country-dropdown.show {
    display: block;
    animation: slideInUp 0.2s ease;
}

/* Елементи списку */
.country-select-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    transition: background 0.2s;
    font-size: 14px;
    color: #2d3436;
    margin-bottom: 0;
}

.country-select-option:hover {
    background: #f1f2f6;
}

.country-select-option img, 
.country-select-option .flag-icon {
    width: 22px;
    margin-right: 12px;
    border-radius: 2px;
}

/* Анімація появи */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Кастомний скроллбар */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #dfe6e9;
    border-radius: 10px;
}
.country-select {
    min-width: 30px; /* Зарезервуй місце під код типу +380 */
    justify-content: center;
    gap: 4px;
}
/* Сітка для Expiration та CVC */
.input-grid {
    display: flex;
}
.input-grid .field-wrapper {
    flex: 1;
}
.border-right {
    border-right: 1px solid #c7cdd6;
}

/* Вибір оплати */
.payment-methods {
    border: 1px solid #3867d6; /* Синя рамка навколо обраного */
    border-radius: 12px;
    margin-bottom: 30px;
    overflow: hidden;
}
.method-item {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    font-weight: 500;
    color: #2d3436;
}
.method-item.active {
    background: #f1f6ff;
}
.method-item i { margin-right: 10px; color: #49505b; }

/* Чекбокс та Total */
.transaction-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    font-size: 14px;
    color: #49505b;
}
.total-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    margin-bottom: 12px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid #c7cdd6;
}
.total-amount {color: #2d3436;font-size: /*!rtl:12px*/ 14px;line-height: 20px;font-weight: 500;}

/* Іконки всередині інпутів (праворуч) */
.p-abs-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #b2bec3;
    font-size: 14px;
}
.custom-checkbox{
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}
.custom-checkbox input{
    width: 17px;
    margin-right: 10px;
    height: 17px;
}


/* Стиль контейнера при помилці */
.amount-input-wrapper.error input{
    box-shadow: inset 0 0 0 1px #eb5757 !important;
    background-color: #fff9f9; /* Легкий рожевий фон (опціонально) */
}

/* Іконка помилки */
.error-icon {
    display: none;
    color: #eb5757;
    margin-right: 10px;
    font-size: 18px;
    position: absolute;
    bottom: -14px;
}

.amount-input-wrapper.error .error-icon {
    display: inline-block; /* Показуємо при помилці */
}

/* Колір тексту плейсхолдера при помилці */
.amount-input-wrapper.error input::placeholder {
    color: #49505b;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}


/* Червоний бордер для обгортки інпуту при помилці */
.field-wrapper.error {
    border-bottom: 1px solid #eb5757 !important;
}

/* Якщо помилка на останньому полі (телефоні), підсвічуємо весь контейнер знизу */
.field-wrapper.phone-field.error {
    border-bottom: none;
    box-shadow: 0 1px 0 #eb5757;
}


/* Червона підсвітка для сітки інпутів */
.input-grid .field-wrapper.error {
    background-color: #fff9f9;
}

.input-grid .field-wrapper.border-right.error {
    border-right: 1px solid #eb5757;
}

.field-wrapper.error {
    background-color: #fff9f9;
}


#mega-menu-wrap-menu-1,
.elementor-element.elementor-element-7f42c7ba.elementor-widget__width-inherit.pt-0.pb-0.elementor-widget-mobile__width-initial.elementor-widget-tablet__width-initial.elementor-widget.elementor-widget-wp-widget-maxmegamenu{
    display: none!important;
}


.mobile-menu-btn{
    position: absolute;
    right: 30px;
}
.btn.menu{
    padding: 7px 25px;
    border-radius: 50px;
    cursor: pointer !important;
    align-items: center;
    display: flex;
    background: #162031;
    color: #fff;
    text-decoration: none;
}
.btn.menu:hover{
    color: #fff!important;
    background-color: #232e42;
    text-decoration: none;
}
.header-row {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 121212;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 30px;
    height: 95px;
}
.header-row .site-logo-menu{

}
.header-row .site-logo-menu img{width: 136px;}
@media screen and (max-width: 767px){
    .header-row .site-logo-menu img{width: 100px;}
}
.header-row .mobile-menu-btn{
    
}
#content{
    margin-top: 93px;
}

.elementor-widget-container,
.elementor-heading-title{
    text-align: right;
}
.elementor-18215 .elementor-element.elementor-element-d54578d{
    /*display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;*/
}
.elementor-container.elementor-column-gap-default.z-rtl{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}










.total-row small{
    font-size: /*!rtl:12px*/ 14px;
    line-height: 20px;
    font-weight: 500;
}