/**
 * Loyalty Connect front-end styles.
 *
 * Semantic, theme-friendly classes. No !important so themes can override
 * freely with their own CSS or by copying templates into the theme.
 */

/* ---- Login --------------------------------------------------------------- */
/* Conditional sign-in blocks: when JS is active, pre-hide them so only the
   correct one (logged-in / logged-out) is revealed by applyVisibility — no
   flash of the wrong block. Without JS, they stay visible (graceful). */
.loyalty-js [data-loyalty-when]:not([data-loyalty-ready]) {
	display: none;
}

.loyalty-login {
	margin: 1em 0;
}

.loyalty-login__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	max-width: 320px;
}

.loyalty-login--align-center .loyalty-login__buttons {
	margin-left: auto;
	margin-right: auto;
}

.loyalty-login--align-right .loyalty-login__buttons {
	margin-left: auto;
}

.loyalty-login--align-left .loyalty-login__buttons {
	margin-right: auto;
}

.loyalty-login__notice {
	padding: 0.75em 1em;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: 6px;
	color: #6d4c00;
}

.loyalty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.7em 1.2em;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid #dadce0;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.05s ease;
}

.loyalty-btn:hover {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.loyalty-btn:active {
	transform: translateY(1px);
}

.loyalty-login--style-rounded .loyalty-btn {
	border-radius: 24px;
}

.loyalty-login--style-square .loyalty-btn {
	border-radius: 4px;
}

.loyalty-btn--google {
	background: #ffffff;
	color: #3c4043;
}

.loyalty-btn--apple {
	background: #000000;
	color: #ffffff;
	border-color: #000000;
}

.loyalty-btn__icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.loyalty-btn__icon--google {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.5 0 10.4-2.1 14.1-5.6l-6.5-5.5C29.6 34.4 26.9 35 24 35c-5.2 0-9.6-3.3-11.2-7.9l-6.6 5.1C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.5l6.5 5.5C39.9 35.8 44 30.4 44 24c0-1.3-.1-2.3-.4-3.5z'/%3E%3C/svg%3E");
}

.loyalty-btn__icon--apple {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16.4 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.8 2.3-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 2.9 2.3 1.2 0 1.6-.7 3-.7s1.8.7 3 .7 2-1 2.8-2.1c.9-1.3 1.2-2.5 1.3-2.6-.1 0-2.5-1-2.5-3.7zM14.2 5.6c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.8 1.4-.6.7-1.1 1.8-1 2.9 1 .1 2.1-.5 2.8-1.3z'/%3E%3C/svg%3E");
}

/* ---- Account ------------------------------------------------------------- */
.loyalty-account {
	margin: 1em 0;
}

.loyalty-account__header {
	margin-bottom: 1.25em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid #eaeaea;
}

.loyalty-account__greeting {
	margin: 0 0 0.2em;
}

.loyalty-account__email {
	margin: 0 0 0.5em;
	color: #666;
	font-size: 0.9rem;
}

.loyalty-account__logout {
	font-size: 0.85rem;
	text-decoration: underline;
}

.loyalty-account__panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1em;
}

.loyalty-account__panel {
	padding: 1em;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	background: #fafafa;
}

.loyalty-account__panel-title {
	margin: 0 0 0.5em;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #444;
}

.loyalty-account__placeholder {
	margin: 0;
	color: #888;
	font-style: italic;
}

.loyalty-account__error {
	color: #b00020;
}

.loyalty-account__linked-list {
	margin: 0;
	padding-left: 1.1em;
}

[hidden] {
	display: none;
}

/* ---- Checkout / cart redemption ----------------------------------------- */
.loyalty-redeem {
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 6px;
	padding: 16px;
	margin: 0 0 20px;
	background: rgba( 0, 0, 0, 0.02 );
}
.loyalty-redeem__title {
	font-weight: 600;
	margin-bottom: 10px;
}
.loyalty-redeem__row {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}
.loyalty-redeem__label {
	font-size: 0.85em;
	margin-bottom: 4px;
}
.loyalty-redeem__hint {
	color: #666;
	font-weight: 400;
}
.loyalty-redeem__input {
	width: 100%;
	box-sizing: border-box;
}
.loyalty-redeem__actions {
	display: flex;
	gap: 8px;
}
.loyalty-redeem__status {
	margin-top: 8px;
	color: #1a7f37;
	font-weight: 600;
}
.loyalty-redeem__countdown {
	margin-top: 4px;
	font-size: 0.85em;
	color: #666;
}
.loyalty-redeem__error {
	margin-top: 8px;
	color: #b32d2e;
}

/* ---- Orders -------------------------------------------------------------- */
.loyalty-account__order-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.loyalty-account__order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.loyalty-account__order:last-child {
	border-bottom: 0;
}

.loyalty-account__order-num {
	font-weight: 600;
}

.loyalty-account__order-shop {
	color: #555;
}

.loyalty-account__order-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.78em;
	line-height: 1.4;
	background: #eef1f4;
	color: #444;
}

.loyalty-account__order-status--completed {
	background: #e3f5e9;
	color: #1a7f37;
}

.loyalty-account__order-status--processing,
.loyalty-account__order-status--on-hold {
	background: #fdf3df;
	color: #8a6d1b;
}

.loyalty-account__order-status--cancelled,
.loyalty-account__order-status--failed,
.loyalty-account__order-status--refunded {
	background: #fae6e6;
	color: #b32d2e;
}

.loyalty-account__order-total {
	margin-left: auto;
	font-weight: 600;
}

.loyalty-account__order-date {
	color: #888;
	font-size: 0.85em;
}

/* Email + OTP login block (above SSO buttons) */
.loyalty-email-login {
	max-width: 340px;
	margin: 0 auto 0.5rem;
	text-align: left;
}
.loyalty-email-login__label {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom: 6px;
	color: #333;
}
.loyalty-email-login__input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 1em;
	margin-bottom: 8px;
}
.loyalty-btn--email {
	width: 100%;
	justify-content: center;
	background: #111;
	color: #fff;
	border: none;
	cursor: pointer;
}
.loyalty-btn--email:disabled { opacity: 0.6; cursor: default; }
.loyalty-email-login__back {
	display: inline-block;
	margin-top: 8px;
	background: none;
	border: none;
	color: #2271b1;
	cursor: pointer;
	font-size: 0.85em;
	padding: 0;
}
.loyalty-email-login__msg {
	font-size: 0.85em;
	margin: 8px 0 0;
	min-height: 1.2em;
}
.loyalty-login__divider {
	text-align: center;
	margin: 14px 0;
	position: relative;
	color: #999;
	font-size: 0.85em;
}
.loyalty-login__divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #e5e5e5;
	z-index: 0;
}
.loyalty-login__divider span {
	position: relative;
	background: #fff;
	padding: 0 10px;
	z-index: 1;
}

/* M3.1 earn preview — "本單可得約 X 點" on cart/checkout. */
.loyalty-earn-preview {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #f0f7f1;
	border: 1px solid #cde8d2;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #1a5c2e;
}
.loyalty-earn-preview--blocks {
	margin: 1rem 0;
}