/* Japanese host palette. Loaded after page styles; legacy inline colors are
   overridden here so form actions, booking states and shared English UI stay intact. */
:is(.host-color-ja, .host-design) {
    --host-ink: #222222;
    --host-muted: #717171;
    --host-line: #dddddd;
    --host-surface: #f7f7f7;
    --host-red: #d83b43;
    --host-coral-hover: #c32e37;
    --host-coral-soft: #fff2f1;
    --host-coral-line: #f1cdc9;
    --host-coral-ink: #ab2931;
    --host-success: #28745d;
    --host-success-soft: #eff7f2;
    color: var(--host-ink);
    background-color: #ffffff;
}

/* Navigation is neutral; coral is reserved for actions and notices. */
:is(.host-color-ja, .host-design) a { color: var(--host-ink); text-underline-offset: 3px; }
:is(.host-color-ja, .host-design) a:not(.btn):not(.btn-list-red):not(.btn-my-red):not(.w3-card-2),
:is(.host-color-ja, .host-design) a :is(span, p, b, h5, h6)[style*="color"] { color: var(--host-ink) !important; }
:is(.host-color-ja, .host-design) a:not([class]),
:is(.host-color-ja, .host-design) :is(.host-back-link, .guest-back-link, .host-experience-link) { text-decoration: underline; }
:is(.host-color-ja, .host-design) a:hover { color: var(--host-ink); }
:is(.host-color-ja, .host-design) .my-btn-min { color: var(--host-ink); background: transparent; border: 0; box-shadow: none; text-decoration: underline; }
:is(.host-color-ja, .host-design) :is(input, select, textarea) { accent-color: var(--host-red); }
:is(.host-color-ja, .host-design) :is(a, button, input, select, textarea):focus-visible { outline-color: var(--host-ink); }
:is(.host-color-ja, .host-design) :is(.form-control, .guest-chat-composer textarea) { color: var(--host-ink); border-color: #b0b0b0; background-color: #fff; }
:is(.host-color-ja, .host-design) :is(.form-control, .guest-chat-composer textarea):focus { border-color: var(--host-ink); outline-color: var(--host-ink); box-shadow: none; }

/* Primary controls, including legacy inline button colors and fixed save bars. */
:is(.host-color-ja, .host-design) :is(.btn-danger, .btn-primary, .btn-success, .btn-my-red, .host-request-button.is-primary),
:is(.host-color-ja, .host-design) .request-submit .btn,
:is(.host-color-ja, .host-design).host-ui-completion .w3-card-2 {
    color: #fff !important;
    background-color: var(--host-red) !important;
    border-color: var(--host-red) !important;
    background-image: none;
    box-shadow: none;
}
:is(.host-color-ja, .host-design) :is(.btn-danger, .btn-primary, .btn-success, .btn-my-red, .host-request-button.is-primary) *,
:is(.host-color-ja, .host-design) .request-submit .btn *,
:is(.host-color-ja, .host-design).host-ui-completion .w3-card-2 * { color: inherit !important; }
:is(.host-color-ja, .host-design) :is(.btn-danger, .btn-primary, .btn-success, .btn-my-red, .host-request-button.is-primary):is(:hover, :focus),
:is(.host-color-ja, .host-design) .request-submit .btn:is(:hover, :focus),
:is(.host-color-ja, .host-design).host-ui-completion .w3-card-2:is(:hover, :focus) { background-color: var(--host-coral-hover) !important; border-color: var(--host-coral-hover) !important; color: #fff !important; filter: none; }
:is(.host-color-ja, .host-design) :is(.btn-danger, .btn-primary, .btn-success, .btn-my-red, .host-request-button.is-primary):disabled { opacity: .55; }
:is(.host-color-ja, .host-design) .btn-default { color: var(--host-ink) !important; background: #fff !important; border-color: #b0b0b0 !important; }
:is(.host-color-ja, .host-design) .btn-default:is(:hover, :focus) { color: var(--host-ink) !important; background: var(--host-surface) !important; border-color: var(--host-ink) !important; }
:is(.host-color-ja, .host-design) .btn-list-red { color: var(--host-ink) !important; background: #fff !important; border-color: #b0b0b0 !important; }
:is(.host-color-ja, .host-design) .btn-list-red:hover { color: var(--host-ink) !important; background-color: var(--host-surface) !important; filter: none; }
:is(.host-color-ja, .host-design) .progress-bar { background-color: var(--host-red) !important; border-color: var(--host-red) !important; }
:is(.host-color-ja, .host-design) :is(.required, .fa-times) { color: var(--host-coral-ink) !important; }

/* One soft coral for notifications and pending work. */
:is(.host-color-ja, .host-design) :is(.host-home-notice, .host-request-status.is-pending, .host-reservation-status, .guest-chat-canceled, .alert-warning, .alert-danger),
:is(.host-color-ja, .host-design).host-ui-requests .host-request-status.is-pending,
:is(.host-color-ja, .host-design).host-ui-request-detail:has(.host-reservation-actions) .host-reservation-status {
    color: var(--host-coral-ink);
    background-color: var(--host-coral-soft);
    border-color: var(--host-coral-line);
}
:is(.host-color-ja, .host-design) .host-home-notice .host-home-icon { color: var(--host-red); }
:is(.host-color-ja, .host-design) .host-home-notice:hover { background-color: #ffe7e5; border-color: var(--host-coral-line); }
:is(.host-color-ja, .host-design) .host-home-pending { color: var(--host-coral-ink); }
:is(.host-color-ja, .host-design) .host-request-status.is-accepted { color: var(--host-ink); background-color: var(--host-surface); }
:is(.host-color-ja, .host-design).host-ui-request-detail:not(:has(.host-reservation-actions)) .host-reservation-status { color: var(--host-ink); background-color: var(--host-surface); }
:is(.host-color-ja, .host-design) :is(.host-home-complete, .fa-check, .host-success-mark) { color: var(--host-success) !important; }
:is(.host-color-ja, .host-design) :is(.host-success-mark, .alert-success) { background-color: var(--host-success-soft); border-color: #c8e2d2; }

/* Category labels and empty images are informational, not notifications. */
:is(.host-color-ja, .host-design) :is(.cooking_tag, .eat_tag, .host-catalog-status) { color: var(--host-muted); background-color: var(--host-surface); }
:is(.host-color-ja, .host-design) [style*="background-color:ghostwhite"],
:is(.host-color-ja, .host-design) [style*="background-color: ghostwhite"] { background-color: var(--host-surface) !important; }
:is(.host-color-ja, .host-design) [style*="background-color: #ffe4e1"] { background-color: var(--host-coral-soft) !important; }
:is(.host-color-ja, .host-design) [style*="background-color: #d6ffea"] { background-color: var(--host-success-soft) !important; color: var(--host-ink) !important; }
:is(.host-color-ja, .host-design) .uploadButton { color: var(--host-ink); background-color: #fff; border-color: #b0b0b0; }
:is(.host-color-ja, .host-design) .uploadButton:hover { color: var(--host-ink); background-color: var(--host-surface); border-color: var(--host-ink); }

/* Month selection uses coral; unavailable slots retain their gray meaning. */
:is(.host-color-ja, .host-design) .host-calendar-months a { color: var(--host-muted) !important; }
:is(.host-color-ja, .host-design) .host-calendar-months span[style*="background-color"] { color: #fff !important; background-color: var(--host-red) !important; }
:is(.host-color-ja, .host-design) .host-calendar-months span[style*="border:"] { border-color: var(--host-line) !important; }
:is(.host-color-ja, .host-design) .host-calendar-months .host-calendar-month {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--host-line);
    border-radius: 10px;
    color: var(--host-muted);
    background-color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}
:is(.host-color-ja, .host-design) .host-calendar-months .host-calendar-month.is-current { color: #fff; background-color: var(--host-red); border-color: var(--host-red); }
:is(.host-color-ja, .host-design) :is(.labelTime, .square_btn) { color: var(--host-ink); background-color: #fff; border-color: var(--host-line); }
:is(.host-color-ja, .host-design) .check_box:checked + .labelTime,
:is(.host-color-ja, .host-design) .host-legend-unavailable { color: #fff; background-color: var(--host-muted); border-color: var(--host-muted) !important; }
:is(.host-color-ja, .host-design) .square_btn_checked { color: #fff; background-color: var(--host-ink); border-color: var(--host-ink); }

/* Conversation colors reuse the same warm accent and neutral surface. */
:is(.host-color-ja, .host-design).host-chat-page .chat_mine { color: var(--host-ink); background-color: var(--host-coral-soft); }
:is(.host-color-ja, .host-design).host-chat-page .chat_other { color: var(--host-ink); background-color: var(--host-surface); }

:is(.host-color-ja, .host-design) .host-request-avatar { color: var(--host-coral-ink); background-color: var(--host-coral-soft); }