/* ==========================================================================
   PlumbFounded — Customer Login / Create Account
   File: app/design/frontend/Learning/AiTheme/Magento_Customer/web/css/customer-auth.css

   This file styles ONLY the custom "pf-auth-*" hooks that were added
   alongside the default Magento classes in:
     - Magento_Customer/templates/form/login.phtml
     - Magento_Customer/templates/form/register.phtml
   No default Magento class was removed or renamed — pf-auth-* classes/ids
   sit next to them, so core theme / JS behaviour (validation, knockout
   show-password, region updater, etc.) is untouched.

   A few sub-fields (First/Last name, Company, Telephone, Fax, Date of
   Birth, Gender) are rendered by separate Magento widget templates that
   were not part of the two files above, so they could not receive
   pf-auth-* classes. Those are styled through their own default Magento
   classes (.field-name-firstname, .company, .telephone, etc.) instead,
   scoped inside .pf-auth-fieldset so they still inherit the same look.
   ========================================================================== */

:root {
    --pf-bg: #eef2f9;
    --pf-card-bg: #ffffff;
    --pf-card-radius: 18px;
    --pf-card-shadow: 0 10px 30px rgba(30, 41, 59, 0.07);
    --pf-border: #e3e8f0;
    --pf-input-bg: #eef1f6;
    --pf-input-border: #dde3ec;
    --pf-input-radius: 10px;
    --pf-label: #1e293b;
    --pf-text: #64748b;
    --pf-placeholder: #94a3b8;
    --pf-accent: #2f6bff;
    --pf-accent-hover: #1d54e0;
    --pf-error: #e0453f;
    --pf-gap: 22px;
}

/* --------------------------------------------------------------------
   Page background behind the cards (default Magento page wrapper —
   left as-is structurally, only background/spacing set here)
   -------------------------------------------------------------------- */
.customer-account-login .column.main,
.customer-account-create .column.main {
    padding-top: 32px;
    padding-bottom: 48px;
        padding-right: 16px;
    padding-left: 8px;
}

.login-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

/* --------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------- */
.pf-auth-card {
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-card-radius);
    box-shadow: var(--pf-card-shadow);
    padding: 20px;
    max-width: 640px;
    margin: 0px 22px;
    box-sizing: border-box;
}

.login-container .block-new-customer {
    background: var(--pf-card-bg);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-card-radius);
    box-shadow: var(--pf-card-shadow);
    padding: 40px 44px;
    max-width: 480px;
    margin-left: 30px;
    box-sizing: border-box;
}

.pf-auth-content {
    background: transparent;
    padding: 0;
}

/* --------------------------------------------------------------------
   Section title row  (icon + heading, like "Contact & shipping")
   -------------------------------------------------------------------- */
.pf-auth-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    margin: 0 0 28px;
    padding: 0;
}

.pf-auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pf-label);
}

.pf-auth-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    margin-left: 0px !important;
    padding: 0px !important;
    width: auto;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--pf-label);
}

.pf-auth-fieldset:not(:first-of-type) .pf-auth-legend {
    margin-top: 12px;
}

.pf-auth-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: var(--pf-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center / contain;
}

/* --------------------------------------------------------------------
   Fieldset / field spacing
   -------------------------------------------------------------------- */
.pf-auth-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.pf-auth-note {
    background: transparent;
    color: var(--pf-text);
    font-size: 14px;
    padding: 0 0 20px;
    border: none;
}

.pf-auth-field,
.pf-auth-fieldset > .field {
    margin-bottom: var(--pf-gap);
}

.pf-auth-fieldset > .field:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------- */
.pf-auth-label,
.pf-auth-fieldset .field .label {
    display: block;
    
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--pf-label) !important;
}

/* .pf-auth-field.required .pf-auth-label span::after,
.pf-auth-fieldset > .field._required > .label span::after,
.pf-auth-fieldset > .field.required > .label span::after {
    content: " *";
    color: var(--pf-accent);
} */

