/* ==========================================================================
   Trends CORE WhatsApp Commerce — v0.2 UI
   WhatsApp-branded, modal-based checkout experience
   ========================================================================== */

:root{
  --tcwc-green:#25D366;
  --tcwc-green-light:#DCF8C6;
  --tcwc-green-dark:#128C7E;
  --tcwc-teal-deep:#075E54;
  --tcwc-blue-accent:#34B7F1;
  --tcwc-ink:#0B141A;
  --tcwc-gray-700:#3B4A54;
  --tcwc-gray-400:#8696A0;
  --tcwc-gray-200:#E9EDEF;
  --tcwc-gray-100:#F4F6F7;
  --tcwc-white:#FFFFFF;
  --tcwc-red:#E14A4A;
  --tcwc-radius:14px;
  --tcwc-radius-sm:10px;
  --tcwc-shadow-sm:0 2px 8px rgba(11,20,26,.10);
  --tcwc-shadow-md:0 10px 30px rgba(7,94,84,.20);
  --tcwc-shadow-lg:0 24px 60px rgba(7,94,84,.28);
  --tcwc-ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Buttons ---------- */

.tcwc-product-btn,
.tcwc-cart-btn{
  position:relative;
  display:inline-flex !important;
  width:auto !important;
  max-width:100%;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  padding:14px 26px;
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:.2px;
  color:var(--tcwc-white) !important;
  background:linear-gradient(135deg, var(--tcwc-green) 0%, var(--tcwc-green-dark) 100%);
  border:none;
  border-radius:999px;
  box-shadow:var(--tcwc-shadow-md);
  cursor:pointer;
  overflow:hidden;
  transition:transform .22s var(--tcwc-ease), box-shadow .22s var(--tcwc-ease), filter .22s var(--tcwc-ease);
}

/* Size variants (Storefront tab -> "Product button size"). Medium (no
   modifier class) matches the original v0.2 dimensions exactly. */
.tcwc-product-btn.tcwc-size-small{
  padding:9px 18px;
  font-size:13px;
  gap:7px;
}
.tcwc-product-btn.tcwc-size-small::before{ width:15px; height:15px; flex-basis:15px; }

.tcwc-product-btn.tcwc-size-large{
  padding:17px 32px;
  font-size:16.5px;
  gap:12px;
}
.tcwc-product-btn.tcwc-size-large::before{ width:23px; height:23px; flex-basis:23px; }

.tcwc-product-btn::before,
.tcwc-cart-btn::before{
  content:"";
  width:20px;
  height:20px;
  flex:0 0 20px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.001 0C7.164 0 .001 7.163.001 16c0 2.823.738 5.58 2.14 8.005L0 32l8.2-2.115A15.94 15.94 0 0 0 16.001 32C24.837 32 32 24.837 32 16S24.837 0 16.001 0zm0 29.09c-2.55 0-5.043-.686-7.223-1.984l-.518-.307-4.865 1.256 1.3-4.74-.337-.487A13.06 13.06 0 0 1 2.91 16C2.91 8.79 8.79 2.91 16.001 2.91S29.09 8.79 29.09 16 23.212 29.09 16.001 29.09zm7.17-9.78c-.393-.196-2.32-1.144-2.68-1.276-.36-.13-.622-.196-.884.197-.262.393-1.014 1.276-1.243 1.538-.229.262-.458.295-.85.098-.393-.196-1.66-.611-3.163-1.951-1.169-1.043-1.959-2.331-2.188-2.724-.229-.393-.024-.605.172-.8.177-.176.393-.458.59-.687.196-.229.262-.393.393-.655.13-.262.065-.49-.033-.687-.098-.196-.884-2.13-1.212-2.918-.319-.766-.643-.662-.884-.674l-.752-.013c-.262 0-.687.098-1.047.49-.36.393-1.375 1.343-1.375 3.276s1.408 3.802 1.604 4.064c.196.262 2.77 4.229 6.71 5.93.938.405 1.669.647 2.24.828.941.3 1.797.257 2.474.156.755-.113 2.32-.949 2.647-1.866.327-.916.327-1.702.229-1.866-.098-.163-.36-.262-.752-.458z'/></svg>");
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.001 0C7.164 0 .001 7.163.001 16c0 2.823.738 5.58 2.14 8.005L0 32l8.2-2.115A15.94 15.94 0 0 0 16.001 32C24.837 32 32 24.837 32 16S24.837 0 16.001 0zm0 29.09c-2.55 0-5.043-.686-7.223-1.984l-.518-.307-4.865 1.256 1.3-4.74-.337-.487A13.06 13.06 0 0 1 2.91 16C2.91 8.79 8.79 2.91 16.001 2.91S29.09 8.79 29.09 16 23.212 29.09 16.001 29.09zm7.17-9.78c-.393-.196-2.32-1.144-2.68-1.276-.36-.13-.622-.196-.884.197-.262.393-1.014 1.276-1.243 1.538-.229.262-.458.295-.85.098-.393-.196-1.66-.611-3.163-1.951-1.169-1.043-1.959-2.331-2.188-2.724-.229-.393-.024-.605.172-.8.177-.176.393-.458.59-.687.196-.229.262-.393.393-.655.13-.262.065-.49-.033-.687-.098-.196-.884-2.13-1.212-2.918-.319-.766-.643-.662-.884-.674l-.752-.013c-.262 0-.687.098-1.047.49-.36.393-1.375 1.343-1.375 3.276s1.408 3.802 1.604 4.064c.196.262 2.77 4.229 6.71 5.93.938.405 1.669.647 2.24.828.941.3 1.797.257 2.474.156.755-.113 2.32-.949 2.647-1.866.327-.916.327-1.702.229-1.866-.098-.163-.36-.262-.752-.458z'/></svg>");
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-size:contain;
  -webkit-mask-size:contain;
}

.tcwc-product-btn:hover:not(:disabled),
.tcwc-cart-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:var(--tcwc-shadow-lg);
  filter:brightness(1.04);
}

