/**
 * Lightning Photo Studio - 子テーマスタイル
 * 写真屋さん販売システム フロントエンド用CSS
 *
 * @package lightning-photo-studio
 * @author Find Japan - CyberMates
 */

/* ============================================================
   1. ログインフォーム（保護者向け: 大きなフォーム、分かりやすいUI）
   ============================================================ */

.pss-login-container {
	max-width: 400px;
	margin: 40px auto;
	padding: 32px 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* スマホ: 左右に余白を確保してコンテナが画面端まで広がらないようにする */
@media (max-width: 480px) {
	.pss-login-container {
		margin: 16px;
		padding: 24px 16px;
		border-radius: 8px;
	}
}

.pss-login-container h2 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 24px;
	color: #333;
}

.pss-login-container input[type="text"],
.pss-login-container input[type="password"] {
	width: 100%;
	padding: 14px 16px;
	font-size: 16px; /* iOS zoom防止 */
	border: 2px solid #ddd;
	border-radius: 8px;
	margin-bottom: 16px;
	box-sizing: border-box;
	transition: border-color 0.2s;
	-webkit-appearance: none;
}

.pss-login-container input[type="text"]:focus,
.pss-login-container input[type="password"]:focus {
	border-color: var(--pss-color-accent, #E8527A);
	outline: none;
	box-shadow: 0 0 0 3px rgba(232, 82, 122, 0.1);
}

.pss-login-container button[type="submit"],
.pss-login-container input[type="submit"] {
	width: 100%;
	padding: 14px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--pss-color-accent, #E8527A);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	min-height: 48px; /* タップターゲット */
	transition: background 0.2s;
}

.pss-login-container button[type="submit"]:hover,
.pss-login-container input[type="submit"]:hover {
	background: var(--pss-color-accent-hover, #D4406A);
}

.pss-login-container .pss-login-error {
	background: #FFF0F0;
	color: #C45B5B;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 14px;
	text-align: center;
}

/* ============================================================
   2. レスポンシブ改善（タブレット〜デスクトップ）rev236: 列数拡張
   ============================================================ */

/* SP（481px〜）: 3列 */
@media (min-width: 481px) {
	.pss-org-photo-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.pss-event-page {
		max-width: 100% !important;
	}
}

/* タブレット（769px〜）: 4列 */
@media (min-width: 769px) {
	.pss-org-photo-grid {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.pss-event-page {
		max-width: 100% !important;
	}
}

/* PC（1025px〜）: 5列 */
@media (min-width: 1025px) {
	.pss-org-photo-grid {
		grid-template-columns: repeat(5, 1fr) !important;
	}
	.pss-event-page {
		max-width: 100% !important;
	}
}

/* ワイドスクリーン（1280px〜）: 6列 */
@media (min-width: 1280px) {
	.pss-org-photo-grid {
		grid-template-columns: repeat(6, 1fr) !important;
	}
}

/* ============================================================
   3. 印刷用スタイル（注文確認印刷用）
   ============================================================ */

@media print {
	/* ヘッダー、ナビ、サイドバーを非表示（Lightning G3 セレクタも含む） */
	.site-header,
	.global-nav,
	.sub-section,
	.site-footer,
	.pss-org-header__cart-btn,
	.pss-tab-nav,
	.pss-bottom-cart-bar,
	#wpadminbar,
	/* Lightning G3 固有 */
	.l-header,
	.l-footer,
	.l-localNav,
	.g3-section-breadcrumb,
	.vk-breadcrumbs,
	.vk-mobile-nav,
	.vk-mobile-nav-menu-btn,
	.vk-skip-nav {
		display: none !important;
	}

	/* メインコンテンツを全幅に */
	.main-section,
	.site-body,
	.site-body-container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}

	.pss-event-page {
		max-width: 100% !important;
		min-height: auto !important;
		padding-bottom: 0 !important;
	}

	/* カート内容を見やすく */
	.pss-cart-items {
		border: 1px solid #ccc;
	}

	.pss-cart-summary {
		page-break-inside: avoid;
	}

	/* 注文フォーム内容を表示 */
	.pss-order-section {
		page-break-inside: avoid;
	}
}

/* ============================================================
   4. アクセシビリティ改善
   ============================================================ */

/* フォーカス表示（キーボードナビゲーション時） */
.pss-event-page *:focus-visible {
	outline: 2px solid var(--pss-color-accent, #E8527A);
	outline-offset: 2px;
}

/* スキップリンク */
.pss-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.pss-skip-link:focus {
	left: 0;
}

/* スクリーンリーダー専用テキスト */
.pss-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   5. ローディング状態の改善
   ============================================================ */

/* スケルトンローディングアニメーション */
.pss-skeleton-card {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: pss-skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: 8px;
	aspect-ratio: 1;
}

@keyframes pss-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.pss-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	padding: 4px;
}

@media (min-width: 600px) {
	.pss-skeleton-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.pss-skeleton-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================================
   6. WooCommerce注文フロー統合
   ============================================================ */

/* WooCommerce チェックアウトのPSS固有スタイル */
.woocommerce-checkout .pss-order-note {
	background: #F0F8FF;
	border-left: 4px solid var(--pss-color-accent, #E8527A);
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 0 8px 8px 0;
	font-size: 14px;
}

/* 注文完了ページ */
.woocommerce-order-received .pss-order-complete {
	text-align: center;
	padding: 32px 16px;
}

.woocommerce-order-received .pss-order-complete h2 {
	color: var(--pss-color-success, #2C8C5A);
	margin-bottom: 16px;
}

/* ============================================================
   6-b. WooCommerce チェックアウト画面 PSS デザイン統一（rev210）
   注: PSSデザイントークン（--pss-color-*）はPSSページ（ショートコード配置ページ）でのみ
       :root に出力されるため、ここではフォールバック値を明示する。
   ============================================================ */

/* イベント情報バナー（pss_checkout_event_banner が出力する div） */
.woocommerce-checkout .pss-checkout-event-banner,
/* rev204以前のインラインスタイル出力もなるべく上書き */
.woocommerce-checkout form.checkout > div[style*="background:#f0f7ff"] {
	background: #FFF0F3 !important;
	border-left-color: var(--pss-color-accent, #E8527A) !important;
	border-radius: 4px 8px 8px 4px !important;
}

/* フォームフィールド: テキスト入力・セレクト */
.woocommerce-checkout .woocommerce-input-wrapper input[type="text"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="email"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="tel"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="number"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="password"],
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
	font-size: 16px; /* iOS zoom防止 */
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	width: 100%;
	box-sizing: border-box;
	font-family: "Noto Sans JP", system-ui, sans-serif;
	color: var(--pss-color-text-primary, #1A1A1A);
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus {
	border-color: var(--pss-color-accent, #E8527A);
	outline: none;
	box-shadow: 0 0 0 3px rgba(232, 82, 122, 0.1);
}

/* フォームラベル */
.woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pss-color-text-primary, #1A1A1A);
	margin-bottom: 4px;
	display: block;
}

/* 必須マーク */
.woocommerce-checkout .form-row label .required {
	color: var(--pss-color-accent, #E8527A);
}

/* セクション見出し */
.woocommerce-checkout h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--pss-color-text-primary, #1A1A1A);
	border-bottom: 2px solid var(--pss-color-accent, #E8527A);
	padding-bottom: 8px;
	margin-bottom: 20px;
}

/* 「注文を確定する」ボタン */
.woocommerce-checkout #place_order {
	background: var(--pss-color-accent, #E8527A);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 24px;
	min-height: 48px;
	width: 100%;
	cursor: pointer;
	font-family: "Noto Sans JP", system-ui, sans-serif;
	transition: background 0.2s;
	box-sizing: border-box;
}

.woocommerce-checkout #place_order:hover {
	background: var(--pss-color-accent-hover, #D4406A);
}

.woocommerce-checkout #place_order:disabled {
	background: #ccc;
	cursor: not-allowed;
}

/* 注文サマリーテーブル */
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	font-size: 13px;
	padding: 8px 12px;
	color: var(--pss-color-text-primary, #1A1A1A);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	font-weight: 700;
	color: var(--pss-color-accent, #E8527A);
}

/* モバイル: カラムレイアウトを縦積みに */
@media (max-width: 768px) {
	.woocommerce-checkout .col2-set {
		display: block;
	}
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: 100%;
		float: none;
	}
}

/* ============================================================
   7. Lightning テーマ固有の微調整
   ============================================================ */

/* ギャラリーページではLightningのサイトヘッダー・ナビ・フッター・パンくずを非表示 */
/* Lightning G3 は .l-header / .l-footer / .l-localNav / .vk-breadcrumbs を使用 */
body.pss-fullwidth .site-header,
body.pss-fullwidth .global-nav,
body.pss-fullwidth .sub-section,
body.pss-fullwidth .breadcrumb,
body.pss-fullwidth .page-header,
body.pss-fullwidth .site-footer,
body.pss-gallery-page .site-header,
body.pss-gallery-page .global-nav,
body.pss-gallery-page .sub-section,
body.pss-gallery-page .breadcrumb,
body.pss-gallery-page .page-header,
body.pss-gallery-page .site-footer,
/* Lightning G3 固有セレクタ */
body.pss-fullwidth .l-header,
body.pss-fullwidth .l-footer,
body.pss-fullwidth .l-localNav,
body.pss-fullwidth .g3-section-breadcrumb,
body.pss-fullwidth .vk-breadcrumbs,
body.pss-fullwidth .vk-mobile-nav,
body.pss-fullwidth .vk-mobile-nav-menu-btn,
body.pss-gallery-page .l-header,
body.pss-gallery-page .l-footer,
body.pss-gallery-page .l-localNav,
body.pss-gallery-page .g3-section-breadcrumb,
body.pss-gallery-page .vk-breadcrumbs,
body.pss-gallery-page .vk-mobile-nav,
body.pss-gallery-page .vk-mobile-nav-menu-btn {
	display: none !important;
}

/* Lightning: メインコンテンツを全幅に（サイドバー非表示時の余白調整） */
body.pss-fullwidth .main-section,
body.pss-gallery-page .main-section {
	padding-top: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

body.pss-fullwidth .site-body,
body.pss-gallery-page .site-body,
body.pss-fullwidth .site-body-container,
body.pss-gallery-page .site-body-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Lightning G3: .l-body はヘッダー高さ分の padding-top を持つ場合がある。
   ヘッダーを非表示にした際に空白が残らないよう上書き。 */
body.pss-fullwidth .l-body,
body.pss-gallery-page .l-body {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ============================================================
   8. モバイル操作性改善（低リテラシー層向け）
   ============================================================ */

/* タップハイライトをアクセントカラーで統一（デフォルトの青を上書き） */
body.pss-gallery-page a,
body.pss-fullwidth a {
	-webkit-tap-highlight-color: rgba(232, 82, 122, 0.15);
}

/* スマホ: ボトムバー（カート固定）の下に余白を確保してコンテンツが隠れないようにする */
@media (max-width: 599px) {
	body.pss-gallery-page .pss-event-page,
	body.pss-fullwidth .pss-event-page {
		padding-bottom: 80px;
	}
}

/* スマホ: Lightning のスクロール時に固定されるヘッダーが非表示後に残像として
   スクロールイベントを奪うことがある。pointer-events を無効化して対処。 */
body.pss-fullwidth .l-header,
body.pss-gallery-page .l-header {
	pointer-events: none !important;
}