/* ==========================================================================
   Reserve Plugin - Public Common Styles
   プレフィックス .reserve-public- でWPテーマとの衝突を回避
   ========================================================================== */

/* CSS Variables */
:root {
    --reserve-pub-primary:        #2271b1;
    --reserve-pub-success:        #1a7a33;
    --reserve-pub-success-bg:     #e8f5eb;
    --reserve-pub-success-border: #7dd887;
    --reserve-pub-danger:         #c0392b;
    --reserve-pub-danger-bg:      #fdf0ef;
    --reserve-pub-danger-border:  #e8a09d;
    --reserve-pub-orange:         #c55a11;
    --reserve-pub-orange-bg:      #fdf3e8;
    --reserve-pub-orange-border:  #f0b27a;
    --reserve-pub-muted:          #606770;
    --reserve-pub-muted-bg:       #f3f4f5;
    --reserve-pub-muted-border:   #c8cacc;
    --reserve-pub-text:           #1d2327;
    --reserve-pub-border:         #dcdfe4;
    --reserve-pub-radius:         6px;
}

/* ==========================================================================
   Button
   ========================================================================== */

.reserve-public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--reserve-pub-radius);
    border: 1px solid var(--reserve-pub-primary);
    background-color: var(--reserve-pub-primary);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.reserve-public-btn:hover {
    background-color: #135e96;
    border-color: #135e96;
    color: #fff;
}

.reserve-public-btn:focus {
    outline: 2px solid var(--reserve-pub-primary);
    outline-offset: 3px;
}

.reserve-public-btn:disabled,
.reserve-public-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.reserve-public-btn-outline {
    background-color: transparent;
    color: var(--reserve-pub-primary);
}

.reserve-public-btn-outline:hover {
    background-color: #e8f0f9;
    color: var(--reserve-pub-primary);
}

/* ==========================================================================
   Form Group
   ========================================================================== */

.reserve-public-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.reserve-public-form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--reserve-pub-text);
    line-height: 1.4;
}

.reserve-public-form-group input,
.reserve-public-form-group select,
.reserve-public-form-group textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--reserve-pub-text);
    background-color: #fff;
    border: 1px solid var(--reserve-pub-border);
    border-radius: var(--reserve-pub-radius);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reserve-public-form-group input:focus,
.reserve-public-form-group select:focus,
.reserve-public-form-group textarea:focus {
    outline: none;
    border-color: var(--reserve-pub-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.reserve-public-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Field Error */
.reserve-public-field-error {
    font-size: 13px;
    color: var(--reserve-pub-danger);
    margin-top: 4px;
}

.reserve-public-form-group input.is-error,
.reserve-public-form-group select.is-error,
.reserve-public-form-group textarea.is-error {
    border-color: var(--reserve-pub-danger);
}

/* ==========================================================================
   Slot Availability Indicators
   ○  利用可能スロット  → 緑系
   ×  利用不可スロット  → 赤系
   TEL 電話での受付のみ  → オレンジ系
   ー  定休・閉店       → グレー系
   ========================================================================== */

/* ○ Available */
.reserve-public-slot-available {
    color: var(--reserve-pub-success);
    background-color: var(--reserve-pub-success-bg);
    border: 1px solid var(--reserve-pub-success-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.reserve-public-slot-available:hover {
    background-color: #c3e9c8;
}

/* × Unavailable */
.reserve-public-slot-unavailable {
    color: var(--reserve-pub-danger);
    background-color: var(--reserve-pub-danger-bg);
    border: 1px solid var(--reserve-pub-danger-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* TEL — 電話受付のみ */
.reserve-public-slot-tel {
    color: var(--reserve-pub-orange);
    background-color: var(--reserve-pub-orange-bg);
    border: 1px solid var(--reserve-pub-orange-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.02em;
}

/* ー Closed / No slot */
.reserve-public-slot-closed {
    color: var(--reserve-pub-muted);
    background-color: var(--reserve-pub-muted-bg);
    border: 1px solid var(--reserve-pub-muted-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* placeholder を凡例として明確に区別（公開画面） */
input::placeholder,
textarea::placeholder {
    color: #b0b6bd;
    font-style: italic;
    opacity: 1;
}