/*
Theme Name: Lestin Child
Theme URI: https://gaviaspreview.com/wp/lestin/
Author URI: https://themeforest.net/user/gavias
Author: Gaviasthemes Team
Description: Child theme for the Lestin theme.
Template: lestin
*/

/* =============================================================
   MID DIAMONDS — WPUF FORM SKIN  (CSS-only, no HTML editing)
   Add via: Appearance → Customize → Additional CSS
   ============================================================= */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  --g:        #c9a84c;   /* gold */
  --gb:       #f0d080;   /* gold bright */
  --gd:       #a07830;   /* gold dark */
  --gc:       rgba(201,168,76,.15);  /* gold ghost */
  --bg:       #111118;   /* card bg */
  --bgf:      #16161f;   /* field bg */
  --bgh:      #1c1c2a;   /* field hover */
  --bdr:      rgba(201,168,76,.18); /* border */
  --txt:      #ede8df;
  --txt2:     #b8ae9e;
  --txt3:     #7a7268;
  --red:      #e05c5c;
  --grn:      #5ce09a;
  --r:        12px;
  --rs:       8px;
  --ease:     cubic-bezier(.23,1,.32,1);
  --t:        .32s;
  --fd:       'Cormorant Garamond', Georgia, serif;
  --fb:       'Outfit', sans-serif;
}

/* ════════════════════════════════════════════════
   1. FORM CARD WRAPPER
   ════════════════════════════════════════════════ */
.wpuf-form-add,#fes-form,
form.wpuf-form,
#wpuf-form-add,
.wpuf-form-container {
  font-family: var(--fb) !important;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #111118 0%, #0e0e18 100%) !important;
  background-size: 200px 200px, 100% 100% !important;
  border: 1px solid var(--bdr) !important;
  border-top: none !important;
  border-radius: var(--r) !important;
  box-shadow:
    0 0 0 1px rgba(201,168,76,.05),
    0 24px 70px rgba(0,0,0,.75),
    0 4px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  margin: 36px auto !important;
  position: relative !important;
  overflow: hidden !important;
  animation: md-rise .65s var(--ease) both !important;
}

/* Shimmer top bar */
.wpuf-form-add::before,
form.wpuf-form::before,
#wpuf-form-add::before,
.wpuf-form-container::before {
  content: '' !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gd) 15%, var(--g) 30%, var(--gb) 50%,
    var(--g) 70%, var(--gd) 85%, transparent 100%
  ) !important;
  background-size: 300% auto !important;
  animation: md-shimmer 4s linear infinite !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

/* Ghost diamond watermark */
.wpuf-form-add::after,
form.wpuf-form::after,
#wpuf-form-add::after {
  content: '◆' !important;
  position: absolute !important;
  bottom: -55px !important;
  right: -25px !important;
  font-size: 220px !important;
  line-height: 1 !important;
  color: rgba(201,168,76,.025) !important;
  pointer-events: none !important;
  animation: md-drift 9s ease-in-out infinite !important;
  z-index: 0 !important;
}

/* ════════════════════════════════════════════════
   2. SECTION BREAK (heading rows WPUF inserts)
   ════════════════════════════════════════════════ */
