/* JoomDonation YOOtheme Pro Enhancements */



/* --- ICON FONTS (Keep if JoomDonation relies heavily on them) --- */
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=3.2.1');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
       url('fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),
       url('fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
       url('fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
  display: inline-block; /* Ensure proper rendering */
}
a [class^="icon-"], a [class*=" icon-"] { display: inline; }
.icon-heart:before { content: "\f004"; }
.icon-twitter:before { content: "\f099"; }
.icon-facebook:before { content: "\f09a"; }
.icon-google-plus:before { content: "\f0d5"; }
.icon-linkedin:before { content: "\f0e1"; }
.icon-pinterest-p:before { content: "\f231"; }

/* --- GENERAL FORM & LAYOUT IMPROVEMENTS (#os_form / #donation-form) --- */
#os_form, #donation-form {
  font-family: var(--global-font-family, sans-serif); /* YOOtheme default font */
}

/* Section Headings */
#os_form h3.jd-page-title,
#os_form h4.jd-heading,
#os_form h4.eb-heading {
  font-size: var(--h4-font-size, 1.5rem); /* YOOtheme H4 size */
  font-weight: var(--heading-font-weight, 500);
  color: var(--heading-color, #333);
  margin-top: var(--section-title-margin-top, 2rem);
  margin-bottom: var(--section-title-margin-bottom, 1.5rem);
  padding-bottom: var(--section-title-padding-bottom, 0.75rem);
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  line-height: var(--heading-line-height, 1.4);
}
#os_form > .row.form-group.form-row:first-of-type h4.jd-heading,
#os_form > h4.jd-heading:first-of-type {
  margin-top: 0;
}

/* Two-Column Layout for Form Fields */
#os_form .row.form-group.form-row {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping for responsiveness */
  margin-left: -15px; /* Counter YOOtheme grid gutter if needed */
  margin-right: -15px;/* Counter YOOtheme grid gutter if needed */
  margin-bottom: var(--form-row-margin-bottom, 1.5rem); /* Space between rows */
}

#os_form .form-control-label.col-md-3 {
  flex: 0 0 100%; /* Stack on small screens by default */
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  font-weight: var(--form-label-font-weight, 500);
  color: var(--form-label-color, #444);
  margin-bottom: 0.5rem; /* Space below label when stacked */
  line-height: 1.5;
}

#os_form .col-md-9 { /* Input field container */
  flex: 0 0 100%; /* Stack on small screens by default */
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* Apply two-column layout for medium screens and up */
@media (min-width: 768px) { /* Bootstrap's 'md' breakpoint */
  #os_form .form-control-label.col-md-3 {
    flex: 0 0 25%; /* Label takes 25% */
    max-width: 25%;
    text-align: right;
    padding-top: calc(var(--input-padding-vertical, 0.5rem) + 1px); /* Align with input text */
    margin-bottom: 0;
  }
  #os_form .col-md-9 {
    flex: 0 0 75%; /* Input takes 75% */
    max-width: 75%;
  }

}

