/* Font rendering improvements for sharper text */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: 'Open Sans', Verdana, sans-serif;
}

/* Apply font smoothing to headings */
h1, h2, h3, h4, h5, h6, aside h2, .btn, .title, .fillcounter span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: 'Open Sans', Verdana, sans-serif;
}

aside h3 p {
    font-family: 'Open Sans', Verdana, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 150%;
    padding-bottom: 10px;
}

img.logos {
    height: 50px;
    margin-top: 0px;
}

/* Apply font smoothing to form elements */
input, textarea, select, button, label {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Apply font smoothing to buttons and links */
.btn, a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.radio-group input[type="radio"] + span {
    line-height: 42px;
    color: #212121;
    border: 2px solid #c3c3c3;
    line-height: 40px;
    font-size: 17px;
}

.radio-group input[type="radio"] + span.active {
    background-color: #f84f37 !important;
    color: #fff;
    border-color: #f84f37;
    font-weight: 600;
    line-height: 40px;
}

.form-group.title {
    margin: 12px 0 12px 1px;
    font-size: 24px !important;
    padding-left: 0 !important;
}

.form-group.title span {
    font-family: "Open Sans", Verdana, sans-serif;
    font-size: 15px !important;
    line-height: 150%;
    padding-top: 5px;
    display: block;
}

.title.smalltitle {
    font-size: 24px;
    margin: 2px 0 16px 0;
    line-height: 125%;
}

.title.smallsubtitle {
    padding-bottom: 0;
    margin-bottom: 0;
    display: none;
    
}

.title.smallsubtitle.termijn_extra_label_subtitle p {
    padding-bottom: 0;
    margin-bottom: 0;
}

.form_extra_text {
    font-size: 15px;
    line-height: 180%;
    margin: 16px 0;
}

.animateme {
    font-size: 15px;
}

.popBubble {
    text-align: left;
    width: 100%;
    min-height: 30px;
    font-size: 15px;
    line-height: 25px;
    border: 2px solid #c3c3c3;
    border-radius: 5px;
    padding: 8px 15px;
    background-color: white;
    color: #636363;
    margin: -1px 0 10px 0;
}

.popBubble:before {
    content: '';
    position: relative;
    top: -20px;
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-left: -16px;
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border: 2px solid #c3c3c3;
    border-bottom: 0px;
    border-right: 0px;
}

.popBubble.center:before {
    left: 50%;
}

.popBubble.left:before {
    left: 16%;
}

.popBubble.right:before {
    left: 88%;
}

aside {
    margin-top: -120px;
    padding: 45px 40px 45px 45px;
}

aside .row {
    margin-left: -6px;
    margin-right: 0;
}

aside .form-group.lb_submit {
    margin: 0;
    width: calc(100% - 6px);
    padding: 0;
}

aside .btn {
    max-width: 100%;
    padding: unset;
    height: 50px;
}

aside .btn span {
    font-size: 18px !important;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-weight: 700;
        margin-right: 0;
        line-height: 34px;
        margin-bottom: 0;
}

aside .btn span.amount {
    margin-left: 5px;
    font-size: 18px !important;
}

aside .form-group.lb_submit {
    margin: 0;
}

.glyphicon-eur:before, .glyphicon-euro:before {
    font-size: 18px !important;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-weight: 700;
    margin-right: 2px;
}

.tab.donate .col-sm-12 {
    padding-right: 0 !important;
}

aside div[class*="col-"].extramargin {
    padding-right: 0;
}

/* Style for payment frequency selection tabs */
ul#tab-container-nav {
    width: calc(100% + 6px);
}

#tab-container-payment-nav a, #tab-container-nav a {
    position: relative;
    padding: 8px 16px 8px 40px;
    margin-right: 6px;
    background-color: #ffffff;
    border: 2px solid #fdcac3;
    border-radius: 5px;
    text-decoration: none;
    color: #636363;
    font-weight: normal;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left;
}

