/**

 * Styles pour le frontend de Gîte Réservation Pro

 */



.gite-reservation-form {

    max-width: 800px;

    margin: 0 auto;

    padding: 30px;

    background: var(--gite-color-background, #ffffff);

    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}



.gite-form-header {

    text-align: center;

    margin-bottom: 40px;

}



.gite-form-header h2 {

    color: var(--gite-color-secondary, #2c3e50);

    font-size: 32px;

    margin-bottom: 10px;

}



.gite-form-subtitle {

    color: var(--gite-color-text-light, #7f8c8d);

    font-size: 16px;

}



.gite-form-container {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.gite-form-section {

    margin-bottom: 40px;

    padding-bottom: 30px;

    border-bottom: 1px solid var(--gite-border);

}



.gite-form-section:last-child {

    border-bottom: none;

}



.gite-form-section h3 {

    color: var(--gite-color-secondary, #2c3e50);

    font-size: 20px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

}



.gite-form-section h3::before {

    content: attr(data-step);

    background: var(--gite-color-primary, #3498db);

    color: white;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 10px;

    font-size: 14px;

    font-weight: bold;

}



.gite-date-picker {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-bottom: 30px;

}



.gite-date-field {

    display: flex;

    flex-direction: column;

}



.gite-date-field label {

    font-weight: 600;

    color: var(--gite-color-secondary, #2c3e50);

    margin-bottom: 8px;

}



.gite-date-field input {

    padding: 12px;

    border: 2px solid var(--gite-border);

    border-radius: 8px;

    font-size: 16px;

    transition: border-color 0.3s;

}



.gite-date-field input:focus {

    outline: none;

    border-color: var(--gite-color-primary, #3498db);

}



.gite-date-field small {

    color: var(--gite-color-text-light, #7f8c8d);

    font-size: 12px;

    margin-top: 5px;

}



.gite-calendar-container {

    background: var(--gite-color-background-light, #f8f9fa);

    border-radius: 8px;

    padding: 20px;

}



#gite-calendar {

    min-height: 300px;

}



.gite-guests-section {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.gite-guest-field label {

    font-weight: 600;

    color: var(--gite-color-secondary, #2c3e50);

    margin-bottom: 8px;

}



.gite-guest-field select {

    padding: 12px;

    border: 2px solid var(--gite-border);

    border-radius: 8px;

    font-size: 16px;

    background: white;

}



.gite-capacity-info {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--gite-color-success, #27ae60);

    font-size: 14px;

}



.gite-price-summary {

    background: var(--gite-color-background-light, #f8f9fa);

    border-radius: 8px;

    padding: 20px;

}



.gite-price-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 0;

    border-bottom: 1px solid var(--gite-border);

}



.gite-price-row:last-child {

    border-bottom: none;

}



.gite-total {

    font-weight: bold;

    font-size: 18px;

    color: var(--gite-color-secondary, #2c3e50);

    padding-top: 15px;

    border-top: 2px solid var(--gite-color-primary, #3498db);

}



.gite-deposit-info {

    margin-top: 20px;

    padding: 15px;

    background: var(--gite-primary-light,#e8f4fd);

    border-radius: 8px;

    border-left: 4px solid var(--gite-color-primary, #3498db);

}



.gite-deposit-amount {

    display: flex;

    justify-content: space-between;

    font-weight: 600;

    color: var(--gite-color-secondary, #2c3e50);

}



.gite-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.gite-form-field {

    display: flex;

    flex-direction: column;

}



.gite-form-field label {

    font-weight: 600;

    color: var(--gite-color-secondary, #2c3e50);

    margin-bottom: 8px;

}



.gite-form-field input,

.gite-form-field textarea {

    padding: 12px;

    border: 2px solid var(--gite-border);

    border-radius: 8px;

    font-size: 16px;

    transition: border-color 0.3s;

}



.gite-form-field input:focus,

.gite-form-field textarea:focus {

    outline: none;

    border-color: var(--gite-color-primary, #3498db);

}



.gite-payment-section {

    margin-bottom: 20px;

}



.gite-payment-methods {

    margin-bottom: 20px;

}



.gite-payment-method {

    display: flex;

    align-items: flex-start;

    padding: 15px;

    border: 2px solid var(--gite-border);

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s;

}



.gite-payment-method.selected {

    border-color: var(--gite-color-primary, #3498db);

    background: var(--gite-color-background-light, #f8f9fa);

}



.gite-payment-method input[type="radio"] {

    margin-right: 10px;

    margin-top: 2px;

}



.gite-payment-method label {

    cursor: pointer;

    flex: 1;

}



.gite-payment-icon {

    font-size: 20px;

    margin-right: 10px;

}



.gite-payment-method small {

    display: block;

    color: var(--gite-color-text-light, #7f8c8d);

    font-size: 12px;

    margin-top: 5px;

}



.gite-security-info {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--gite-color-success, #27ae60);

    font-size: 14px;

}



.gite-form-actions {

    text-align: center;

    margin-top: 40px;

}



.gite-btn {

    background: var(--gite-color-primary, #3498db);

    color: white;

    border: none;

    padding: 15px 40px;

    border-radius: 8px;

    font-size: 18px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 250px;

}



.gite-btn:hover:not(:disabled) {

    background: var(--gite-color-primary-hover, #2980b9);

    transform: translateY(-2px);

}



.gite-btn:disabled {

    background: var(--gite-text-muted);

    cursor: not-allowed;

    transform: none;

}



.gite-btn-price {

    font-weight: bold;

}



.gite-form-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 20px;

    color: var(--gite-color-text-light, #7f8c8d);

}



.gite-spinner {

    width: 20px;

    height: 20px;

    border: 2px solid var(--gite-border);

    border-top: 2px solid var(--gite-color-primary, #3498db);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.gite-form-message {

    margin-top: 20px;

    padding: 15px;

    border-radius: 8px;

    font-weight: 600;

}



.gite-form-message.success {

    background: var(--gite-color-success-bg, #d4edda);

    color: var(--gite-success,#155724);

    border: 1px solid var(--gite-color-success, #c3e6cb);

}



.gite-form-message.error {

    background: var(--gite-color-error-bg, #f8d7da);

    color: var(--gite-danger,#721c24);

    border: 1px solid color-mix(in srgb,var(--gite-danger,#e74c3c) 40%,#fff);

}



.gite-form-footer {

    text-align: center;

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid var(--gite-border);

}



.gite-terms {

    color: var(--gite-color-text-light, #7f8c8d);

    font-size: 14px;

}



.gite-terms a {

    color: var(--gite-color-primary, #3498db);

    text-decoration: none;

}



.gite-terms a:hover {

    text-decoration: underline;

}



/* Responsive */

@media (max-width: 768px) {

    .gite-reservation-form {

        padding: 20px;

    }

    

    .gite-date-picker,

    .gite-form-row {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    

    .gite-btn {

        width: 100%;

        min-width: auto;

    }

}



/* FullCalendar styles */

.fc {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

}



.fc .fc-toolbar-title {

    font-size: 1.2em;

}



.fc .fc-button-primary {

    background-color: var(--gite-color-primary, #3498db);

    border-color: var(--gite-primary,#3498db);

    color: #ffffff;

}



.fc .fc-button-primary:hover {

    background-color: var(--gite-color-primary-hover, #2980b9);

    border-color: var(--gite-color-primary-hover, #2980b9);

}



.fc .fc-button-primary:disabled {

    background-color: var(--gite-text-muted,#6c757d);

    border-color: var(--gite-text-muted,#6c757d);

    color: #ffffff;

}



.fc .fc-event {

    cursor: pointer;

}



.fc-event-pending {

    background-color: var(--gite-color-warning, #f39c12) !important;

    border-color: var(--gite-color-warning, #f39c12) !important;

}



.fc-event-confirmed {

    background-color: var(--gite-color-success, #27ae60) !important;

    border-color: var(--gite-color-success, #27ae60) !important;

}



.fc-event-cancelled {

    background-color: var(--gite-color-error, #e74c3c) !important;

    border-color: var(--gite-color-error, #e74c3c) !important;

}



/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Corrections frontend
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

    .gite-reservation-form {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    .gite-form-header h2 {
        font-size: 22px !important;
    }

    /* Tableau récapitulatif prix → lisible sur mobile */
    .gite-price-summary {
        padding: 14px !important;
    }

    .gite-price-row {
        font-size: 14px !important;
    }

    .gite-total {
        font-size: 16px !important;
    }

    /* Bouton submit plein écran */
    .gite-btn {
        width: 100% !important;
        min-width: auto !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* Méthodes de paiement */
    .gite-payment-method {
        padding: 12px !important;
    }

    /* Section invités */
    .gite-guest-field select {
        width: 100% !important;
        font-size: 16px !important; /* Évite le zoom iOS */
    }

    /* Inputs : éviter le zoom auto sur iOS (font-size >= 16px) */
    .gite-date-field input,
    .gite-form-field input,
    .gite-form-field textarea {
        font-size: 16px !important;
    }
}