/* WP Form Pro - Frontend Styles
   Mobile-first responsive design. All properties use CSS variables.
*/

:root {
    --wpfp-primary: #4f46e5;
    --wpfp-primary-hover: #4338ca;
    --wpfp-primary-light: #eef2ff;
    --wpfp-text: #1f2937;
    --wpfp-text-light: #6b7280;
    --wpfp-text-lighter: #9ca3af;
    --wpfp-bg: #ffffff;
    --wpfp-bg-alt: #f9fafb;
    --wpfp-border: #d1d5db;
    --wpfp-border-focus: #4f46e5;
    --wpfp-radius: 6px;
    --wpfp-radius-lg: 10px;
    --wpfp-error: #dc2626;
    --wpfp-error-bg: #fef2f2;
    --wpfp-success: #16a34a;
    --wpfp-success-bg: #f0fdf4;
    --wpfp-font-size: 16px;
    --wpfp-label-size: 14px;
    --wpfp-spacing: 20px;
    --wpfp-input-padding: 12px 14px;
    --wpfp-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wpfp-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.15);
    --wpfp-transition: 0.2s ease;
}

/* ===== BASE / MOBILE FIRST ===== */
.wpfp-form-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--wpfp-font-size);
    color: var(--wpfp-text);
    line-height: 1.6;
    width: 100%;
    max-width: 720px;
    padding: 0 4px;
    box-sizing: border-box;
}
.wpfp-form-wrapper *, .wpfp-form-wrapper *::before, .wpfp-form-wrapper *::after { box-sizing: border-box; }

.wpfp-form-title { font-size: 1.35em; font-weight: 700; margin: 0 0 6px; color: var(--wpfp-text); }
.wpfp-form-description { color: var(--wpfp-text-light); margin-bottom: var(--wpfp-spacing); font-size: 0.9em; }

/* Messages */
.wpfp-messages { padding: 14px 16px; border-radius: var(--wpfp-radius); margin-bottom: var(--wpfp-spacing); font-size: 14px; }
.wpfp-messages.wpfp-msg-success { background: var(--wpfp-success-bg); color: var(--wpfp-success); border: 1px solid #bbf7d0; }
.wpfp-messages.wpfp-msg-error { background: var(--wpfp-error-bg); color: var(--wpfp-error); border: 1px solid #fecaca; }

/* ===== FIELDS ===== */
.wpfp-field { margin-bottom: var(--wpfp-spacing); }

.wpfp-label { display: block; font-size: var(--wpfp-label-size); font-weight: 600; margin-bottom: 6px; color: var(--wpfp-text); }
.wpfp-required { color: var(--wpfp-error); margin-left: 2px; }

.wpfp-input, .wpfp-textarea, .wpfp-select {
    display: block; width: 100%; padding: var(--wpfp-input-padding);
    font-size: var(--wpfp-font-size); font-family: inherit; color: var(--wpfp-text);
    background: var(--wpfp-bg); border: 1px solid var(--wpfp-border); border-radius: var(--wpfp-radius);
    box-shadow: var(--wpfp-shadow); transition: border-color var(--wpfp-transition), box-shadow var(--wpfp-transition);
    -webkit-appearance: none; appearance: none;
    /* Prevent iOS zoom on focus */
    font-size: max(var(--wpfp-font-size), 16px);
}
.wpfp-input:focus, .wpfp-textarea:focus, .wpfp-select:focus {
    outline: none; border-color: var(--wpfp-border-focus); box-shadow: var(--wpfp-shadow-focus);
}
.wpfp-input::placeholder, .wpfp-textarea::placeholder { color: var(--wpfp-text-lighter); }

.wpfp-textarea { resize: vertical; min-height: 100px; }

.wpfp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

/* Field Sizes - responsive */
.wpfp-size-small { max-width: 100%; }
.wpfp-size-medium { max-width: 100%; }
.wpfp-size-large { max-width: 100%; }

/* ===== CHOICES ===== */
.wpfp-choices { display: flex; flex-direction: column; gap: 10px; }
.wpfp-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--wpfp-font-size); padding: 6px 0; -webkit-tap-highlight-color: transparent; }
.wpfp-choice input[type="checkbox"], .wpfp-choice input[type="radio"] {
    width: 20px; height: 20px; accent-color: var(--wpfp-primary); margin: 0; cursor: pointer; flex-shrink: 0;
}

