/**
 * Resto M2 — Reservation Form frontend styles (P1a)
 * Müşteri formu + alan-seçici chip bileşeni.
 * Token convention: admin.css :root değişkenlerine uyumlu isimlendirme.
 */

/* ---- Wrapper ---- */
.resto-reservation-form {
    max-width: 640px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
}

.resto-reservation-form h3 {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1.35rem;
    font-weight: 600;
}

/* ---- Form rows ---- */
.resto-reservation-form .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.resto-reservation-form .form-field {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resto-reservation-form .form-field.rm2-full-width {
    flex: 1 1 100%;
}

.resto-reservation-form label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #444;
}

.resto-reservation-form input[type="text"],
.resto-reservation-form input[type="email"],
.resto-reservation-form input[type="tel"],
.resto-reservation-form input[type="number"],
.resto-reservation-form input[type="date"],
.resto-reservation-form select,
.resto-reservation-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    min-height: 44px; /* touch target — tablet / kiosk */
}

.resto-reservation-form input:focus,
.resto-reservation-form select:focus,
.resto-reservation-form textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---- Area selector row ---- */
.rm2-area-selector-row {
    margin-bottom: 1rem;
}

/* ---- Chip grid ---- */
.rm2-area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

/* Hidden radio — accessible, invisible */
.rm2-chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Bazı temalar <label>::before/::after ile özel bir radyo/checkbox göstergesi enjekte ediyor;
   bu, chip pill'inin sol-üstünde gereksiz bir daire olarak görünüyordu. Chip'in kendisi kontrol
   olduğu için bu pseudo-göstergeyi nötrle (tema specificity'sini ezmek için !important). */
.rm2-chip::before,
.rm2-chip::after {
    content: none !important;
    display: none !important;
}

/* Tema, .rm2-chip (<label>) için display:block + asimetrik sol-padding (özel radyo göstergesine
   yer açmak için ~29px) uyguluyordu; göstergeyi gizlediğimiz için metin sağa kayıyordu. Layout'u
   yüksek-özgüllük + !important ile zorla geri al → metin tam ortalı. */
.rm2-area-chips .rm2-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 1.125rem !important;
    padding-right: 1.125rem !important;
    text-align: center !important;
}

.rm2-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.125rem;
    min-height: 44px; /* touch target */
    border: 2px solid #d1d5db;
    border-radius: 24px;
    background: #fff;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    user-select: none;
}

.rm2-chip:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

/* Focus ring visible from keyboard */
.rm2-chip-input:focus-visible + .rm2-chip {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.rm2-chip--selected {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.rm2-chip--selected:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* ---- Loading spinner text ---- */
.rm2-chips-loading {
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
}

/* ---- Area message (error / no-availability) ---- */
.rm2-area-message {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #dc2626;
    min-height: 1.25em;
}

/* ---- Submit button ---- */
.reservation-submit {
    display: inline-block;
    padding: 0.6rem 1.75rem;
    min-height: 44px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.reservation-submit:hover:not(:disabled) {
    background: #1d4ed8;
}

.reservation-submit:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}

.reservation-submit:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

/* ---- Response message ---- */
.reservation-message {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    min-height: 1.5em;
}

.reservation-message.rm2-msg--success {
    color: #16a34a;
    font-weight: 500;
}

.reservation-message.rm2-msg--error {
    color: #dc2626;
}

/* ---- Responsive / mobile-first ---- */
@media (max-width: 540px) {
    .resto-reservation-form .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .resto-reservation-form .form-field {
        flex: 1 1 100%;
    }

    .rm2-chip {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ================================================================
   FIELDSET FRAME STYLES (FiveStar-referans estetiği)
   ================================================================ */

/* Fieldset çerçevesi */
.resto-reservation-form .rm2-fieldset {
    border: 2px solid #d8d4cc;
    border-radius: 6px;
    padding: 14px 20px 18px;
    margin: 0 0 18px;
    min-width: 0;
}

/* Legend */
.resto-reservation-form .rm2-fieldset > legend {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6256;
    line-height: 1;
}

/* ---- İkon wrapper ---- */
.rm2-field--icon {
    position: relative;
}

/* SVG ikon — input'un sol ortasına sabitlenir */
.rm2-field--icon > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #8a8178;
    pointer-events: none;
    z-index: 1;
}

/* İkon olan input/select'te sol padding — genel `padding` shorthand'i (daha yüksek specificity)
   ezdiği için !important ile sabitlenir; aksi halde yazılan metin ikonun üstüne biniyordu. */
.rm2-field--icon input,
.rm2-field--icon select {
    padding-left: 40px !important;
}

/* Textarea olan wrapper'da ikon üste çıkar (dikey orta değil) */
.rm2-field--icon:has(textarea) > svg {
    top: 14px;
    transform: none;
}

.rm2-field--icon textarea {
    padding-left: 40px;
}

/* ---- Input/select/textarea görünüm token'ları ---- */
.resto-reservation-form input[type="text"],
.resto-reservation-form input[type="email"],
.resto-reservation-form input[type="tel"],
.resto-reservation-form input[type="number"],
.resto-reservation-form input[type="date"],
.resto-reservation-form select,
.resto-reservation-form textarea {
    border-color: #d8d4cc;
    background: #faf9f6;
    border-radius: 5px;
}

/* Focus: sıcak-nötr border + hafif gölge */
.resto-reservation-form input:focus,
.resto-reservation-form select:focus,
.resto-reservation-form textarea:focus {
    border-color: #8a7d6b;
    box-shadow: 0 0 0 3px rgba(138, 125, 107, 0.15);
}

/* ---- Form footer (submit + mesaj) ---- */
.rm2-form-footer {
    margin-top: 4px;
}

/* ---- "Add a Message" — Special Requests başta gizli, butona tıklayınca açılır ---- */
.rm2-message-field {
    display: none;
    margin-top: 8px;
}

.rm2-message-field.is-open {
    display: block;
}

.rm2-add-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    background: none;
    border: none;
    color: #8a7d6b;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.rm2-add-message:hover {
    color: #5d564b;
}

.rm2-add-message__text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rm2-add-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

/* ================================================================
   PICKADATE OVERRIDES
   pickadate'in varsayılan teması korunur; sadece çakışma noktaları
   düzeltilir: fieldset overflow, z-index, cursor ve input görünümü.
   ================================================================ */

/* fieldset overflow:hidden pickadate popup'ını kırpıyordu */
.resto-reservation-form .rm2-fieldset {
    overflow: visible;
}

/* pickadate input'larının mevcut form stiliyle uyumu */
.rm2-pd-date,
.rm2-pd-time {
    background: #faf9f6;
    cursor: pointer;
}

/* Popup z-index — temanın üst nav/header'ının altında kalmasın */
.picker__holder {
    z-index: 100;
}

/* Picker frame margin-top: input'un hemen altında açılsın */
.picker__frame {
    margin-top: 4px;
}

/* Tema .picker input'u sıfırladığında padding-left'i korumak için
   icon wrapper'daki padding-left'i !important ile koru */
.rm2-field--icon .rm2-pd-date,
.rm2-field--icon .rm2-pd-time {
    padding-left: 40px !important;
}