/**
 * ミライズレンタカー フロントエンド ベースCSS
 *
 * プロトタイプv12のスタイルをベースに、WordPressテーマと共存できるよう
 * 全てのスタイルは .mirais-app または .mirais-* クラス内でスコープされる。
 */

/*
 * v1.31.28: CSS変数のフォールバック定義
 * これまで --mirais-* 変数は print_inline_config() のインライン<style>でのみ
 * 定義されていた。そのインラインCSSが何らかの理由で出力されないページ
 * (事前サイン等) では --mirais-primary 等が解決できず、
 * .mirais-btn-primary が「背景透明 + 白文字」になってボタンが見えなくなる。
 * base.css 自身に :root で同じ値を持たせ、CSSファイル単体で完結させる。
 * (インラインCSSは後から読まれるので、値が違っても後勝ちで上書きされる)
 */
:root {
	--mirais-primary: #2055BC;
	--mirais-primary-dark: #153878;
	--mirais-primary-light: #E8EEFA;
	--mirais-accent: #BA7517;
	--mirais-text: #222;
	--mirais-text-sub: #666;
	--mirais-border: #E0DED5;
	--mirais-bg: #fff;
	--mirais-bg-alt: #F5F4EE;
	--mirais-success: #639922;
	--mirais-danger: #A32D2D;
	--mirais-warning: #BA7517;
}

/* リセット */
.mirais-app, .mirais-app * {
	box-sizing: border-box;
}

.mirais-app {
	color: var(--mirais-text);
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
	max-width: 100%;
}

.mirais-app img {
	max-width: 100%;
	height: auto;
}

/* ローディング */
.mirais-loading {
	padding: 40px;
	text-align: center;
	color: var(--mirais-text-sub);
	background: var(--mirais-bg-alt);
	border-radius: 8px;
}

.mirais-loading::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid var(--mirais-border);
	border-top-color: var(--mirais-primary);
	border-radius: 50%;
	animation: mirais-spin 0.8s linear infinite;
	margin-right: 10px;
	vertical-align: middle;
}

@keyframes mirais-spin {
	to { transform: rotate(360deg); }
}

/* ボタン
 * v1.31.28: WPテーマが button 要素に独自の背景色・文字色を当てて
 * .mirais-btn-primary を上書きし、ボタンが背景と同化して見えなくなる
 * 事例があったため、色まわりは !important で確実に固定する。 */
.mirais-btn {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--mirais-border, #E0DED5) !important;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	background: #fff !important;
	color: var(--mirais-text, #222) !important;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.15s;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	text-shadow: none;
}

.mirais-btn:hover {
	border-color: var(--mirais-primary, #2055BC) !important;
	background: var(--mirais-primary-light, #E8EEFA) !important;
}

.mirais-btn-primary {
	background: var(--mirais-primary, #2055BC) !important;
	border-color: var(--mirais-primary, #2055BC) !important;
	color: #fff !important;
}

.mirais-btn-primary:hover {
	background: var(--mirais-primary-dark, #153878) !important;
	border-color: var(--mirais-primary-dark, #153878) !important;
	color: #fff !important;
}

.mirais-btn-accent {
	background: var(--mirais-accent, #BA7517) !important;
	border-color: var(--mirais-accent, #BA7517) !important;
	color: #fff !important;
}

.mirais-btn-accent:hover {
	background: #9d5e10 !important;
	color: #fff !important;
}

.mirais-btn-large {
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 600;
}

.mirais-btn:disabled {
	opacity: 0.8;
	cursor: not-allowed;
	background: #C5C5C5 !important;
	border-color: #B0B0B0 !important;
	color: #6B6B6B !important;
	box-shadow: none !important;
}
.mirais-btn:disabled:hover {
	background: #C5C5C5 !important;
	border-color: #B0B0B0 !important;
	color: #6B6B6B !important;
}

/* フォーム要素 */
.mirais-app input[type="text"],
.mirais-app input[type="email"],
.mirais-app input[type="tel"],
.mirais-app input[type="number"],
.mirais-app input[type="password"],
.mirais-app input[type="date"],
.mirais-app input[type="time"],
.mirais-app input[type="datetime-local"],
.mirais-app select,
.mirais-app textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--mirais-border);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--mirais-text);
}

.mirais-app input:focus,
.mirais-app select:focus,
.mirais-app textarea:focus {
	outline: none;
	border-color: var(--mirais-primary);
	box-shadow: 0 0 0 3px rgba(32, 85, 188, 0.1);
}

/* バッジ */
.mirais-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
}

.mirais-badge-success { background: rgba(99, 153, 34, 0.15); color: #2f4d12; }
.mirais-badge-warning { background: rgba(186, 117, 23, 0.15); color: #6b4505; }
.mirais-badge-danger  { background: rgba(163, 45, 45, 0.15); color: #631c1c; }
.mirais-badge-info    { background: rgba(32, 85, 188, 0.15); color: var(--mirais-primary); }

/* セクション */
.mirais-section {
	background: #fff;
	border: 1px solid var(--mirais-border);
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 20px;
}

.mirais-section-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--mirais-bg-alt);
}

/* メッセージ */
.mirais-msg {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.6;
}

.mirais-msg-info {
	background: var(--mirais-primary-light);
	border-left: 4px solid var(--mirais-primary);
	color: #073258;
}

.mirais-msg-success {
	background: rgba(99, 153, 34, 0.1);
	border-left: 4px solid var(--mirais-success);
	color: #2f4d12;
}

.mirais-msg-warning {
	background: rgba(186, 117, 23, 0.1);
	border-left: 4px solid var(--mirais-warning);
	color: #6b4505;
}

.mirais-msg-danger {
	background: rgba(163, 45, 45, 0.1);
	border-left: 4px solid var(--mirais-danger);
	color: #631c1c;
}

/* 言語/通貨切替バー */
.mirais-lang-bar {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 8px 14px;
	background: var(--mirais-bg-alt);
	border-radius: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.mirais-lang-bar .label {
	font-size: 11px;
	color: var(--mirais-text-sub);
}

.mirais-lang-switcher,
.mirais-currency-switcher {
	display: inline-flex;
	gap: 0;
	background: #fff;
	border: 1px solid var(--mirais-border);
	border-radius: 6px;
	overflow: hidden;
}

.mirais-lang-switcher button,
.mirais-currency-switcher button {
	padding: 5px 10px;
	background: transparent;
	color: var(--mirais-text-sub);
	border: none;
	font-size: 11px;
	cursor: pointer;
	font-family: inherit;
}

.mirais-lang-switcher button.active,
.mirais-currency-switcher button.active {
	background: var(--mirais-primary);
	color: #fff;
}

/* スマホ */
@media (max-width: 768px) {
	.mirais-section { padding: 16px; }
	.mirais-section-title { font-size: 16px; }
	.mirais-btn { padding: 11px 18px; font-size: 13px; }
	.mirais-app input,
	.mirais-app select,
	.mirais-app textarea {
		font-size: 16px; /* iOS の自動ズーム防止 */
		padding: 10px 12px;
	}
}