/* ==============================================================
   Yanshur — Login / Sign up screen
   Loaded only on the account page while logged out
   (see functions.php section 24). The logged-in account area has
   its own stylesheet, css/my-account.css.

   Everything is scoped under .ysa-auth, which only exists in
   woocommerce/myaccount/form-login.php, so WooCommerce's own
   forms elsewhere — checkout, lost password — are untouched.
   ============================================================== */

.ysa-auth{
	--ysc-ink:#182430;
	--ysc-paper:#F8F5EE;
	--ysc-card:#FFFFFF;
	--ysc-red:#C33F31;
	--ysc-red-dark:#8f2e23;
	--ysc-red-soft:#FBEAE7;
	--ysc-brass:#B08935;
	--ysc-green:#3D8361;
	--ysc-slate:#69707E;
	--ysc-line:rgba(24,36,48,0.10);
	--ysc-r-lg:20px;
	--ysc-r-sm:9px;

	font-family:'Inter',sans-serif;
	color:var(--ysc-ink);
	max-width:460px;
	margin:40px auto 60px;
}
.ysa-auth *{ box-sizing:border-box; }

/* css/my-account.css turns the account wrapper into a flex row, because the
   logged-in area is a sidebar beside a content column. Logged out there is one
   card and nothing to lay out, and the flex context was eating its auto
   margins — the card sat right of centre with the page empty to its left.

   `article >` is doing real work here. The page carries more than one
   div.woocommerce: ReHub prints an empty one next to the header for its login
   popup, and an unqualified `.woocommerce` rule forced that empty div to
   display:block too — which is what put a blank white panel under the header
   button. Only the wrapper inside the page article is the content one. */
.woocommerce-account:not(.logged-in) article > .woocommerce{
	display:block;
	margin-top:0;
}

/* ---------- Tab state ----------
   Pure CSS tabs: two radios sit before the card, and :checked drives which
   panel shows. No JavaScript, and the open tab survives a failed submit
   because the template sets `checked` server-side. */
.ysa-tab-input{
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

.ysa-auth-card{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-lg);
	padding:34px 34px 30px;
	box-shadow:0 18px 40px -22px rgba(24,36,48,0.25);
}

/* ---------- Head ---------- */
.ysa-auth-head{ text-align:center; margin-bottom:26px; }
.ysa-auth-eyebrow{
	display:inline-block;
	font-family:'IBM Plex Mono',monospace;
	font-size:10.5px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ysc-red);
	background:var(--ysc-red-soft);
	padding:5px 13px;
	border-radius:100px;
	margin:0 0 14px;
}
.ysa-auth-title{
	font-family:'Fraunces',serif;
	font-weight:600;
	font-size:26px;
	line-height:1.2;
	margin:0 0 8px;
	color:var(--ysc-ink);
}
.ysa-auth-sub{
	font-size:13.5px;
	line-height:1.6;
	color:var(--ysc-slate);
	margin:0;
}

/* ---------- Tabs ---------- */
.ysa-tabs{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px;
	background:var(--ysc-paper);
	border-radius:var(--ysc-r-sm);
	padding:4px;
	margin-bottom:24px;
}
.ysa-tab{
	display:block;
	margin:0;
	padding:10px 8px;
	border-radius:6px;
	text-align:center;
	font-size:13px;
	font-weight:600;
	color:var(--ysc-slate);
	cursor:pointer;
	transition:.15s;
	user-select:none;
}
.ysa-tab:hover{ color:var(--ysc-ink); }
#ysa-tab-login:checked ~ .ysa-auth-card .ysa-tabs .ysa-tab[for="ysa-tab-login"],
#ysa-tab-register:checked ~ .ysa-auth-card .ysa-tabs .ysa-tab[for="ysa-tab-register"]{
	background:var(--ysc-card);
	color:var(--ysc-ink);
	box-shadow:0 2px 8px -3px rgba(24,36,48,.28);
}
/* Keyboard focus has to be visible on the label, since the real radio is hidden. */
.ysa-tab-input:focus-visible ~ .ysa-auth-card .ysa-tabs{
	outline:2px solid var(--ysc-ink);
	outline-offset:2px;
}

/* ---------- Panels ---------- */
.ysa-panel{ display:none; }
#ysa-tab-login:checked ~ .ysa-auth-card .ysa-panel--login,
#ysa-tab-register:checked ~ .ysa-auth-card .ysa-panel--register{ display:block; }

