/* ============================================================
 * Rasidcard – Account area fixes v1.0.8
 * Mobile-first: base styles target phones, desktop rules are
 * additive inside min-width media queries.
 * Scoped to body.woocommerce-account unless noted.
 * ============================================================ */

/* ---------- 1. Readable contrast on the dark account panels --- */
body.woocommerce-account .woocommerce-MyAccount-content {
	color: #dbe4ee;
}
body.woocommerce-account .woocommerce-MyAccount-content h1,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content h4 {
	color: #ffffff;
}
body.woocommerce-account .woocommerce-MyAccount-content p,
body.woocommerce-account .woocommerce-MyAccount-content address,
body.woocommerce-account .woocommerce-MyAccount-content label {
	color: #e8eef5;
}
body.woocommerce-account .woocommerce-MyAccount-content a {
	color: #38bdf8;
}
body.woocommerce-account .woocommerce-MyAccount-content a:hover,
body.woocommerce-account .woocommerce-MyAccount-content a:focus {
	color: #7dd3fc;
	text-decoration: underline;
}
/* The custom dark dashboard block */
body.woocommerce-account .custom-my-account,
body.woocommerce-account .custom-my-account h3,
body.woocommerce-account .custom-my-account p,
body.woocommerce-account .custom-my-account label {
	color: #e8eef5;
}

/* ---------- 2. v1.0.8 REVERT: do NOT hide the theme's own nav -
 * v1.0.2 wrongly assumed .custom-my-account .top-bar was a
 * duplicate tab bar. The child theme intentionally hides the
 * WooCommerce sidebar nav at every width
 * (nav.woocommerce-MyAccount-navigation{display:none} and
 * .wd-my-account-sidebar.wd-grid-col{display:none!important}),
 * so .top-bar is the PRIMARY (only) account navigation.
 * Hiding it left users with no nav at all. Rule removed. ----- */

/* ---------- 3. v1.0.8 REVERT: do NOT force the sidebar -----
 * v1.0.2 forced .wd-my-account-sidebar visible as "tabs".
 * That broke the layout: the theme keeps
 * .wd-my-account-sidebar.wd-grid-col{display:none!important},
 * and my display:block!important resurrected an EMPTY flex
 * item that still carries width:100%!important, squeezing
 * .woocommerce-MyAccount-content into a narrow column with
 * dead space beside it (seen on phones on orders + edit-
 * account). The theme's hidden-sidebar + top-bar design is
 * correct; this plugin no longer fights it. All v1.0.2 tab
 * rules (mobile pills + desktop vertical restore) removed. - */

/* ---------- 4. Profile / avatar block ------------------------ */
body.woocommerce-account .custom-my-account .profile-section {
	text-align: center;
}
body.woocommerce-account .custom-my-account .avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #052630;
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
}
/* Native file input is replaced by an Arabic button (see JS) */
body.woocommerce-account .custom-my-account input[type="file"][name="profile_image"].rch-hidden-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}
body.woocommerce-account .rch-upload-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	margin-top: 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(255, 255, 255, 0.35);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}
body.woocommerce-account .rch-file-name {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #9fb3c8;
}
body.woocommerce-account .custom-my-account .btn-save {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
}
@media (min-width: 1024px) {
	body.woocommerce-account .custom-my-account .btn-save {
		max-width: 340px;
		margin-inline: auto;
	}
}

/* ---------- 5. Forms ---------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content textarea {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	border-radius: 10px;
	min-height: 44px;
}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text::placeholder {
	color: #8fa3b8;
}
body.woocommerce-account .woocommerce-MyAccount-content .required {
	color: #f87171;
}

/* ---------- 6. Tables: scroll on small screens, clear heads - */
body.woocommerce-account .wps-wallet-transaction-container,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
body.woocommerce-account #transactions_table {
	width: 100%;
	min-width: 620px;
}
body.woocommerce-account #transactions_table thead th {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
	font-size: 13px;
	padding: 12px 10px;
	white-space: nowrap;
}
body.woocommerce-account #transactions_table tbody td {
	color: #dbe4ee;
	padding: 12px 10px;
	font-size: 13px;
}
body.woocommerce-account .rch-empty-row td {
	text-align: center !important;
	padding: 34px 16px !important;
	color: #9fb3c8 !important;
	font-size: 14px;
}
/* Reviews empty message */
body.woocommerce-account .woocommerce-MyAccount-content > p {
	color: #c6d4e2;
}

/* ---------- 7. Addresses ------------------------------------ */
body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
body.woocommerce-account .woocommerce-Address-title .edit {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ---------- 8. Points wheel page ----------------------------- */
body.woocommerce-account .wcr-wheel-container canvas {
	max-width: 100%;
	height: auto;
}
/* Hero copy is white on a light background: make it readable */
body.woocommerce-account .wcr-hero-copy h1,
body.woocommerce-account .wcr-hero-copy p,
body.woocommerce-account .wcr-hero-copy .wcr-eyebrow {
	color: #101c2c !important;
	text-shadow: none !important;
}
body.woocommerce-account .wcr-status-card p,
body.woocommerce-account .wcr-how-card small,
body.woocommerce-account .wcr-history-note {
	color: #46586f;
}
/* Services page: light-gray-on-white card, make it readable */
body.woocommerce-account .wrr-customer-services {
	color: #2b3a4f;
}
body.woocommerce-account .wrr-customer-services h2,
body.woocommerce-account .wrr-customer-services h3,
body.woocommerce-account .wrr-customer-services strong {
	color: #0e1a2b;
}
body.woocommerce-account .wrr-customer-services p,
body.woocommerce-account .wrr-customer-services span {
	color: #46586f;
}
body.woocommerce-account .wrr-customer-services .wrr-eyebrow {
	color: #0090b3;
}
@media (max-width: 767px) {
	body.woocommerce-account .wcr-game-layout {
		display: block;
	}
	body.woocommerce-account .wcr-info-column {
		margin-top: 20px;
	}
}

/* ---------- 9. Tighten the dead space before the footer ------ */
body.woocommerce-account main#main-content {
	padding-bottom: 28px;
}
body.woocommerce-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* ---------- 10. No-JS login fallback -------------------------- */
.rch-noscript-login {
	text-align: center;
	padding: 40px 20px;
}
.rch-noscript-login a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 32px;
	border-radius: 12px;
	background: #00b8e6;
	color: #052630;
	font-weight: 700;
}

