/**
 * Porto V2 — Account Pages Clean Rewrite
 * Namespace: .acc-*
 * Scoped under: body.customer-account-login, body.customer-account-create
 * Load order: after porto.css
 *
 * PORTO-V2-ACCOUNT-clean-rewrite
 */

/* ============================================================
   SHARED — defeat Magento column width constraints
   ============================================================ */
body.customer-account-login .page-main,
body.customer-account-login .columns,
body.customer-account-login .column.main,
body.customer-account-create .page-main,
body.customer-account-create .columns,
body.customer-account-create .column.main,
body.customer-account-forgotpassword .page-main,
body.customer-account-forgotpassword .columns,
body.customer-account-forgotpassword .column.main,
body.sales-guest-form .page-main,
body.sales-guest-form .columns,
body.sales-guest-form .column.main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* R10b — Restore bottom padding on forgot-pw column.main so the form's
   margin-bottom:60px doesn't collapse into the footer (CSS margin collapse).
   The padding:0 shorthand above zeroes it out; this restores just the bottom. */
body.customer-account-forgotpassword .column.main {
    padding-bottom: 60px !important;
}

/* ============================================================
   SHARED — page header / breadcrumbs
   ============================================================ */
body.customer-account-login .acc-page-header,
body.customer-account-create .acc-page-header {
    background: #f5f5f5;
    padding: 16px 0 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
}

body.customer-account-login .acc-page-header .breadcrumbs,
body.customer-account-create .acc-page-header .breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

body.customer-account-login .acc-page-header .breadcrumbs a,
body.customer-account-create .acc-page-header .breadcrumbs a {
    color: #888;
    text-decoration: none;
}

body.customer-account-login .acc-page-header .breadcrumbs a:hover,
body.customer-account-create .acc-page-header .breadcrumbs a:hover {
    color: #0088cc;
}

/* ============================================================
   SHARED — page title H1
   ============================================================ */
body.customer-account-login .acc-page-title,
body.customer-account-create .acc-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    text-align: center;
    margin: 0;
    padding: 20px 0 16px;
    background: #f5f5f5;
    text-transform: none;
    letter-spacing: normal;
    font-family: Poppins, sans-serif;
    line-height: 1.2;
}

/* ============================================================
   SHARED — hide duplicate header blocks if removal via XML
   is not sufficient (belt-and-suspenders)
   ============================================================ */
body.customer-account-login .pt-header,
body.customer-account-create .pt-header {
    display: none !important;
}

/* ============================================================
   LOGIN PAGE — .login-container
   R122: Porto Demo 1 reference is single-column — porto.css hides .block-new-customer
   with display:none !important. R112 un-hid it (wrong measurement). Reverting to
   single-column: let porto.css rule stand, no override needed.
   acc-new-customer from our login.phtml template is also hidden (no duplicate CTA).
   ============================================================ */

/* R158: Hide native Magento block-new-customer.
   layout XML has display="true" on customer.form.register which re-shows this block
   after our acc-layout, producing a visible duplicate "New Customers" section that
   doesn't exist in the Porto Demo 1 reference. Our login.phtml acc-new-customer
   already provides the "Create an Account" CTA — the native block is redundant. */
body.customer-account-login .block.block-new-customer {
    display: none !important;
}

body.customer-account-login .login-container {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

/* R129: Show acc-new-customer so "Create an Account" button renders below Sign In.
   R122 incorrectly hid this — Porto Demo 1 IS single-column but shows both buttons stacked.
   Heading + subtitle are hidden via rules below, leaving only the acc-btn-create link. */
body.customer-account-login .acc-new-customer {
    display: block;
}

/* ============================================================
   LOGIN PAGE — .acc-layout (single-column centered form)
   R122: full-width centered, no float — matches Porto Demo 1 single-column design.
   ============================================================ */
body.customer-account-login .acc-layout {
    float: none;
    width: 100%;
    max-width: 600px;
    margin: 40px auto 60px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    box-sizing: border-box;
}

/* ============================================================
   LOGIN PAGE — .acc-form (email + password + actions)
   ============================================================ */
body.customer-account-login .acc-form {
    background: #fff;
}

body.customer-account-login .acc-form .acc-form-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #222529;
    margin: 0 0 20px;
    font-family: Poppins, sans-serif;
    letter-spacing: -0.22px;
    line-height: 1.2;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 12px;
}