.wpuf-form-add .wpuf-section-wrap,
.wpuf-section-wrap {
  padding: 28px 44px 18px !important;
  border-bottom: 1px solid rgba(201,168,76,.08) !important;
  position: relative !important;
  z-index: 1 !important;
}
.wpuf-section-wrap::after {
  content: '' !important;
  position: absolute !important;
  left: 44px !important; bottom: -1px !important;
  width: 52px !important; height: 1px !important;
  background: var(--g) !important;
}
.wpuf-section-wrap h3 {
  font-family: var(--fd) !important;
  color: var(--txt) !important;
  font-size: 1.55rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  margin: 0 0 5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
.wpuf-section-wrap h3::before {
  content: '◆' !important;
  font-size: .5em !important;
  color: var(--g) !important;
  animation: md-pulse 3s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
.wpuf-section-wrap .wpuf-section-details {
  color: var(--txt3) !important;
  font-size: .855rem !important;
  font-weight: 300 !important;
  letter-spacing: .02em !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════
   3. FIELD LIST  — the <ul> wrapping all fields
   ════════════════════════════════════════════════ */
.wpuf-form-add ul.wpuf-form,
form.wpuf-form ul,
.wpuf-form-add > ul {
  list-style: none !important;
  padding: 24px 44px 8px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 24px !important;
  row-gap: 18px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Full-width field overrides */
.wpuf-form-add ul li.wpuf-section-wrap,
.wpuf-form-add ul li:has(textarea),
.wpuf-form-add ul li:has(.wpuf-attachment-upload-filelist),
.wpuf-form-add ul li:has(.wpuf-image-upload),
.wpuf-form-add ul li:has(.wp-editor-wrap),
.wpuf-form-add ul li:has(.wpuf-taxonomy-checklist),
.wpuf-form-add ul li:has(.wpuf-map),
.wpuf-form-add ul li.field-size-large,
.wpuf-form-add ul li.wpuf-submit,
form.wpuf-form ul li:has(textarea),
form.wpuf-form ul li.wpuf-submit {
  grid-column: 1 / -1 !important;
}

/* Individual row stagger */
.wpuf-form-add ul li,
form.wpuf-form ul li {
  position: relative !important;
  animation: md-rise .5s var(--ease) both !important;
}
.wpuf-form-add ul li:nth-child(1)  { animation-delay:.04s !important }
.wpuf-form-add ul li:nth-child(2)  { animation-delay:.08s !important }
.wpuf-form-add ul li:nth-child(3)  { animation-delay:.12s !important }
.wpuf-form-add ul li:nth-child(4)  { animation-delay:.16s !important }
.wpuf-form-add ul li:nth-child(5)  { animation-delay:.20s !important }
.wpuf-form-add ul li:nth-child(6)  { animation-delay:.24s !important }
.wpuf-form-add ul li:nth-child(7)  { animation-delay:.28s !important }
.wpuf-form-add ul li:nth-child(8)  { animation-delay:.32s !important }
.wpuf-form-add ul li:nth-child(9)  { animation-delay:.36s !important }
.wpuf-form-add ul li:nth-child(10) { animation-delay:.40s !important }
.wpuf-form-add ul li:nth-child(n+11){ animation-delay:.44s !important }

/* ════════════════════════════════════════════════
   4. LABELS  (.wpuf-label div)
   ════════════════════════════════════════════════ */
.wpuf-form-add .wpuf-label,
form.wpuf-form .wpuf-label,.fes-field label {
  margin-bottom: 7px !important;
}
.wpuf-form-add .wpuf-label label,
form.wpuf-form .wpuf-label label,.fes-field label {
  font-family: var(--fb) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--txt3) !important;
  display: block !important;
  transition: color var(--t) var(--ease) !important;
}
/* Gold label on focus — JS adds .md-active to the li */
.wpuf-form-add ul li.md-active .wpuf-label label,
form.wpuf-form ul li.md-active .wpuf-label label,.fes-field label {
  color: var(--g) !important;
}
.wpuf-form-add .wpuf-label .required,
form.wpuf-form .wpuf-label .required,
.required { color: var(--g) !important; margin-left:2px !important; }

/* ════════════════════════════════════════════════
   5. FIELD WRAPPER  (.wpuf-fields div)
   ════════════════════════════════════════════════ */
.wpuf-form-add .wpuf-fields,
form.wpuf-form .wpuf-fields {
  position: relative !important;
}

/* Animated gold underline — appended by JS */
.md-track {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  border-radius: 0 0 var(--rs) var(--rs) !important;
  background: linear-gradient(90deg, var(--gd), var(--gb), var(--gd)) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .32s var(--ease) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.wpuf-form-add ul li.md-active .md-track,
form.wpuf-form ul li.md-active .md-track {
  transform: scaleX(1) !important;
}

/* ════════════════════════════════════════════════
   6. ALL INPUT TYPES
   ════════════════════════════════════════════════ */
.wpuf-form-add input[type=text],
.wpuf-form-add input[type=email],
.wpuf-form-add input[type=url],
.wpuf-form-add input[type=tel],
.wpuf-form-add input[type=number],
.wpuf-form-add input[type=password],
.wpuf-form-add input[type=date],
.wpuf-form-add input[type=time],
.wpuf-form-add input[type=search],
.wpuf-form-add textarea,
.wpuf-form-add select,
form.wpuf-form input[type=text],
form.wpuf-form input[type=email],
form.wpuf-form input[type=url],
form.wpuf-form input[type=tel],
form.wpuf-form input[type=number],
form.wpuf-form input[type=password],
form.wpuf-form input[type=date],
form.wpuf-form textarea,
form.wpuf-form select {
  font-family: var(--fb) !important;
  font-size: .935rem !important;
  color: var(--txt) !important;
  background: var(--bgf) !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: var(--rs) !important;
  padding: 12px 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition:
    border-color var(--t) var(--ease),
    background   var(--t) var(--ease),
    box-shadow   var(--t) var(--ease),
    transform    .18s var(--ease) !important;
}

/* Hover */
.wpuf-form-add input[type=text]:hover,
.wpuf-form-add input[type=email]:hover,
.wpuf-form-add input[type=url]:hover,
.wpuf-form-add input[type=tel]:hover,
.wpuf-form-add input[type=number]:hover,
.wpuf-form-add input[type=password]:hover,
.wpuf-form-add textarea:hover,
.wpuf-form-add select:hover,
form.wpuf-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):hover,
form.wpuf-form textarea:hover,
form.wpuf-form select:hover {
  border-color: rgba(201,168,76,.42) !important;
  background: var(--bgh) !important;
}

/* Focus */
.wpuf-form-add input[type=text]:focus,
.wpuf-form-add input[type=email]:focus,
.wpuf-form-add input[type=url]:focus,
.wpuf-form-add input[type=tel]:focus,
.wpuf-form-add input[type=number]:focus,
.wpuf-form-add input[type=password]:focus,
.wpuf-form-add textarea:focus,
.wpuf-form-add select:focus,
form.wpuf-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus,
form.wpuf-form textarea:focus,
form.wpuf-form select:focus {
  border-color: var(--g) !important;
  background: #1a1a27 !important;
  box-shadow:
    0 0 0 3px rgba(201,168,76,.11),
    0 0 18px rgba(201,168,76,.09),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform: translateY(-1px) !important;
}

/* Placeholder */
.wpuf-form-add input::placeholder,
.wpuf-form-add textarea::placeholder,
form.wpuf-form input::placeholder,
form.wpuf-form textarea::placeholder {
  color: var(--txt3) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: .86rem !important;
}

/* Textarea */
.wpuf-form-add textarea,
form.wpuf-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
  line-height: 1.65 !important;
}

/* Select custom arrow */
.wpuf-form-add select,
form.wpuf-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 38px !important;
  cursor: pointer !important;
}
.wpuf-form-add select option,
form.wpuf-form select option {
  background: #16161f !important;
  color: var(--txt) !important;
}

/* Help text */
.wpuf-form-add .wpuf-help,
form.wpuf-form .wpuf-help {
  display: block !important;
  margin-top: 5px !important;
  font-size: .75rem !important;
  color: var(--txt3) !important;
  font-style: italic !important;
  font-weight: 300 !important;
}

/* Live char counter — injected by JS */
.md-counter {
  display: block !important;
  text-align: right !important;
  font-size: .7rem !important;
  color: var(--txt3) !important;
  margin-top: 4px !important;
  font-family: var(--fb) !important;
  letter-spacing: .03em !important;
  transition: color .3s !important;
}
.md-counter.md-near { color: var(--g) !important }
.md-counter.md-full  { color: var(--red) !important }

/* ════════════════════════════════════════════════
   7. CHECKBOX & RADIO
   ════════════════════════════════════════════════ */
.wpuf-form-add input[type=checkbox],
.wpuf-form-add input[type=radio],
form.wpuf-form input[type=checkbox],
form.wpuf-form input[type=radio] {
  width: 18px !important;
  height: 18px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--bgf) !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  transition: all var(--t) !important;
  transform: none !important; /* override focus transform above */
}
.wpuf-form-add input[type=radio],
form.wpuf-form input[type=radio] { border-radius: 50% !important }