/* ---------- Fields ---------- */
.ysa-auth .form-row{
	display:block;
	margin:0 0 16px;
	padding:0;
}
.ysa-auth label{
	display:block;
	font-size:12.5px;
	font-weight:600;
	color:var(--ysc-ink);
	margin-bottom:6px;
}
.ysa-auth label .required{ color:var(--ysc-red); }
.ysa-auth input[type="text"],
.ysa-auth input[type="email"],
.ysa-auth input[type="password"],
.ysa-auth input[type="tel"]{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-sm);
	background:var(--ysc-card);
	font-family:'Inter',sans-serif;
	font-size:14px;
	color:var(--ysc-ink);
	transition:.18s;
}
/* Right padding keeps a long value clear of the show/hide button.
   The site's Additional CSS (Customizer) sets
   `.woocommerce form .form-row input.input-text{padding:11px 14px !important}`
   — (0,4,2) plus !important, printed after every stylesheet — so this is the
   one place that needs to out-specify it rather than just come later. The
   selector below is (0,5,2): the same chain plus .ysa-auth and the type
   attribute. Only the right padding is claimed; the vertical padding and the
   border stay with the global rule so fields match the rest of the site. */
.woocommerce .ysa-auth form .form-row input.input-text[type="password"]{
	padding-right:44px !important;
}

/* Password strength meter and hint, injected by WooCommerce under the field.
   Unstyled they arrived as bare red text and grey small print; here they read
   as one calm block in the same colour language as the rest of the form. */
.ysa-auth .woocommerce-password-strength{
	margin-top:9px;
	padding:8px 13px;
	border:0;
	border-radius:8px;
	font-size:12px;
	font-weight:600;
	line-height:1.4;
	text-align:left;
	background:var(--ysc-red-soft);
	color:var(--ysc-red);
}
.ysa-auth .woocommerce-password-strength.good{
	background:#F7EFDD;
	color:#8C6A33;
}
.ysa-auth .woocommerce-password-strength.strong{
	background:#E4F1EA;
	color:var(--ysc-green);
}
.ysa-auth .woocommerce-password-hint{
	display:block;
	margin-top:8px;
	font-size:11.5px;
	line-height:1.55;
	color:var(--ysc-slate);
}
.ysa-auth input[type="text"]:focus,
.ysa-auth input[type="email"]:focus,
.ysa-auth input[type="password"]:focus{
	outline:none;
	border-color:var(--ysc-ink);
	box-shadow:0 0 0 3px rgba(24,36,48,.07);
}

/* Optional-field hint, sitting on the label line rather than under it. */
.ysa-auth .ysa-optional{
	float:right;
	font-family:'IBM Plex Mono',monospace;
	font-size:10px;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-weight:600;
	color:var(--ysc-slate);
}
.ysa-auth .ysa-field-hint{
	display:block;
	margin-top:6px;
	font-size:11.5px;
	line-height:1.5;
	color:var(--ysc-slate);
}

/* WooCommerce appends its own show/hide button inside password rows. Left
   unstyled it rendered as a small grey block under the field.

   It is anchored to span.password-input — WooCommerce's own wrapper around the
   field — and not to .form-row. The row also holds the strength meter and its
   hint, which appear as soon as someone types: the row grows from 85px to
   189px, and a button pinned to the bottom of the row rode down with it and
   ended up below the field. The wrapper only ever hugs the input, so centring
   inside it holds no matter what is added underneath. */
.ysa-auth .password-input{
	position:relative;
	display:block;
}
.ysa-auth .show-password-input{
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	width:22px;
	height:22px;
	margin:0;
	padding:0;
	border:0;
	background:var(--ysc-slate);
	cursor:pointer;
	opacity:.55;
	transition:opacity .15s;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center/20px no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center/20px no-repeat;
}
.ysa-auth .show-password-input:hover{ opacity:1; }
.ysa-auth .show-password-input.display-password{
	background:var(--ysc-red);
	opacity:1;
}

/* ---------- Remember / lost password row ---------- */
.ysa-auth-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	margin:0 0 20px;
}
.ysa-auth .ysa-remember{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	font-size:13px;
	font-weight:400;
	color:var(--ysc-slate);
	cursor:pointer;
}
.ysa-auth .ysa-remember input{
	width:16px; height:16px; margin:0;
	accent-color:var(--ysc-red);
	cursor:pointer;
}
.ysa-auth-lost{
	font-size:12.5px;
	font-weight:600;
	color:var(--ysc-red);
	text-decoration:none;
}
.ysa-auth-lost:hover{ text-decoration:underline; }

/* ---------- Buttons ----------
   ReHub paints every WooCommerce button green from an inline <style> in the
   head: `.woocommerce button.button{background:none #3d8361 !important}`.
   That is (0,2,1) and carries !important, and it is printed after this file,
   so an equally specific rule here loses the tie. The `.woocommerce` ancestor
   below takes it to (0,3,1), which wins outright — no !important arms race. */