.tcwc-product-btn:active:not(:disabled),
.tcwc-cart-btn:active:not(:disabled){
  transform:translateY(0);
}

.tcwc-product-btn:disabled,
.tcwc-cart-btn:disabled{
  opacity:.7;
  cursor:progress;
}

.tcwc-product-btn:focus-visible,
.tcwc-cart-btn:focus-visible{
  outline:3px solid var(--tcwc-blue-accent);
  outline-offset:2px;
}

/* subtle pulse ring to draw the eye, runs once on load */
.tcwc-product-btn{ animation:tcwc-pulse 2.4s var(--tcwc-ease) .3s 1; }
@keyframes tcwc-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45), var(--tcwc-shadow-md); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0), var(--tcwc-shadow-md); }
  100%{ box-shadow:var(--tcwc-shadow-md); }
}

/* ---------- Inline status note (fallback / errors under buttons) ---------- */

.tcwc-note{ margin-top:12px; }
.tcwc-note:empty{ margin-top:0; }

.tcwc-note-error{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:11px 14px;
  background:#FDECEC;
  border:1px solid #F6C6C6;
  color:var(--tcwc-red);
  border-radius:var(--tcwc-radius-sm);
  font-size:13.5px;
  animation:tcwc-shake .32s var(--tcwc-ease);
}
@keyframes tcwc-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

/* ---------- Cart section ---------- */

.tcwc-cart-box{
  margin:28px 0;
  padding:20px 22px;
  background:var(--tcwc-white);
  border:1px solid var(--tcwc-gray-200);
  border-radius:var(--tcwc-radius);
  box-shadow:var(--tcwc-shadow-sm);
}

/* ==========================================================================
   Modal checkout
   ========================================================================== */

.tcwc-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(7,20,17,.55);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--tcwc-ease);
  padding:0;
}
.tcwc-overlay.tcwc-open{
  opacity:1;
  visibility:visible;
}
@media (min-width:641px){
  .tcwc-overlay{ align-items:center; padding:24px; }
}