.wpuf-form-add input[type=checkbox]:hover,
.wpuf-form-add input[type=radio]:hover,
form.wpuf-form input[type=checkbox]:hover,
form.wpuf-form input[type=radio]:hover {
  border-color: var(--g) !important;
  box-shadow: 0 0 7px rgba(201,168,76,.2) !important;
}
.wpuf-form-add input[type=checkbox]:checked,
form.wpuf-form input[type=checkbox]:checked {
  background: var(--g) !important;
  border-color: var(--g) !important;
  box-shadow: 0 0 10px rgba(201,168,76,.3) !important;
}
.wpuf-form-add input[type=checkbox]:checked::after,
form.wpuf-form input[type=checkbox]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important; top: 1px !important;
  width: 6px !important; height: 10px !important;
  border: 2px solid #09090f !important;
  border-top: none !important; border-left: none !important;
  transform: rotate(45deg) !important;
}
.wpuf-form-add input[type=radio]:checked,
form.wpuf-form input[type=radio]:checked {
  border-color: var(--g) !important;
  box-shadow: 0 0 10px rgba(201,168,76,.3) !important;
}
.wpuf-form-add input[type=radio]:checked::after,
form.wpuf-form input[type=radio]:checked::after {
  content: '' !important;
  position: absolute !important;
  width: 8px !important; height: 8px !important;
  background: var(--g) !important;
  border-radius: 50% !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
}

