/* =========================================================
   TWG Vendor Forms — Frontend (scoped)
   Uses TWG pink/gold variables with safe fallbacks.
========================================================= */

.twg-vf-wrap{
  /* Theme tokens (fallbacks if site doesn't define them) */
  --twg-pink: var(--twg-pink, #ff4fa3);
  --twg-gold: var(--twg-gold, #ffcc4d);
  --twg-bg: var(--twg-bg, #f7fbff);

  --vf-surface: rgba(255,255,255,.92);
  --vf-border: rgba(16,32,52,.12);
  --vf-text: #102034;
  --vf-text-dim: rgba(16,32,52,.72);
  --vf-danger: #c0262d;
  --vf-success: #0f766e;

  --vf-radius: 16px;
  --vf-shadow: 0 18px 40px rgba(0,0,0,.10);

  color: var(--vf-text);
}

/* Container card */
.twg-vf-wrap .twg-vf-card{
  background: var(--vf-surface);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  box-shadow: var(--vf-shadow);
  padding: 18px;
  max-width: 820px;
  margin: 0 auto;
}

/* Header */
.twg-vf-wrap .twg-vf-title{
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
}
.twg-vf-wrap .twg-vf-subtitle{
  margin: 0 0 14px;
  color: var(--vf-text-dim);
  font-size: 14px;
}

/* Grid */
.twg-vf-wrap .twg-vf-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .twg-vf-wrap .twg-vf-grid{ grid-template-columns: 1fr; }
}

/* Labels + fields */
.twg-vf-wrap label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Field wrapper */
.twg-vf-wrap .twg-vf-field{
  display:block;
}

/* Inputs inside field wrapper */
.twg-vf-wrap .twg-vf-field input,
.twg-vf-wrap .twg-vf-field textarea,
.twg-vf-wrap .twg-vf-field select{
  width: 100%;
  border: 1px solid var(--vf-border);
  border-radius: 12px;
  padding: 5px 12px;
  background: #fff;
  color: var(--vf-text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.twg-vf-wrap .twg-vf-field input:focus,
.twg-vf-wrap .twg-vf-field textarea:focus,
.twg-vf-wrap .twg-vf-field select:focus{
  border-color: rgba(255,79,163,.65);
  box-shadow: 0 0 0 4px rgba(255,79,163,.14);
}

.twg-vf-wrap .twg-vf-field textarea{
  min-height: 120px;
  resize: vertical;
}

.twg-vf-wrap .twg-vf-help{
  margin-top: 6px;
  font-size: 12px;
  color: var(--vf-text-dim);
}

/* Textarea */
.twg-vf-wrap textarea.twg-vf-field{
  min-height: 120px;
  resize: vertical;
}

/* Required indicator */
.twg-vf-wrap .twg-vf-req{
  color: var(--twg-pink);
  margin-left: 4px;
}

/* Signature block */
.twg-vf-wrap .twg-vf-signature{
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed rgba(16,32,52,.18);
  border-radius: 14px;
  background: rgba(255,204,77,.10);
}

.twg-vf-wrap .twg-vf-signature-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.twg-vf-wrap .twg-vf-signature-title{
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}

.twg-vf-wrap canvas.twg-vf-signature-canvas{
  width: 100%;
  height: 170px;
  display:block;
  border-radius: 12px;
  border: 1px solid rgba(16,32,52,.14);
  background: #fff;
  touch-action: none; /* important for mobile drawing */
}

/* Buttons */
.twg-vf-wrap .twg-vf-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin-top: 14px;
}

.twg-vf-wrap .twg-vf-btn{
  border: 0;
  border-radius: 14px;
  padding: 5px 14px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.twg-vf-wrap .twg-vf-btn:active{ transform: translateY(1px); }

.twg-vf-wrap .twg-vf-btn-primary{
  background: linear-gradient(135deg, var(--twg-pink), #ff78bf);
  color: #fff;
  box-shadow: 0 14px 32px rgba(255,79,163,.25);
}

.twg-vf-wrap .twg-vf-btn-primary:hover{
  box-shadow: 0 18px 40px rgba(255,79,163,.32);
}

.twg-vf-wrap .twg-vf-btn-secondary{
  background: rgba(16,32,52,.06);
  border: 1px solid rgba(16,32,52,.14);
  color: var(--vf-text);
}

.twg-vf-wrap .twg-vf-btn-secondary:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.twg-vf-wrap .twg-vf-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Terms */
.twg-vf-wrap .twg-vf-terms{
  margin-top: 14px;
  border: 1px solid rgba(16,32,52,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  overflow: hidden; /* hides odd edges */
}

/* The top bar inside terms (your inline flex row) */
.twg-vf-wrap .twg-vf-terms > div:first-child{
  padding: 10px 12px;
  background: rgba(16,32,52,.04);
  border-bottom: 1px solid rgba(16,32,52,.10);
}

/* Terms content */
.twg-vf-wrap .twg-vf-terms pre{
  margin: 0;
  padding: 12px 12px 14px;
  white-space: pre-wrap;     /* wraps long lines */
  word-break: break-word;    /* breaks super-long words */
  overflow-x: hidden;        /* removes horizontal scroll */
  font-size: 13px;
  line-height: 1.55;
  color: rgba(16,32,52,.92);
  background: transparent;
  font-family: inherit;      /* no monospace look */
}

.twg-vf-wrap .twg-vf-terms input[type="checkbox"]{
  margin-top: 2px;
}

.twg-vf-wrap .twg-vf-terms summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 12px;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.twg-vf-wrap .twg-vf-terms summary::-webkit-details-marker{ display:none; }

.twg-vf-wrap .twg-vf-terms-body{
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(16,32,52,.10);
  color: var(--vf-text);
}
.twg-vf-wrap .twg-vf-terms-body p{
  margin: 0 0 10px;
}

/* Consent row */
.twg-vf-wrap .twg-vf-consent{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(16,32,52,.10);
  border-radius: 14px;
  background: rgba(255,79,163,.06);
}
.twg-vf-wrap .twg-vf-consent input{
  margin-top: 2px;
}

/* Message box */
.twg-vf-wrap .twg-vf-message{
  display:none;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid rgba(16,32,52,.12);
  background: rgba(16,32,52,.04);
  color: var(--vf-text);
}

.twg-vf-wrap .twg-vf-message.is-success{
  display:block;
  border-color: rgba(15,118,110,.25);
  background: rgba(15,118,110,.10);
  color: #0f3d38;
}

.twg-vf-wrap .twg-vf-message.is-error{
  display:block;
  border-color: rgba(192,38,45,.25);
  background: rgba(192,38,45,.10);
  color: #5a1216;
}

.twg-vf-wrap .twg-vf-message.is-info{
  display:block;
}

/* Success meta */
.twg-vf-wrap .twg-vf-success-meta{
  display:none;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,204,77,.35);
  background: rgba(255,204,77,.14);
  color: var(--vf-text);
  font-size: 13px;
}
.twg-vf-wrap .twg-vf-success-meta div{
  margin: 0 0 6px;
}
.twg-vf-wrap .twg-vf-success-meta div:last-child{
  margin-bottom: 0;
}

.twg-vf-wrap .twg-vf-sign{
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed rgba(16,32,52,.18);
  border-radius: 14px;
  background: rgba(255,204,77,.10);
}

.twg-vf-wrap .twg-vf-sign-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* Canvas (matches shortcode: .twg-vf-canvas) */
.twg-vf-wrap canvas.twg-vf-canvas{
  width: 100%;
  height: 170px;
  display:block;
  border-radius: 12px;
  border: 1px solid rgba(16,32,52,.14);
  background: #fff;
  touch-action: none;
}

.twg-vf-wrap .twg-vf-msg{
  display:none;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid rgba(16,32,52,.12);
  background: rgba(16,32,52,.04);
  color: var(--vf-text);
}

.twg-vf-wrap .twg-vf-msg.ok{ display:block; background: rgba(15,118,110,.10); border-color: rgba(15,118,110,.25); }
.twg-vf-wrap .twg-vf-msg.err{ display:block; background: rgba(192,38,45,.10); border-color: rgba(192,38,45,.25); }

/* ==============================
   TERMS BLOCK – final polish
   Works with current shortcode markup:
   .twg-vf-terms > (header div) + pre + (consent div)
================================ */

/* Make the header bar match card style */
.twg-vf-wrap .twg-vf-terms > div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(16,32,52,.04);
  border-bottom: 1px solid rgba(16,32,52,.10);
}

/* Body: give a bit more breathing room and nicer text rhythm */
.twg-vf-wrap .twg-vf-terms pre{
  padding: 14px 14px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(16,32,52,.92);
}

/* Add spacing between paragraphs inside PRE (without changing markup) */
.twg-vf-wrap .twg-vf-terms pre{
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
  tab-size: 2;
}

/* Make the consent row look like part of the block */
.twg-vf-wrap .twg-vf-terms > div:last-child{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(16,32,52,.10);
  background: rgba(255,79,163,.04);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Checkbox alignment */
.twg-vf-wrap .twg-vf-terms > div:last-child input[type="checkbox"]{
  margin-top: 3px;
}

/* Make the label feel consistent */
.twg-vf-wrap .twg-vf-terms > div:last-child label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(16,32,52,.85);
  margin: 0;
}

.twg-vf-details{
  border:1px solid var(--twg-border);
  background: var(--twg-surface);
  border-radius: 12px;
  padding: 10px 12px;
}

.twg-vf-details__summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  list-style:none;
}

.twg-vf-details__summary::-webkit-details-marker{ display:none; }

.twg-vf-details__summary:after{
  content:"▾";
  opacity:.8;
  transition: transform .18s ease;
}

.twg-vf-details[open] .twg-vf-details__summary:after{
  transform: rotate(180deg);
}

.twg-vf-details__content{
  margin-top:10px;
}

.twg-vf-terms pre{
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--twg-ink);
  background: transparent;
  border: 0;
  padding: 0;
}


.twg-vf-wrap .twg-vf-signature,
.twg-vf-wrap .twg-vf-sign{
  overflow: visible;
}

/* Make signature header stack nicely on small screens */
@media (max-width: 720px){
  .twg-vf-wrap .twg-vf-signature-head,
  .twg-vf-wrap .twg-vf-sign-row{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  .twg-vf-wrap .twg-vf-signature-title{
    font-size: 14px;
  }

  /* Buttons in signature area should fill width */
  .twg-vf-wrap .twg-vf-signature-head .twg-vf-btn,
  .twg-vf-wrap .twg-vf-sign-row .twg-vf-btn{
    width: 100%;
  }
}

/* Canvas: ensure it never overflows horizontally */
.twg-vf-wrap canvas.twg-vf-signature-canvas,
.twg-vf-wrap canvas.twg-vf-canvas{
  max-width: 100%;
  box-sizing: border-box;
}

/* Give a slightly shorter canvas on very small screens */
@media (max-width: 420px){
  .twg-vf-wrap canvas.twg-vf-signature-canvas,
  .twg-vf-wrap canvas.twg-vf-canvas{
    height: 150px;
  }
}

.twg-vf-wrap .twg-vf-card{
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Force a predictable canvas size (Safari sometimes ignores earlier height rules) */
.twg-vf-wrap canvas.twg-vf-canvas{
  width: 100% !important;
  height: 170px !important;
  max-height: 170px !important;
  display: block;
}

/* Smaller phones */
@media (max-width: 420px){
  .twg-vf-wrap canvas.twg-vf-canvas{
    height: 150px !important;
    max-height: 150px !important;
  }
}

/* Make the signature header behave on mobile */
@media (max-width: 720px){
  .twg-vf-wrap .twg-vf-sign-row{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .twg-vf-wrap .twg-vf-sign-row > div{
    width: 100%;
  }
  .twg-vf-wrap .twg-vf-sign-row .twg-vf-btn{
    width: 100%;
  }
}