body.customer-account-login .acc-form .acc-form-subtitle {
    font-size: 13px;
    color: #777;
    margin-bottom: 24px;
    font-family: Poppins, sans-serif;
}

/* Form field labels */
body.customer-account-login .acc-form .field .label,
body.customer-account-login .acc-form .field label {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #777;
    display: block;
    margin-bottom: 6px;
}

/* Form inputs — Fix 1: square border-radius matching Porto Demo 1 original.
 * porto.css has border-radius:24px 0 0 24px !important on multiple rules;
 * defeat them with higher-specificity !important here. */
body.customer-account-login .acc-form .field .control input,
body.customer-account-login .acc-form .field .control input.input-text,
body.customer-account-login .acc-form input[type="email"],
body.customer-account-login .acc-form input[type="password"],
body.customer-account-login .acc-form input[type="text"] {
    font-family: Poppins, sans-serif;
    font-size: 13.6px;
    height: 50px;
    padding: 8px 16px;
    /* R62: match reference — Porto Demo 1 uses rgba(0,0,0,0.09) subtle border (porto.css default).
       Previous #e7e7e7 was too visible (rgb 231 vs reference's near-transparent border). */
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

/* R92: placeholder color #777 to match Porto Demo 1 reference (input text stays #333) */
body.customer-account-login .acc-form .field .control input::placeholder,
body.customer-account-login .acc-form input[type="email"]::placeholder,
body.customer-account-login .acc-form input[type="password"]::placeholder,
body.customer-account-login .acc-form input[type="text"]::placeholder {
    color: #777;
    opacity: 1;
}

body.customer-account-login .acc-form .field .control input:focus,
body.customer-account-login .acc-form input[type="email"]:focus,
body.customer-account-login .acc-form input[type="password"]:focus {
    border-color: #0088cc !important;
    box-shadow: none;
    outline: none;
    background: #fff !important;
}

/* Forgot password link — Fix 2 (Round 2): left-aligned dark text matching Porto Demo 1 original.
 * Round 1 used color:#222529 without !important; round 2 adds !important + higher-specificity
 * selectors to defeat any conflicting rule (global `a { color: var(--pt-primary) }` or
 * porto.css `.form-login a` cascade that still rendered cyan after round 1 deploy). */
html body.customer-account-login .form-login a.acc-forgot-link,
html body.customer-account-login .acc-form a.acc-forgot-link,
html body.customer-account-login .login-container a.acc-forgot-link,
body.customer-account-login .acc-form .acc-forgot-link {
    display: block !important;
    text-align: left !important;
    font-size: 12px !important;
    color: #222529 !important;
    text-decoration: underline !important;
    margin: -8px 0 20px !important;
    font-family: Poppins, sans-serif !important;
}

html body.customer-account-login .form-login a.acc-forgot-link:hover,
html body.customer-account-login .acc-form a.acc-forgot-link:hover,
body.customer-account-login .acc-form .acc-forgot-link:hover {
    color: #0088cc !important;
    text-decoration: underline !important;
}

/* ============================================================
   LOGIN PAGE — .acc-new-customer heading + subtitle
   Dead rules: .acc-new-customer is hidden wholesale (display:none !important above).
   Kept as documentation only.
   ============================================================ */
body.customer-account-login .acc-new-customer .acc-form-section-title,
body.customer-account-login .acc-new-customer .acc-form-subtitle {
    display: none;
}

/* SIGN IN button — Porto Demo 1 reference: dark #222529, full-width within left column. */
body.customer-account-login .login-container .actions-toolbar button.action.login,
body.customer-account-login .actions-toolbar .primary button.action.login {
    background: #222529 !important;
    width: 100%;
    display: block;
}
body.customer-account-login .login-container .actions-toolbar button.action.login:hover,
body.customer-account-login .actions-toolbar .primary button.action.login:hover {
    background: #0088cc !important;
}

/* Legacy acc-btn-signin class (phtml override) — keep for belt-and-suspenders */
body.customer-account-login .acc-form .acc-btn-signin {
    display: block;
    width: 100%;
    padding: 16px 32px;
    background: #222529 !important;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
    margin-top: 8px;
    box-sizing: border-box;
}

body.customer-account-login .acc-form .acc-btn-signin:hover {
    background: #0088cc !important;
}

/* ============================================================
   LOGIN PAGE — .acc-new-customer (New Customers right column)
   Porto Demo 1: right column alongside Registered Customers
   ============================================================ */
body.customer-account-login .acc-new-customer {
    margin-top: 0;
}

body.customer-account-login .acc-new-customer .acc-btn-create {
    display: block;
    width: 100%;
    padding: 15px 32px;
    background: #222529;
    /* porto.css has body .page-main a:not(.action):not(.btn)... specificity (0,8,2)
       which beats (0,3,1) — !important required to keep button text white */
    color: #fff !important;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
    box-sizing: border-box;
    line-height: 1.5;
}

/* Inner <span> inherits link color from porto.css — must reset explicitly */
body.customer-account-login .acc-new-customer .acc-btn-create span {
    color: inherit;
}

body.customer-account-login .acc-new-customer .acc-btn-create:hover {
    background: #0088cc;
    color: #fff !important;
}

/* ============================================================
   CREATE ACCOUNT PAGE — outer wrapper
   ============================================================ */
body.customer-account-create .acc-create-wrap {
    max-width: 900px;
    margin: 48px auto 64px;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ============================================================
   CREATE ACCOUNT PAGE — .acc-create-form single-column stacked
   R157: Porto Demo 1 reference uses single-column layout (Personal Information
   above Sign-in Information), not 2-column side-by-side. Verified via live
   reference HTML: fieldsets are stacked in normal document flow (1-column layout).
   ============================================================ */
body.customer-account-create .acc-create-form .acc-cols {
    display: block;
}

body.customer-account-create .acc-create-form .acc-col-personal,
body.customer-account-create .acc-create-form .acc-col-signin {
    margin-bottom: 32px;
}

/* Fieldset headings */
body.customer-account-create .acc-create-form .acc-col-title {
    font-size: 22px; /* Porto Demo 1 reference: 22px/600 (was 18px/700) */
    font-weight: 600;
    color: #222529;
    margin: 0 0 6px;
    font-family: Poppins, sans-serif;
    letter-spacing: -0.18px;
    line-height: 1.2;
}

body.customer-account-create .acc-create-form .acc-col-title::after {
    content: none;
    display: none;
}

/* Labels */
body.customer-account-create .acc-create-form .field .label,
body.customer-account-create .acc-create-form .field label {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #777;
    display: block;
    margin-bottom: 6px;
}

/* Inputs */
body.customer-account-create .acc-create-form .field .control input,
body.customer-account-create .acc-create-form input[type="email"],
body.customer-account-create .acc-create-form input[type="password"],
body.customer-account-create .acc-create-form input[type="text"] {
    font-family: Poppins, sans-serif;
    font-size: 13.6px;
    height: 50px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 0;
    background: #fff;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

/* R106: register placeholder color — reference measured rgb(119,119,119) = #777.
   R95 wrongly used #ddd (misread the newsletter input placeholder instead). */
body.customer-account-create input::placeholder,
body.customer-account-create textarea::placeholder {
    color: #777 !important;
    opacity: 1;
}

body.customer-account-create .acc-create-form .field .control input:focus,
body.customer-account-create .acc-create-form input[type="email"]:focus,
body.customer-account-create .acc-create-form input[type="password"]:focus,
body.customer-account-create .acc-create-form input[type="text"]:focus {
    border-color: #0088cc;
    box-shadow: none;
    outline: none;
    background: #fff;
}

/* Newsletter checkbox */
body.customer-account-create .acc-create-form .acc-newsletter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    color: #555;
}

body.customer-account-create .acc-create-form .acc-newsletter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

/* R199: Hide Magento_LoginAsCustomerAssistance block — Porto Demo 1 reference does not
   show this section. Uses :has() to target by unique child ID without modifying phtml. */
body.customer-account-create .field.choice:has(#assistance_allowed_checkbox),
body.customer-account-edit .field.choice:has(#assistance_allowed_checkbox) {
    display: none !important;
}

/* Password strength meter */
body.customer-account-create .acc-create-form #password-strength-meter-container {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
    font-family: Poppins, sans-serif;
}

/* CREATE AN ACCOUNT — actions-toolbar at full form width.
 * R157: Single-column layout — button spans full width matching Porto Demo 1 reference.
 * margin-left: 0 overrides Magento core styles-m.css which sets margin-left: auto. */
body.customer-account-create .acc-create-form .actions-toolbar {
    max-width: 100%;
    margin-left: 0 !important;
}

/* CREATE AN ACCOUNT button — Porto Demo 1 reference: dark #222529, flat 0px.
   R96 incorrectly changed to blue+pill; R97 reverts. */
body.customer-account-create .acc-create-form .acc-btn-create {
    display: block;
    width: 100%;
    padding: 16px 40px;
    background: #222529;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
    box-sizing: border-box;
    margin-top: 8px;
}

body.customer-account-create .acc-create-form .acc-btn-create:hover {
    background: #0088cc;
    color: #fff;
}

/* Back link */
body.customer-account-create .acc-create-form .acc-back-link {
    display: inline-block;
    margin-top: 12px;
    margin-left: 20px;
    font-size: 13px;
    color: #0088cc;
    text-decoration: none;
    font-family: Poppins, sans-serif;
    vertical-align: middle;
}

body.customer-account-create .acc-create-form .acc-back-link:hover {
    text-decoration: underline;
}

/* ============================================================
   SHARED — field spacing
   ============================================================ */
body.customer-account-login .acc-form .field,
body.customer-account-create .acc-create-form .field {
    margin-bottom: 18px;
}

/* Required asterisk */
body.customer-account-login .acc-form .field.required .label::after,
body.customer-account-create .acc-create-form .field.required .label::after {
    content: ' *';
    color: #e02b27;
    font-size: 12px;
}

/* Fix 3: Required Fields note position.
 * Explicit .acc-required-note placed at bottom of form.
 * Suppress any JS-injected .field-required-text inside the fieldset. */
body.customer-account-login .acc-form .fieldset .field-required-text,
body.customer-account-login .acc-form .fieldset > .note {
    display: none !important;
}

/* Fix B (Round 2): Required Fields note — enforce visibility with !important.
 * Round 1 added the .acc-required-note <p> to login.phtml but left CSS without
 * !important. If any rule from porto.css suppresses `p` elements or `.note`
 * descendants inside the form, this override forces the element visible. */
html body.customer-account-login .form-login .acc-required-note,
html body.customer-account-login .acc-form .acc-required-note,
body.customer-account-login .acc-form .acc-required-note {
    display: block !important;
    visibility: visible !important;
    font-family: Poppins, sans-serif !important;
    font-size: 13px !important;
    color: #777 !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   CREATE ACCOUNT PAGE — required note (Fix D)
   ============================================================ */
html body.customer-account-create .form-create-account .acc-required-note,
body.customer-account-create .acc-create-wrap .acc-required-note {
    display: block !important;
    visibility: visible !important;
    font-family: Poppins, sans-serif !important;
    font-size: 13px !important;
    color: #777 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   VAULT PAGE — style account-section__title-label to match
   Porto grey page-title-wrapper pattern.
   The vault module hides the .page-title-wrapper via styles-m.css
   (.account.vault-cards-listaction .page-title-wrapper { display:none })
   and renders its own heading via .account-section__title-label.
   We apply the same visual treatment (grey bg, centred, 60px pad)
   so the vault page matches My Orders, My Wish List, etc.
   ============================================================ */
/* DOM: .account-section > div(no class) > h1.account-section__title-label
   The anonymous wrapper contains all vault content — we style the H1 directly.
   H1 is block-level and spans full column width, giving the same grey-hero
   appearance as .page-title-wrapper on My Orders, My Wish List, etc. */
body.vault-cards-listaction h1.account-section__title-label {
    display: block;
    background-color: rgb(244, 244, 244);
    padding: 60px 0;
    margin: 0 0 30px;
    text-align: center;
    width: 100%;
    font-family: Poppins, sans-serif;
    font-size: 26px;
    font-weight: 300;
    color: #313131;
    letter-spacing: normal;
}

/* ============================================================
   SUPPRESS MAGENTO-NATIVE FIELDS — Porto Demo 1 hides these
   ============================================================ */

/* "Show Password" toggle — absent in Porto Demo 1 reference */
body.customer-account-create .field.choice[data-bind*="showPassword"],
body.customer-account-edit .field.choice[data-bind*="showPassword"],
body.customer-account-forgotpassword .field.choice[data-bind*="showPassword"],
body.customer-account-login .field.choice[data-bind*="showPassword"] {
    display: none !important;
}

/* "Allow remote shopping assistance" — absent in Porto Demo 1 reference */
body.customer-account-create .field.choice:has(input[name="assistance_allowed_checkbox"]),
body.customer-account-edit .field.choice:has(input[name="assistance_allowed_checkbox"]) {
    display: none !important;
}

/* ============================================================
   FORGOT PASSWORD PAGE — grey hero title + centered form
   ============================================================ */
body.customer-account-forgotpassword .page-title-wrapper {
    background: #f4f4f4;
    padding: 60px 0;
    text-align: center;
    margin: 0 0 30px;
}

body.customer-account-forgotpassword .page-title-wrapper .page-title {
    font-family: Poppins, sans-serif;
    font-size: 26px;
    font-weight: 300;
    color: #313131;
    margin: 0;
}

/* R39: narrowed from 650px to 590px to match reference (reference: max-width:50% ≈ 590px at 1200px viewport) */
body.customer-account-forgotpassword .form.password.forget {
    max-width: 590px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

/* porto.css sets float:left on auth labels; reference shows stacked (label above input).
   Override float so label stacks vertically above the input field.
   R10a: also override text-align:right from Magento styles-l.css media query
   (.fieldset > .field:not(.choice) > .label { text-align: right } at 768px+). */
body.customer-account-forgotpassword .form.password.forget .field label {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #313131;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: block !important;
}

/* styles-l.css responsive layout sets .control { float:left; width:75% } at 768px+ — override to full width */
body.customer-account-forgotpassword .form.password.forget .field .control {
    width: 100% !important;
    float: none !important;
}

body.customer-account-forgotpassword .form.password.forget .field .control input {
    width: 100%;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 14px;
    padding: 0 12px;
    font-family: Poppins, sans-serif;
    color: #555;
}

/* R92: placeholder color #777 to match Porto Demo 1 reference */
body.customer-account-forgotpassword .form.password.forget .field .control input::placeholder {
    color: #777;
    opacity: 1;
}

/* CAPTCHA container — override the 230px image-width constraint so label doesn't wrap.
   porto.css "Fix I" sets .captcha .label { width: 280px !important; min-width: 280px !important }
   which causes the label to float/truncate. Override with !important to win the cascade. */
body.customer-account-forgotpassword .captcha,
body.customer-account-forgotpassword .captcha .field.captcha {
    width: 100% !important;
    max-width: none !important;
}

/* R18: make captcha image + reload button sit on the same row (flex).
   Without flex, .captcha-img (display:block) pushes the reload button to the next line. */
body.customer-account-forgotpassword .captcha .captcha-image {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
}

/* Prevent "Please type the letters and numbers below" label from wrapping to 2 lines.
   Porto.css forces width:280px on .captcha .label which is narrower than the text. */
body.customer-account-forgotpassword .captcha .label,
body.customer-account-forgotpassword .captcha .field .label {
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    float: none !important;
    display: block !important;
    text-align: left !important;
}

body.customer-account-forgotpassword .captcha .captcha-image img {
    display: block;
    height: 50px;
}

body.customer-account-forgotpassword .captcha .label,
body.customer-account-forgotpassword .captcha .field.captcha > .label {
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    display: block !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 13px;
}

body.customer-account-forgotpassword .captcha input {
    width: 100%;
    height: 44px;
    border: 1px solid #ddd;
    padding: 0 12px;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: #555;
}

body.customer-account-forgotpassword .form.password.forget .actions-toolbar {
    margin-top: 20px;
}

body.customer-account-forgotpassword .form.password.forget .actions-toolbar .primary {
    float: none !important;
}

/* R97: Revert R96 — Porto Demo 1 reference forgot-pw submit is dark #222529, flat 0px.
   R96 incorrectly changed to blue+pill based on erroneous reference measurement. */
body.customer-account-forgotpassword .form.password.forget .action.submit.primary {
    background: #222529 !important;
    color: #fff;
    border: none;
    border-radius: 0 !important;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 30px;
    cursor: pointer;
    width: 100%;
}

body.customer-account-forgotpassword .form.password.forget .action.submit.primary:hover {
    background: #333 !important;
}

/* R61: Captcha reload button — reference: 0px border-radius, 38px height (was 3px/32px).
   Porto.css gives .captcha-image .action.reload a slight radius; override here. */
body.customer-account-forgotpassword .captcha .captcha-image .action.reload {
    border-radius: 0 !important;
    height: 38px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    padding: 0 10px !important;
}

/* ============================================================
   GUEST ORDER FORM (Orders and Returns) — match Porto Demo 1
   Reference: NO grey hero band; full-width form; blue CONTINUE button
   ============================================================ */

/* Reference has no grey hero — use transparent title wrapper with compact padding */
body.sales-guest-form .page-title-wrapper {
    background: transparent;
    padding: 10px 0 10px;
    text-align: left;
    margin: 0;
}

/* R73: Reference Porto Demo 1 guest form page title has font-weight:700 (bold). R71 was wrong. */
body.sales-guest-form .page-title-wrapper .page-title {
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 700 !important;
    color: #0088cc !important;
    margin: 0 0 15px;
}

/* R15 — Guest form page-main must use Porto standard container (1200px).
   Unlike login/create/forgotpw which have .acc-layout for their own max-width,
   the guest form uses standard Magento layout so page-main needs the container. */
body.sales-guest-form .page-main {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Reference uses full content-column width.
   porto.css "Fix J" sets .sales-guest-form .form { max-width: 780px !important } which
   constrains our form. Override with !important on both the form element and class. */
body.sales-guest-form .form-orders-search,
body.sales-guest-form .form.form-orders-search {
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 60px !important;
    padding: 0 !important;
}

body.sales-guest-form .form-orders-search .fieldset {
    max-width: none;
}

body.sales-guest-form .form-orders-search .field label {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #777;
    text-transform: none;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    display: block;
}

/* R70: Reference Porto Demo 1 guest form uses flat (0px) inputs — porto.css global rule.
   R68 incorrectly added pill-left; reverted to match flat reference style.
   R159: split input/select — select uses natural height (dropdown ~38px), input 50px. */
body.sales-guest-form .form-orders-search .field .control input {
    width: 100%;
    height: 50px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 14px;
    padding: 0 20px;
    font-family: Poppins, sans-serif;
    color: #555;
}

body.sales-guest-form .form-orders-search .field .control select {
    width: 100%;
    height: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 14px;
    padding: 8px 20px;
    font-family: Poppins, sans-serif;
    color: #555;
}

/* R75: reference CONTINUE button is left-aligned (not centered).
   Magento base adds margin-left:auto which centers inline-block buttons; override. */
body.sales-guest-form .form-orders-search .actions-toolbar {
    margin-top: 20px;
    margin-left: 0 !important;
    text-align: left !important;
}

/* Blue CONTINUE button matching Porto Demo 1 reference rgb(0,136,204).
   R61: reference height 48px. R70: flat border-radius (0px) — R68 pill-right reverted.
   R87: Added !important to background/color/border — porto.css generic button rules have
   !important that overrode these non-!important declarations, rendering the button gray.
   R96: wrongly added pill-right. R97: reverted to flat — Porto Demo 1 reference is flat 0px.
   R131: wrongly removed height:48px (set to height:auto). R136: restored to 48px — audit agent
   measured reference at 48px vs clone at 40.58px (auto+11px pad+14px font ≈ 41px). */
body.sales-guest-form .form-orders-search .action.submit.primary {
    background: #0088cc !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-block;
    font-family: Poppins, sans-serif;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 11px 28px !important;
    height: 48px !important;
    cursor: pointer;
}

body.sales-guest-form .form-orders-search .action.submit.primary:hover {
    background: #0077bb !important;
}

/* R43 P14 legend: porto.css fieldset legend span { font-weight: 700 } beats element default.
   Same cascade issue as R42 advsearch fix — requires explicit !important override. */
body.sales-guest-form .form-orders-search legend.legend,
body.sales-guest-form fieldset.fieldset > legend.legend {
  font-size: 16px !important;
  font-weight: 400 !important;
}
body.sales-guest-form .form-orders-search legend.legend > span,
body.sales-guest-form fieldset > .legend span,
body.sales-guest-form fieldset.fieldset > legend span {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* R50: porto.css `html body span:not([class]) { color: #777 !important }` overrides
   inherited white from button.action.submit.primary. Same cascade fix as contact R42. */
body.sales-guest-form .form-orders-search .action.submit.primary span {
  color: #fff !important;
}

/* ============================================================
   AUTHENTICATED ACCOUNT PAGES — nav current-item background
   ============================================================ */

/* R202: porto.css iter4 rule (loaded late in the file) overrides the earlier
   #f7f7f7 background with `background-color: transparent !important` on the
   current nav item. Porto Demo 1 reference shows a #f4f4f4 grey background
   on the active nav item. This rule (account-clean.css loaded after porto.css)
   restores that grey highlight, making the current page visually clear. */
body.pt-account-page .block-collapsible-nav .nav.item.current > a,
body.account .block-collapsible-nav .nav.item.current > a,
body.pt-account-page .block-collapsible-nav .nav.item.current > strong,
body.account .block-collapsible-nav .nav.item.current > strong {
    background-color: #f4f4f4 !important;
}