/* WP WhatsApp Forms - Frontend Styles */

.wpwf-form-wrapper {
    --wpwf-primary: #e08a3c;
    --wpwf-secondary: #1e3a5f;
    --wpwf-text: #333333;
    --wpwf-bg: #ffffff;
    --wpwf-radius: 8px;
    --wpwf-font-size: 16px;
    --wpwf-btn-radius: 50px;
    --wpwf-padding: 30px;
    --wpwf-border: #d0d0d0;
    --wpwf-focus: var(--wpwf-primary);

    background: var(--wpwf-bg);
    padding: var(--wpwf-padding);
    border-radius: var(--wpwf-radius);
    font-size: var(--wpwf-font-size);
    color: var(--wpwf-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}
.wpwf-form-wrapper *, .wpwf-form-wrapper *::before, .wpwf-form-wrapper *::after {
    box-sizing: border-box;
}

/* Grid Layout */
.wpwf-form {
    display: grid;
    gap: 20px;
}
.wpwf-form.wpwf-cols-2 {
    grid-template-columns: 1fr 1fr;
}
.wpwf-form.wpwf-cols-1 {
    grid-template-columns: 1fr;
}
.wpwf-field-full {
    grid-column: 1 / -1;
}

/* Input Base */
.wpwf-input {
    width: 100%;
    padding: 14px 18px;
    font-size: var(--wpwf-font-size);
    color: var(--wpwf-text);
    background: var(--wpwf-bg);
    border: 1px solid var(--wpwf-border);
    border-radius: var(--wpwf-radius);
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-family: inherit;
}
.wpwf-input:focus {
    border-color: var(--wpwf-focus);
    box-shadow: 0 0 0 3px rgba(224, 138, 60, 0.15);
}
.wpwf-input::placeholder {
    color: #999;
}
.wpwf-textarea {
    resize: vertical;
    min-height: 120px;
}
.wpwf-select {
    appearance: none;
    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='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

/* Labels */
.wpwf-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: calc(var(--wpwf-font-size) * 0.875);
    color: var(--wpwf-text);
}
.wpwf-required {
    color: #dc3232;
}

/* Floating Labels */
.wpwf-labels-floating .wpwf-input-wrap {
    position: relative;
}
.wpwf-floating-label {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    font-size: var(--wpwf-font-size);
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
    background: var(--wpwf-bg);
    padding: 0 4px;
    z-index: 1;
}
.wpwf-input:focus ~ .wpwf-floating-label,
.wpwf-input:not(:placeholder-shown) ~ .wpwf-floating-label,
.wpwf-floating-label.wpwf-floating-active {
    top: 0;
    font-size: calc(var(--wpwf-font-size) * 0.75);
    color: var(--wpwf-focus);
    font-weight: 600;
}
.wpwf-labels-floating .wpwf-textarea ~ .wpwf-floating-label {
    top: 18px;
    transform: none;
}
.wpwf-labels-floating .wpwf-textarea:focus ~ .wpwf-floating-label,
.wpwf-labels-floating .wpwf-textarea:not(:placeholder-shown) ~ .wpwf-floating-label {
    top: -8px;
}

/* File Input */
.wpwf-file-wrap {
    padding: 0;
}
.wpwf-file-label {
    display: block;
    margin-bottom: 10px;
    font-size: calc(var(--wpwf-font-size) * 0.875);
    color: #666;
}
.wpwf-file-input-wrap {
    position: relative;
}
.wpwf-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.wpwf-file-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 2px dashed var(--wpwf-border);
    border-radius: var(--wpwf-radius);
    background: #fafafa;
    transition: border-color 0.3s, background 0.3s;
    cursor: pointer;
}
.wpwf-file-input-wrap:hover .wpwf-file-display {
    border-color: var(--wpwf-primary);
    background: #fff5eb;
}
.wpwf-file-display.has-file {
    border-style: solid;
    border-color: var(--wpwf-primary);
    background: #fff5eb;
}
.wpwf-file-icon {
    font-size: 20px;
}
.wpwf-file-name {
    flex: 1;
    font-size: calc(var(--wpwf-font-size) * 0.875);
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wpwf-file-display.has-file .wpwf-file-name {
    color: var(--wpwf-text);
    font-weight: 500;
}
.wpwf-file-remove {
    cursor: pointer;
    color: #999;
    font-size: 16px;
    padding: 4px;
    z-index: 3;
    position: relative;
}
.wpwf-file-remove:hover {
    color: #dc3232;
}

/* Checkbox */
.wpwf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: calc(var(--wpwf-font-size) * 0.9);
}
.wpwf-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--wpwf-primary);
}

