.elementor-3374 .elementor-element.elementor-element-5c28cf85{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS *//* ==========================================================
   GNF Checkout – Complete CSS (Softer Dark + Tight Spacing + Yoco Icon Fix)
   Paste into: Appearance > Customize > Additional CSS
   ========================================================== */

:root{
  --gnf-orange:#d7711d;
  --gnf-bg-1:#151515;
  --gnf-bg-2:#1b1b1b;
  --gnf-bg-3:#141414;
  --gnf-card: rgba(255,255,255,.06);
  --gnf-border: rgba(255,255,255,.10);
  --gnf-border-strong: rgba(255,255,255,.18);
  --gnf-text: rgba(255,255,255,.92);
  --gnf-text-strong: rgba(255,255,255,.95);
  --gnf-radius: 18px;
}

/* ===== Background (softer charcoal, not pure black) ===== */
body.woocommerce-checkout{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(215,113,29,.10), transparent 60%),
    radial-gradient(700px 450px at 90% 20%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--gnf-bg-1) 0%, var(--gnf-bg-2) 55%, var(--gnf-bg-3) 100%) !important;
  color: var(--gnf-text);
}

/* ===== Page wrapper / spacing ===== */
.woocommerce-checkout .woocommerce{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 14px 60px !important; /* reduced top whitespace */
}

/* Tighten title area */
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout header.entry-header{
  margin: 0 0 12px !important;
  padding: 0 !important;
}
body.woocommerce-checkout h1.entry-title{
  margin: 0 0 10px !important;
  line-height: 1.05 !important;
}

/* Checkout form spacing between sections */
body.woocommerce-checkout form.checkout{
  display: grid;
  gap: 14px;
}

/* Avoid extra pushes */
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #customer_details{
  margin-top: 0 !important;
}

/* If first block (e.g., gift/amount) adds big bottom margin */
body.woocommerce-checkout form.checkout > *:first-child{
  margin-bottom: 10px !important;
}

/* ===== Cards (billing + order) ===== */
.woocommerce-checkout .woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review{
  background: var(--gnf-card) !important;
  border: 1px solid var(--gnf-border) !important;
  border-radius: var(--gnf-radius) !important;
  padding: 18px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.25) !important;
}

/* ===== Headings + orange accent ===== */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  color: var(--gnf-text-strong);
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.woocommerce-checkout h3::after,
.woocommerce-checkout #order_review_heading::after{
  content:"";
  display:block;
  height:3px;
  width:72px;
  margin-top:10px;
  border-radius:999px;
  background: var(--gnf-orange);
}

/* ===== Labels ===== */
.woocommerce-checkout form .form-row label{
  color: rgba(255,255,255,.88) !important;
  font-weight: 700;
}

/* ===== Inputs ===== */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1px solid var(--gnf-border-strong) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  outline: none !important;
  box-shadow: none !important;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
  border-color: var(--gnf-orange) !important;
  box-shadow: 0 0 0 3px rgba(215,113,29,.18) !important;
}

/* ===== Order review table ===== */
.woocommerce-checkout #order_review table.shop_table{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--gnf-border) !important;
  border-radius: 14px;
  overflow:hidden;
}
.woocommerce-checkout #order_review table.shop_table thead th{
  background: rgba(255,255,255,.06) !important;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

/* ===== Payment area ===== */
.woocommerce-checkout #payment{
  background: transparent !important;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  padding-bottom: 10px !important;
}

/* Payment box */
.woocommerce-checkout #payment .payment_box{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.92) !important;
}

/* ===== FIX: Yoco + card icons overlap ===== */
.woocommerce-checkout #payment ul.payment_methods li{
  padding: 12px 12px !important;
  border-radius: 14px !important;
}

/* Make label a wrapping flex row (prevents overlap) */
.woocommerce-checkout #payment ul.payment_methods li label{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  line-height: 1.2 !important;
  padding-right: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
}

/* Neutralize floats/right alignment from theme/plugins */
.woocommerce-checkout #payment ul.payment_methods li label img,
.woocommerce-checkout #payment ul.payment_methods li label .payment_method_icons,
.woocommerce-checkout #payment ul.payment_methods li label .wc-credit-card-icons,
.woocommerce-checkout #payment ul.payment_methods li label .icons{
  float: none !important;
  margin: 0 !important;
}

/* Standardize icon sizes */
.woocommerce-checkout #payment ul.payment_methods li label img{
  max-height: 22px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* If icons are inside containers, make them wrap */
.woocommerce-checkout #payment ul.payment_methods li .payment_method_icons,
.woocommerce-checkout #payment ul.payment_methods li .wc-credit-card-icons,
.woocommerce-checkout #payment ul.payment_methods li .icons,
.woocommerce-checkout #payment ul.payment_methods li label .payment_method_icons,
.woocommerce-checkout #payment ul.payment_methods li label .wc-credit-card-icons,
.woocommerce-checkout #payment ul.payment_methods li label .icons{
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Radio alignment */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{
  margin-top: 2px !important;
}

/* ===== Button ===== */
.woocommerce-checkout #place_order{
  background: var(--gnf-orange) !important;
  color:#fff !important;
  border:none !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  font-weight: 900 !important;
  letter-spacing:.02em;
  width:100%;
  box-shadow: 0 10px 26px rgba(215,113,29,.22) !important;
}
.woocommerce-checkout #place_order:hover{
  filter: brightness(1.05);
}

/* ===== Links + notices ===== */
.woocommerce-checkout a{ color: var(--gnf-orange); }
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.92) !important;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 768px){
  body.woocommerce-checkout .woocommerce{
    padding: 8px 12px 44px !important;
  }

  .woocommerce-checkout .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review{
    padding: 14px !important;
    border-radius: 16px !important;
  }

  /* Stack first/last name rows */
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{
    width: 100% !important;
    float: none !important;
  }

  .woocommerce-checkout input.input-text,
  .woocommerce-checkout textarea,
  .woocommerce-checkout select{
    padding: 13px 12px !important;
  }

  /* Slightly smaller payment icons on mobile */
  .woocommerce-checkout #payment ul.payment_methods li label img{
    max-height: 20px !important;
  }
}

/* ==========================================================
   WCDP (Donation Platform) – Remove ALL extra space (then add tiny gap)
   Targets: #wcdp.wcdp-form and its injected <p>, <br>, dividers
   ========================================================== */

body.woocommerce-checkout #wcdp.wcdp-form{
  margin: 0 0 8px !important;  /* tiny clean gap below gift block */
  padding: 0 !important;
}

/* The plugin injects lots of empty paragraphs and <br> — remove their spacing */
body.woocommerce-checkout #wcdp.wcdp-form p{
  margin: 0 !important;
  padding: 0 !important;
}
body.woocommerce-checkout #wcdp.wcdp-form br{
  display: none !important;
}

/* Remove the divider + arrow that add visual/spacing between gift and donor details */
body.woocommerce-checkout #wcdp.wcdp-form .wcdp-divider,
body.woocommerce-checkout #wcdp.wcdp-form .wcdp-divider-arrow{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Tighten the amount row itself */
body.woocommerce-checkout #wcdp.wcdp-form .wcdp-row,
body.woocommerce-checkout #wcdp.wcdp-form .wcdp-amount{
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep a tiny gap inside the label/input so it doesn’t look broken */
body.woocommerce-checkout #wcdp.wcdp-form label{
  margin: 0 0 6px !important;
  padding: 0 !important;
  display: block !important;
}

/* Ensure donor details starts immediately after WCDP */
body.woocommerce-checkout #customer_details{
  margin-top: 0 !important;
  padding-top: 0 !important;
}/* End custom CSS */