/* Radio button indicator - unselected state */
#tab-container-payment-nav a:before, #tab-container-nav a:before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid #636363;
    border-radius: 50%;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* Active state - reddish-brown border and selected radio button */
#tab-container-payment-nav a.active, #tab-container-nav a.active {
    border-color: #dc5d42;
    border-width: 2px;
    color: #000000;
    font-weight: 600;
}

/* Active state radio button - filled with reddish-brown */
#tab-container-payment-nav a.active:before, #tab-container-nav a.active:before {
    border-color: #636363;
    background-color: #dc5d42;
    box-shadow: inset 0 0 0 3px #ffffff;
}

/* Hover state for better UX */
#tab-container-payment-nav a:hover:not(.active), #tab-container-nav a:hover:not(.active) {
    border-color: #fdcac3;
    color: #333333;
}

/* Span elements inside anchors - consistent spacing and left alignment */
#tab-container-payment-nav a span, #tab-container-nav a span {
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    vertical-align: middle;
}

/* Ensure active and inactive spans have the same positioning */
#tab-container-payment-nav a.active span, #tab-container-nav a.active span,
#tab-container-payment-nav a:not(.active) span, #tab-container-nav a:not(.active) span {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}


/* Style for step-up selection tabs */

.termijn-hide-reveal-row span {
    display: inline-block;
    width: 50%;
}

.termin_show_amounts.buttonview {
    position: relative;
    padding: 2px 16px 0px 40px;
    margin-right: 6px;
    background-color: #ffffff;
    border: 2px solid #fdcac3;
    border-radius: 5px;
    text-decoration: none;
    color: #636363;
    font-weight: normal;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left;
    width: calc(100% - 8px);
}

/* Second button (termijn-hide) should be 100% width */
.termin_show_amounts.termijn-hide.buttonview {
    width: 100%;
}

label.checkbox_overwrite {
    font-size: 15px;
    line-height: 150%;
}

aside div[class*="col-"] {
    padding-left: 0;
    padding-right: 6px;
    margin-bottom: 7px;
}



/* Radio button indicator - unselected state */
.termin_show_amounts.buttonview:before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid #636363;
    border-radius: 50%;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* Active state - reddish-brown border and selected radio button */
.termin_show_amounts.buttonview.active {
    border-color: #dc5d42;
    border-width: 2px;
    color: #000000 !important;
    font-weight: 600;
    border-radius: 5px;
    text-align: left;
}

/* Active state radio button - filled with reddish-brown */
.termin_show_amounts.buttonview.active:before {
    border-color: #636363;
    background-color: #dc5d42;
    box-shadow: inset 0 0 0 3px #ffffff;
}

/* Hover state for better UX */
.termin_show_amounts.buttonview:hover:not(.active) {
    border-color: #fdcac3;
    color: #333333;
}

/* Span elements inside anchors - consistent spacing and left alignment */
button.termin_show_amounts.buttonview label {
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    vertical-align: middle;
}

/* Ensure active and inactive spans have the same positioning */
button.termin_show_amounts.buttonview.active label,
button.termin_show_amounts.buttonview:not(.active) label {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
}

button.termin_show_amounts.buttonview.active label
 {
    font-weight: 600;

    color: #212121;
}

.radio-inline input[type=radio] {
    position: relative;
    float: left;
    margin-right: 6px;
    border: 1px solid #c3c3c3;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    appearance: radio;
    -webkit-appearance: radio;
    width: 18px;
    height: 18px;
    margin: 1px 6px 0 0;
    accent-color: #F84F37;
}

.radio-inline.radio_container.anderswrappercls
 {
    margin: -2px 0 5px 0;
}

.static-amount-value {
    position: absolute;
    left: 0;
    font-size: 15px;
    top: 12px;
}

.form-group input.form-control.anders:focus
 {
    border-color: #dc5d42;
    box-shadow: none;
}