.tcwc-modal{
  width:100%;
  max-width:460px;
  max-height:92vh;
  overflow-y:auto;
  background:var(--tcwc-white);
  border-radius:20px 20px 0 0;
  box-shadow:var(--tcwc-shadow-lg);
  transform:translateY(24px);
  transition:transform .3s var(--tcwc-ease);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (min-width:641px){
  .tcwc-modal{ border-radius:20px; transform:translateY(12px) scale(.97); }
}
.tcwc-overlay.tcwc-open .tcwc-modal{
  transform:translateY(0) scale(1);
}

.tcwc-modal-header{
  position:relative;
  padding:24px 24px 18px;
  background:linear-gradient(135deg, var(--tcwc-teal-deep) 0%, var(--tcwc-green-dark) 100%);
  border-radius:20px 20px 0 0;
  color:var(--tcwc-white);
}
.tcwc-modal-header h3{
  margin:0 0 4px;
  font-size:19px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.tcwc-modal-header h3::before{
  content:"";
  width:22px; height:22px;
  background-color:var(--tcwc-white);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.001 0C7.164 0 .001 7.163.001 16c0 2.823.738 5.58 2.14 8.005L0 32l8.2-2.115A15.94 15.94 0 0 0 16.001 32C24.837 32 32 24.837 32 16S24.837 0 16.001 0zm0 29.09c-2.55 0-5.043-.686-7.223-1.984l-.518-.307-4.865 1.256 1.3-4.74-.337-.487A13.06 13.06 0 0 1 2.91 16C2.91 8.79 8.79 2.91 16.001 2.91S29.09 8.79 29.09 16 23.212 29.09 16.001 29.09zm7.17-9.78c-.393-.196-2.32-1.144-2.68-1.276-.36-.13-.622-.196-.884.197-.262.393-1.014 1.276-1.243 1.538-.229.262-.458.295-.85.098-.393-.196-1.66-.611-3.163-1.951-1.169-1.043-1.959-2.331-2.188-2.724-.229-.393-.024-.605.172-.8.177-.176.393-.458.59-.687.196-.229.262-.393.393-.655.13-.262.065-.49-.033-.687-.098-.196-.884-2.13-1.212-2.918-.319-.766-.643-.662-.884-.674l-.752-.013c-.262 0-.687.098-1.047.49-.36.393-1.375 1.343-1.375 3.276s1.408 3.802 1.604 4.064c.196.262 2.77 4.229 6.71 5.93.938.405 1.669.647 2.24.828.941.3 1.797.257 2.474.156.755-.113 2.32-.949 2.647-1.866.327-.916.327-1.702.229-1.866-.098-.163-.36-.262-.752-.458z'/></svg>");
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.001 0C7.164 0 .001 7.163.001 16c0 2.823.738 5.58 2.14 8.005L0 32l8.2-2.115A15.94 15.94 0 0 0 16.001 32C24.837 32 32 24.837 32 16S24.837 0 16.001 0zm0 29.09c-2.55 0-5.043-.686-7.223-1.984l-.518-.307-4.865 1.256 1.3-4.74-.337-.487A13.06 13.06 0 0 1 2.91 16C2.91 8.79 8.79 2.91 16.001 2.91S29.09 8.79 29.09 16 23.212 29.09 16.001 29.09zm7.17-9.78c-.393-.196-2.32-1.144-2.68-1.276-.36-.13-.622-.196-.884.197-.262.393-1.014 1.276-1.243 1.538-.229.262-.458.295-.85.098-.393-.196-1.66-.611-3.163-1.951-1.169-1.043-1.959-2.331-2.188-2.724-.229-.393-.024-.605.172-.8.177-.176.393-.458.59-.687.196-.229.262-.393.393-.655.13-.262.065-.49-.033-.687-.098-.196-.884-2.13-1.212-2.918-.319-.766-.643-.662-.884-.674l-.752-.013c-.262 0-.687.098-1.047.49-.36.393-1.375 1.343-1.375 3.276s1.408 3.802 1.604 4.064c.196.262 2.77 4.229 6.71 5.93.938.405 1.669.647 2.24.828.941.3 1.797.257 2.474.156.755-.113 2.32-.949 2.647-1.866.327-.916.327-1.702.229-1.866-.098-.163-.36-.262-.752-.458z'/></svg>");
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-size:contain; -webkit-mask-size:contain;
  flex:0 0 auto;
}
.tcwc-modal-header p{
  margin:0;
  font-size:13.5px;
  opacity:.88;
  line-height:1.5;
}
.tcwc-modal-close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:var(--tcwc-white);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--tcwc-ease);
}
.tcwc-modal-close:hover{ background:rgba(255,255,255,.3); }

