/* --------------------------------------- */
/* -------------- TEMPLATES -------------- */
/* --------------------------------------- */
.bido-wrapper-1{ --rounded: 0px; font-family: "Open Sans", sans-serif; display: flex; flex-direction: column; gap: 30px;}
.bido-wrapper-2{ display: flex; flex-direction: column; gap: 30px;}
.bido-wrapper-3{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
/* Make single column centered when only one donation type is visible */
.bido-wrapper-3.single-donation{ display: block; width: 100%; max-width: 500px; margin: 0 auto;}
/* Donation cards grid */
.bido-wrapper-3.donation-cards-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.bido-wrapper-3 > div{ display: flex; flex-direction: column; gap: 30px;}
.donation-card-wrapper{ display: flex; flex-direction: column; gap: 15px;}
.bido-wrapper-4{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}




.bido-template-1 { display: flex; gap: 40px; align-items: center; justify-content: space-between; margin-top: 20px;}
.bido-template-1 .txt p { font-size: 15px; font-weight: 500; margin-bottom: 0px;}
.bido-template-1 .txt span { font-size: 13px; color: #999; font-weight: 500;}

.bido-template-2{ background-color: #fff; display: flex; flex-direction: column; padding: 15px; gap: 15px; box-shadow: 0 0 25px 0 rgba(34, 41, 47, .1); border-radius: var(--rounded); overflow: hidden;}
/* .bido-template-2 .img{ width: 200px; min-width: 200px; aspect-ratio: 1.5;} */
.bido-template-2 .img{ width: 100%; aspect-ratio: 2; position: relative;}
.bido-template-2 .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.bido-template-2 .img .donation-badge{ position: absolute; top: 10px; right: 10px; background-color: var(--c-blue); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 4px; z-index: 1; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
.bido-template-2 .detail{ width: 100%;}
.bido-template-2 .detail .h{ border-bottom: 1px solid #eee; padding-bottom: 8px;}
.bido-template-2 .detail .h strong{ font-size: 15px; font-weight: 700; display: block;}
.bido-template-2 .detail .h .slogan{ font-size: 13px; font-weight: 400; color: #666; margin: 4px 0 0 0; min-height: 18px; line-height: 1.4;}
.bido-template-2 .detail .b{ display: flex; flex-direction: column; gap: 10px; padding-top: 10px;}
.bido-template-2 .detail .b > div{}
.bido-template-2 .detail .b > div label{ font-size: 13px; font-weight: 600; color: #555; margin-bottom: 3px; display: inline-block;}

.bido-template-3{ display: flex; gap: 10px; width: 100%;}
.bido-template-3 button{ flex: 1; cursor: pointer; padding: 12px 0; display: flex; justify-content: center; align-items: flex-start; text-decoration: none; font-size: 13px; border-radius: var(--rounded); transition: .2s ease; background-color: #fff; border: 1px solid #ddd; color: inherit; gap: 2px;}
.bido-template-3 button:hover { border-color: rgba(0, 101, 189, .5); box-shadow: 0 0 0 1px rgba(0, 101, 189, .5);}
.bido-template-3 button:focus { border-color: rgba(0, 101, 189, 1); box-shadow: 0 0 0 1px rgba(0, 101, 189, 1);}
.bido-template-3 button.active { border-color: var(--c-blue); box-shadow: 0 0 0 1px rgba(0, 101, 189, 1); color: var(--c-blue); pointer-events: none;}
.bido-template-3 button span{ font-size: 16px; font-weight: 600; line-height: 1;}
.bido-template-3 button small{ font-size: 11px; font-weight: 500; vertical-align: baseline;}




/* --------------------------------------- */
/* ----------- CARD TEMPLATES ------------ */
/* --------------------------------------- */
.card-template-1 { background-color: #fff; box-shadow: 0 0 25px 0 rgba(34, 41, 47, .1); border-radius: var(--rounded);}
.card-template-1 > .h { padding: 25px; position: relative;}
.card-template-1 > .h h3 { font-family: "Open Sans", sans-serif; font-size: 20px; font-weight: 500; display: flex; align-items: center; gap: 10px;}
.card-template-1 > .h h3 svg { height: 32px;}
.card-template-1 > .h .switch { position: absolute; right: calc(25px + 30px); top: 50%; transform: translateY(-50%);}
.card-template-1 > .b { padding: 0 25px 25px;}



.card-template-3 { padding: 20px; border: 2px solid #eee; border-radius: var(--rounded); transition: all .2s ease; cursor: pointer;}
.card-template-3.active { border-color: var(--c-blue);}
.card-template-3 > .h { display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.card-template-3 > .h .l { display: flex; flex-direction: column; position: relative; padding-left: 40px;}
.card-template-3 > .h .l::before { --size: 30px; border: 1px solid #ddd; color: white; width: var(--size); height: var(--size); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 50%; transform: translateY(calc(-50% - 3px)); transition: all .2s ease; content: ''; font-weight: 700;}
.card-template-3 > .h .l::after{ content: ''; display: inline-block; position: absolute; width: 15px; height: 8px; background-color: transparent; border-bottom: 2px solid; border-left: 2px solid; border-color: white; position: absolute; top: 50%; left: 7px; transform: translateY(calc(-50% - 5px)) rotate(-50deg);}
.card-template-3.active > .h .l::before { background-color: var(--c-blue); border-color: var(--c-blue);}
.card-template-3 > .h .l strong { font-weight: 600; font-size: 15px; line-height: 1; display: inline-block; margin-bottom: 1px;}
.card-template-3 > .h .l > span { font-size: 13px; color: #999; font-weight: 500;}
.card-template-3 > .h .r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; white-space: nowrap;}
.card-template-3 > .h .r strong { font-size: 24px; font-weight: 700; line-height: 1;}
.card-template-3 > .h .r > span { color: var(--main-color); font-size: 12px;}
.card-template-3 .btn-green { opacity: 0; transition: all .2s ease; pointer-events: none;}
.card-template-3.active .btn-green { opacity: 1; pointer-events: all;}







.form-template-1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 25px;}
.form-template-1 ._1 { grid-column: span 1 / span 1;}
.form-template-1 ._2 { grid-column: span 2 / span 2;}
.form-template-1 ._4 { grid-column: span 4 / span 4;}



/* ACCORDION TEMPLATE */
.accordion-template{ background-color: #fff; box-shadow: 0 0 25px 0 rgba(34, 41, 47, .1); transition: all .2s ease;}
.accordion-template.active{}
.accordion-template .t{ background-color: #fff; display: flex; align-items: center; padding: 20px 25px; text-align: left; width: 100%; border: none; outline: none; gap: 15px; cursor: pointer;}
.accordion-template .t .icon{ pointer-events: none; transition: all .2s ease; --size: 31px; width: var(--size); height: var(--size); min-width: var(--size); display: flex; align-items: center; justify-content: center; background-color: var(--c-blue); border-radius: 50%; padding: 2px 0 0 0;}
.accordion-template .t .icon svg{ fill: #fff;}
.accordion-template.active .t .icon{ transform: rotate(-90deg);}
.accordion-template .t strong{ font-size: 20px; font-weight: 500; color: var(--c-darkest-blue);}
.accordion-template .b{ display: none;}
.accordion-template .b > div{ padding: 25px; padding-top: 0; font-size: 14px; font-weight: 400;}
.accordion-template .b > div p{ margin: 0;}
.accordion-template .b > div table{ font-size: inherit;}
.accordion-template .b > div table tr{}
.accordion-template .b > div table tr td{ padding-top: 3px; padding-bottom: 3px;}
.accordion-template .b > div table tr td:nth-child(1){ width: 100px; min-width: 100px;}
.accordion-template .b > div table tr td:nth-child(2){ padding-left: 10px; padding-right: 10px;}







.ui-form-label { font-family: "Open Sans", sans-serif; font-weight: 500; font-size: 14px; display: block; margin-bottom: 5px; color: #555;}
.ui-form-label > span { color: red; font-weight: 600;}
.ui-form-control.textarea { height: 120px; padding: 1rem;}
.ui-form-control.textarea.v2 { height: 165px;}
.ui-form-control, .ui-form-select { font-family: "Open Sans", sans-serif; font-weight: 500; border: 1px solid #eee; border-radius: var(--rounded); width: 100%; height: 40px; padding: 0 15px; font-size: 14px; transition: .4s ease; outline: none; margin: 0;}
.ui-form-control::placeholder, .ui-form-select::placeholder{ opacity: .5 !important;}
.ui-form-select { color: #777;}
.ui-form-control:hover { box-shadow: 0 0 0 2px rgba(0, 101, 189, .5);}
.ui-form-control:focus { box-shadow: 0 0 0 2px rgba(0, 101, 189, 1); color: inherit !important; }



.input-template-1 { display: flex; flex-direction: column; gap: 3px;}
.input-template-1 label { font-size: 13px; font-weight: 400; color: #4d4f57;}
.input-template-1 > div { display: flex;}
.input-template-1 > div button { height: 40px; aspect-ratio: 1; background-color: #f5f5f5; border: 1px solid #ddd; border-right: 0; border-radius: var(--rounded); border-top-right-radius: 0; border-bottom-right-radius: 0;}
.input-template-1 > div button + input { border-top-right-radius: 0; border-bottom-left-radius: 0; outline: none;}
.input-template-1 > div :is(input, select, textarea) { font-size: 13px; height: 40px; font-weight: 400; width: 100%; border: 1px solid #ddd; padding: 10px 12px; border-radius: var(--rounded);}
.input-template-1 > div :is(input, select, textarea)::placeholder { opacity: .6;}
.input-template-1 > div textarea { height: 150px;}



.chckbx { position: relative;}
.chckbx input { position: absolute; cursor: pointer; transform: translate(6.5px, 8px); top: 0; width: 2px; height: 2px;}
.chckbx input::before { box-sizing: border-box; box-shadow: inset 0 0 7px 0px rgba(0, 0, 0, 1); content: ''; position: absolute; left: 0; top: 0; display: inline-block; box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, .1); border: 1px solid rgb(214, 220, 232); background-color: white; width: 17px; height: 17px; border-radius: 3px;}
.chckbx input:checked::before { font-size: 11px; font-weight: 900; color: white; border-color: unset; background-color: var(--c-blue); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 17px; height: 17px; content: ''; box-shadow: inset 0 0 0 5px var(--c-blue), inset 0 0 0 10px white;}
.chckbx input::before, .chckbx input[type="checkbox"]:checked:before { transform: translate(-6.5px, -5.5px);}
.chckbx input[type="radio"]::before{ border-radius: 50%;}
.chckbx label { padding-left: 23px; font-size: 12px; color: #555; font-weight: 500; line-height: 1.6;}
.chckbx label a { text-decoration: none; color: black;}
.chckbx label a:hover { text-decoration: underline;}




.iti { width: 100%;}
.iti__search-input{ outline: none;}
.iti__country-list li{ margin: 0;}

.iti--allow-dropdown input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input[type=text],
.iti--allow-dropdown input.iti__tel-input[type=tel]{ padding-left: calc(3px + var(--iti-selected-country-arrow-padding));}


input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type=number] { -moz-appearance:textfield;}






.logo{ height: fit-content;}

.btn-v1{ line-height: 1; font-size: 40px; padding: 10px 20px;}
.btn-v2{ line-height: 1; padding: 30px 25px 20px; background-color: #fff; color: var(--c-blue);}
.btn-v3{ line-height: 1; padding: 15px 25px 10px; border: none; border-radius: 0;}


.social-btns{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;}
.social-btns > a{ text-decoration: none;}
.social-btns > a svg{ width: 60px; fill: #fff;}





body,
.bg-white{ background-color: var(--c-darkest-blue);}

.white-txt{ color: #fff;}

.fill{ min-height: calc(100dvh - 155px);}




@media screen and (max-width: 1024px) {
    /* Make one column on mobile */
    .bido-wrapper-3,
    .bido-wrapper-3.donation-cards-grid{ display: flex; flex-direction: column; grid-template-columns: unset;}
}
@media screen and (max-width: 600px) {
    .form-template-1{ display: flex; flex-direction: column;}
    .card-template-3 > .h{ flex-direction: column; align-items: flex-start; gap: 5px;}
    .card-template-3 > .h .r{ padding-left: 40px;}
    /* Badge mobil uyum */
    .bido-template-2 .img .donation-badge{ font-size: 10px; padding: 5px 10px; top: 8px; right: 8px;}
}