/**
 * 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;
}

/* ── チェックアウトのフォーム: 入力欄・カード入力を扱いやすいサイズに
   (PC/モバイル共通)。元の transform: scale(0.875) の縮小を解除して実サイズを確保 ── */
.wp-stripe-cart-checkout .field {
	transform: none;
}
.wp-stripe-cart-checkout input,
.wp-stripe-cart-checkout select {
	min-height: 46px;
}
/* PC で住所入力欄が右にはみ出し、overflow-x:hidden で右端が切れる不具合の修正。
   核心は <fieldset> の特有挙動: 既定で min-inline-size:min-content を持ち、これは
   max-width より優先されるため、中身の最小幅まで縮まず親(section)を超える。
   → fieldset 自身に min-width:0 を効かせて section 幅まで縮められるようにする。
   併せてフレックスアイテム(.field=input/select, label)も min-width:0 + box-sizing。
   元の transform:scale(0.875) で隠れていたはみ出しが実サイズ化で顕在化したもの。 */
.wp-stripe-cart-checkout #checkout section {
	min-width: 0;
	max-width: 100%;
}
.wp-stripe-cart-checkout #checkout fieldset {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
.wp-stripe-cart-checkout #checkout fieldset label {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
.wp-stripe-cart-checkout #checkout .field {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
/* カード番号入力(Stripe Element)を入力欄と同じ枠・高さに */
.wp-stripe-cart-checkout #card-element {
	min-height: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--wsc-line-strong);
	border-radius: var(--wsc-radius);
	background: var(--wsc-bg);
}

/* モバイルは指で押しやすいラベル高さ + iOS のフォーカス時ズーム防止 */
@media (max-width: 768px) {
	.wp-stripe-cart-checkout fieldset label {
		min-height: 52px;
		height: auto;
	}
	.wp-stripe-cart-checkout input,
	.wp-stripe-cart-checkout select {
		font-size: 16px;
	}
}