/* Checkbox/radio label rows */
.wpuf-form-add .wpuf-fields .checkbox,
.wpuf-form-add .wpuf-fields .radio,
form.wpuf-form .wpuf-fields .checkbox,
form.wpuf-form .wpuf-fields .radio {
  display: flex !important;
  align-items: center !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .2s !important;
  margin-bottom: 2px !important;
}
.wpuf-form-add .wpuf-fields .checkbox:hover,
.wpuf-form-add .wpuf-fields .radio:hover,
form.wpuf-form .wpuf-fields .checkbox:hover,
form.wpuf-form .wpuf-fields .radio:hover {
  background: rgba(201,168,76,.05) !important;
}
.wpuf-form-add .wpuf-fields .checkbox label,
.wpuf-form-add .wpuf-fields .radio label,
form.wpuf-form .wpuf-fields .checkbox label,
form.wpuf-form .wpuf-fields .radio label {
  font-size: .875rem !important;
  color: var(--txt2) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  transition: color .2s !important;
}
.wpuf-form-add .wpuf-fields .checkbox:hover label,
form.wpuf-form .wpuf-fields .checkbox:hover label {
  color: var(--txt) !important;
}

/* ════════════════════════════════════════════════
   8. FILE / IMAGE UPLOAD
   ════════════════════════════════════════════════ */
.wpuf-form-add .wpuf-attachment-upload-filelist,
.wpuf-form-add .wpuf-image-upload,
form.wpuf-form .wpuf-attachment-upload-filelist,
form.wpuf-form .wpuf-image-upload {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,transparent 8px,
      rgba(201,168,76,.03) 8px,rgba(201,168,76,.03) 16px
    ),
    var(--bgf) !important;
  border: 2px dashed rgba(201,168,76,.22) !important;
  border-radius: var(--rs) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  color: var(--txt3) !important;
  font-size: .855rem !important;
  cursor: pointer !important;
  transition: border-color var(--t) var(--ease), background var(--t), transform .2s var(--ease) !important;
}
.wpuf-form-add .wpuf-attachment-upload-filelist:hover,
form.wpuf-form .wpuf-attachment-upload-filelist:hover {
  border-color: var(--g) !important;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,transparent 8px,
      rgba(201,168,76,.06) 8px,rgba(201,168,76,.06) 16px
    ),
    #191928 !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════
   9. TAXONOMY CHECKLIST
   ════════════════════════════════════════════════ */
.wpuf-form-add .wpuf-taxonomy-checklist,
form.wpuf-form .wpuf-taxonomy-checklist {
  background: var(--bgf) !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: var(--rs) !important;
  padding: 10px 14px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--gd) rgba(201,168,76,.05) !important;
}
.wpuf-form-add .wpuf-taxonomy-checklist label,
form.wpuf-form .wpuf-taxonomy-checklist label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: .855rem !important;
  color: var(--txt2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  transition: background .2s, color .2s !important;
}
.wpuf-form-add .wpuf-taxonomy-checklist label:hover,
form.wpuf-form .wpuf-taxonomy-checklist label:hover {
  background: var(--gc) !important;
  color: var(--g) !important;
}