/* --------------------------------------------------------------------
   Inputs / selects
   -------------------------------------------------------------------- */
.pf-auth-control {
    width: 100%;
}

.pf-auth-input,
.pf-auth-fieldset .field select,
.pf-auth-fieldset .field input.input-text {
    width: 100%;
    height: auto;
    background: var(--pf-input-bg);
    border: 1px solid var(--pf-input-border);
    border-radius: var(--pf-input-radius);
    padding: 14px 16px;
    font-size: 16px;
    color: var(--pf-label);
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
}

.pf-auth-input::placeholder {
    color: var(--pf-placeholder);
}

.pf-auth-input:focus,
.pf-auth-fieldset .field select:focus,
.pf-auth-fieldset .field input.input-text:focus {
    background: #ffffff;
    border-color: var(--pf-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}

.pf-auth-field-country select,
.pf-auth-field-region select.pf-auth-input {
    background-image: linear-gradient(45deg, transparent 50%, var(--pf-text) 50%),
        linear-gradient(135deg, var(--pf-text) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
}

/* --------------------------------------------------------------------
   UNIVERSAL FALLBACK
   Some fields on this store (e.g. "Become a Seller/Vendor",
   "Allow remote shopping assistance") are injected by OTHER modules
   through Magento's extension points (fieldset_create_info_additional,
   form_additional_info) and are not part of register.phtml/login.phtml,
   so they can't carry pf-auth-* classes. This block styles any .field
   found anywhere inside the card using Magento's own default classes,
   so third-party fields automatically match the same look.
   -------------------------------------------------------------------- */
.pf-auth-card .fieldset > .field,
.pf-auth-card .fieldset .field.choice {
    margin-bottom: var(--pf-gap);
}

.pf-auth-card .field > label.label,
.pf-auth-card .field > .label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pf-label);
}

.pf-auth-card .field input.input-text,
.pf-auth-card .field select,
.pf-auth-card .field textarea {
    width: 100%;
    background: white;
    border: 1px solid var(--pf-input-border);
    border-radius: var(--pf-input-radius);
    padding: 6px 8px;
    font-size: 12px;
    color: var(--pf-label);
    box-sizing: border-box;
}

.pf-auth-card .field input.input-text:focus,
.pf-auth-card .field select:focus,
.pf-auth-card .field textarea:focus {
    background: #ffffff;
    border-color: var(--pf-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}

.pf-auth-card .field input[type="checkbox"],
.pf-auth-card .field input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pf-accent);
    margin: 0 6px 0 0;
    vertical-align: middle;
}

.pf-auth-card .field.choice {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pf-auth-card .field.choice .label {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--pf-text);
}

/* Radio groups like "Yes / No" rendered inline by third-party modules */
.pf-auth-card .field div[class*="control"] > span,
.pf-auth-card .field label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
    font-size: 15px;
    color: var(--pf-label);
    font-weight: 500;
}

/* --------------------------------------------------------------------
   Row grouping — fields that received pf-auth hooks directly
   Address Information: Country full width, Region / City / ZIP in a row
   -------------------------------------------------------------------- */
.pf-auth-fieldset-address {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.pf-auth-fieldset-address > .field {
    flex: 1 1 100%;
}

.pf-auth-fieldset-address .pf-auth-field-region,
.pf-auth-fieldset-address .pf-auth-field-city,
.pf-auth-fieldset-address .pf-auth-field-zip {
    flex: 1 1 150px;
}

/* --------------------------------------------------------------------
   Row grouping — widget-rendered fields (Name, Company, Telephone, Fax,
   DOB, Taxvat, Gender) that live in separate Magento templates and only
   carry Magento's own classes. Scoped inside .pf-auth-fieldset-personal
   so they inherit the same visual language without editing those files.
   -------------------------------------------------------------------- */
.pf-auth-fieldset-personal {

    flex-wrap: wrap;
    column-gap: 20px;
}

.pf-auth-fieldset-personal > .field {
    flex: 1 1 100%;
    margin-bottom: var(--pf-gap);
}

.pf-auth-fieldset-personal > .field[class*="firstname"],
.pf-auth-fieldset-personal > .field[class*="lastname"] {
    flex: 1 1 220px;
}

.pf-auth-fieldset-personal .field .label,
.pf-auth-fieldset-personal .field input.input-text,
.pf-auth-fieldset-personal .field select {
    /* inherit the same look as pf-auth-input / pf-auth-label */
}

.pf-auth-fieldset-personal .field > label.label,
.pf-auth-fieldset-address .field > label.label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pf-label);
}

