/**
 * InReception Booking Widget Styles
 * Elisa e Carla Beautiful House
 */

/* ====================================
   WIDGET CONTAINER
   ==================================== */
.inr-booking-widget-container {
    background: linear-gradient(135deg, #ffffff 0%, #f5f1ed 100%);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(47, 90, 61, 0.12);
    max-width: 100%;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.inr-booking-widget-container:hover {
    box-shadow: 0 12px 32px rgba(47, 90, 61, 0.16);
    transform: translateY(-2px);
}

/* Widget Title & Subtitle */
.inr-widget-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #2F5A3D;
    margin-bottom: 0.5rem;
    text-align: center;
}

.inr-widget-subtitle {
    font-size: 1rem;
    color: #666666;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ====================================
   FORM STYLES
   ==================================== */
.inr-booking-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Form Rows */
.inr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Form Groups */
.inr-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Labels */
.inr-form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2F5A3D;
    margin: 0;
}

.inr-form-group label i {
    color: #4A7C59;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Input Fields */
.inr-form-group input[type="text"],
.inr-form-group input[type="date"],
.inr-form-group input[type="number"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #D4C5B9;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    background-color: #ffffff;
    color: #2C2C2C;
}

.inr-form-group input:focus {
    outline: none;
    border-color: #4A7C59;
    box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.1);
    background-color: #ffffff;
}

.inr-form-group input:hover {
    border-color: #6B9D7A;
}

/* Input Placeholders */
.inr-form-group input::placeholder {
    color: #CCCCCC;
    font-style: italic;
}

/* Date Input Styling */
.inr-form-group input[type="date"] {
    position: relative;
    cursor: pointer;
}

.inr-form-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    color: #4A7C59;
    font-size: 1.2rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.inr-form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(74, 124, 89, 0.1);
}

/* Number Input Styling */
.inr-form-group input[type="number"] {
    -moz-appearance: textfield;
}

.inr-form-group input[type="number"]::-webkit-outer-spin-button,
.inr-form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ====================================
   SUBMIT BUTTON
   ==================================== */
.inr-form-actions {
    margin-top: 0.5rem;
}

.inr-submit-button {
    width: 100%;
    background: linear-gradient(135deg, #4A7C59 0%, #2F5A3D 100%);
    color: #ffffff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 10px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(47, 90, 61, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'Poppins', sans-serif;
}

.inr-submit-button:hover {
    background: linear-gradient(135deg, #2F5A3D 0%, #1F3D29 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(47, 90, 61, 0.3);
}

.inr-submit-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(47, 90, 61, 0.2);
}

.inr-submit-button i {
    font-size: 1.2rem;
}

/* Loading State */
.inr-submit-button.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.inr-submit-button.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 0.5rem;
}

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

/* ====================================
   WIDGET FOOTER
   ==================================== */
.inr-widget-footer {
    margin-top: 1rem;
    margin-bottom: 0;
    text-align: center;
    color: #666666;
}

.inr-widget-footer small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.inr-widget-footer i {
    color: #4A7C59;
}

/* ====================================
   COMPACT LAYOUT
   ==================================== */
.inr-widget-layout-compact {
    padding: 1.5rem;
}

.inr-widget-layout-compact .inr-widget-title {
    font-size: 1.5rem;
}

.inr-widget-layout-compact .inr-form-row {
    grid-template-columns: 1fr;
}

.inr-widget-layout-compact .inr-submit-button {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
}

/* ====================================
   SIDEBAR LAYOUT
   ==================================== */
.inr-widget-layout-sidebar {
    padding: 1.5rem;
    max-width: 400px;
}

.inr-widget-layout-sidebar .inr-form-row {
    grid-template-columns: 1fr;
}

.inr-widget-layout-sidebar .inr-widget-title {
    font-size: 1.5rem;
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

/* Tablet */
@media (max-width: 768px) {
    .inr-booking-widget-container {
        padding: 1.5rem;
    }

    .inr-widget-title {
        font-size: 1.5rem;
    }

    .inr-form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .inr-submit-button {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .inr-booking-widget-container {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .inr-widget-title {
        font-size: 1.25rem;
    }

    .inr-widget-subtitle {
        font-size: 0.9rem;
    }

    .inr-form-group label {
        font-size: 0.9rem;
    }

    .inr-form-group input {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }

    .inr-submit-button {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }

    .inr-submit-button i {
        font-size: 1rem;
    }
}

/* ====================================
   VALIDATION STATES
   ==================================== */
.inr-form-group input:invalid:not(:placeholder-shown) {
    border-color: #C75B5B;
}

.inr-form-group input:valid:not(:placeholder-shown) {
    border-color: #4A7C59;
}

/* Error Message */
.inr-error-message {
    color: #C75B5B;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.inr-form-group.has-error .inr-error-message {
    display: block;
}

.inr-form-group.has-error input {
    border-color: #C75B5B;
}

/* Success State */
.inr-success-message {
    background-color: #E8F5E9;
    color: #2F5A3D;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.inr-success-message.show {
    display: flex;
}

.inr-success-message i {
    color: #4A7C59;
}

/* ====================================
   ACCESSIBILITY
   ==================================== */
.inr-form-group input:focus-visible {
    outline: 2px solid #4A7C59;
    outline-offset: 2px;
}

.inr-submit-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ====================================
   ANIMATIONS
   ==================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inr-booking-widget-container {
    animation: fadeIn 0.4s ease;
}

/* Hover effect on inputs */
.inr-form-group input {
    position: relative;
}

/* Focus ring animation */
@keyframes focusRing {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.4);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.1);
    }
}

.inr-form-group input:focus {
    animation: focusRing 0.3s ease;
}

/* ====================================
   PRINT STYLES
   ==================================== */
@media print {
    .inr-booking-widget-container {
        box-shadow: none;
        border: 1px solid #CCCCCC;
    }

    .inr-submit-button {
        background: #4A7C59;
    }
}

/* ====================================
   DARK MODE SUPPORT (Optional)
   ==================================== */
@media (prefers-color-scheme: dark) {
    .inr-booking-widget-container {
        background: linear-gradient(135deg, #2C2C2C 0%, #1F1F1F 100%);
    }

    .inr-widget-title {
        color: #88B399;
    }

    .inr-widget-subtitle {
        color: #CCCCCC;
    }

    .inr-form-group label {
        color: #88B399;
    }

    .inr-form-group input {
        background-color: #2C2C2C;
        color: #ffffff;
        border-color: #4A7C59;
    }

    .inr-form-group input::placeholder {
        color: #666666;
    }

    .inr-widget-footer {
        color: #CCCCCC;
    }
}