.tcwc-modal-body{ padding:22px 24px 26px; }

.tcwc-field{ margin-bottom:16px; }
.tcwc-field label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--tcwc-gray-400);
  margin-bottom:6px;
}
.tcwc-field input,
.tcwc-field textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  font-size:15px;
  color:var(--tcwc-ink);
  background:var(--tcwc-gray-100);
  border:1.5px solid transparent;
  border-radius:var(--tcwc-radius-sm);
  transition:border-color .2s var(--tcwc-ease), background .2s var(--tcwc-ease), box-shadow .2s var(--tcwc-ease);
  font-family:inherit;
}
.tcwc-field textarea{ min-height:76px; resize:vertical; }
.tcwc-field input:focus,
.tcwc-field textarea:focus{
  outline:none;
  background:var(--tcwc-white);
  border-color:var(--tcwc-green);
  box-shadow:0 0 0 4px rgba(37,211,102,.14);
}
.tcwc-field.tcwc-invalid input,
.tcwc-field.tcwc-invalid textarea{
  border-color:var(--tcwc-red);
  background:#FFF7F7;
  animation:tcwc-shake .32s var(--tcwc-ease);
}
.tcwc-field-error{
  display:none;
  margin-top:5px;
  font-size:12.5px;
  color:var(--tcwc-red);
}
.tcwc-field.tcwc-invalid .tcwc-field-error{ display:block; }

.tcwc-modal-submit{
  width:100%;
  margin-top:6px;
  padding:15px 20px;
  font-size:15.5px;
  font-weight:700;
  color:var(--tcwc-white);
  background:linear-gradient(135deg, var(--tcwc-green) 0%, var(--tcwc-green-dark) 100%);
  border:none;
  border-radius:var(--tcwc-radius-sm);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 8px 20px rgba(18,140,126,.30);
  transition:transform .2s var(--tcwc-ease), box-shadow .2s var(--tcwc-ease), opacity .2s var(--tcwc-ease);
}
.tcwc-modal-submit:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 26px rgba(18,140,126,.36); }
.tcwc-modal-submit:disabled{ opacity:.75; cursor:progress; }

.tcwc-spinner{
  width:16px; height:16px;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:var(--tcwc-white);
  border-radius:50%;
  animation:tcwc-spin .7s linear infinite;
  display:none;
}
.tcwc-modal-submit.tcwc-loading .tcwc-spinner{ display:inline-block; }
.tcwc-modal-submit.tcwc-loading .tcwc-submit-label{ opacity:.85; }
@keyframes tcwc-spin{ to{ transform:rotate(360deg); } }

.tcwc-modal-footnote{
  margin:14px 0 0;
  font-size:12px;
  color:var(--tcwc-gray-400);
  text-align:center;
  line-height:1.5;
}