/* Subtitle styling for set_1 elements */
.set_1.row,
.form-group.title.set_1,
.set_1.title {
    font-weight: 600;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h2.form_header_title {
    font-size: 32px;
    letter-spacing: -0.5px;
    line-height: 120%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

aside .form-control {
    border: 1px solid #212121;
}

.form-group input.form-control {    
    font-weight: normal;
}

.form-group input.form-control.anders {
    border: 2px solid #c3c3c3;
    font-weight: 700;
}

.error-message .error {
    color: red !important;
    background-color: transparent;
    border: 1px solid red;
    border-top: 0;
    margin-bottom: 2px;
    padding-top: 7px !important;
    margin-top: 2px;
}

aside .form-group input.error {
    box-shadow: none !important;
    border: 1px solid #212121;
}


.contentArea {
    margin: -30px 0px 0px 0px;
}

.contentArea.right-content {
    margin-left: 36px;
    margin-top: 0px;
}

.contentArea p { 
font-size: 15px;
font-size: 17px;
-webkit-font-smoothing: antialiased;
line-height: 1.6em;
}

.contentArea ul li { 
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6em;
    }
    

.contentArea h1 {
    font-size: 32px;
    color: #212121;
    margin-bottom: 20px;
}

#main_content {
    color: #636363;
}

.rb_textblock {
    margin-right: 10px;
    font-size: 16px;
}


/* Slide-in animation for form and content elements */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Initial state - elements start hidden */
#form,
#form .content,
aside,
.form-group {
    opacity: 0;
    animation: fadein 0.8s ease-out forwards;
}

/* Staggered animation delays for form elements */
#form {
    animation-delay: 0.1s;
}

#form .content {
    animation-delay: 0.2s;
}

aside {
    animation-delay: 0.3s;
    background-color: #f4f4f4 !important;
    border: none;
}

.form-group {
    animation-delay: 0.4s;
}

/* Stagger delays for multiple form groups */
.form-group:nth-child(1) {
    animation-delay: 0s;
}

.form-group:nth-child(2) {
    animation-delay: 0.1s;
}

.popBubble {
    animation-delay: 0.4s;
}

.form-group:nth-child(3) {
    animation-delay: 0.2s;
}

.form-group:nth-child(4) {
    animation-delay: 0.3s;
}

.form-group:nth-child(n+5) {
    animation-delay: 0.4s;
}

/* Ensure animations work on page load */
@media (prefers-reduced-motion: no-preference) {
    #form,
    #form .content,
    aside,
    .form-group {
        will-change: opacity;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    #form,
    #form .content,
    aside,
    .form-group {
        animation: none;
        opacity: 1;
    }
}

/* Wave mask overlay for header banner */
.mainBanner {
	position: relative;
	overflow: hidden;
}

.HeroBig__media__wave_mask {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 101%;
	height: 100px;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg width='1440' height='83' viewBox='0 0 1440 83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1440 82.3432V3.12935C1440 3.12935 1235.85 78.3432 954 78.3432C869.917 78.3432 733.676 60.1683 598.309 42.11C523.83 32.1744 449.617 22.2741 384.5 15.4556C171.24 -6.87545 0 3.12935 0 3.12935V82.3432H1440Z' fill='white'/%3E%3C/svg%3E");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: bottom center;
	pointer-events: none;
    margin: 0 0 -1px 0;
}

/* Ensure banner caption stays above wave mask */
.bannercaption {
	z-index: 2;
}

/* Ensure form and main content stay above wave mask */
main,
aside,
#form,
.contentArea {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1500px) {

    .HeroBig__media__wave_mask {
        height: 120px;
        margin: 0 0 -2px 0;
    }
    
}

@media screen and (max-width: 599px) {

aside {
    margin-top: 20px;
    padding: 25px 20px 25px 25px;
}

.contentArea {
    margin: 0 !important;
}

.img-responsive.logo {
    margin: 10px 0 0 0px;
}

}