/*
 * ブレークポイント依存のレイアウトCSS（#header .l-header__inner の flex-wrap/order等）は
 * 管理画面の「PC表示に切り替える幅」設定値に応じて、PHP側から wp_add_inline_style で
 * 動的に出力される。このファイルには幅に依存しない見た目のスタイルのみを置く。
 */

.hrh-infobar {
	display: none;
	gap: 24px;
}

.hrh-infobar * ,
.hrh-infobar *::before,
.hrh-infobar *::after {
	box-sizing: border-box;
}

/* 予約ボタンとオンラインショップボタンのペア。行動を促す2つのボタンなので、
   診療時間/連絡先とのgap（24px）より詰めて並べる。 */
.hrh-cta {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---- 営業時間 ---- */

.hrh-hours {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-right: 22px;
	border-right: 1px solid rgba(58, 47, 45, 0.12);
}

.hrh-hours-icon svg {
	width: 18px;
	height: 18px;
	color: var(--shi-hours-icon-color, #ef7d95);
	display: block;
}

.hrh-hours-body {
	display: flex;
	flex-direction: column;
	line-height: 1.45;
}

.hrh-hours-status {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #9c8d87;
}

.hrh-hours-status.is-open {
	color: var(--shi-status-open-color, #ef7d95);
}

.hrh-hours-status.is-closed {
	color: #c2554f;
	font-weight: 600;
}

.hrh-hours-value {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #3a2f2d;
	white-space: nowrap;
}

/* ---- 電話・住所 ---- */

.hrh-contact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.4;
}

.hrh-infobar .hrh-hours:last-child {
	padding-right: 0;
	border-right: none;
}

/* PC専用バナー内の表示のため、電話番号はリンクにせずテキストとして表示する（hoverなし） */
.hrh-tel {
	display: block;
	font-size: 19px;
	font-weight: 600;
	color: #3a2f2d;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.hrh-address {
	font-size: 11px;
	letter-spacing: 0.01em;
	color: #8f7f79;
	white-space: nowrap;
}

/* ---- WEB予約ボタン ---- */

.hrh-reserve {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--shi-reserve-bg, #ef7d95);
	color: #ffffff !important;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-radius: 8px;
	padding: 11px 22px;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 10px rgba(239, 125, 149, 0.25);
}

.hrh-reserve:hover {
	background: var(--shi-reserve-bg-dark, #d9647c);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(239, 125, 149, 0.35);
}

.hrh-reserve-icon svg,
.hrh-reserve-icon img {
	width: 20px;
	height: 20px;
	display: block;
	border-radius: 5px;
}

/* ---- オンラインショップボタン ---- */
/* 予約ボタン（塗り・主役）に対して、控えめな縁取りスタイルの副次ボタン */

.hrh-onlinestore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: #3a2f2d;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	font-style: italic;
	text-decoration: none;
	border: 1px solid rgba(58, 47, 45, 0.28);
	border-radius: 8px;
	padding: 10px 20px;
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.hrh-onlinestore:hover {
	border-color: var(--shi-reserve-bg, #ef7d95);
	color: var(--shi-reserve-bg-dark, #d9647c);
	background: rgba(239, 125, 149, 0.06);
}

/* カスタム画像のみ（文言なし）の場合はコンパクトな余白にする */
.hrh-onlinestore--icon-only {
	padding: 8px 12px;
}

/* 表示サイズ（高さ）は管理画面の設定値をJS側でheightとして直接指定する。
   ここでは固定width/heightを持たせない（横長ロゴを正方形に押し込んで
   小さく見えてしまうのを防ぐため、横幅は常にheightに応じた自動比率にする）。 */
.hrh-onlinestore-icon img {
	display: block;
}