/* ════════════════════════════════════════════════
   10. SUBMIT ROW
   ════════════════════════════════════════════════ */
.wpuf-form-add ul li.wpuf-submit,
form.wpuf-form ul li.wpuf-submit {
  padding: 20px 0 28px !important;
  border-top: 1px solid rgba(201,168,76,.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)) !important;
  margin-top: 8px !important;
}

/* Primary submit button */
.wpuf-form-add .wpuf-submit-button,
.wpuf-form-add input[type=submit],
.wpuf-form-add button[type=submit],
form.wpuf-form .wpuf-submit-button,
form.wpuf-form input[type=submit],
form.wpuf-form button[type=submit] {
  font-family: var(--fb) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: #09090f !important;
  background: linear-gradient(
    110deg,
    var(--gd) 0%, var(--g) 33%, var(--gb) 50%, var(--g) 67%, var(--gd) 100%
  ) !important;
  background-size: 300% auto !important;
  border: none !important;
  border-radius: var(--rs) !important;
  padding: 14px 40px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    background-position .6s var(--ease),
    box-shadow var(--t) var(--ease),
    transform .18s var(--ease) !important;
  box-shadow:
    0 4px 22px rgba(201,168,76,.32),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.wpuf-form-add .wpuf-submit-button:hover,
.wpuf-form-add input[type=submit]:hover,
form.wpuf-form input[type=submit]:hover {
  background-position: right center !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 8px 32px rgba(201,168,76,.48),
    0 0 50px rgba(201,168,76,.12),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.wpuf-form-add .wpuf-submit-button:active,
.wpuf-form-add input[type=submit]:active,
form.wpuf-form input[type=submit]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(201,168,76,.3) !important;
}

/* Shine sweep on hover */
.wpuf-form-add .wpuf-submit-button::before,
.wpuf-form-add input[type=submit]::before,
form.wpuf-form input[type=submit]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -110% !important;
  width: 55% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left .55s var(--ease) !important;
  pointer-events: none !important;
}
.wpuf-form-add .wpuf-submit-button:hover::before,
.wpuf-form-add input[type=submit]:hover::before,
form.wpuf-form input[type=submit]:hover::before {
  left: 160% !important;
}

/* Loading state — JS adds class */
.wpuf-form-add input[type=submit].md-loading,
form.wpuf-form input[type=submit].md-loading {
  color: transparent !important;
  pointer-events: none !important;
}
.wpuf-form-add input[type=submit].md-loading::after,
form.wpuf-form input[type=submit].md-loading::after {
  content: '' !important;
  position: absolute !important;
  width: 18px !important; height: 18px !important;
  border: 2.5px solid rgba(9,9,15,.25) !important;
  border-top-color: #09090f !important;
  border-radius: 50% !important;
  top: 50% !important; left: 50% !important;
  margin: -9px 0 0 -9px !important;
  animation: md-spin .7s linear infinite !important;
}

