/* =========================================================

   Formulaire de réservation — ABC Reservation Pro

   Mobile-first · Variables CSS · Zéro couleur hardcodée

   ========================================================= */



/* ── Wrapper principal ── */

.gite-reservation-form {

    max-width: 900px;

    width: 100%;

    margin: 0 auto;

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

    border-radius: 20px;

    box-shadow: 0 8px 32px rgba(0,0,0,.10);

    overflow: hidden;

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

    box-sizing: border-box;

    color: var(--gite-text, #333);

}



/* ── Champs de licence ── */

.gite-form-field-full { flex: 1 1 100%; grid-column: 1 / -1; }

.gite-form-field-full textarea { resize: vertical; min-height: 80px; font-family: inherit; }



.gite-license-info {

    text-align: center;

    background: color-mix(in srgb, var(--gite-success,#27ae60) 10%, transparent);

    border: 1px solid var(--gite-success,#27ae60);

    border-radius: 12px;

    padding: 20px;

    margin-top: 20px;

}

.gite-license-info h4 {

    display: flex; align-items: center; justify-content: center; gap: 8px;

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

    margin: 0 0 12px; font-size: 17px; font-weight: 600;

}

.gite-license-info p { margin: 6px 0; font-size: 14px; color: var(--gite-success,#27ae60); }



.gite-form-field small { display: block; margin-top: 5px; color: var(--gite-text-muted,#777); font-size: 12px; font-style: italic; }



/* ── Validation ── */

input:invalid  { border-color: var(--gite-danger,#e74c3c) !important; }

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



/* ── Header ── */

.gite-form-header {

    background: linear-gradient(135deg, var(--gite-primary,#3498db) 0%, var(--gite-primary-dark,#2980b9) 100%);

    color: #fff;

    padding: clamp(24px,5vw,40px) clamp(16px,4vw,30px);

    text-align: center;

}

.gite-form-header h2 { margin: 0 0 12px; font-size: clamp(22px,4vw,32px); font-weight: 700; color: #fff; }

.gite-form-header p  { margin: 0; font-size: clamp(13px,2vw,16px); opacity: .88; color: #fff; }



/* ── Sections ── */

.gite-form-section {

    padding: clamp(16px,4vw,28px);

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

}

.gite-form-section:last-child { border-bottom: none; }



.gite-form-section h3 {

    margin: 0 0 18px;

    font-size: 16px; font-weight: 600;

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

    position: relative; padding-left: 30px;

}

.gite-form-section h3::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 17px; }

.gite-form-section:nth-child(1) h3::before { content: "📋"; }

.gite-form-section:nth-child(2) h3::before { content: "📅"; }

.gite-form-section:nth-child(3) h3::before { content: "👤"; }

.gite-form-section:nth-child(4) h3::before { content: "💰"; }

.gite-pricing-section h3::before          { content: "💰"; }



/* ── Grille de champs ── */

.gite-form-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(min(100%,220px), 1fr));

    gap: 14px;

    margin-bottom: 14px;

}

.gite-form-field { display: flex; flex-direction: column; min-width: 0; }



.gite-form-field label {

    margin-bottom: 6px; font-weight: 500;

    color: var(--gite-text-muted,#666); font-size: 13px;

}

.gite-form-field input,

.gite-form-field select,

.gite-form-field textarea {

    padding: 11px 14px;

    border: 2px solid var(--gite-border,#e1e8ed);

    border-radius: 10px;

    font-size: 15px;

    background: var(--gite-surface,#f8f9fa);

    color: var(--gite-text,#333);

    transition: border-color .2s, box-shadow .2s;

    width: 100%; box-sizing: border-box;

}

.gite-form-field input:focus,

.gite-form-field select:focus,

.gite-form-field textarea:focus {

    outline: none;

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

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

    box-shadow: 0 0 0 3px rgba(52,152,219,.12);

}

.gite-form-field input:hover,

.gite-form-field select:hover { border-color: var(--gite-border-hover,#b0bec5); }



/* ── Info restriction ── */

.gite-restriction-info {

    background: color-mix(in srgb, var(--gite-primary,#3498db) 8%, transparent);

    border: 1px solid color-mix(in srgb, var(--gite-primary,#3498db) 30%, transparent);

    border-radius: 12px; padding: 18px; margin-bottom: 20px;

}

.gite-restriction-info h4 { margin: 0 0 12px; color: var(--gite-secondary,#2c3e50); font-size: 15px; font-weight: 600; }

.gite-restriction-info div { margin: 6px 0; font-size: 13px; color: var(--gite-text-muted,#555); line-height: 1.4; }



/* ── Section prix ── */

.gite-pricing-section {

    background: var(--gite-surface,#f8f9fa);

    border-radius: 12px; padding: 20px; margin-bottom: 20px;

}

.gite-pricing-section h3 { margin: 0 0 14px; color: var(--gite-secondary,#2c3e50); font-size: 15px; font-weight: 600; }



.gite-pricing-info { display: flex; flex-direction: column; gap: 8px; }



.gite-price-row {

    display: flex; justify-content: space-between; align-items: center;

    padding: 8px 12px; border-radius: 8px; font-size: 14px;

    color: var(--gite-text,#333);

}

.gite-price-row:nth-child(even) { background: var(--gite-color-background,#fff); }



.gite-price-row.gite-total {

    background: linear-gradient(135deg, var(--gite-primary,#3498db) 0%, var(--gite-primary-dark,#2980b9) 100%);

    border-radius: 10px; padding: 14px 16px; margin-top: 6px;

}

.gite-price-row.gite-total span:first-child { color: #fff; font-size: 15px; font-weight: 600; }

.gite-price-row.gite-total span:last-child  { color: #fff; font-size: 20px; font-weight: 700; }



.gite-deposit-info {

    background: color-mix(in srgb, var(--gite-warning,#e67e22) 10%, transparent);

    border: 1px solid color-mix(in srgb, var(--gite-warning,#e67e22) 35%, transparent);

    border-radius: 10px; padding: 12px 16px; margin-top: 10px;

    font-size: 13px; color: var(--gite-warning,#e67e22);

}

.gite-deposit-info strong { color: var(--gite-warning,#e67e22); }



/* ── Bouton de réservation ── */

.gite-form-actions {

    padding: clamp(16px,4vw,28px);

    text-align: center;

    background: var(--gite-surface,#f8f9fa);

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

}

.gite-reserve-btn {

    background: linear-gradient(135deg, var(--gite-primary,#3498db) 0%, var(--gite-primary-dark,#2980b9) 100%);

    color: #fff;

    border: none;

    border-radius: 14px;

    padding: 16px 36px;

    font-size: 17px; font-weight: 600;

    cursor: pointer;

    transition: transform .2s, box-shadow .2s;

    box-shadow: 0 6px 20px rgba(52,152,219,.35);

    display: inline-flex; flex-direction: column;

    align-items: center; gap: 6px;

    min-width: 240px;

    width: clamp(240px, 60%, 400px);

}

.gite-reserve-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(52,152,219,.45); }

.gite-reserve-btn:active { transform: translateY(0); }

.gite-reserve-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }



.gite-btn-text  { font-size: 15px; font-weight: 500; color: #fff; }

.gite-btn-price { font-size: 21px; font-weight: 700; color: #fff; }



/* ── Messages de succès/erreur ── */

.gite-success-message {

    background: color-mix(in srgb, var(--gite-success,#27ae60) 10%, transparent);

    border: 1px solid var(--gite-success,#27ae60);

    border-radius: 12px; padding: 20px; text-align: center;

}

.gite-error-message {

    background: color-mix(in srgb, var(--gite-danger,#e74c3c) 10%, transparent);

    border: 1px solid var(--gite-danger,#e74c3c);

    border-radius: 12px; padding: 20px; text-align: center;

    color: var(--gite-danger,#e74c3c);

}



/* ── Stripe element ── */

#gite-card-element {

    background: color-mix(in srgb, var(--gite-primary,#3498db) 6%, transparent);

    border: 1px solid color-mix(in srgb, var(--gite-primary,#3498db) 30%, transparent);

    border-radius: 10px; padding: 14px; margin-bottom: 14px;

}



/* ── Flatpickr overrides ── */

.flatpickr-input {

    background: var(--gite-surface,#f8f9fa) !important;

    color: var(--gite-text,#333) !important;

}

.flatpickr-calendar { box-shadow: 0 10px 30px rgba(0,0,0,.18) !important; }

.flatpickr-months { background: var(--gite-primary,#3498db) !important; border-radius: 6px 6px 0 0; }

.flatpickr-day.selected,

.flatpickr-day.startRange,

.flatpickr-day.endRange,

.flatpickr-day.inRange {

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

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

}



/* ── Méthodes de paiement ── */

.gite-payment-section { margin-bottom: 24px; }

.gite-payment-section h3 {

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

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

    padding-bottom: 8px; margin-bottom: 14px;

}

.gite-payment-methods { display: flex; flex-wrap: wrap; gap: 10px; }

.gite-payment-method {

    display: flex; align-items: center; gap: 10px;

    padding: 12px 16px;

    border: 2px solid var(--gite-border,#ddd);

    border-radius: 8px;

    cursor: pointer; transition: all .2s;

    background: var(--gite-surface,#f8f9fa);

    flex: 1; min-width: 160px;

    box-sizing: border-box;

}

.gite-payment-method input[type="radio"] { display: none; }

.gite-payment-method:hover  { border-color: var(--gite-primary,#3498db); background: color-mix(in srgb, var(--gite-primary,#3498db) 8%, transparent); }

.gite-payment-method.active { border-color: var(--gite-primary,#3498db); background: color-mix(in srgb, var(--gite-primary,#3498db) 10%, transparent); }

.gite-pm-icon  { font-size: 22px; }

.gite-pm-label { font-weight: 600; color: var(--gite-secondary,#2c3e50); font-size: 14px; }

.gite-pm-label small { display: block; font-weight: 400; color: var(--gite-text-muted,#7f8c8d); font-size: 12px; }



/* ── Infos virement ── */

.gite-bank-info { background: color-mix(in srgb, var(--gite-success,#27ae60) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gite-success,#27ae60) 40%, transparent); border-radius: 8px; padding: 18px; }

.gite-bank-info h4 { color: var(--gite-success,#27ae60); margin-bottom: 12px; }

.gite-bank-table { width: 100%; border-collapse: collapse; margin: 12px 0; }

.gite-bank-table th { text-align: left; padding: 6px 12px 6px 0; color: var(--gite-text-muted,#555); font-weight: 600; width: 140px; }

.gite-bank-table td { padding: 6px 12px; color: var(--gite-secondary,#2c3e50); }

.gite-bank-table code { background: var(--gite-surface,#f8f9fa); padding: 2px 8px; border-radius: 4px; font-size: 13px; border: 1px solid var(--gite-border,#ddd); }

.gite-bank-note { margin-top: 12px; color: var(--gite-text-muted,#555); font-size: 13px; }



/* ══════════════════════════

   Sélecteur d'hébergements

   ══════════════════════════ */

.gite-unit-selector { margin-bottom: 28px; }

.gite-unit-selector h3 { font-size: 16px; font-weight: 600; color: var(--gite-secondary,#2c3e50); margin: 0 0 14px; }

.gite-unit-cards { display: flex; gap: 14px; flex-wrap: wrap; }



.gite-unit-card {

    flex: 1 1 200px;

    max-width: 280px;

    border: 2px solid var(--gite-border,#e0e0e0);

    border-radius: 10px; overflow: hidden;

    cursor: pointer;

    transition: border-color .2s, box-shadow .2s, transform .15s;

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

}

.gite-unit-card:hover {

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

    box-shadow: 0 4px 14px rgba(52,152,219,.18);

    transform: translateY(-2px);

}

.gite-unit-card.active {

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

    box-shadow: 0 0 0 3px rgba(52,152,219,.15);

}

.gite-unit-card-img { width: 100%; height: 130px; overflow: hidden; background: var(--gite-surface,#f0f4f8); }

.gite-unit-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gite-unit-card-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 48px; }



.gite-unit-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }

.gite-unit-card-body strong { font-size: 15px; color: var(--gite-secondary,#2c3e50); }

.gite-unit-capacity { font-size: 12px; color: var(--gite-text-muted,#666); }

.gite-unit-price { font-size: 12px; color: var(--gite-primary,#3498db); font-weight: 600; }

.gite-unit-desc   { font-size: 12px; color: var(--gite-text-muted,#888); margin: 4px 0 0; line-height: 1.4; }



.gite-unit-card.active .gite-unit-card-body::before {

    content: '✓ Sélectionné';

    display: inline-block;

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

    color: #fff;

    font-size: 11px; font-weight: 600;

    padding: 2px 8px; border-radius: 20px;

    margin-bottom: 4px; align-self: flex-start;

}



/* ══════════════════════

   Responsive

   ══════════════════════ */

@media (max-width: 768px) {

    .gite-reservation-form { margin: 0; border-radius: 12px; }

    .gite-form-header      { padding: 24px 16px; }

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

    .gite-form-section     { padding: 16px; }

    .gite-form-row         { grid-template-columns: 1fr; gap: 12px; }

    .gite-reserve-btn      { width: 100%; max-width: 100%; min-width: unset; }

    .gite-form-actions     { padding: 16px; }

    .gite-payment-method   { min-width: 100%; }

    .gite-pricing-section  { padding: 14px; }

}



@media (max-width: 480px) {

    .gite-reservation-form { border-radius: 8px; }

    .gite-unit-cards       { flex-direction: column; }

    .gite-unit-card        { max-width: 100%; flex: unset; }

    .gite-reserve-btn      { padding: 14px 20px; font-size: 15px; }

    .gite-btn-price        { font-size: 18px; }

}



/* ── Animation prix ── */

.gite-price-row { animation: fadeInUp .4s ease forwards; }

@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(12px); }

    to   { opacity: 1; transform: translateY(0); }

}