/* ===== NAME FIELDS ===== */
.wpfp-name-fields { display: flex; flex-direction: column; gap: 12px; }
.wpfp-sub-label { display: block; font-size: 12px; color: var(--wpfp-text-lighter); margin-top: 4px; }

/* ===== ADDRESS FIELDS ===== */
.wpfp-address-fields { display: flex; flex-direction: column; gap: 12px; }
.wpfp-address-row-half { display: flex; flex-direction: column; gap: 12px; }

/* ===== FILE UPLOAD ===== */
.wpfp-file {
    padding: 12px; font-size: 14px; border: 2px dashed var(--wpfp-border); border-radius: var(--wpfp-radius);
    background: var(--wpfp-bg-alt); width: 100%; cursor: pointer;
}
.wpfp-file:hover { border-color: var(--wpfp-primary); }
.wpfp-file-types { display: block; font-size: 12px; color: var(--wpfp-text-lighter); margin-top: 4px; }

/* ===== CONSENT ===== */
.wpfp-consent {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    padding: 14px 16px; background: var(--wpfp-bg-alt); border: 1px solid var(--wpfp-border); border-radius: var(--wpfp-radius);
}
.wpfp-consent input { margin-top: 3px; width: 20px; height: 20px; flex-shrink: 0; }

/* ===== PAYMENT FIELD ===== */
.wpfp-payment-field { border: 1px solid var(--wpfp-border); border-radius: var(--wpfp-radius); overflow: hidden; }
.wpfp-payment-summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: var(--wpfp-bg-alt);
}
.wpfp-payment-label { font-weight: 600; color: var(--wpfp-text); }
.wpfp-payment-amount { font-size: 1.2em; font-weight: 700; color: var(--wpfp-primary); }
.wpfp-stripe-card { padding: 14px 16px; }
.wpfp-card-errors { padding: 0 16px 10px; font-size: 13px; color: var(--wpfp-error); }

/* ===== SECTION BREAK ===== */
.wpfp-section-break { padding: 8px 0; border-bottom: 2px solid var(--wpfp-border); margin-bottom: 8px; }
.wpfp-section-break h4 { font-size: 1.1em; font-weight: 700; margin: 0 0 4px; }
.wpfp-section-break p { margin: 0; color: var(--wpfp-text-light); font-size: 0.9em; }

/* Description & Error */
.wpfp-field-desc { display: block; font-size: 12px; color: var(--wpfp-text-lighter); margin-top: 4px; }
.wpfp-field-error { display: block; font-size: 13px; color: var(--wpfp-error); margin-top: 4px; font-weight: 500; }
.wpfp-field.wpfp-has-error .wpfp-input,
.wpfp-field.wpfp-has-error .wpfp-textarea,
.wpfp-field.wpfp-has-error .wpfp-select { border-color: var(--wpfp-error); box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }

/* ===== PROGRESS BAR ===== */
.wpfp-progress-bar { position: relative; height: 6px; background: #e5e7eb; border-radius: 99px; margin-bottom: var(--wpfp-spacing); overflow: hidden; }
.wpfp-progress-fill { height: 100%; background: var(--wpfp-primary); border-radius: 99px; transition: width 0.4s ease; }
.wpfp-progress-text { display: block; font-size: 12px; color: var(--wpfp-text-light); margin-top: 6px; text-align: center; }

/* ===== BUTTONS ===== */
.wpfp-page-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: var(--wpfp-spacing); }