/* success state */
.tcwc-success{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:10px 6px 4px;
}
.tcwc-success.tcwc-show{ display:flex; animation:tcwc-fade-up .35s var(--tcwc-ease); }
@keyframes tcwc-fade-up{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.tcwc-success-check{
  width:58px; height:58px;
  border-radius:50%;
  background:var(--tcwc-green-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.tcwc-success-check::before{
  content:"";
  width:26px; height:26px;
  background-color:var(--tcwc-green-dark);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-size:contain; -webkit-mask-size:contain;
}
.tcwc-success h4{ margin:0 0 6px; font-size:16.5px; color:var(--tcwc-ink); }
.tcwc-success p{ margin:0; font-size:13.5px; color:var(--tcwc-gray-700); }

body.tcwc-modal-locked{ overflow:hidden; }

/* payment method choice (v0.4 — M-Pesa) */
.tcwc-payment-choice label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--tcwc-gray-700);
  margin-bottom:8px;
}
.tcwc-payment-options{ display:flex; flex-direction:column; gap:8px; }
.tcwc-radio-option{
  display:flex !important;
  align-items:center;
  gap:8px;
  font-weight:400 !important;
  font-size:14px !important;
  padding:10px 12px;
  border:1.5px solid var(--tcwc-gray-100);
  border-radius:var(--tcwc-radius-sm);
  cursor:pointer;
  margin-bottom:0 !important;
  transition:border-color .15s var(--tcwc-ease), background .15s var(--tcwc-ease);
}
.tcwc-radio-option:has(input:checked){
  border-color:var(--tcwc-green);
  background:var(--tcwc-green-light);
}
.tcwc-radio-option input{ width:auto; margin:0; }

/* M-Pesa "check your phone" wait state (v0.4) */
.tcwc-mpesa-wait{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:18px 6px 4px;
}
.tcwc-mpesa-wait.tcwc-show{ display:flex; animation:tcwc-fade-up .35s var(--tcwc-ease); }
.tcwc-mpesa-wait h4{ margin:14px 0 6px; font-size:16.5px; color:var(--tcwc-ink); }
.tcwc-mpesa-wait p{ margin:0 0 12px; font-size:13.5px; color:var(--tcwc-gray-700); }
.tcwc-spinner-lg{
  width:36px; height:36px;
  border:3px solid var(--tcwc-gray-100);
  border-top-color:var(--tcwc-green);
  border-radius:50%;
  animation:tcwc-spin .8s linear infinite;
  display:inline-block;
}
#tcwc-mpesa-wait-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ---------- Back-in-stock "notify me" form (v0.6 milestone 5) ---------- */

.tcwc-notify-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:14px;
  max-width:420px;
}
.tcwc-notify-input{
  flex:1 1 200px;
  min-width:0;
  padding:12px 14px;
  font-size:14.5px;
  color:var(--tcwc-ink);
  background:var(--tcwc-gray-100);
  border:1.5px solid transparent;
  border-radius:var(--tcwc-radius-sm);
  font-family:inherit;
  transition:border-color .2s var(--tcwc-ease), background .2s var(--tcwc-ease), box-shadow .2s var(--tcwc-ease);
}
.tcwc-notify-input:focus{
  outline:none;
  background:var(--tcwc-white);
  border-color:var(--tcwc-teal-deep);
  box-shadow:0 0 0 4px rgba(7,94,84,.12);
}
.tcwc-notify-btn{
  flex:0 0 auto;
  padding:12px 20px;
  font-size:14px;
  font-weight:600;
  color:var(--tcwc-white) !important;
  background:linear-gradient(135deg, var(--tcwc-teal-deep) 0%, var(--tcwc-ink) 100%);
  border:none;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s var(--tcwc-ease), filter .2s var(--tcwc-ease);
}
.tcwc-notify-btn:hover:not(:disabled){ transform:translateY(-1px); filter:brightness(1.08); }
.tcwc-notify-btn:disabled{ opacity:.7; cursor:progress; }
.tcwc-notify-confirmed{
  margin-top:14px;
  padding:12px 16px;
  font-size:13.5px;
  color:var(--tcwc-teal-deep);
  background:var(--tcwc-green-light);
  border-radius:var(--tcwc-radius-sm);
}