/* Form Styles - OnlyPearl */

/* Base Form Container */
.form-container {
    @apply bg-white rounded-2xl shadow-lg p-6 md:p-8;
}

/* Form Groups */
.form-group {
    @apply mb-6;
}

.form-group:last-child {
    @apply mb-0;
}

/* Labels */
.form-label {
    @apply block text-sm font-semibold text-gray-700 mb-2;
}

.form-label.required::after {
    content: ' *';
    @apply text-red-500;
}

.form-label-helper {
    @apply text-xs text-gray-500 mt-1;
}

/* Input Fields */
.form-input {
    @apply w-full px-4 py-3 text-sm border border-gray-300 rounded-lg 
           bg-white text-gray-900 placeholder-gray-400
           transition-all duration-200
           focus:outline-none focus:ring-2 focus:ring-pearl-500 focus:border-transparent
           disabled:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-500;
}

.form-input:focus {
    @apply shadow-md;
}

.form-input.error {
    @apply border-red-300 focus:ring-red-500 focus:border-red-300;
}

.form-input.success {
    @apply border-green-300 focus:ring-green-500 focus:border-green-300;
}

/* Textarea */
.form-textarea {
    @apply form-input resize-y min-h-[100px];
}

/* Select */
.form-select {
    @apply form-input appearance-none bg-no-repeat bg-right pr-10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
}

/* File Input */
.form-file {
    @apply block w-full text-sm text-gray-500
           file:mr-4 file:py-2 file:px-4
           file:rounded-lg file:border-0
           file:text-sm file:font-semibold
           file:bg-pearl-50 file:text-pearl-700
           hover:file:bg-pearl-100
           file:cursor-pointer
           border border-gray-300 rounded-lg
           transition-colors;
}

.form-file:focus {
    @apply outline-none ring-2 ring-pearl-500 border-transparent;
}

/* Checkbox & Radio */
.form-checkbox,
.form-radio {
    @apply h-4 w-4 text-pearl-600 focus:ring-pearl-500 border-gray-300 rounded;
}

.form-checkbox {
    @apply rounded;
}

.form-radio {
    @apply rounded-full;
}

/* Error Messages */
.form-error {
    @apply mt-2 text-sm text-red-600 flex items-start;
}

.form-error-icon {
    @apply mr-1.5 flex-shrink-0 mt-0.5;
}

/* Success Messages */
.form-success {
    @apply mt-2 text-sm text-green-600 flex items-start;
}

.form-success-icon {
    @apply mr-1.5 flex-shrink-0 mt-0.5;
}

/* Help Text */
.form-help {
    @apply mt-2 text-xs text-gray-500;
}

/* Input Group (with icon) */
.form-input-group {
    @apply relative;
}

.form-input-group-icon {
    @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
}

.form-input-group-icon svg {
    @apply h-5 w-5 text-gray-400;
}

.form-input-group .form-input {
    @apply pl-10;
}

/* Input with button */
.form-input-with-button {
    @apply flex rounded-lg shadow-sm;
}

.form-input-with-button .form-input {
    @apply rounded-r-none;
}

.form-input-with-button button {
    @apply px-4 py-3 border border-l-0 border-gray-300 rounded-r-lg
           bg-gray-50 text-gray-700 font-medium
           hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-pearl-500
           transition-colors;
}

/* Form Actions */
.form-actions {
    @apply flex flex-col sm:flex-row gap-3 sm:gap-4 pt-6 border-t border-gray-200;
}

.form-actions .btn-primary {
    @apply w-full sm:w-auto px-6 py-3 bg-pearl-600 text-white font-semibold rounded-lg
           hover:bg-pearl-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pearl-500
           transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
}

.form-actions .btn-secondary {
    @apply w-full sm:w-auto px-6 py-3 bg-white text-gray-700 font-semibold rounded-lg border border-gray-300
           hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
           transition-colors;
}

/* Form Sections */
.form-section {
    @apply mb-8 pb-8 border-b border-gray-200;
}

.form-section:last-child {
    @apply mb-0 pb-0 border-b-0;
}

.form-section-title {
    @apply text-lg font-bold text-gray-900 mb-4;
}

.form-section-description {
    @apply text-sm text-gray-600 mb-6;
}

/* Loading State */
.form-loading {
    @apply opacity-50 pointer-events-none;
}

/* Progress Indicator */
.form-progress {
    @apply mb-6;
}

.form-progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.form-progress-fill {
    @apply bg-pearl-600 h-2 rounded-full transition-all duration-300;
}

.form-progress-text {
    @apply text-xs text-gray-600 mt-2 text-center;
}

/* Floating Labels */
.form-floating {
    @apply relative;
}

.form-floating .form-input {
    @apply pt-6 pb-2;
}

.form-floating .form-label {
    @apply absolute left-4 top-3 text-gray-400 text-sm transition-all duration-200 pointer-events-none;
}

.form-floating .form-input:focus ~ .form-label,
.form-floating .form-input:not(:placeholder-shown) ~ .form-label {
    @apply top-1 text-xs text-pearl-600;
}

/* Character Counter */
.form-char-counter {
    @apply text-xs text-gray-500 mt-1 text-right;
}

.form-char-counter.warning {
    @apply text-yellow-600;
}

.form-char-counter.error {
    @apply text-red-600;
}

/* Password Strength Indicator */
.password-strength {
    @apply mt-2;
}

.password-strength-bar {
    @apply w-full bg-gray-200 rounded-full h-1.5;
}

.password-strength-fill {
    @apply h-1.5 rounded-full transition-all duration-300;
}

.password-strength-fill.weak {
    @apply bg-red-500 w-1/3;
}

.password-strength-fill.medium {
    @apply bg-yellow-500 w-2/3;
}

.password-strength-fill.strong {
    @apply bg-green-500 w-full;
}

.password-strength-text {
    @apply text-xs mt-1;
}

/* Responsive Grid */
.form-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6;
}

.form-grid-full {
    @apply col-span-1 md:col-span-2;
}