/**
 * WP Stripe Cart - Functional fixes layer
 * ------------------------------------------------------------------
 * 常時読み込まれる「機能修正」層。レイアウト崩れ・はみ出し・重なりなど
 * 客観的な不具合の修正のみを含み、配色やタイポ(見た目の意匠)は一切
 * 持たない。そのため White Label アドオンで独自デザインを当てていても
 * 上書きせず、修正だけが効く。
 * 見た目の意匠は wp-stripe-cart-theme.css(意匠層)側にあり、そちらは
 * White Label 未使用時のみ読み込まれる。
 */

/* ── デザイントークン(両層で共有。定義のみで、適用は各層の規則側) ── */
.wp-stripe-cart-product,
.wp-stripe-cart-cart,
.wp-stripe-cart-cart-footer,
.wp-stripe-cart-checkout,
.wp-stripe-cart-notice,
.wp-stripe-cart-icon {
	--wsc-fg:      var(--wp--preset--color--contrast, #111111);
	--wsc-bg:      var(--wp--preset--color--base, #ffffff);
	--wsc-subtle:  var(--wp--preset--color--base-2, #f6f6f4);
	--wsc-muted:   var(--wp--preset--color--contrast-2, #636363);
	--wsc-accent:  var(--wp--preset--color--accent-1, var(--wp--preset--color--contrast, #111111));
	--wsc-btn-bg:  var(--wp--preset--color--contrast, #111111);
	--wsc-btn-fg:  var(--wp--preset--color--base, #ffffff);
	--wsc-line:    color-mix(in srgb, var(--wp--preset--color--contrast, #111111) 16%, transparent);
	--wsc-line-strong: color-mix(in srgb, var(--wp--preset--color--contrast, #111111) 32%, transparent);
	--wsc-radius:  4px;
	--wsc-shadow:  0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast, #111111) 10%, transparent);
	--wsc-success: #1e8e3e;
	--wsc-error:   #d63638;
}

/* ── 画像はみ出し対策: 元CSSは img に max-width を持たず原寸で溢れる ── */
.wp-stripe-cart-product img,
.wp-stripe-cart-cart img,
.wp-stripe-cart-checkout img,
.wp-stripe-cart-notice img {
	max-width: 100%;
	height: auto;
}

/* ── カートドロワー: 固定高さ(footer 210px / calc(100vh-355px))依存を
   やめ、フレックス縦積みでチェックアウトボタンを常に表示する ── */
.wp-stripe-cart-cart__inner {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.wp-stripe-cart-cart__header {
	flex: 0 0 auto;
}
.wp-stripe-cart-cart__ajax_products {
	flex: 1 1 auto;
	min-height: 0;           /* flexアイテムがはみ出さずスクロールするために必須 */
	height: auto !important;  /* 元の calc(100vh - 355px) を無効化 */
	overflow-y: auto;
}
.wp-stripe-cart-cart-footer {
	position: static !important; /* 元の absolute; bottom:0 を解除 */
	height: auto !important;      /* 元の固定 210px を解除 */
	flex: 0 0 auto;
}

/* ── フローティングカートアイコン: 表示位置(設定値の変数)と、テーマの
   「トップへ戻る」ボタン等との重なりを避けるための重ね順のみ ── */
.wp-stripe-cart-icon {
	bottom: var(--wsc-icon-bottom, 20px) !important;
	right: var(--wsc-icon-right, 20px) !important;
	/* カートドロワー(z-index:9999999)より下に保ち、ドロワーを開くと
	   アイコンが隠れる挙動は維持しつつ、一般的なテーマ要素より前面へ */
	z-index: 999999 !important;
}

/* ── チェックアウト画面(モバイル): 末尾の「支払う」ボタンがブラウザの
   ツールバー/ホームインジケータの裏に隠れて押せない問題を解消 ── */
.wp-stripe-cart-checkout {
	/* 100vh はモバイルでブラウザUIの裏まで含むため、可視領域基準の dvh を使う
	   (未対応環境は元の 100vh のまま) */
	height: 100dvh;
}
.wp-stripe-cart-checkout__inner {
	/* 最下部の支払うボタンがブラウザUI/セーフエリアに隠れないよう余白を確保 */
	padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── チェックアウトのフォーム(モバイル): 国・都道府県などの
   プルダウン/入力欄をタップしやすい高さにする ── */
@media (max-width: 768px) {
	.wp-stripe-cart-checkout fieldset label {
		min-height: 52px;
		height: auto;
	}
	/* 元の transform: scale(0.875) の縮小を解除して実タップ領域を確保 */
	.wp-stripe-cart-checkout .field {
		transform: none;
	}
	.wp-stripe-cart-checkout input,
	.wp-stripe-cart-checkout select {
		min-height: 44px;   /* 推奨タップ領域 */
		font-size: 16px;    /* iOS のフォーカス時ズームを防止 */
	}
	/* カード番号入力(Stripe Element)も同様に高さを確保して押しやすく */
	.wp-stripe-cart-checkout #card-element {
		min-height: 44px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
}