/* =========================================================
   KORCULA — FORMS & AUTH MODAL
   ========================================================= */

/* Auth Modal */
.ke-modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(13,27,42,0.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.ke-auth-modal {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 440px;
    box-shadow: 0 24px 80px rgba(13,27,42,0.3);
    position: relative; overflow: hidden;
}
.ke-modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 32px; height: 32px; border: none;
    background: rgba(13,27,42,0.08); border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; color: #4a5568;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.ke-modal-close:hover { background: rgba(13,27,42,0.15); }
.ke-auth-tabs { display: flex; border-bottom: 2px solid #e2d9cc; }
.ke-auth-tab {
    flex: 1; padding: 1rem; border: none; background: none;
    font-weight: 600; font-size: 0.9rem; color: #718096;
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.2s;
}
.ke-auth-tab--active, .ke-auth-tab:hover { color: #0d1b2a; border-bottom-color: #c9a96e; }
.ke-auth-panel { display: none; padding: 1.75rem; }
.ke-auth-panel--active { display: block; }

/* Google Button */
.ke-google-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2d9cc;
    border-radius: 8px; color: #0d1b2a; font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s; background: #fff;
}
.ke-google-btn:hover { border-color: #c9a96e; box-shadow: 0 2px 8px rgba(13,27,42,0.08); color: #0d1b2a; }
.ke-auth-divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.25rem 0; color: #718096; font-size: 0.85rem;
}
.ke-auth-divider::before, .ke-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e2d9cc; }

/* Auth form fields */
.ke-auth-form .ke-field { margin-bottom: 1rem; }
.ke-auth-form .ke-field label { display: block; font-size: 0.85rem; font-weight: 600; color: #4a5568; margin-bottom: 0.35rem; }
.ke-auth-form input[type="email"],
.ke-auth-form input[type="password"],
.ke-auth-form input[type="text"] {
    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2d9cc;
    border-radius: 8px; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff; color: #0d1b2a;
}
.ke-auth-form input:focus { outline: none; border-color: #c9a96e; box-shadow: 0 0 0 3px rgba(201,169,110,0.15); }
.ke-auth-form small { font-size: 0.78rem; color: #718096; margin-top: 0.25rem; display: block; }
.ke-auth-footer-links { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.85rem; }
.ke-checkbox { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.ke-link { background: none; border: none; color: #c9a96e; cursor: pointer; font-size: 0.85rem; padding: 0; }
.ke-link:hover { color: #a8874e; }
.ke-auth-error {
    background: #f8d7da; border: 1px solid #f5c6cb;
    color: #c0392b; padding: 0.75rem 1rem; border-radius: 8px;
    font-size: 0.875rem; margin-bottom: 1rem;
}

/* Booking Form Steps */
.ke-booking-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
.ke-booking-summary {
    background: #faf7f3; border: 1px solid #e2d9cc;
    border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem;
}
.ke-booking-summary h3 { font-size: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #e2d9cc; padding-bottom: 0.75rem; }
.ke-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.9rem; border-bottom: 1px solid #f0ebe3; }
.ke-summary-row:last-child { border-bottom: none; font-weight: 700; font-size: 1rem; }
.ke-summary-row .label { color: #4a5568; }
.ke-summary-row .value { font-weight: 600; }

/* Insurance cards */
.ke-insurance-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.5rem 0; }
.ke-insurance-card {
    border: 2px solid #e2d9cc; border-radius: 12px; padding: 1.25rem;
    cursor: pointer; transition: all 0.2s; text-align: center; position: relative;
}
.ke-insurance-card:hover { border-color: #c9a96e; }
.ke-insurance-card.selected { border-color: #0d1b2a; background: rgba(13,27,42,0.03); }
.ke-insurance-card__name { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.ke-insurance-card__excess { font-size: 1.25rem; font-weight: 700; color: #c0392b; margin-bottom: 0.25rem; }
.ke-insurance-card__price { font-size: 0.85rem; color: #4a5568; margin-bottom: 1rem; }
.ke-insurance-card .ke-check { position: absolute; top: 0.75rem; right: 0.75rem; width: 22px; height: 22px; border-radius: 50%; background: #0d1b2a; display: none; align-items: center; justify-content: center; }
.ke-insurance-card.selected .ke-check { display: flex; }
.ke-insurance-card .ke-check::after { content: '✓'; color: #c9a96e; font-size: 0.75rem; font-weight: 700; }
.ke-insurance-feature { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.25rem 0; text-align: left; }
.ke-insurance-feature .yes { color: #c9a96e; font-weight: 700; }
.ke-insurance-feature .no  { color: #ccc; }

/* Add-on item */
.ke-addon-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #e2d9cc; border-radius: 10px; margin-bottom: 0.75rem; transition: border-color 0.2s; }
.ke-addon-item.selected { border-color: #c9a96e; background: rgba(201,169,110,0.05); }
.ke-addon-item__icon { width: 44px; height: 44px; border-radius: 8px; background: #f0ebe3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.ke-addon-item__info { flex: 1; }
.ke-addon-item__name { font-weight: 600; font-size: 0.95rem; }
.ke-addon-item__desc { font-size: 0.8rem; color: #718096; }
.ke-addon-item__price { font-weight: 700; color: #0d1b2a; font-size: 0.95rem; white-space: nowrap; }
.ke-addon-item__controls { display: flex; align-items: center; gap: 0.5rem; }
.ke-qty-btn { width: 28px; height: 28px; border: 1.5px solid #e2d9cc; border-radius: 50%; background: none; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.ke-qty-btn:hover { border-color: #c9a96e; color: #c9a96e; }
.ke-qty-display { min-width: 24px; text-align: center; font-weight: 600; }

@media (max-width: 640px) {
    .ke-insurance-grid { grid-template-columns: 1fr; }
}