/* ---------- 11. v1.0.2: mobile QA round ----------------------
 * (a) Display-name helper note: the Customizer paints every <em>
 *     at 58% white (#ffffff94), making the note under
 *     #account_display_name unreadable. Restore solid text.
 * (b) SBC "verified store" seal is fixed bottom-left with max
 *     z-index and covers the avatar "choose image" button.
 *     Nudge it up on account pages only (seal stays visible).
 * (c) Order-card status pills were clipped at the card edge:
 *     let cards show their full overflow.
 * (d) Faint helper/intro copy on account pages: readable. ---- */
/* NOTE: the display-name note rule was moved to section 14
 * (v1.0.5 max-strength override); it is intentionally NOT here. */
body.woocommerce-account iframe.sbc-seal-frame {
	bottom: 84px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content [class*="order-card"],
body.woocommerce-account .woocommerce-MyAccount-content [class*="order_card"],
body.woocommerce-account .woocommerce-MyAccount-content .order-item,
body.woocommerce-account .woocommerce-MyAccount-content .wc-order-card {
	overflow: visible;
}
body.woocommerce-account .woocommerce-MyAccount-content .orders-intro,
body.woocommerce-account .woocommerce-MyAccount-content .my-orders-intro,
body.woocommerce-account .woocommerce-MyAccount-content p.order-note {
	color: #c6d4e2;
}

/* ---------- 12. v1.0.3: precise selectors from the live DOM --- */
/* Orders heading subtitle (child theme .rc-orders-heading p)
 * sits on a LIGHT panel: dark readable tone. */
body.woocommerce-account .rc-orders-heading p {
	color: #46586f !important;
}
/* Order-card status pill (span.order-status-badge): keep it whole
 * inside the card instead of clipped at the edge. */
body.woocommerce-account article.order-card,
body.woocommerce-account article.order-card .order-card-head {
	overflow: visible;
}
body.woocommerce-account span.order-status-badge {
	flex-shrink: 0;
	white-space: nowrap;
}
/* Display-name helper note sits on a LIGHT info box: it needs a
 * DARK tone (v1.0.2 wrongly used a light tone here). */
/* ---------- 14. v1.0.6: note color - simplest selector -------- */
/* The v1.0.5 complex selector never took effect in rendering for
 * an unknown reason; use the simplest possible selector. The only
 * competing direct rule (wp-custom-css) sets font-style only, so
 * this cannot lose. */
#account_display_name_description em {
	color: #1f2d3d !important;
	-webkit-text-fill-color: #1f2d3d !important;
}
/* Wheel canvas: never distort into an ellipse. */
body.woocommerce-account canvas#wcrCanvas {
	aspect-ratio: 1 / 1;
}

/* ---------- 13. v1.0.4: wheel ellipse root cause ---------------- */
/* The roulette plugin pins #wcrCanvas{width:500px;height:500px}
 * (ID selector, beats our earlier class-level height:auto). When
 * the wheel column is narrower than 500px, max-width:100% shrinks
 * the width but the height stays 500px -> tall narrow ellipse.
 * Force proportional scaling at every width. */
body.woocommerce-account #wcrCanvas {
	width: 100% !important;
	height: auto !important;
}

/* ---------- 15. v1.0.8: avatar box spacing + label contrast ---- */
/* (a) The theme paints a roomy dashed upload box (25/30px outer
 *     margins, 24-28px inner padding): the avatar + button float
 *     in empty space. Compact it on every screen. */
body.woocommerce-account .woocommerce-EditAccountForm .avatar-upload-row {
	margin: 14px 0 18px !important;
	padding: 14px 12px !important;
}
body.woocommerce-account .woocommerce-EditAccountForm .avatar-upload-row > label {
	margin-bottom: 10px !important;
	/* (b) The theme colors this label var(--rca-blue-ink), which
	 *     is never defined anywhere -> the declaration is invalid,
	 *     dropped, and the label falls back to a faint light color
	 *     on the light box (same bug class as the v1.0.6 note).
	 *     Force the same dark ink used for the display-name note. */
	color: #1f2d3d !important;
	-webkit-text-fill-color: #1f2d3d !important;
}
body.woocommerce-account .woocommerce-EditAccountForm #avatarPreview {
	margin-bottom: 12px !important;
}

/* (c) Edit-account form: the Customizer paints 34px padding on
 *     the form card, which eats a phone screen. Tighten it. */
@media (max-width: 767px) {
	body.woocommerce-account form.woocommerce-EditAccountForm.edit-account {
		padding: 22px 16px !important;
	}
}