/* =========================================================
   Thinakaran — Donate Us page (premium)
   Scoped entirely under .lk-donate-wrap / .lk-donate-card so the
   real WooCommerce Checkout page (elsewhere on the site) is untouched.
   ========================================================= */

.lk-donate-wrap{ padding:54px 0 80px; position:relative; }

/* ---------------- hero intro ---------------- */
.lk-donate-hero{
  max-width:640px; margin:0 auto 34px; text-align:center;
  animation:lkDonateRise .6s var(--ease) both;
}
.lk-donate-hero .eyebrow{ justify-content:center; margin-bottom:14px; }

.lk-donate-title{
  font-family:var(--f-display), var(--f-tamil);
  font-size:clamp(2rem, 4.4vw, 3rem);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.05;
  color:var(--ink);
  margin:0 0 14px;
  background:linear-gradient(120deg, var(--ink) 45%, var(--red) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.lk-donate-lead{
  font-family:var(--f-tamil); font-size:1rem; line-height:1.8; color:var(--muted);
  max-width:520px; margin:0 auto 22px;
}

.lk-trust-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.lk-trust-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--lk-line); border-radius:30px;
  padding:8px 16px; font-family:var(--f-body); font-weight:700; font-size:.76rem;
  color:#3a3a3a; box-shadow:0 3px 10px rgba(20,20,20,.06);
}
.lk-trust-chip svg{ color:var(--lk-red); flex:0 0 auto; }

