/*
 * DadiCheat Mobile Tweaks
 * --------------------------------------------------------------------------
 * Phone-focused appearance tweaks for the Woodmart + WooCommerce store.
 * The 768.98px breakpoint matches Woodmart's own "mobile" breakpoint.
 */

/* ==========================================================================
   FEATURE 1 — Center all footer text on phones
   The site uses TWO different footer markups:
     - Homepage      : Elementor section  .nv-footer-section
     - Everything else: global footer      .nv-gf
                        (.nv-gf-grid / .nv-gf-col / .nv-gf-logo-col / .nv-gf-cr)
   We center both. High specificity + !important so we win over the theme's
   inline styles and the site's Customizer CSS.
   ========================================================================== */
@media (max-width: 768.98px) {

	/* Center all text in both footers. */
	body .nv-footer-section,
	body .nv-footer-section *,
	body section.nv-gf,
	body section.nv-gf .nv-gf-grid,
	body section.nv-gf .nv-gf-col,
	body section.nv-gf .nv-gf-col *,
	body section.nv-gf .nv-gf-cr {
		text-align: center !important;
	}

	/* Center the (block-level) logo images. */
	body .nv-footer-section img,
	body section.nv-gf .nv-gf-logo-col img,
	body section.nv-gf img {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Link lists: remove indent / bullets so centered links sit centered. */
	body .nv-footer-section ul,
	body section.nv-gf .nv-gf-col ul {
		padding-left: 0 !important;
		margin-left: 0 !important;
		list-style: none !important;
	}

	/* Reset any column shift / side padding so stacked columns center. */
	body .nv-footer-section .nv-footer-shift,
	body section.nv-gf .nv-gf-grid,
	body section.nv-gf .nv-gf-col {
		padding-left: 0 !important;
		padding-right: 0 !important;
		justify-items: center !important;
		align-items: center !important;
	}
}

/* ==========================================================================
   FEATURE 2 — My Account "或者" divider: PHONE ONLY.
   White Chinese text between visible lines, shown only on phones. On desktop
   the login & register columns sit side by side and the theme hides this
   divider, so we only style it inside the phone query and explicitly keep it
   hidden on desktop. ("或者" is swapped in for the theme's "Or" via a gettext
   filter in the PHP.)
   ========================================================================== */
@media (max-width: 768.98px) {
	.woocommerce-account .wd-login-divider,
	.wd-login-divider {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		gap: 0 !important;
		margin: 18px 0 !important;
		opacity: 1 !important;
		text-transform: none !important;
	}

	.wd-login-divider > span {
		flex: 0 0 auto !important;
		margin: 0 18px !important;
		padding: 0 !important;
		white-space: nowrap;
		opacity: 1 !important;
	}

	/* White divider text on the (dark) My Account page. */
	.woocommerce-account .wd-login-divider > span {
		color: #fff !important;
	}

	.wd-login-divider::before,
	.wd-login-divider::after {
		content: "" !important;
		display: block !important;
		flex: 1 1 0 !important;
		height: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
	}

	/* Center the "或者 / 註冊" column — it was sitting slightly right of center.
	   The site's Customizer adds `padding-left:40px` to this column (for the
	   desktop divider) via `html body.page-id-13 .wd-col.col-register-text`,
	   which on phones leaves padding-left:40px vs padding-right:15px and pushes
	   the block right. We out-specify it with the #customer_login ID (an ID
	   beats that class-only rule) and use symmetric padding so it centers. */
	body #customer_login .col-register-text {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		text-align: center !important;
		float: none !important;
		transform: none !important;
	}

	body #customer_login .col-register-text > * {
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}
}

/* Desktop (>= 769px): keep the "或者" divider hidden. On wide screens the login
   and register columns sit side by side, so the theme hides this divider — we
   make sure it stays hidden (our phone styles no longer leak into desktop). */
@media (min-width: 769px) {
	.woocommerce-account .wd-login-divider,
	.col-register-text .wd-login-divider {
		display: none !important;
	}
}

/* ==========================================================================
   FEATURE 3 — Single product on phones: product name 24px, price info 20px,
   and product info (short description) 20px. High specificity so these beat
   the site's own Customizer styling (35px title / 28px orange price / 15px
   description). Meta and attributes are left unchanged.
   ========================================================================== */
@media (max-width: 768.98px) {

	/* Big, prominent product name. */
	body.single-product div.product .summary .product_title,
	body.single-product div.product .product_title,
	.single-product h1.product_title.entry-title {
		font-size: 24px !important;
		line-height: 1.3 !important;
		font-weight: 700 !important;
		margin-bottom: 8px !important;
		word-break: break-word;
	}

	/* Price info = 20px (out-specifies the site's 28px orange price styling). */
	body.single-product div.product .summary p.price,
	body.single-product div.product .summary p.price *,
	body.single-product div.product .entry-summary p.price,
	body.single-product div.product .entry-summary p.price * {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}
	body.single-product div.product .summary p.price {
		margin: 0 0 12px !important;
	}

	/* Product info (the short description under the price) = 20px. */
	body.single-product div.product .woocommerce-product-details__short-description,
	body.single-product div.product .woocommerce-product-details__short-description p,
	body.single-product div.product .woocommerce-product-details__short-description * {
		font-size: 20px !important;
		line-height: 1.7 !important;
	}
}

/* ==========================================================================
   FEATURE 4 — My Account login / sign-up text on phones: bigger (18px) for
   everything inside #customer_login EXCEPT the 登入 / 註冊 section headings.
   Weight is left to the theme/Feature 7 (no blanket bold) so labels can be
   normal. The #customer_login ID out-specifies the page-id-13 Customizer sizes.
   ========================================================================== */
