/* =====================================================
   WhatsApp Forms — Public CSS v3.0.0
   All colors/radii use CSS custom properties (--waf-*).
   Override any variable at the form scope:
     #waf-form-123 { --waf-accent: #ff0000; }
   Or use the "CSS personalizado" field in the backend.
   ===================================================== */

/* --- Default variables (fallback if not set by PHP) --- */
.waf-form-wrapper {
    --waf-accent:       #25D366;
    --waf-accent-rgb:   37, 211, 102;
    --waf-bg:           #ffffff;
    --waf-border:       #e5e7eb;
    --waf-label-color:  #1f2937;
    --waf-form-radius:  14px;
    --waf-btn-radius:   10px;
    --waf-input-radius: 8px;
    --waf-shadow:       0 4px 20px rgba(0,0,0,.07);
}

/* =====================================================
   WRAPPER CARD
   ===================================================== */
.waf-form-wrapper {
    background:    var(--waf-bg);
    border:        1px solid var(--waf-border);
    border-radius: var(--waf-form-radius);
    padding:       28px 32px;
    max-width:     560px;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow:    var(--waf-shadow);
}

/* =====================================================
   FIELDS
   ===================================================== */
.waf-field { margin-bottom: 20px; }

.waf-label {
    display:       block;
    font-size:     14px;
    font-weight:   600;
    color:         var(--waf-label-color);
    margin-bottom: 7px;
}
.waf-required { color: #ef4444; margin-left: 3px; }

/* Text / email / number / select */
.waf-input {
    width:        100%;
    box-sizing:   border-box;
    padding:      10px 14px;
    font-size:    14px;
    border:       1.5px solid var(--waf-border);
    border-radius: var(--waf-input-radius);
    outline:      none;
    transition:   border-color .18s, box-shadow .18s;
    color:        #1f2937;
    background:   #fafafa;
    font-family:  inherit;
}
.waf-input:focus {
    border-color: var(--waf-accent);
    box-shadow:   0 0 0 3px rgba(var(--waf-accent-rgb), .15);
    background:   #fff;
}
.waf-input.waf-has-error {
    border-color: #ef4444;
    box-shadow:   0 0 0 3px rgba(239,68,68,.12);
}

select.waf-input {
    appearance:          none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    background-size:     18px;
    padding-right:       36px;
    cursor:              pointer;
}

/* =====================================================
   RADIO / CHECKBOX
   ===================================================== */
.waf-radio-group,
.waf-checkbox-group { display: flex; flex-direction: column; gap: 8px; }

.waf-option-label {
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     14px;
    color:         #374151;
    cursor:        pointer;
    padding:       9px 14px;
    border:        1.5px solid var(--waf-border);
    border-radius: var(--waf-input-radius);
    transition:    border-color .15s, background .15s;
    user-select:   none;
}
.waf-option-label:hover {
    border-color: var(--waf-accent);
    background:   rgba(var(--waf-accent-rgb), .06);
}
.waf-option-label.waf-selected {
    border-color: var(--waf-accent);
    background:   rgba(var(--waf-accent-rgb), .08);
}

.waf-option-label input[type="radio"],
.waf-option-label input[type="checkbox"] {
    accent-color: var(--waf-accent);
    width:        17px;
    height:       17px;
    cursor:       pointer;
    flex-shrink:  0;
    margin:       0;
}

/* Max hint */
.waf-max-hint { font-size: 12px; color: #9ca3af; margin: 4px 0 0; }

/* Error message */
.waf-field-error {
    display:    block;
    color:      #ef4444;
    font-size:  12px;
    margin-top: 5px;
    min-height: 16px;
}

/* =====================================================
   SUBMIT BUTTON
   ===================================================== */
.waf-submit-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         14px 20px;
    font-size:       16px;
    font-weight:     700;
    color:           #fff;
    background:      var(--waf-accent);
    border:          none;
    border-radius:   var(--waf-btn-radius);
    cursor:          pointer;
    transition:      filter .15s, transform .12s, box-shadow .15s;
    margin-top:      8px;
    letter-spacing:  .3px;
    font-family:     inherit;
    box-shadow:      0 4px 15px rgba(var(--waf-accent-rgb), .30);
}
.waf-submit-btn:hover:not(:disabled) {
    filter:     brightness(1.08);
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--waf-accent-rgb), .40);
}
.waf-submit-btn:active:not(:disabled) { transform: translateY(0); }
.waf-submit-btn:disabled { opacity: .7; cursor: not-allowed; }

/* =====================================================
   reCAPTCHA badge
   ===================================================== */
.waf-recaptcha-badge {
    font-size:  11px;
    color:      #9ca3af;
    text-align: center;
    margin:     8px 0 0;
}
.waf-recaptcha-badge a { color: #9ca3af; }
.waf-recaptcha-badge a:hover { color: var(--waf-accent); }

/* Generic error notice */
.waf-error { color: #ef4444; font-style: italic; }

/* =====================================================
   SUCCESS PANEL
   ===================================================== */
.waf-success-panel {
    text-align: center;
    padding:    32px 20px;
    animation:  wafFadeIn .35s ease;
}

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

.waf-success-icon {
    margin-bottom: 16px;
    animation:     wafPop .4s cubic-bezier(.17,.67,.35,1.3);
}

@keyframes wafPop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.waf-success-text {
    font-size:   16px;
    color:       #1f2937;
    line-height: 1.6;
    margin:      0 0 20px;
    white-space: pre-line;
}

.waf-success-wa-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 24px;
    color:           #fff;
    background:      var(--waf-accent);
    font-size:       15px;
    font-weight:     700;
    border-radius:   var(--waf-btn-radius);
    text-decoration: none;
    transition:      filter .15s, transform .12s;
    font-family:     inherit;
}
.waf-success-wa-btn:hover {
    filter:    brightness(1.08);
    transform: translateY(-1px);
    color:     #fff;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 480px) {
    .waf-form-wrapper { padding: 20px 18px; }
}

/* =====================================================
   QUICK REFERENCE — CSS variables you can override
   ===================================================== */
/*
  --waf-accent        Button & selection color      default: #25D366
  --waf-accent-rgb    Same color as "r, g, b"       default: 37, 211, 102
  --waf-bg            Form card background           default: #ffffff
  --waf-border        Card & input border color      default: #e5e7eb
  --waf-label-color   Field label text color         default: #1f2937
  --waf-form-radius   Card corner radius             default: 14px
  --waf-btn-radius    Button corner radius           default: 10px
  --waf-input-radius  Input/option corner radius     default: 8px
  --waf-shadow        Card box-shadow                default: soft shadow

  Example — target a specific form only:
  #waf-form-42 {
    --waf-accent:      #e63946;
    --waf-accent-rgb:  230, 57, 70;
    --waf-form-radius: 4px;
    --waf-shadow:      none;
  }
*/