/* Submit Button */
.wpwf-submit-wrap {
    padding-top: 10px;
}
.wpwf-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 40px;
    font-size: var(--wpwf-font-size);
    font-weight: 700;
    color: #fff;
    background: var(--wpwf-primary);
    border: none;
    border-radius: var(--wpwf-btn-radius);
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: inherit;
    min-width: 250px;
}
.wpwf-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.wpwf-submit-btn:active {
    transform: translateY(0);
}
.wpwf-whatsapp-icon {
    flex-shrink: 0;
}

/* Loading */
.wpwf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: #666;
}
.wpwf-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--wpwf-primary);
    border-radius: 50%;
    animation: wpwf-spin 0.8s linear infinite;
}
@keyframes wpwf-spin {
    to { transform: rotate(360deg); }
}

/* Validation */
.wpwf-input.wpwf-error {
    border-color: #dc3232;
    box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.1);
}
.wpwf-error-msg {
    color: #dc3232;
    font-size: 12px;
    margin-top: 4px;
}

/* =========================
   TEMPLATE STYLES
   ========================= */

/* Modern (default) - clean with shadows */
.wpwf-template-modern {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.wpwf-template-modern .wpwf-input {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Classic - bordered and structured */
.wpwf-template-classic {
    border: 2px solid var(--wpwf-secondary);
}
.wpwf-template-classic .wpwf-input {
    border-radius: 0;
    border-width: 2px;
}
.wpwf-template-classic .wpwf-submit-btn {
    border-radius: 0;
    background: var(--wpwf-secondary);
    letter-spacing: 2px;
}
.wpwf-template-classic .wpwf-file-display {
    border-radius: 0;
}

/* Minimal - underline style */
.wpwf-template-minimal {
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.wpwf-template-minimal .wpwf-input {
    border: none;
    border-bottom: 2px solid var(--wpwf-border);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
.wpwf-template-minimal .wpwf-input:focus {
    border-bottom-color: var(--wpwf-primary);
    box-shadow: none;
}
.wpwf-template-minimal .wpwf-submit-btn {
    border-radius: 0;
    background: var(--wpwf-text);
}
.wpwf-template-minimal .wpwf-file-display {
    border-radius: 0;
    background: transparent;
}

/* Corporate - professional */
.wpwf-template-corporate {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}
.wpwf-template-corporate .wpwf-input {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
}
.wpwf-template-corporate .wpwf-input:focus {
    border-color: var(--wpwf-secondary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.wpwf-template-corporate .wpwf-submit-btn {
    background: var(--wpwf-secondary);
    border-radius: 4px;
    letter-spacing: 1px;
}
.wpwf-template-corporate .wpwf-file-display {
    background: #fff;
    border-color: #ced4da;
}

/* Rounded - soft and friendly */
.wpwf-template-rounded {
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.wpwf-template-rounded .wpwf-input {
    border-radius: 50px;
    padding-left: 22px;
    background: #f5f5f5;
    border-color: transparent;
}
.wpwf-template-rounded .wpwf-input:focus {
    background: #fff;
    border-color: var(--wpwf-primary);
}
.wpwf-template-rounded .wpwf-textarea {
    border-radius: 20px;
    padding: 18px 22px;
}
.wpwf-template-rounded .wpwf-submit-btn {
    border-radius: 50px;
    background: linear-gradient(135deg, #25D366, #128C7E);
}
.wpwf-template-rounded .wpwf-file-display {
    border-radius: 50px;
    background: #f5f5f5;
    border-color: transparent;
}

/* Responsive */
@media (max-width: 600px) {
    .wpwf-form.wpwf-cols-2 {
        grid-template-columns: 1fr;
    }
    .wpwf-form-wrapper {
        padding: 20px;
    }
    .wpwf-submit-btn {
        width: 100%;
        min-width: unset;
    }
}