.ysa-auth-submit{ margin:0 0 18px; }
.woocommerce .ysa-auth button.ysa-btn,
.woocommerce-page .ysa-auth button.ysa-btn,
.ysa-auth button.ysa-btn{
	display:block;
	width:100%;
	padding:13px 20px;
	border:none;
	border-radius:var(--ysc-r-sm);
	background:var(--ysc-red) !important;
	color:#fff !important;
	font-family:'Inter',sans-serif;
	font-size:14px;
	font-weight:600;
	line-height:1.2;
	text-transform:none;
	letter-spacing:0;
	cursor:pointer;
	transition:.18s;
	box-shadow:none !important;
}
.woocommerce .ysa-auth button.ysa-btn:hover,
.woocommerce-page .ysa-auth button.ysa-btn:hover,
.ysa-auth button.ysa-btn:hover{
	background:var(--ysc-red-dark) !important;
	transform:translateY(-1px);
}

/* ---------- Notes and switch links ---------- */
.ysa-auth-note,
.ysa-auth-terms{
	font-size:12.5px;
	line-height:1.6;
	color:var(--ysc-slate);
	margin:0 0 16px;
}
.ysa-auth-terms{ margin:0; text-align:center; }
.ysa-auth-terms a{ color:var(--ysc-red); font-weight:600; text-decoration:none; }
.ysa-auth-terms a:hover{ text-decoration:underline; }

.ysa-auth-switch{
	margin:20px 0 0;
	padding-top:18px;
	border-top:1px solid var(--ysc-line);
	text-align:center;
	font-size:13px;
	color:var(--ysc-slate);
}
.ysa-auth-switch label{
	display:inline;
	margin:0 0 0 4px;
	font-size:13px;
	font-weight:600;
	color:var(--ysc-red);
	cursor:pointer;
}
.ysa-auth-switch label:hover{ text-decoration:underline; }

.ysa-auth-aside{
	margin:20px 0 0;
	text-align:center;
	font-size:12.5px;
	color:var(--ysc-slate);
}
.ysa-auth-aside a{ color:var(--ysc-ink); font-weight:600; text-decoration:underline; }
.ysa-auth-aside a:hover{ color:var(--ysc-red); }

/* ---------- WooCommerce notices above the card ---------- */
/* Errors are printed by the theme before this template runs, so they are
   centred to the same measure instead of spanning the page. */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper{
	max-width:460px;
	margin:40px auto -20px;
}
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-info{
	border-radius:14px;
	font-size:13.5px;
	line-height:1.6;
}

/* ---------- Lost / reset password ----------
   Same door, later in the flow. WooCommerce prints these forms straight into
   the account page with no wrapper of ours, so they are matched on their own
   core classes and given the same card. */
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword{
	--ysc-ink:#182430;
	--ysc-card:#FFFFFF;
	--ysc-red:#C33F31;
	--ysc-red-dark:#8f2e23;
	--ysc-slate:#69707E;
	--ysc-line:rgba(24,36,48,0.10);

	max-width:460px;
	margin:40px auto 60px;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:20px;
	padding:34px;
	font-family:'Inter',sans-serif;
	color:var(--ysc-ink);
	box-shadow:0 18px 40px -22px rgba(24,36,48,0.25);
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword > p:first-child{
	font-size:13.5px;
	line-height:1.65;
	color:var(--ysc-slate);
	margin:0 0 20px;
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword label{
	display:block;
	font-size:12.5px;
	font-weight:600;
	margin-bottom:6px;
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input[type="text"],
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input[type="email"],
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input[type="password"]{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--ysc-line);
	border-radius:9px;
	font-family:'Inter',sans-serif;
	font-size:14px;
	color:var(--ysc-ink);
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input:focus{
	outline:none;
	border-color:var(--ysc-ink);
	box-shadow:0 0 0 3px rgba(24,36,48,.07);
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .form-row{
	display:block;
	width:auto;
	float:none;
	margin:0 0 16px;
	padding:0;
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button{
	display:block;
	width:100%;
	padding:13px 20px;
	border:none !important;
	border-radius:9px !important;
	background:var(--ysc-red) !important;
	color:#fff !important;
	font-size:14px;
	font-weight:600;
	text-transform:none;
	letter-spacing:0;
	box-shadow:none !important;
	cursor:pointer;
}
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button:hover{
	background:var(--ysc-red-dark) !important;
}

/* ---------- Responsive ---------- */
@media(max-width:520px){
	.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword{ padding:26px 22px; margin:24px auto 44px; }
	.ysa-auth{ margin:24px auto 44px; }
	.ysa-auth-card{ padding:26px 22px 24px; }
	.ysa-auth-title{ font-size:22px; }
	.ysa-auth-row{ gap:10px; }
}