/**
 * Forms - design system Style
 * 
 * Based on design system Design System
 * Universal form styles for inputs, selects, textareas
 * 
 * @package DorsetRealty
 */

/* ============================================
   Form Header (Title + Description)
   ============================================ */
.dr-form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--drpm-space-0_5);  /* 2px */
    margin-bottom: var(--drpm-space-8);  /* 32px под header */
}

.dr-form-title {
    font-weight: 600;
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
    color: var(--drpml-color-gray-900);  /* #181D27 */
    margin: 0;
}

.dr-form-desc {
    font-weight: 400;
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-600);  /* #535862 */
    margin: 0;
}

/* ============================================
   Form Groups
   ============================================ */
.dr-form-group,
.form-group {
    margin-bottom: var(--drpm-space-4);  /* 16px - консистентно */
    padding: 0;  /* Убираем padding от Bricks */
}

.dr-form-group:last-child,
.form-group:last-child {
    margin-bottom: 0;
}

/* ============================================
   Labels
   ============================================ */
.dr-label,
.dr-form-group label,
.form-group label {
    display: block;
    margin-bottom: var(--drpm-space-1_5);  /* 6px */
    font-weight: var(--drpml-fw-medium);
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-700);
}

/* ============================================
   Inputs & Textareas - design system
   ============================================ */
.dr-input,
.dr-textarea,
.dr-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--drpm-space-2_5) var(--drpm-space-3_5);  /* 10px 14px */
    font-size: 0.875rem;  /* 14px - меньше */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-900);
    background: var(--drpml-color-white);
    border: 1px solid var(--drpml-color-gray-300);
    border-radius: var(--drpm-radius-lg);  /* 8px */
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    transition: border-color var(--drpml-duration-fast) var(--drpml-ease-standard),
                box-shadow var(--drpml-duration-fast) var(--drpml-ease-standard);
}

/* Focus state */
.dr-input:focus,
.dr-textarea:focus,
.dr-select:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--drpml-color-brand-600);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                0px 0px 0px 4px rgba(63, 98, 87, 0.12);  /* Brand-600 with 12% opacity */
}

/* Placeholder */
.dr-input::placeholder,
.dr-textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--drpml-color-gray-500);
}

/* Disabled state */
.dr-input:disabled,
.dr-textarea:disabled,
.dr-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--drpml-color-gray-50);
    color: var(--drpml-color-gray-500);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Error state */
.dr-input.error,
.dr-textarea.error,
input.error,
textarea.error {
    border-color: var(--drpml-color-error-600);
}

.dr-input.error:focus,
.dr-textarea.error:focus {
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                0px 0px 0px 4px rgba(240, 68, 56, 0.12);
}

/* ============================================
   Textarea Specific
   ============================================ */
textarea {
    min-height: 120px;
    resize: vertical;
    padding-top: var(--drpm-space-3);
    padding-bottom: var(--drpm-space-3);
}

/* ============================================
   Select Dropdown
   ============================================ */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23A4A7AE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--drpm-space-3_5) center;
    background-size: 16px 16px;
    padding-right: var(--drpm-space-10);  /* Room for icon */
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

/* Placeholder option */
select option.placeholder {
    color: var(--drpml-color-gray-500);
}

/* ============================================
   Submit Button (with loading state)
   ============================================ */
.submit-button-wrapper {
    width: 100%;  /* Wrapper на всю ширину */
    margin-top: var(--drpm-space-6);
    margin-bottom: 0;
}

/* Submit button - full width primary */
button[type="submit"],
.submit-button-wrapper button,
.submit-button-wrapper button[type="submit"] {
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--drpm-space-2_5) var(--drpm-space-4);  /* 10px 16px */
    font-weight: 600;
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
    border-radius: var(--drpm-radius-lg);
    cursor: pointer;
    
    /* Primary button style - как dr-btn-primary */
    border: 1px solid var(--drpml-color-brand-600);
    background-color: var(--drpml-color-brand-600);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    color: var(--drpml-color-white);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 1px 0px rgba(255, 255, 255, 0.12);
    
    transition: all var(--drpml-duration-fast) var(--drpml-ease-standard);
}

button[type="submit"]:hover,
.submit-button-wrapper button:hover {
    border-color: var(--drpml-color-brand-700);
    background-color: var(--drpml-color-brand-700);
}

/* Loading spinner (hide text, show spinner) */
button[type="submit"] .loading {
    display: none;
}

button[type="submit"].loading .text {
    opacity: 0;
}

button[type="submit"].loading .loading {
    display: inline-flex;
    animation: spin 1s linear infinite;
}

button[type="submit"].loading .loading svg {
    width: 20px;
    height: 20px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   Helper Text
   ============================================ */
.dr-form-help,
.help-text {
    margin-top: var(--drpm-space-1_5);  /* 6px */
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-600);
}

.dr-form-error,
.error-text {
    margin-top: var(--drpm-space-1_5);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--drpml-color-error-600);
}

/* ============================================
   Checkbox & Radio (design system)
   ============================================ */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-right: var(--drpm-space-2);
    cursor: pointer;
    accent-color: var(--drpml-color-brand-600);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .dr-form-group,
    .form-group {
        margin-bottom: var(--drpm-space-3);  /* 12px - компактнее */
    }
    
    /* Убираем лишний padding если Bricks добавляет */
    .form-group {
        padding-bottom: 0;
    }
}