/* ---------------- card shell ---------------- */
.lk-donate-card{
  max-width:660px; margin:0 auto;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 6px rgba(20,20,20,.05), 0 24px 60px -20px rgba(180,20,10,.28), 0 0 0 1px rgba(20,20,20,.04);
  animation:lkDonateRise .7s .08s var(--ease) both;
}
.lk-donate-card::before{
  content:''; display:block; height:5px; width:100%;
  background:linear-gradient(90deg, var(--lk-red), #ff6d3f, var(--lk-gold), var(--lk-red));
  background-size:300% 100%;
  animation:lkGradientMove 5s linear infinite;
}

.lk-donate-error{
  margin:18px 24px 0; padding:12px 15px;
  background:#fdeceb; border:1px solid #f3b9b4; border-radius:9px;
  color:var(--lk-red-dk); font-family:var(--f-tamil); font-weight:700; font-size:.86rem;
}

.lk-donate-secure{
  max-width:660px; margin:20px auto 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-size:.78rem; font-weight:600; color:var(--lk-muted);
}
.lk-donate-secure svg{ color:#2e9e4f; flex:0 0 auto; }

@keyframes lkDonateRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------- accordion step chrome ---------------- */
.lk-dstep + .lk-dstep,
.lk-dstep-2, .lk-dstep-3{ border-top:1px solid #f0f0f0; }

.lk-dstep-head{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:19px 24px; border:0; background:#fbfbfb; cursor:pointer;
  text-align:left; transition:background .25s var(--ease);
}
.lk-dstep:not(.is-open) .lk-dstep-head:hover{ background:#f3f3f3; }

.lk-dstep-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e4e4e4; color:#9a9a9a;
  transition:background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.lk-dstep-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lk-dstep-title b{
  font-family:var(--f-body); font-size:.82rem; font-weight:800; letter-spacing:.07em;
  color:#9a9a9a;
}
.lk-dstep-sub{ font-family:var(--f-body); font-size:.8rem; font-weight:700; color:var(--lk-muted); }
.lk-dstep-caret{ flex:0 0 auto; color:#bbb; transition:transform .3s var(--ease); }

/* completed step, collapsed: white row, black check circle */
.lk-dstep.is-done:not(.is-open) .lk-dstep-head{ background:#fff; }
.lk-dstep.is-done:not(.is-open) .lk-dstep-ico{ background:var(--ink); color:#fff; position:relative; }
.lk-dstep.is-done:not(.is-open) .lk-dstep-ico svg{ visibility:hidden; }
.lk-dstep.is-done:not(.is-open) .lk-dstep-ico::after{
  content:'\2713'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:#fff;
}
.lk-dstep.is-done:not(.is-open) .lk-dstep-title b{ color:var(--ink); }

/* currently open step: gradient bar */
.lk-dstep.is-open .lk-dstep-head{
  background:linear-gradient(135deg, var(--lk-red), var(--lk-red-dk)); cursor:default;
}
.lk-dstep.is-open .lk-dstep-ico{ background:rgba(255,255,255,.22); color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.08); }
.lk-dstep.is-open .lk-dstep-title b, .lk-dstep.is-open .lk-dstep-sub{ color:#fff; }
.lk-dstep.is-open .lk-dstep-sub{ opacity:.92; }
.lk-dstep.is-open .lk-dstep-caret{ color:#fff; transform:rotate(180deg); }

.lk-dstep-body{ display:none; padding:26px 24px 30px; }
.lk-dstep.is-open .lk-dstep-body{ display:block; animation:lkDonateFadeIn .35s var(--ease) both; }
@keyframes lkDonateFadeIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

/* ---------------- step 1: frequency + amount ---------------- */
.lk-freq-toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:#f2f2f2; padding:6px; border-radius:12px; margin-bottom:22px;
}
.lk-freq-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; background:transparent; border-radius:9px; padding:12px 10px;
  font-family:var(--f-body); font-weight:800; font-size:.8rem; letter-spacing:.04em;
  color:#777; transition:all .25s var(--ease);
}
.lk-freq-btn.is-active{
  background:linear-gradient(135deg, var(--lk-red), var(--lk-red-dk)); color:#fff;
  box-shadow:0 6px 16px rgba(225,6,0,.32);
  transform:translateY(-1px);
}

.lk-amount-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:10px;
}
.lk-amount-btn{
  position:relative;
  border:2px solid #eaeaea; background:#fff; border-radius:12px;
  padding:18px 8px; text-align:center; cursor:pointer;
  font-family:var(--f-body); font-weight:900; font-size:1.05rem; color:var(--ink);
  transition:all .22s var(--ease);
}
.lk-amount-btn:hover{ border-color:var(--lk-red); transform:translateY(-2px); box-shadow:0 8px 16px rgba(20,20,20,.08); }
.lk-amount-btn.is-active{
  background:linear-gradient(135deg, var(--lk-red), var(--lk-red-dk));
  border-color:var(--lk-red-dk); color:#fff;
  box-shadow:0 10px 22px rgba(225,6,0,.32);
  transform:translateY(-2px);
}
.lk-amount-btn.is-active::after{
  content:'\2713'; position:absolute; top:-9px; right:-9px;
  width:22px; height:22px; border-radius:50%; background:#fff; color:var(--lk-red);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;
  box-shadow:0 3px 8px rgba(0,0,0,.25); border:2px solid #fff;
}
.lk-amount-other{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.lk-amount-other .lk-other-label{ font-family:var(--f-tamil); font-weight:800; font-size:.88rem; }
.lk-amount-other .lk-other-input{
  width:100%; border:0; background:transparent; text-align:center;
  font-family:var(--f-body); font-weight:800; font-size:.84rem; color:inherit;
  outline:none; padding:0;
}
.lk-amount-other.is-active .lk-other-input::placeholder{ color:rgba(255,255,255,.75); }

.lk-dstep-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

.lk-btn-solid, .lk-btn-outline{
  border-radius:10px; padding:13px 30px; font-family:var(--f-body); font-weight:800;
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; border:2px solid var(--lk-red); cursor:pointer;
  transition:all .25s var(--ease);
}
.lk-btn-solid{
  background:linear-gradient(135deg, var(--lk-red), var(--lk-red-dk)); color:#fff;
  box-shadow:0 8px 18px rgba(225,6,0,.3);
}
.lk-btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(225,6,0,.4); }
.lk-btn-solid.is-loading{ opacity:.65; pointer-events:none; transform:none; }
.lk-btn-outline{ background:#fff; color:var(--lk-red); }
.lk-btn-outline:hover{ background:#fdeceb; transform:translateY(-2px); }

/* ---------------- native WooCommerce checkout, restyled ---------------- */
.lk-donate-card form.checkout{ margin:0; }
.lk-donate-card .col2-set{ display:block; margin:0; }
.lk-donate-card .col-1{ width:100% !important; float:none !important; }
.lk-donate-card .col-2, .lk-donate-card .woocommerce-shipping-fields,
.lk-donate-card #ship-to-different-address{ display:none; }

.lk-donate-card .lk-donate-hidden-field{ display:none !important; }

.lk-donate-card .woocommerce-billing-fields h3{ display:none; }
/* Neutralize WooCommerce's legacy woocommerce-layout.css, which floats
   .form-row-first at 47% width (a two-column First/Last name layout we
   don't use — we only ever show one field per row here). */
.lk-donate-card .form-row,
.lk-donate-card .form-row-first,
.lk-donate-card .form-row-last,
.lk-donate-card .form-row-wide{
  width:100% !important; float:none !important; clear:both; overflow:visible;
  margin:0 0 18px; padding:0;
}
.lk-donate-card .form-row label{
  display:block; margin-bottom:8px;
  font-family:var(--f-tamil); font-weight:800; font-size:.9rem; color:var(--ink);
}
.lk-donate-card .form-row .required{ display:none; }
.lk-donate-card .form-row .optional{
  font-family:var(--f-body); font-weight:600; font-size:.78rem; color:#999; text-transform:none;
}
.lk-donate-card .woocommerce-input-wrapper{ position:relative; display:block; }
.lk-donate-card .form-row input.input-text,
.lk-donate-card .form-row select{
  width:100%; border:1.5px solid #e4e4e4; border-radius:10px;
  padding:13px 15px 13px 44px; font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  background:#fafafa; transition:all .2s var(--ease);
}
.lk-donate-card .form-row input.input-text:focus,
.lk-donate-card .form-row select:focus{
  border-color:var(--lk-red); outline:none; background:#fff;
  box-shadow:0 0 0 4px rgba(225,6,0,.09);
}
.lk-donate-card .woocommerce-invalid input.input-text{ border-color:#d63638; }

/* leading field icons — person / phone / mail, matching the theme's icon set */
.lk-donate-card .woocommerce-input-wrapper::before{
  content:''; position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; background:no-repeat center/contain; opacity:.4; pointer-events:none; z-index:1;
}
#billing_first_name_field .woocommerce-input-wrapper::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-7 2-7 4.5V20h14v-1.5c0-2.5-3-4.5-7-4.5z'/%3E%3C/svg%3E");
}
#billing_phone_field .woocommerce-input-wrapper::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.2c1.1.4 2.4.6 3.6.6a1 1 0 011 1V20a1 1 0 01-1 1C10.4 21 3 13.6 3 4a1 1 0 011-1h3.4a1 1 0 011 1c0 1.2.2 2.5.6 3.6a1 1 0 01-.2 1z'/%3E%3C/svg%3E");
}
#billing_email_field .woocommerce-input-wrapper::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M3 5h18v14H3V5zm2 2.5V17h14V7.5l-7 5-7-5z'/%3E%3C/svg%3E");
}

#order_review_heading{
  font-family:var(--f-body); font-weight:900; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lk-muted); margin:0 0 14px;
}

.lk-donate-card table.shop_table{
  width:100%; border-collapse:collapse; margin-bottom:18px;
  background:#fafafa; border-radius:12px; overflow:hidden;
}
.lk-donate-card table.shop_table th{
  text-align:left; font-family:var(--f-body); font-weight:800; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--lk-muted);
  padding:10px 14px; border-bottom:1px solid #e8e8e8;
}
.lk-donate-card table.shop_table td{
  padding:11px 14px; border-bottom:1px solid #e8e8e8;
  font-family:var(--f-body); font-size:.9rem; color:var(--ink);
}
.lk-donate-card table.shop_table tbody td{ background:#fff; }
.lk-donate-card table.shop_table .order-total{ background:linear-gradient(135deg, #fff5f4, #ffe9e7); }
.lk-donate-card table.shop_table .order-total td, .lk-donate-card table.shop_table .order-total th{
  font-weight:900; font-size:1.02rem; border-bottom:0; color:var(--lk-red-dk);
}
.lk-donate-card table.shop_table .recurring-totals th{
  background:#f4f4f4; font-size:.66rem; padding-top:12px;
}

.lk-donate-card .woocommerce-form-coupon-toggle,
.lk-donate-card .woocommerce-additional-fields{ display:none; }

/* payment methods — custom card-style radios */
.lk-donate-card #payment{ background:transparent; border-radius:0; padding:0; margin-top:4px; }
.lk-donate-card #payment ul.payment_methods{ border:0; padding:0; margin:0 0 6px; list-style:none; }
.lk-donate-card #payment ul.payment_methods li{
  position:relative;
  border:1.5px solid #e8e8e8; border-radius:12px; padding:14px 16px; margin-bottom:10px;
  font-family:var(--f-body); font-weight:700; font-size:.9rem;
  transition:all .2s var(--ease);
}
.lk-donate-card #payment ul.payment_methods li:hover{ border-color:#d9b9b7; }
.lk-donate-card #payment ul.payment_methods li input.input-radio{
  accent-color:var(--lk-red); width:17px; height:17px; vertical-align:middle; margin-right:9px;
}
.lk-donate-card #payment ul.payment_methods li label{ cursor:pointer; }
.lk-donate-card #payment ul.payment_methods li img{ vertical-align:middle; margin-left:8px; height:20px; width:auto; }
.lk-donate-card #payment ul.payment_methods li:has(input:checked){
  border-color:var(--lk-red); background:#fff8f7; box-shadow:0 4px 12px rgba(225,6,0,.1);
}
.lk-donate-card #payment div.payment_box{
  background:#f7f7f7; border-radius:9px; padding:16px; margin:12px 0 0; font-size:.85rem; line-height:1.7;
}
.lk-donate-card #payment div.payment_box::before{ display:none; }

.lk-donate-card #place_order{
  display:block; width:100%; margin-top:16px;
  background:linear-gradient(135deg, var(--lk-red), var(--lk-red-dk)); color:#fff; border:0; border-radius:12px;
  padding:17px; font-family:var(--f-body); font-weight:800; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow:0 10px 24px rgba(225,6,0,.32);
  animation:lkDonateGlow 1.8s ease-in-out infinite;
}
.lk-donate-card #place_order:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(225,6,0,.42); }