.pf-auth-fieldset-personal .field input.input-text,
.pf-auth-fieldset-personal .field select,
.pf-auth-fieldset-address .field input.input-text,
.pf-auth-fieldset-address .field select {
    width: 100%;
    background: white;
    border: 1px solid var(--pf-input-border);
    border-radius: var(--pf-input-radius);
    padding: 6px 8px;
    font-size: 16px;
    color: var(--pf-label);
    box-sizing: border-box;
}

.pf-auth-fieldset-personal .field input.input-text:focus,
.pf-auth-fieldset-personal .field select:focus,
.pf-auth-fieldset-address .field input.input-text:focus,
.pf-auth-fieldset-address .field select:focus {
    background: #ffffff;
    border-color: var(--pf-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}

/* --------------------------------------------------------------------
   Password strength meter
   -------------------------------------------------------------------- */
.pf-auth-strength-meter {
    margin-top: 10px;
    border-radius: 8px;
    
    border: 1px solid var(--pf-input-border);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--pf-text);
}

.password-strength-meter-0 #password-strength-meter-label,
.password-strength-meter-1 #password-strength-meter-label {
    color: var(--pf-error);
}

.password-strength-meter-2 #password-strength-meter-label {
    color: #d98c00;
}

.password-strength-meter-3 #password-strength-meter-label,
.password-strength-meter-4 #password-strength-meter-label {
    color: #1f9d55;
}

/* --------------------------------------------------------------------
   Checkbox / show-password choice rows
   -------------------------------------------------------------------- */
.pf-auth-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--pf-gap);
    flex-wrap: wrap;
}

.pf-auth-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--pf-accent);
    margin: 0;
}

.pf-auth-choice .label {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--pf-text);
}

/* --------------------------------------------------------------------
   Actions toolbar
   -------------------------------------------------------------------- */
.pf-auth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding: 0;
    margin-left: -70px !important;
}

.pf-auth-actions-primary {
    margin: 0;
    order: 1;
}

.pf-auth-actions-secondary {
    margin: 0;
    order: 2;
}

.pf-auth-btn-primary {
    background: var(--pf-accent);
    border: none;
    border-radius: var(--pf-input-radius);
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(47, 107, 255, 0.25);
    transition: background .15s ease, transform .1s ease;
}

.pf-auth-btn-primary:hover {
    background: var(--pf-accent-hover);
    transform: translateY(-1px);
}

