/*

Custom Styles for GiveWP Classic Template (Iframe)

These styles will be injected into the GiveWP Classic donation form iframe
to allow custom styling that matches your theme.

In this file:

A. Fonts
B. Document
C. Form Container & Header
D. Stats Panel
E. Form Fields
F. Donation Amount
G. Donation Levels
H. Progress Meter
I. Donation Summary
J. Buttons
K. Messages

*/

/* Import Adobe Typekit (Komet) - Must be first! */
@import url("https://use.typekit.net/gzl5azv.css");

/*////////////////////////////////////////////
// A. CSS Variables
////////////////////////////////////////////*/

:root {
    --givewp-border-width: 1px;
    --givewp-border-color: #bbbbbb;
}

/*////////////////////////////////////////////
// B. Fonts
////////////////////////////////////////////*/

/* Apply theme font stack */
* {
    font-family: komet, sans-serif !important;
}

/*////////////////////////////////////////////
// C. Document
////////////////////////////////////////////*/

body {
    display: block;
}

/*////////////////////////////////////////////
// D. Form Container & Header
////////////////////////////////////////////*/

.give-form-wrap {
    inline-size: unset !important;
}

.give-form-header,
.give-form-header-top-wrap {
    background: unset !important;
}

.give-form-header {
    border-radius: unset !important;
    margin-inline: unset !important;
    padding-block: clamp(1.75rem, -.9166666667rem + 8.3333333333vw, 3.375rem);
    padding-inline: clamp(1rem, -4.5384615385rem + 17.3076923077vw, 4.375rem);
}

.give-form-header-top-wrap {
    display: none;
}

.give-form-title {
    margin: unset !important;
}

.give-form-title::after {
    display: none;
}

/*////////////////////////////////////////////
// E. Stats Panel
////////////////////////////////////////////*/

.give-form-stats-panel,
.give-form-goal-progress {
    background-color: transparent;
}

.give-form-stats-panel {
    border: var(--givewp-border-width) solid var(--givewp-border-color);
}

.give-form-goal-progress {
  /* background-color:#fff;
  border-end-end-radius:inherit;
  border-end-start-radius:inherit;
  inline-size:100%;
  padding:1.25rem */
  border-block-start: var(--givewp-border-width) solid var(--givewp-border-color); 
  padding: 1.25rem;
}

.give-form-goal-progress-meter {
  background-color:#c8c8c8;
  block-size:1.5em;
  border-radius: unset;
  box-shadow: unset;
  /* inline-size:100%;
  overflow:hidden;
  overflow:clip */
}

.give-form-stats-panel-list {
    border-radius: inherit;
    color: #4c4c4c;
    display: flex;
    flex-wrap: wrap;
    inline-size: 100%;
    justify-content: center;
    justify-items: stretch;
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
    text-align: center;
}

.give-form-stats-panel-stat:first-child,
.give-form-stats-panel-stat:nth-child(2) {
    position: relative;
}

.give-form-stats-panel-stat:first-child:after,
.give-form-stats-panel-stat:nth-child(2):after {
    background-color: var(--givewp-border-color);
    /* block-size: 100%;
    content: "";
    display: block; */
    inline-size: var(--givewp-border-width);
    /* inset-block-start: 0;
    inset-inline-start: calc(100% + .03125rem);
    position: absolute; */
}

.give-form-stats-panel-stat {
    /* color: #767676; */
    font-weight: 400;
    inline-size: 33.3333333333%;
    padding: 1rem;
}

.give-form-stats-panel-stat-number {
    /* color: #424242; */
    /* display: block; */

    font-weight: 700;
    font-size: 1.25rem;
}

/*////////////////////////////////////////////
// F. Form Fields
////////////////////////////////////////////*/

.give-form input[type="text"],
.give-form input[type="email"],
.give-form input[type="tel"],
.give-form select,
.give-form textarea {
    border: unset;
}

/*////////////////////////////////////////////
// G. Donation Amount
////////////////////////////////////////////*/

.give-donation-amount {
    align-items: center;
    background-color: #fff;
    border: unset;
    border-radius: var(--border-radius-2);
    display: flex;
}

.give-donation-amount .give-currency-symbol {
    font-size: 2rem;
}

.give-donation-amount .give-text-input {
    font-size: 2rem;
    text-align: start;
}

.give-amount-heading,
.give-tributes-dedicate-donation .give-tributes-legend,
.give-payment-details-section legend:first-of-type,
.give-tributes-dedicate-donation legend,
.give-personal-info-section fieldset:not(.ffm-field-container>fieldset) legend:first-of-type {
  border-block-end: var(--givewp-border-width) solid var(--givewp-border-color);
  font-weight: 700;
}
.give-donation-summary-table-wrapper thead:first-of-type > tr > th:first-of-type {
  font-weight: 700;
}

.give-personal-info-section fieldset:not(.ffm-field-container>fieldset) legend:first-of-type {
  color: #333;
  font-size: clamp(1.25rem, .8397435897rem + 1.2820512821vw, 1.5rem);
  line-height: 1.3;
  margin-block-end: 1rem;
  padding-block-end: .75rem;
  width: 100%;
}

/*////////////////////////////////////////////
// H. Donation Levels
////////////////////////////////////////////*/

.give-donation-levels-wrap {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--givewp-spacing-2);
    inline-size: 100%;
}

@media (min-width: 768px) {
    .give-donation-levels-wrap {
        grid-template-columns: repeat(4, 1fr);
    }
}

.give-donation-level-btn .give-amount-decimal {
    display: none;
}

.give-donation-amount-section {
    display:block;
    row-gap: unset;

    h2 { 
        margin-block-end: 0.75rem;
    }
}

.give-btn.give-donation-level-btn {
  /* block-size:100%;
  font-size:clamp(1.5rem,.4743589744rem + 3.2051282051vw,2.125rem);
  min-inline-size:-moz-available;
  min-inline-size:-webkit-fill-available; */
  padding-block:0.75rem;
  padding-inline:.5rem;
  /* transition-duration:.2s;
  transition-property:background-color,color,filter,box-shadow,transform;
  transition-timing-function:ease-in */
}


.give-donation-amount .give-currency-symbol {
  color:#555;
  display:block;
  font-size: 1.5rem;
  font-weight: 500;
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
}


/*////////////////////////////////////////////
// I. Donation Summary
////////////////////////////////////////////*/

.give-donation-summary-table-wrapper {
    padding-block: 0 !important;
    background-color: unset !important;
}

.give-total-wrap {
    margin-block: 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.give-donation-summary-section tbody tr,
.give-donation-summary-section tfoot {
    border-block-start: var(--givewp-border-width) solid var(--givewp-border-color);
}

/*////////////////////////////////////////////
// J. Buttons
////////////////////////////////////////////*/

/* Add button styles here */

/*////////////////////////////////////////////
// K. Messages
////////////////////////////////////////////*/

/* Error messages */
.give-error {
    /* Add your custom error styles here */
}

/* Success messages */
.give-success {
    /* Add your custom success styles here */
}