.lk-donate-card .woocommerce-terms-and-conditions-wrapper{
  font-family:var(--f-body); font-size:.78rem; color:var(--lk-muted); margin:12px 0; line-height:1.7;
}
.lk-donate-card .woocommerce-terms-and-conditions-wrapper a{ color:var(--lk-red); text-decoration:underline; }

.lk-donate-card .woocommerce-error{
  list-style:none; margin:0 0 18px; padding:13px 15px;
  background:#fdeceb; border:1px solid #f3b9b4; border-radius:9px;
  color:var(--lk-red-dk); font-family:var(--f-tamil); font-size:.84rem;
}

@media (max-width:560px){
  .lk-donate-wrap{ padding:36px 0 60px; }
  .lk-amount-grid{ grid-template-columns:repeat(2, 1fr); }
  .lk-dstep-body{ padding:20px 16px 24px; }
  .lk-dstep-head{ padding:15px 16px; }
  .lk-donate-card{ border-radius:16px; }
  .lk-trust-row{ gap:8px; }
  .lk-trust-chip{ font-size:.7rem; padding:7px 12px; }
}

/* =========================================================
   Blinking "call to action" glow — reused for the sidebar
   Donate Us pill and the final Donate Now button.
   ========================================================= */
@keyframes lkDonateGlow{
  0%, 100%{ box-shadow:0 10px 24px rgba(225,6,0,.32), 0 0 0 0 rgba(225,6,0,.5); }
  50%{ box-shadow:0 10px 24px rgba(225,6,0,.32), 0 0 0 10px rgba(225,6,0,0); }
}