.wpfp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; font-size: var(--wpfp-font-size); font-weight: 600; font-family: inherit;
    border: none; border-radius: var(--wpfp-radius); cursor: pointer; transition: all var(--wpfp-transition);
    line-height: 1; width: 100%; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.wpfp-btn-submit {
    background: var(--wpfp-primary); color: #fff;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}
.wpfp-btn-submit:hover { background: var(--wpfp-primary-hover); box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4); }
.wpfp-btn-submit:active { transform: scale(0.98); }
.wpfp-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.wpfp-btn-prev, .wpfp-btn-next {
    background: var(--wpfp-bg-alt); color: var(--wpfp-text); border: 1px solid var(--wpfp-border);
}
.wpfp-btn-prev:hover, .wpfp-btn-next:hover { background: #e5e7eb; }

.wpfp-form-footer { margin-top: var(--wpfp-spacing); padding-top: var(--wpfp-spacing); border-top: 1px solid #f3f4f6; }

/* Spinner */
.wpfp-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: wpfp-spin 0.6s linear infinite; margin-right: 8px;
}
@keyframes wpfp-spin { to { transform: rotate(360deg); } }

/* Animation */
.wpfp-field { animation: wpfp-fadein 0.3s ease; }
@keyframes wpfp-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }


/* ===================================================================
   TABLET - 600px+
   =================================================================== */
@media (min-width: 600px) {
    .wpfp-form-wrapper { padding: 0; }
    .wpfp-form-title { font-size: 1.5em; }

    /* Name fields side by side */
    .wpfp-name-fields { flex-direction: row; gap: 16px; }
    .wpfp-name-field { flex: 1; }

    /* Address half-rows side by side */
    .wpfp-address-row-half { flex-direction: row; gap: 16px; }
    .wpfp-address-col { flex: 1; }

    /* Field sizes take effect */
    .wpfp-size-small { max-width: 200px; }
    .wpfp-size-medium { max-width: 400px; }

    /* Buttons side by side */
    .wpfp-page-buttons { flex-direction: row; justify-content: flex-end; }
    .wpfp-btn { width: auto; }

    /* Choices can go horizontal if few */
    .wpfp-checkboxes, .wpfp-radios { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
}


/* ===================================================================
   DESKTOP - 900px+
   =================================================================== */
@media (min-width: 900px) {
    .wpfp-input, .wpfp-textarea, .wpfp-select { font-size: var(--wpfp-font-size); }

    /* Tighter input padding on desktop */
    :root {
        --wpfp-input-padding: 10px 14px;
        --wpfp-font-size: 15px;
    }

    .wpfp-btn { padding: 12px 28px; }

    /* Hover effects only on desktop (no sticky hover on touch) */
    .wpfp-btn-submit:hover { transform: translateY(-1px); }
}


/* ===================================================================
   SMALL PHONES - under 380px
   =================================================================== */
@media (max-width: 380px) {
    .wpfp-form-wrapper { font-size: 14px; }
    .wpfp-form-title { font-size: 1.2em; }
    .wpfp-input, .wpfp-textarea, .wpfp-select { padding: 10px 12px; }
    .wpfp-btn { padding: 12px 16px; font-size: 14px; }
    .wpfp-payment-summary { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* ===================================================================
   PRINT
   =================================================================== */
@media print {
    .wpfp-form-wrapper { max-width: 100%; }
    .wpfp-btn-submit, .wpfp-btn-prev, .wpfp-btn-next, .wpfp-progress-bar { display: none; }
    .wpfp-input, .wpfp-textarea, .wpfp-select { border-color: #999; box-shadow: none; }
}


/* ===================================================================
   DARK MODE (prefers-color-scheme)
   =================================================================== */
@media (prefers-color-scheme: dark) {
    .wpfp-form-wrapper {
        --wpfp-text: #e2e8f0;
        --wpfp-text-light: #94a3b8;
        --wpfp-text-lighter: #64748b;
        --wpfp-bg: #1e293b;
        --wpfp-bg-alt: #0f172a;
        --wpfp-border: #334155;
        --wpfp-error-bg: #451a1a;
        --wpfp-success-bg: #14532d;
    }
}


/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wpfp-field { animation: none; }
    .wpfp-btn { transition: none; }
    .wpfp-progress-fill { transition: none; }
    .wpfp-spinner { animation-duration: 1.5s; }
}


/* ===================================================================
   LANDSCAPE PHONE - prevent awkward heights
   =================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .wpfp-textarea { min-height: 60px; }
    .wpfp-spacing { --wpfp-spacing: 14px; }
}