/* CANAMEK theme: My Account, logged out (account, 1.5).
 * The one-field sign-in / create-account card (woocommerce/myaccount/form-login.php)
 * and WooCommerce's own lost-password, "email sent" and reset-password pages in the
 * same glass card. Loaded only on those pages (inc/canamek-account.php, body.ck-acct-page),
 * after ck-core.css (tokens, .field/.input/.btn/.check, glass) and WooCommerce's CSS,
 * whose login/register boxes, floats and notice colours it neutralises here.
 * Phone first: one column, 20px gutter, 44px targets from 320px up. */

/* ---- page frame: survey grid behind the card (contours come with the template) ---- */
.ck-acct-page .ck-main{position:relative;isolation:isolate}
.ck-acct-page .ck-main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
                   linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center top;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 72%,transparent)}
/* style.css frames the logged-out account content at --wrap; the card is narrower */
/* (0,4,1): beats style.css .woocommerce-account:not(.logged-in) .ck-main > .woocommerce */
body.ck-acct-page:not(.logged-in) .ck-main>.woocommerce{max-width:calc(480px + 2 * var(--gut));padding-top:48px;padding-bottom:96px}
@media (max-width:900px){ body.ck-acct-page:not(.logged-in) .ck-main>.woocommerce{padding-top:24px;padding-bottom:64px} }
/* the contour ground spans the whole <main> (.ck-acct is not positioned on purpose) */
.ck-acct__ground{z-index:-1}

