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

/* リセット */
.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); }
}

/* ボタン */
.mirais-btn {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--mirais-border);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	background: #fff;
	color: var(--mirais-text);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.15s;
	font-family: inherit;
}

.mirais-btn:hover {
	border-color: var(--mirais-primary);
	background: var(--mirais-primary-light);
}

.mirais-btn-primary {
	background: var(--mirais-primary);
	border-color: var(--mirais-primary);
	color: #fff;
}

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

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

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

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

.mirais-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* フォーム要素 */
.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="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(15, 76, 129, 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(15, 76, 129, 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;
	}
}