/* Draft / preview button */
.wpuf-form-add .wpuf-draft,
form.wpuf-form .wpuf-draft {
  font-family: var(--fb) !important;
  background: transparent !important;
  border: 1.5px solid rgba(201,168,76,.32) !important;
  border-radius: var(--rs) !important;
  color: var(--g) !important;
  padding: 13px 24px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
}
.wpuf-form-add .wpuf-draft:hover,
form.wpuf-form .wpuf-draft:hover {
  border-color: var(--g) !important;
  background: rgba(201,168,76,.07) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════
   11. ERROR & SUCCESS MESSAGES
   ════════════════════════════════════════════════ */
.wpuf-form-add .wpuf-message,
form.wpuf-form .wpuf-message {
  font-family: var(--fb) !important;
  padding: 14px 20px !important;
  border-radius: var(--rs) !important;
  font-size: .88rem !important;
  margin: 12px 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  animation: md-floatin .3s ease !important;
}
.wpuf-form-add .wpuf-message.success,
.wpuf-form-add .wpuf-message.alert-success,
form.wpuf-form .wpuf-message.success {
  background: rgba(92,224,154,.07) !important;
  border: 1px solid rgba(92,224,154,.28) !important;
  color: var(--grn) !important;
}
.wpuf-form-add .wpuf-message.error,
.wpuf-form-add .wpuf-message.alert-danger,
form.wpuf-form .wpuf-message.error {
  background: rgba(224,92,92,.07) !important;
  border: 1px solid rgba(224,92,92,.28) !important;
  color: var(--red) !important;
}

/* Inline field error */
.wpuf-form-add .wpuf-error,
form.wpuf-form .wpuf-error {
  font-size: .77rem !important;
  color: var(--red) !important;
  background: rgba(224,92,92,.07) !important;
  border-left: 3px solid var(--red) !important;
  padding: 6px 11px !important;
  border-radius: 0 4px 4px 0 !important;
  margin-top: 7px !important;
  display: block !important;
  animation: md-floatin .28s ease !important;
  font-family: var(--fb) !important;
}

/* ════════════════════════════════════════════════
   12. RIPPLE ELEMENT (appended by JS on click)
   ════════════════════════════════════════════════ */
.md-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(201,168,76,.22) !important;
  transform: scale(0) !important;
  animation: md-ripple .5s linear !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* ════════════════════════════════════════════════
   13. PROGRESS BAR (injected by JS above the form)
   ════════════════════════════════════════════════ */
.md-progress-bar {
  height: 3px !important;
  background: rgba(201,168,76,.08) !important;
  position: sticky !important;
  top: 4px !important;
  z-index: 15 !important;
  overflow: hidden !important;
}
.md-progress-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, var(--gd), var(--g), var(--gb)) !important;
  transition: width .5s var(--ease) !important;
  box-shadow: 0 0 8px rgba(201,168,76,.5) !important;
  border-radius: 0 3px 3px 0 !important;
}

/* ════════════════════════════════════════════════
   14. FIELD ROW HOVER HIGHLIGHT (added by JS)
   ════════════════════════════════════════════════ */
.wpuf-form-add ul li.md-focused,
form.wpuf-form ul li.md-focused {
  background: rgba(201,168,76,.025) !important;
  border-radius: 8px !important;
  padding: 5px !important;
  margin: -5px !important;
  transition: background .3s !important;
}

/* ════════════════════════════════════════════════
   15. RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .wpuf-form-add ul.wpuf-form,
  form.wpuf-form ul,
  .wpuf-form-add > ul {
    grid-template-columns: 1fr !important;
    padding: 16px 20px 8px !important;
  }
  .wpuf-form-add ul li { grid-column: auto !important }
  .wpuf-form-add::after { display:none !important }
  .wpuf-section-wrap { padding: 20px 20px 14px !important }
  .wpuf-section-wrap::after { left: 20px !important }
  .wpuf-form-add ul li.wpuf-submit { flex-direction: column !important }
  .wpuf-form-add input[type=submit] { width:100% !important }
}
@media (max-width: 420px) {
  .wpuf-form-add { margin: 12px 8px !important }
}

/* ════════════════════════════════════════════════
   16. KEYFRAME ANIMATIONS
   ════════════════════════════════════════════════ */
@keyframes md-rise {
  from { opacity:0; transform:translateY(26px) scale(.98) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}
@keyframes md-shimmer {
  0%   { background-position:-300% center }
  100% { background-position: 300% center }
}
@keyframes md-drift {
  0%,100% { transform:translateY(0) rotate(45deg) }
  40%      { transform:translateY(-12px) rotate(47deg) }
  70%      { transform:translateY(6px) rotate(44deg) }
}
@keyframes md-pulse {
  0%,100% { opacity:.45; transform:scale(1) }
  50%      { opacity:1;   transform:scale(1.12) }
}
@keyframes md-spin  { to { transform:rotate(360deg) } }
@keyframes md-ripple { to { transform:scale(4); opacity:0 } }
@keyframes md-floatin {
  from { opacity:0; transform:translateX(-8px) }
  to   { opacity:1; transform:translateX(0) }
}
@keyframes md-particle {
  0%   { transform:translate(0,0) scale(1); opacity:1 }
  100% { transform:translate(var(--px),var(--py)) scale(0); opacity:0 }
}