.pf-auth-link {
    color: var(--pf-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pf-auth-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------
   Validation error text (Magento's own .mage-error class, unchanged)
   -------------------------------------------------------------------- */
.pf-auth-fieldset .field .control .mage-error {
    color: var(--pf-error);
    font-size: 13px;
    margin-top: 6px;
}

.pf-auth-input.mage-error,
.pf-auth-fieldset .field select.mage-error {
    border-color: var(--pf-error) !important;
    background: #fdf2f2;
}

/* --------------------------------------------------------------------
   Required-fields note
   -------------------------------------------------------------------- */
/* .pf-auth-fieldset[data-hasrequired]::after {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--pf-text);
    margin-bottom: 16px;
} */

.abs-login-block-title, .login-container .block .block-title{
    border-bottom: unset !important;
}

button#send2 {
    background: #102a3b;
    font-size: 14px;
    font-weight: 500;
    border: unset;
    padding: 6px 30px;
    box-shadow: unset !important;
}
strong#block-new-customer-heading {
    font-size: 22px;
}
a.action.create.primary {
    border-radius: 10px !important;
    background: #102a3b;
    color: white !important;
    padding: 14px 22px;
    font-size: 14px;
    border: unset;
}
p {
    font-size: 18px;
}

/* ==========================================================================
   RESPONSIVE
   Nothing above this line changes for desktop (≥1025px). Everything below
   only adjusts spacing/layout for tablet and mobile widths, using the same
   values already in the file so the visual language stays identical.
   ========================================================================== */

/* --------------------------------------------------------------------
   Tablet / small laptop (≤1024px)
   Cards no longer need to sit side by side with a fixed left offset —
   let them stack cleanly and drop the fixed max-widths so they use the
   available column width instead of overflowing it.
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .login-container {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-auth-card,
    .login-container .block-new-customer {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .pf-auth-actions {
        margin-left: 0 !important;
    }
}

/* --------------------------------------------------------------------
   Tablet / large phone (≤767px)
   (existing breakpoint, kept + extended so the negative margins from
   the desktop layout don't carry over and squeeze the card content)
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
    .pf-auth-card,
    .login-container .block-new-customer {
        padding: 28px 22px;
        border-radius: 14px;
        max-width: 100%;
        margin: 0;
    }

    .pf-auth-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        margin-left: 0 !important;
    }

    .pf-auth-btn-primary {
        width: 100%;
        text-align: center;
    }

    .pf-auth-link {
        text-align: center;
        display: block;
    }

    .pf-auth-fieldset-personal,
    .pf-auth-fieldset-address {
        flex-direction: column;
    }

    .login-container .block .block-title {
        margin-left: 0 !important;
    }

    .pf-auth-title,
    .pf-auth-legend {
        font-size: 19px !important;
    }
}

/* --------------------------------------------------------------------
   Small phones (≤600px)
   Reduce input padding slightly and let the field label + its required
   asterisks stay on one line instead of wrapping.
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
    .pf-auth-card,
    .login-container .block-new-customer {
        padding: 22px 16px;
        margin: 0 4px;
    }

    .pf-auth-input,
    .pf-auth-fieldset .field select,
    .pf-auth-fieldset .field input.input-text,
    .pf-auth-fieldset-personal .field input.input-text,
    .pf-auth-fieldset-personal .field select,
    .pf-auth-fieldset-address .field input.input-text,
    .pf-auth-fieldset-address .field select {
        padding: 12px 14px;
        font-size: 15px;
    }

    .pf-auth-label,
    .pf-auth-fieldset .field .label,
    .pf-auth-fieldset-personal .field > label.label,
    .pf-auth-fieldset-address .field > label.label {
        white-space: normal;
        word-break: keep-all;
    }

    .pf-auth-card .field div[class*="control"] > span,
    .pf-auth-card .field label:has(input[type="radio"]) {
        margin-right: 12px;
        font-size: 14px;
    }

    p {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------
   Very small phones (≤400px)
   Last-mile tightening so buttons, icons and gaps don't crowd out the
   inputs on the narrowest supported devices.
   -------------------------------------------------------------------- */
@media (max-width: 400px) {
    :root {
        --pf-gap: 16px;
    }

    .pf-auth-card,
    .login-container .block-new-customer {
        padding: 18px 12px;
        border-radius: 12px;
    }

    .pf-auth-title {
        font-size: 18px;
    }

    .pf-auth-legend {
        font-size: 17px !important;
    }

    .pf-auth-btn-primary,
    a.action.create.primary {
        padding: 12px 20px;
        font-size: 14px;
    }

    button#send2 {
        width: 100%;
        padding: 10px 20px;
    }

    .pf-auth-icon {
        width: 16px;
        height: 16px;
    }
}


div#password-strength-meter-container{
    padding: unset;
    border: unset;
}

.password-strength-meter{
    background-color: unset;
}