/* ---- card ---------------------------------------------------------------------------- */
/* [data-ck-acct]: header.php's account icon is <a class="ib ck-acct"> too (verifier: it sat 12px left) */
.ck-acct[data-ck-acct]{display:flex;flex-direction:column;align-items:stretch}
.ck-acct :where(h1,h2,p){margin:0}
.ck-acct [hidden]{display:none!important}
.ck-acct__card{position:relative;padding:40px 40px 36px;border-radius:var(--r-l)}
.ck-acct__panel{display:flex;flex-direction:column;gap:14px}
.ck-acct__title{font:600 32px/1.1 var(--f-d);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ck-acct__title:focus{outline:none}
.ck-acct__title:focus-visible{outline:2px solid var(--red-deep);outline-offset:4px;border-radius:2px}
.ck-acct__lede{font:500 15px/1.55 var(--f-b);color:var(--ink-soft)}
/* rate limited ("both": log in or create, the email unchecked): the create-account panel must not say that no
   account uses the email, and sits apart from the log-in panel above it */
.ck-acct[data-step="both"] .ck-acct__lede--new,.ck-acct:not([data-step="both"]) .ck-acct__lede--both{display:none}
.ck-acct[data-step="both"] [data-ck-acct-panel="register"]{margin-top:32px;padding-top:28px;border-top:1px solid var(--hair-2)}
/* ...where its title is the page's second-level heading (h2): a size smaller than the h1 above */
.ck-acct[data-step="both"] [data-ck-acct-panel="register"] .ck-acct__title{font-size:24px}
.ck-acct__idtext{color:var(--ink);overflow-wrap:anywhere}
.ck-acct a:not(.btn){color:var(--red-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ck-acct a:not(.btn):hover{color:var(--ink)}
.ck-acct__form{display:flex;flex-direction:column;gap:18px;margin:10px 0 0}
.ck-acct .field__err .ic{flex:none}
.ck-acct .req{color:var(--red-deep)}
.ck-acct .btn--split .ic{transition:transform var(--t-hover) var(--ease)}
.ck-acct .btn--split:hover .ic{transform:translateX(3px)}

/* WooCommerce's own boxes and floats (woocommerce.css / woocommerce-layout.css) */
.woocommerce .ck-acct form.login,.woocommerce .ck-acct form.register{margin:10px 0 0;padding:0;border:0;border-radius:0;text-align:left}
.woocommerce .ck-acct .woocommerce-form-login .woocommerce-form-login__submit{float:none;margin:0}
.woocommerce .ck-acct .woocommerce-form-login .woocommerce-form-login__rememberme{display:flex}

/* the email / username shown on step 2, with "Change" */
.ck-acct__who{display:flex;align-items:center;gap:4px;min-height:48px;padding:0 2px 0 14px;border-radius:var(--r-s);
  background:var(--bg-warm);box-shadow:0 0 0 1px var(--hair-2)}
.ck-acct__who .ck-acct__whoin{flex:1 1 auto;min-width:0;min-height:46px;padding:0;background:transparent;box-shadow:none;
  font-weight:600;text-overflow:ellipsis;cursor:default}
.ck-acct__who .ck-acct__whoin:hover{box-shadow:none}
.ck-acct__who .ck-acct__whoin:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px;box-shadow:none}
.ck-acct__change{flex:none;min-height:44px;padding:0 12px;font-size:14px}

/* password + WooCommerce's show/hide button (woocommerce.js wraps the input in .password-input) */
.woocommerce .ck-acct .password-input,.woocommerce-page .ck-acct .password-input{display:block;position:relative}
.woocommerce .ck-acct .password-input .input{padding-right:52px}
.woocommerce .ck-acct form .show-password-input{top:2px;right:2px;transform:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-s);color:var(--ink)}
.woocommerce .ck-acct form .show-password-input:hover{background:rgba(40,40,40,.06)}
.woocommerce .ck-acct form .show-password-input:focus-visible{outline:2px solid var(--red-deep);outline-offset:0}
/* strength meter + hint (register) */
.ck-acct .woocommerce-password-strength{margin-top:8px;padding:8px 12px;border-radius:var(--r-s);text-align:left;font:600 13px/1.35 var(--f-b);color:var(--ink)}
.ck-acct .woocommerce-password-strength.short{background:#fbe3e3}
.ck-acct .woocommerce-password-strength.bad{background:#fdebdf}
.ck-acct .woocommerce-password-strength.good{background:#fff3cf}
.ck-acct .woocommerce-password-strength.strong{background:#e5f3e1}
.ck-acct .woocommerce-password-hint{display:block;margin-top:6px;font:500 13px/1.5 var(--f-b);color:var(--ink-soft)}

.ck-acct__row{display:flex;align-items:center;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;margin-top:-6px}
.ck-acct__forgot{min-height:44px;padding:0;font-size:14px}
.ck-acct__forgot.is-loading{color:var(--ink-soft)!important;pointer-events:none}

/* WooCommerce's privacy text (woocommerce_register_form, priority 20) */
.ck-acct .woocommerce-privacy-policy-text p{font:500 13px/1.55 var(--f-b);color:var(--ink-soft)}

/* reCAPTCHA slots printed by the WooCommerce hooks keep their own margins in a gap layout */
.ck-acct .ck-recaptcha--gap{margin:0}

/* inline messages */
.ck-acct__alert,.ck-acct__note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-m);font:600 14px/1.45 var(--f-b)}
.ck-acct__alert .ic,.ck-acct__note .ic{flex:none;margin-top:2px}
.ck-acct__alert{background:#fdecec;color:var(--red-deep);box-shadow:inset 0 0 0 1px rgba(197,21,27,.28)}  /* 5.5:1 */
.ck-acct__note{background:#fff;color:var(--ink);box-shadow:inset 3px 0 0 var(--red-deep),inset 0 0 0 1px var(--hair-2)}
.ck-acct__note .ic{color:var(--red-deep)}

/* step change (JS): a short rise; none with reduced motion */
.ck-acct__panel.is-enter{animation:ck-acct-in var(--t-enter) var(--ease) both}
@keyframes ck-acct-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- WooCommerce notices above the card (and on the lost-password pages) ----------- */
.ck-acct-page .woocommerce-notices-wrapper:empty{display:none}
.ck-acct-page .woocommerce-error,.ck-acct-page .woocommerce-message,.ck-acct-page .woocommerce-info{
  margin:0 0 16px;padding:14px 16px 14px 46px;border:0;border-radius:var(--r-m);background:#fff;
  box-shadow:inset 3px 0 0 var(--ok),0 0 0 1px var(--hair-2),var(--e1);font:600 14px/1.5 var(--f-b);color:var(--ink);overflow-wrap:anywhere}
.ck-acct-page .woocommerce-error{background:#fffafa;box-shadow:inset 3px 0 0 var(--red-deep),0 0 0 1px rgba(197,21,27,.28),var(--e1)}
.ck-acct-page .woocommerce-info{box-shadow:inset 3px 0 0 var(--ink-muted),0 0 0 1px var(--hair-2),var(--e1)}
.ck-acct-page .woocommerce-error::before,.ck-acct-page .woocommerce-message::before,.ck-acct-page .woocommerce-info::before{top:15px;left:17px;font-size:16px}
.ck-acct-page .woocommerce-error::before{color:var(--red-deep)!important}
.ck-acct-page .woocommerce-message::before{color:var(--ok)!important}
.ck-acct-page .woocommerce-error li+li{margin-top:6px}
.ck-acct-page :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) a{color:var(--red-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ck-acct-page :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) a.button{float:none;margin:0 0 0 8px;padding:0;background:none;color:var(--red-deep)}

/* ---- WooCommerce's lost-password / reset-password forms in the same card ------------ */
.ck-acct-page form.lost_reset_password{display:flex;flex-direction:column;gap:16px;margin:0;padding:40px 40px 36px;border-radius:var(--r-l);
  background:rgba(251,251,250,.84);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(40,40,40,.09),inset 0 1px 0 #fff,var(--e3)}
.ck-acct-page form.lost_reset_password>p:first-child{font:500 15px/1.55 var(--f-b);color:var(--ink-soft);margin:0}
.ck-acct-page form.lost_reset_password .clear{display:none}
.ck-acct-page.woocommerce-page form.lost_reset_password .form-row{float:none;width:auto;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ck-acct-page form.lost_reset_password label{font:600 14px/1.3 var(--f-b);color:var(--ink)}
.ck-acct-page form.lost_reset_password label .required{color:var(--red-deep);text-decoration:none}
.ck-acct-page.woocommerce-page form.lost_reset_password .form-row input.input-text{display:block;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:var(--r-s);background:#fff;
  box-shadow:0 0 0 1px var(--field-line),inset 0 1px 2px rgba(40,40,40,.06);font:500 16px/1.4 var(--f-b);color:var(--ink)}
.ck-acct-page.woocommerce-page form.lost_reset_password .form-row input.input-text:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px;box-shadow:0 0 0 1px var(--ink)}
.ck-acct-page.woocommerce-page form.lost_reset_password .password-input{display:block;position:relative}
.ck-acct-page.woocommerce-page form.lost_reset_password .password-input input.input-text{padding-right:52px}
.ck-acct-page.woocommerce-page form.lost_reset_password .show-password-input{top:2px;right:2px;transform:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-s)}
.ck-acct-page.woocommerce-page form.lost_reset_password button[type="submit"]{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin:4px 0 0;padding:0 26px;
  border:0;border-radius:var(--r-s);background:var(--red-deep);color:#fff;font:700 16px/1 var(--f-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--e-red);cursor:pointer}
.ck-acct-page.woocommerce-page form.lost_reset_password button[type="submit"]:hover{background:var(--red-hover);color:#fff}
.ck-acct-page form.lost_reset_password .woocommerce-password-strength{margin-top:8px;padding:8px 12px;border-radius:var(--r-s);text-align:left;font:600 13px/1.35 var(--f-b)}
/* headings the theme adds to those pages (inc/canamek-account.php) */
.ck-acct__head{display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.ck-acct__head :where(h1,p){margin:0}
/* "email sent" page: WooCommerce's notice, then one paragraph, shown as the card */
body.ck-acct-page .ck-main>.woocommerce>p:not(.ck-acct__back){margin:0;padding:28px 32px;border-radius:var(--r-l);font:500 15px/1.6 var(--f-b);color:var(--ink-soft);
  background:rgba(251,251,250,.84);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(40,40,40,.09),inset 0 1px 0 #fff,var(--e3)}
/* WooCommerce focuses its first notice on load (tabindex -1) so it is read out; it is not a control: no ring */
.ck-acct-page :is(.woocommerce-error,.woocommerce-message,.woocommerce-info)[tabindex="-1"]:focus{outline:none}
/* order attribution's hidden inputs (woocommerce_register_form): no empty row in the form's gap */
.ck-acct wc-order-attribution-inputs{display:contents}
.ck-acct__back{margin:16px 0 0}
.ck-acct__back .btn{min-height:44px;padding:0;gap:6px;font-size:14px}

/* ---- phones -------------------------------------------------------------------------- */
@media (max-width:640px){
  .ck-acct__card,.ck-acct-page form.lost_reset_password{padding:28px 20px 24px}
  body.ck-acct-page .ck-main>.woocommerce>p:not(.ck-acct__back){padding:22px 20px}
  .ck-acct__title{font-size:26px}
}
@media (max-width:360px){
  .ck-acct__card,.ck-acct-page form.lost_reset_password{padding:24px 16px 20px}
  .ck-acct__change{padding:0 8px}
}

@media (prefers-reduced-motion:reduce){
  .ck-acct__panel.is-enter{animation:none}
  .ck-acct .btn--split:hover .ic{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .ck-acct-page form.lost_reset_password{background:rgba(251,251,250,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
}