@media (max-width: 768.98px) {
	html body.woocommerce-account #customer_login *:not(h2):not(.wd-login-title) {
		font-size: 18px !important;
	}
}

/* ==========================================================================
   FEATURE 5 — Single product purchase row (PC + mobile, all widths):
   • "使用時效:" label and the variation <select> sit on the SAME row
   • the <select> and its dropdown options are dark (the native white menu
     looked glitchy on the dark theme)
   • slimmer quantity counter + Add-to-cart button
   `html body.single-product …` out-specifies the site's Customizer CSS.
   ========================================================================== */

/* Label + select on one row */
html body.single-product table.variations tbody,
html body.single-product table.variations tr {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	gap: 14px !important;
	margin: 0 0 14px !important;
}
html body.single-product table.variations th.label {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap !important;
	text-align: left !important;
}
html body.single-product table.variations td.value {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
}

/* Dark select + dark dropdown options (keeps the theme's white border + arrow) */
html body.single-product table.variations td.value select {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	background-color: #1c1c1f !important;
	color: #fff !important;
}
html body.single-product table.variations td.value select option {
	background-color: #1c1c1f !important;
	color: #fff !important;
}

/* Slimmer quantity counter */
html body.single-product form.cart .quantity {
	height: 38px !important;
	min-height: 0 !important;
}
html body.single-product form.cart .quantity input.qty,
html body.single-product form.cart .quantity input[type="number"],
html body.single-product form.cart .quantity input.minus,
html body.single-product form.cart .quantity input.plus {
	height: 36px !important;
	min-height: 0 !important;
	line-height: 1 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Slimmer Add-to-cart button (matched height) */
html body.single-product .single_add_to_cart_button,
html body.single-product button.single_add_to_cart_button {
	padding: 9px 26px !important;
	font-size: 15px !important;
	min-height: 0 !important;
	line-height: 1.3 !important;
}

/* ==========================================================================
   FEATURE 6 — Single product on phones: let the text run almost edge-to-edge
   (like fishboss). Removes the summary's extra side padding (the Customizer
   adds padding-left:30px) and trims the content gutter to ~14px.
   ========================================================================== */
@media (max-width: 768.98px) {
	html body.single-product div.product .summary,
	html body.single-product div.product .summary.entry-summary {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html body.single-product main.container,
	html body.single-product .wd-content-layout.container {
		padding-left: 14px !important;
		padding-right: 14px !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   FEATURE 7 — My Account login / sign-up polish (phone)
   • form labels not bold; register blurb + privacy text muted (like 首頁)
   • breadcrumb 首頁 slightly darker
   • swap 記住帳號 / 忘記密碼了？ positions
   • slim, full-width 登入 + 註冊 buttons, text centred like 或者
   • grid + columns run edge-to-edge symmetrically (fixes the left tilt)
   ========================================================================== */
@media (max-width: 768.98px) {

	/* Labels: normal weight (not bold). */
	html body.woocommerce-account #customer_login label {
		font-weight: 400 !important;
	}

	/* "首頁" breadcrumb: slightly darker / muted. */
	html body.woocommerce-account .wd-breadcrumbs,
	html body.woocommerce-account .wd-breadcrumbs a,
	html body.woocommerce-account .wd-breadcrumbs span {
		color: #d6d6dc !important;
	}

	/* Register blurb + privacy text: same muted colour as 首頁, not bold. */
	html body.woocommerce-account #customer_login .registration-info,
	html body.woocommerce-account #customer_login .woocommerce-privacy-policy-text,
	html body.woocommerce-account #customer_login .woocommerce-privacy-policy-text p {
		color: #d6d6dc !important;
		font-weight: 400 !important;
	}

	/* Swap positions: 記住帳號 left, 忘記密碼了？ right. */
	html body.woocommerce-account #customer_login .login-form-footer {
		flex-direction: row !important;
	}
	html body.woocommerce-account #customer_login .login-form-footer .woocommerce-form-login__rememberme {
		order: 1 !important;
	}
	html body.woocommerce-account #customer_login .login-form-footer .lost_password {
		order: 2 !important;
	}

	/* Grid + columns: full width, no side padding / divider border, so the boxes
	   and buttons run to the edges symmetrically (no left tilt). */
	body #customer_login {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body #customer_login .col-login,
	body #customer_login .col-register,
	body #customer_login .col-register-text {
		padding-left: 0 !important;
		padding-right: 0 !important;
		border: 0 !important;
	}

	/* Slim, full-width 登入 button (centred text). */
	html body.woocommerce-account #customer_login button.woocommerce-form-login__submit {
		width: 100% !important;
		padding: 12px !important;
		font-size: 16px !important;
		text-align: center !important;
	}

	/* Slim, full-width 註冊 buttons (the switch CTA + the real register submit). */
	html body.woocommerce-account #customer_login a.wd-switch-to-register,
	html body.woocommerce-account #customer_login button.woocommerce-form-register__submit {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 12px !important;
		font-size: 16px !important;
		margin: 18px 0 0 !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   FEATURE 8 — Single product "in stock" label (尚有庫存): white text.
   The theme / Customizer colours the .stock.in-stock label something hard to
   read on the dark page; force it white. All screen widths (not phone-only).
   The html body prefix out-specifies the Customizer's page-id rules.
   ========================================================================== */
html body .stock.in-stock,
html body p.stock.in-stock,
html body .product .stock.in-stock,
html body.single-product .stock.in-stock {
	color: #fff !important;
}