/* Input Styling (YOOtheme UIkit like) */
#os_form .form-control,
#os_form .form-select,
#os_form textarea.input-large,
#os_form input[type="text"],
#os_form input[type="email"],
#os_form input[type="password"],
#os_form input[type="number"],
#os_form select {
  display: block;
  width: 100%;
  padding: var(--input-padding-vertical, 0.625rem) var(--input-padding-horizontal, 0.75rem);
  font-size: var(--input-font-size, 1rem);
  font-weight: var(--input-font-weight, 400);
  line-height: var(--input-line-height, 1.5);
  color: var(--input-color, #666);
  background-color: var(--input-background, #fff);
  background-clip: padding-box;
  border: 1px solid var(--input-border, #e5e5e5);
  appearance: none;
  border-radius: var(--input-border-radius, 3px);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  box-sizing: border-box; /* Ensure padding and border are inside width/height */
}
#os_form input.input-large { width: 100% !important; } /* Override JoomDonation's fixed width */
#os_form textarea.input-large { min-height: 120px; resize: vertical; }

#os_form .form-control:focus,
#os_form .form-select:focus,
#os_form textarea.input-large:focus,
#os_form input[type="text"]:focus,
#os_form input[type="email"]:focus,
#os_form input[type="password"]:focus,
#os_form input[type="number"]:focus,
#os_form select:focus {
  color: var(--input-focus-color, #666);
  background-color: var(--input-focus-background, #fff);
  border-color: var(--global-primary-background, #1e87f0); /* YOOtheme primary */
  outline: 0;
  box-shadow: 0 0 0 2px rgba(var(--global-primary-background-rgb, 30, 135, 240), 0.2);
}

#os_form .form-select {
  background-image: var(--form-select-background-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-position: right var(--input-padding-horizontal, 0.75rem) center;
  background-size: 16px 12px;
}

/* Required asterisk */
#os_form .required {
  padding-left: 3px;
  color: var(--global-danger-color, red);
  font-weight: bold;
}

/* Specific JoomDonation Elements */
#os_form .jd-field-description {
  font-size: var(--small-font-size, 0.875rem);
  color: var(--text-muted-color, #888);
  font-style: italic;
  margin-top: 0.25rem;
  display: block;
}

/* Switch-like buttons (Amount, Payment Fee, Payment Gateway) */
#os_form .switch-amounts,
#os_form .switch-payment-fee,
#os_form .switch-payment-gateway {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* Space between buttons */
  margin-bottom: 1rem;
  margin-left: 0; /* Reset JoomDonation's margin */
}

#os_form .switch-amounts input,
#os_form .switch-payment-fee input,
#os_form .switch-payment-gateway input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

#os_form .switch-amounts label,
#os_form .switch-payment-fee label,
#os_form .switch-payment-gateway label {
  background-color: var(--button-default-background, #f8f8f8);
  color: var(--button-default-color, #666);
  line-height: 1.5;
  text-align: center;
  padding: var(--button-padding-vertical, 0.5rem) var(--button-padding-horizontal, 1rem);
  margin-right: 0; /* Handled by gap */
  border: 1px solid var(--button-default-border, #e5e5e5);
  box-shadow: none;
  transition: all 0.1s ease-in-out;
  border-radius: var(--button-border-radius, 3px);
  cursor: pointer;
  font-weight: 500;
}

#os_form .switch-amounts label:hover,
#os_form .switch-payment-fee label:hover,
#os_form .switch-payment-gateway label:hover {
  background-color: var(--button-default-hover-background, #e8e8e8);
  border-color: var(--button-default-hover-border, #ccc);
  opacity: 1; /* Override original opacity */
}

#os_form .switch-amounts input:checked + label,
#os_form .switch-payment-fee input:checked + label {
  /* background-color is handled by JoomDonation inline PHP style */
  color: #fff !important; /* Ensure text is white */
  border-color: transparent; /* Or match PHP color */
}

#os_form .switch-payment-gateway input:checked + label {
  /* border-color is handled by JoomDonation inline PHP style for selected state */
  /* Add background for consistency if needed */
  background-color: var(--button-primary-hover-background, #1470c4);
  color: var(--button-primary-hover-color, #fff);
}
#os_form .switch-payment-gateway label { min-height: auto; width: auto; padding: 0.75rem 1rem;} /* Adjust width for content */
#os_form .switch-payment-gateway label img { max-height: 25px; margin-right: 0.5rem; vertical-align: middle; }


/* "Other Amount" input */
#os_form #amount_container .input-group {
  display: flex;
  width: 100%; /* Make it full width of its column */
  max-width: 300px; /* Or a preferred max-width */
}
#os_form #amount_container .input-group .input-group-text { /* Bootstrap 5 class for addons */
  padding: var(--input-padding-vertical, 0.625rem) var(--input-padding-horizontal, 0.75rem);
  background-color: var(--muted-background, #f0f0f0);
  border: 1px solid var(--input-border, #e5e5e5);
  border-right: 0;
  border-radius: var(--input-border-radius, 3px) 0 0 var(--input-border-radius, 3px);
  color: var(--text-muted-color, #555);
  display: flex;
  align-items: center;
}
#os_form #amount_container .input-group #amount {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-grow: 1;
  font-weight: bold;
  font-size: 1.1rem; /* Make "other amount" input slightly larger */
}

/* Credit Card Fields Section */
#os_form #creditcarddivmain { margin-top: 1rem; }
#os_form .creditcarddiv {
  background-color: var(--card-default-background, #f9f9f9);
  padding: var(--card-body-padding-vertical, 1rem) var(--card-body-padding-horizontal, 1.25rem);
  border-radius: var(--card-border-radius, 6px);
  border: 1px solid var(--card-border, #e5e5e5);
}
#os_form .creditcarddiv .row { /* Inner rows in CC section */
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
#os_form .creditcarddiv .row > [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 1rem;
}
#os_form .creditcarddiv .row:last-child > [class*="col-"] {
  margin-bottom: 0;
}
#os_form .creditcarddiv label {
  font-size: var(--small-font-size, 0.875rem);
  margin-bottom: 0.25rem;
  color: var(--text-muted-color, #555);
  display: block;
  font-weight: var(--form-label-font-weight, 500);
  padding-top: 0; /* Override general label padding */
}

/* Total Donated Amount Display */
#os_form #donatedAmount { display: inline-block; min-width: auto; margin-top: 0.5rem; }
#os_form .donated-amount {
  display: inline-flex;
  align-items: center;
  border-radius: var(--button-border-radius, 3px);
  overflow: hidden;
  margin-bottom: 0; /* Override its default margin */
  /* border will be set by inline style */
}
#os_form .donated-amount-label {
  /* background-color will be set by inline style */
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 500;
  margin-right: 0; /* Removed its default margin */
  width: auto; /* Let content define width */
}
#os_form .donated-amount-value {
  padding: 0.5rem 1rem;
  font-weight: bold;
  font-size: 1.1em;
  background-color: var(--background, #fff);
  color: var(--text-color, #333);
}

/* Form Actions (Submit Button) */
#os_form .form-actions {
  margin-top: var(--section-padding-vertical, 2rem);
  padding-top: var(--section-padding-vertical, 1.5rem);
  border-top: 1px solid var(--border-color, #e5e5e5);
  text-align: right;
}
#os_form #btn-submit.uk-button-primary { /* YOOtheme styles should apply */
  font-size: var(--button-font-size, 1rem);
  padding: var(--button-padding-vertical, 0.625rem) var(--button-padding-horizontal, 1.25rem);
}

/* --- CAMPAIGN DISPLAY & OTHER ELEMENTS --- */
.jd-container .jd-row, .jd-container .jd-row-grid { /* General campaign item wrapper */
  background-color: var(--card-default-background, #fff);
  border: 1px solid var(--card-border, #e5e5e5);
  border-radius: var(--card-border-radius, 6px);
  margin-bottom: var(--global-medium-margin, 1.5rem);
  box-shadow: var(--card-default-box-shadow, 0 2px 8px rgba(0,0,0,0.06));
  overflow: hidden; /* For image corners */
}
.jd-container .jd-row .jd-description, /* Old structure */
.jd-container .jd-row-grid .jd-description1 /* New grid structure description */ {
  padding: var(--card-body-padding-horizontal, 1.25rem);
  background: transparent; /* It's on the parent now */
}
.jd-container .jd-row .jd-description:before { display: none; } /* Remove skew effect */

.jd-container .jd-description img,
.jd-container .jd-description-photo img {
  float: none; /* Remove float for better control */
  margin: 0 0 var(--global-margin, 1rem) 0; /* Space below image */
  max-width: 100%;
  height: auto;
  border-radius: var(--image-border-radius, 3px);
}

h3.jd_title {
  font-size: var(--h3-font-size, 1.8rem);
  font-weight: var(--heading-font-weight, 500);
  margin-bottom: 0.75rem;
}
h3.jd_title a {
  color: inherit;
  text-decoration: none;
}
h3.jd_title a:hover {
  color: var(--global-primary-background, #1e87f0);
}

/* Progress Bar */
.donate-details .progress, .donate-details-mod .progress,
.campain-list .campaign-details .campaign-raised-goal .process-bar {
  height: var(--progressbar-height, 8px);
  background-color: var(--progressbar-background, #f0f0f0);
  border-radius: var(--progressbar-border-radius, 100px);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.donate-details .progress .bar, .donate-details-mod .progress .bar,
.campain-list .campaign-details .campaign-raised-goal .process-bar .process {
  background-color: var(--global-primary-background, #1e87f0);
  background-image: none;
  box-shadow: none;
  height: 100%;
  border-radius: var(--progressbar-border-radius, 100px);
  transition: width 0.6s ease;
}
.donate-details .progress-striped .bar, /* Remove complex gradients for cleaner look */
.donate-details-mod .progress-striped .bar {
    background-image: none;
}

/* Donate Details Section */
.donate-details {
  background: var(--muted-background, #f8f9fa);
  padding: 1rem;
  color: var(--text-muted-color, #666);
  border-top: 1px solid var(--border-color, #e5e5e5);
  margin-top: 1rem;
}
.donate-details strong {
  color: var(--text-emphasis-color, #333);
  font-size: 1.1rem;
}

/* --- DARK LAYOUT IMPROVEMENTS --- */
.dark_layout #os_form .form-control,
.dark_layout #os_form .form-select,
.dark_layout #os_form textarea.input-large {
  background-color: var(--dark-input-background, #2b2b2b);
  border-color: var(--dark-input-border, #444);
  color: var(--dark-input-color, #ccc);
}
.dark_layout #os_form .form-control:focus,
.dark_layout #os_form .form-select:focus,
.dark_layout #os_form textarea.input-large:focus {
  border-color: var(--global-primary-background, #1e87f0); /* Keep focus color consistent or use dark theme primary */
  box-shadow: 0 0 0 2px rgba(var(--global-primary-background-rgb, 30, 135, 240), 0.3);
}
.dark_layout #os_form .form-control-label,
.dark_layout #os_form h4.jd-heading {
  color: var(--dark-heading-color, #f0f0f0);
}
.dark_layout .jd-container .jd-row, .dark_layout .jd-container .jd-row-grid {
  background-color: var(--dark-card-background, #333);
  border-color: var(--dark-card-border, #555);
  box-shadow: var(--dark-card-box-shadow, 0 2px 8px rgba(0,0,0,0.15));
}
.dark_layout .donate-details {
  background: var(--dark-muted-background, #2a2a2a);
  border-top-color: var(--dark-border-color, #444);
  color: var(--dark-text-muted-color, #aaa);
}
.dark_layout .donate-details strong { color: var(--dark-text-emphasis-color, #eee); }

.dark_layout .switch-amounts label,
.dark_layout .switch-payment-fee label,
.dark_layout .switch-payment-gateway label {
  background-color: var(--dark-button-default-background, #404040) !important; /* Override inline */
  color: var(--dark-button-default-color, #ccc) !important;
  border-color: var(--dark-button-default-border, #555) !important;
}
.dark_layout .switch-amounts input:checked + label,
.dark_layout .switch-payment-fee input:checked + label {
  /* background-color still from PHP, ensure contrast with #FFF text */
}
.dark_layout .switch-payment-gateway input:checked + label {
  background-color: var(--button-primary-hover-background, #1470c4) !important; /* Or dark theme primary */
  color: #fff !important;
}

/* --- HIDING ELEMENTS --- */
.hidden,
.jd_invisible_to_visitors,
/* Add more specific selectors for other custom fields you want to ensure are hidden */
#os_form .row.form-group.form-row[style*="display:none"],
#os_form .row.form-group.form-row[style*="display: none"] {
  display: none !important;
}

/* Ensure form.form-check-input are visible as checkboxes */
.form-check-input {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: auto !important; /* Override any conflicting width */
  height: auto !important;
  margin-right: 0.5em; /* Space between checkbox and its text */
  vertical-align: middle;
}
#os_form fieldset label.checkbox {
    display: flex;
    align-items: center;
    font-weight: normal;
}

/* Small fix for specific input widths from JoomDonation */
.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge {
    width: 100% !important; /* Make all inputs full-width within their column */
}

/* Remove fixed height from Square/Stripe input wrappers if it causes issues */
#sq-cvv, #sq-expiration-date, #sq-card-number, #field_zip_input {
  height: auto !important; /* Let content or input define height */
  min-height: calc( (var(--input-padding-vertical, 0.625rem) * 2) + var(--input-line-height, 1.5) * 1em + 2px ); /* Approximate YOOtheme input height */
}
.hidden {
    display: none !important; /* Ensure hidden elements are not displayed */
}