/**
 * レビュー写真（astra-review-photos）
 *
 * ★ASTRA は黒地の1テーマ専用なので、ここは**暗色前提**で書いてよい
 *   （MyMoods / NICOBAY 共用の mm-review-photos は白地2テーマのため色を持たない）。
 *   ただし配色の出どころはテーマのトークンに寄せる:
 *     文字      rgb(var(--color-foreground))     = #fff（astra-theme.css の上書き）
 *     枠線      rgba(var(--color-foreground),.2)
 *     アクセント #4EC3E1（サイト共通のシアン）
 *     エラー    #ff7a7a（テーマ内で既に使っている赤）
 *   トークンが読めない場所（管理画面など）でも壊れないよう、
 *   var() には必ずフォールバックを添える。
 *
 * 行の余白はテーマ側のクラス（astra-review-form__row）が付けるので、
 * ここでは中身だけを整える。
 */

/* ---------------------------------------------------------------
 * 投稿フォームの添付欄
 * ------------------------------------------------------------ */

.arp-field__label {
	display: block;
	font-family: var(--astra-source-code-pro, monospace);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(var(--color-foreground, 255, 255, 255), 0.7);
}

.arp-field__label .required {
	color: #4ec3e1;
}

/*
 * ★幅を伸ばさない。file の実体は行いっぱいでも、描画されるのは
 *   「ファイル選択｜N ファイル」の小さなコントロールだけなので、
 *   width:100% にすると is-invalid の赤枠がコントロールから遠く離れた
 *   横線2本に見える（どこが悪いのか分からない）。
 */
.arp-field__input {
	display: block;
	max-width: 100%;
	margin-top: 8px;
	padding: 8px 0;
	color: rgb(var(--color-foreground, 255, 255, 255));
	font-size: 13px;
}

/* 端末のファイル選択ボタンは黒地だと白のままで沈むので、ここだけ塗る。
 * ::file-selector-button は比較的新しいので、効かない環境ではブラウザ既定のまま出る。 */
.arp-field__input::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 1px solid rgba(var(--color-foreground, 255, 255, 255), 0.3);
	background: transparent;
	color: rgb(var(--color-foreground, 255, 255, 255));
	font-family: var(--astra-source-code-pro, monospace);
	font-size: 12px;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.arp-field__input::file-selector-button:hover {
	border-color: #4ec3e1;
	color: #4ec3e1;
}

.arp-field__input.is-invalid {
	outline: 1px solid #ff7a7a;
	outline-offset: 4px;
}

.arp-field__hint,
.arp-field__reward {
	display: block;
	font-size: 12px;
	line-height: 1.7;
	color: rgba(var(--color-foreground, 255, 255, 255), 0.55);
}

.arp-field__reward {
	margin-top: 4px;
	color: #4ec3e1;
}

.arp-field__error {
	margin: 6px 0 0;
	font-size: 13px;
	color: #ff7a7a;
}

/*
 * 写真を選ぶまでは枠ごと出さない（余白だけが空くのを防ぐ）。
 * テーマの base.css も `ul:empty { display: none }` を持っていて結果的に
 * 同じ挙動になるが、テーマ任せにせずここで明示しておく。
 */
.arp-field__preview:empty {
	display: none;
}

.arp-field__preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.arp-field__thumb {
	margin: 0;
	padding: 0;
}

.arp-field__thumb img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	/* ★角丸にしない。ASTRA の意匠は直角（カード・入力欄・ボタンすべて）。 */
	border: 1px solid rgba(var(--color-foreground, 255, 255, 255), 0.2);
}

/* ---------------------------------------------------------------
 * レビュー一覧に出す写真
 * ------------------------------------------------------------ */

.arp-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.arp-photos__item {
	margin: 0;
	padding: 0;
}

.arp-photos__btn {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.arp-photos__img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 1px solid rgba(var(--color-foreground, 255, 255, 255), 0.2);
	transition: border-color 0.2s ease;
}

.arp-photos__btn:hover .arp-photos__img {
	border-color: #4ec3e1;
}

@media (min-width: 750px) {
	.arp-photos__img {
		width: 88px;
		height: 88px;
	}
}

/* ---------------------------------------------------------------
 * ライトボックス
 * ------------------------------------------------------------ */

.arp-lightbox {
	max-width: min(92vw, 900px);
	max-height: 90vh;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: #000;
	overflow: hidden;
}

.arp-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.arp-lightbox__img {
	display: block;
	max-width: min(92vw, 900px);
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.arp-lightbox__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}