@media (min-width: 769px), print {
    .abs-margin-for-forms-desktop, .fieldset .legend, .column:not(.sidebar-main) form .actions-toolbar, .column:not(.sidebar-additional) form .actions-toolbar, .login-container .fieldset::after {
        margin-left: 0;
    }
    .fieldset > .field:not(.choice) > .label {
        width: auto;
    }
    .fieldset .row > .field:not(.choice) > .label {
        padding: 6px 15px 0 0;
        text-align: right;
        width: auto;
        box-sizing: border-box;
        float: left;
    }
    .fieldset .row > .field > .label {
        margin: 0;
    }
    .fieldset .row > .field {
        box-sizing: border-box;
    }
    .fieldset > .field.choice::before, .fieldset > .field.no-label::before {
        display: none;
    }
    .porto-login-grid {
        gap: 100px
    }
}

@media (min-width: 1024px) {
    .page.page.messages {
        top: 80px;
    }
}

@media only screen and (max-width: 768px) {
    .account .page-main, .cms-privacy-policy .page-main {
        padding-top: 0px !important;
    }
    .page-main {
        margin-top: 0px;
    }
}

.porto-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.porto-login-left {
    background: transparent;
}

.porto-form {
    background: transparent;
}

.porto-form .input-text {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #cfcfcf;
    box-sizing: border-box;
}

.porto-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.porto-form label .required {
    color: #d00;
    margin-left: 6px;
}

.action.login.default-btn,
.porto-register-btn {
    background: #364a45;
    color: #fff;
    border: none;
    padding: 14px 30px;
    font-weight: 700;
    letter-spacing: 1px;
}

.action.login.default-btn {
    width: 100%;
}

.porto-or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0;
}

.porto-or hr {
    flex: 1;
    border: none;
    height: 1px;
    background: #e0e0e0;
}

.porto-or .or-text {
    color: #999;
    font-size: 14px;
}

.porto-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd;
    padding: 10px 18px;
    background: #fff;
}

.porto-right-heading {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 0 12px 0;
}

.porto-right p {
    color: #333;
    margin-bottom: 16px;
}

.porto-right ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 20px 0;
}

.porto-right ul li {
    margin-bottom: 10px;
    padding-left: 22px;
    position: relative;
    color: #333;
}

.porto-right ul li:before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #2f6b5f;
    font-weight: 700;
}

/* small screens: stack */
@media (max-width: 880px) {
    .porto-login-grid {
        grid-template-columns: 1fr;
    }

    .porto-login-right {
        order: -1;
    }
}

/* Social button area (actions-toolbar) adjustments */
.social-wrapper {
    text-align: center;
}

.actions-toolbar.social-btn {
    display: inline-block;
    margin: 0 auto;
}

.actions-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.actions-toolbar .btn-google {
    background: #ffffff !important;
    color: #222 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-transform: none !important;
}

.actions-toolbar .btn-google .fa-google {
    color: #4285f4;
}

.actions-toolbar .btn.btn-block {
    display: inline-flex;
    width: auto;
}

.mage-error,
.validation-advice,
.message-error,
.messages .message.error {
    color: #b71c1c !important;
    font-size: 13px;
    margin-top: 6px;
}

input.input-text[aria-invalid="true"],
input.input-text.error,
input.input-text.is-invalid {
    border-color: #b71c1c !important;
    box-shadow: none !important;
}

.input-text[aria-invalid="true"] {
    padding-right: 36px;
}

.fieldset .message.error,
.login-form-container .messages .message.error {
    color: #b71c1c;
    margin-top: 8px;
    font-weight: 600;
}

.porto-register-page .fieldset.create .legend {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 5px;
}

.porto-register-left {
    padding-right: 8px;
}

.signup-form-container .input-text {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
}

.action.submit.default-btn {
    background: #364a45;
    color: #fff;
    padding: 12px 26px;
    border-radius: 4px;
    font-weight: 700;
}

.action.submit.default-btn.w-100 {
    width: 240px;
}

.page-wrapper {
    /* background-image: url("../images/signup_background.png"); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.name-row .field {
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

.name-row .field:last-child {
    margin-left: 4%;
}

.dob-gender-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.dob-gender-row .dob-field {
    flex: 2;
}

.dob-gender-row .gender-field {
    flex: 1;
}

.field.phone .control input,
.field.telephone .control input {
    width: 100%;
}

.terms-row {
    margin: 1rem 0;
}

.terms-row .term {
    margin-bottom: .75rem;
}

.terms-row .term label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

.terms-row .term label span {
    font-size: 16px;
    text-align: justify;
}

.porto-register-left .dob-gender-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.porto-register-left .dob-field .control input[type="text"],
.porto-register-left .dob-field .control select,
.porto-register-left .dob-field .control .input-text {
    display: inline-block;
    min-width: 50px;
    margin-right: 8px;
}

.porto-register-left .dob-field .field {
    margin-bottom: 6px;
    width: 100%;
}

.gender-field{
    margin-bottom:0.5 rem !important;
    margin-top: 0.5 rem !important;
    padding: 6px 15px 0 0;
}

.gender-field .label {
    font-weight: 600;
    margin-bottom: 4px;
}

.gender-field .field.choice .label {
    font-weight: normal;
}

.porto-register-left .gender-field .choice,
.porto-register-left .gender-field .field {
    width: 100%;
}

.porto-register-page .btn-google,
.porto-register-page .actions-toolbar .btn-google,
.porto-register-page .btn-social.btn-google {
    display: none !important;
}

input[type="checkbox"] {
  margin: 2px 5px 0 0;
  position: relative;
}

.columns {
    padding-top: 15px;
}

.account .columns .column.main {
    max-width: none !important;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
}

.sidebar-container {
    width: 100%;
    overflow: hidden;
    background-color: #F5F8F8;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
}

.menu-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* Smooth scrolling and touch behavior */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.menu-scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.menu-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    margin-bottom: 0;
    transition: all 0.3s ease;
    background: transparent;
    border-radius: 8px;
    scroll-snap-align: start;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: transparent;
    transition: all 0.3s ease;
    border: none;
}

.menu-link:hover {
    background: rgba(52, 144, 220, 0.05);
    transform: translateX(4px);
}

.menu-text {
    font-weight: 500;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selected/active nav item: bold text only -- no color change, no
   background highlight, no underline indicator (those were removed on
   request; everything else about the item stays identical to a normal,
   unselected item). */
.menu-item.active .menu-text {
    font-weight: 700;
}

.menu-icon {
    min-width: 20px;
    margin-right: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .menu-scroll-container {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .menu-scroll-container::after {
        display: none;
    }            
}

@media (max-width: 767px) {
    .sidebar-container {
        padding: 8px 10px;
    }

    .menu-scroll-container {
        padding: 0;
        margin: 0;
    }

    .menu-items-wrapper {
        flex-direction: row;
        gap: 4px;
        padding: 0;
        min-width: min-content;
    }

    .menu-item {
        min-width: auto;
        margin: 0;
    }

    .menu-link {
        flex-direction: row;
        text-align: center;
        padding: 6px 10px;
        height: auto;
        justify-content: center;
    }

    .menu-link:hover {
        transform: translateY(-2px);
    }

    .menu-text {
        white-space: nowrap;
        text-align: center;
        line-height: 1.2;
        font-size: 14px;
    }

    .menu-icon {
        margin: 0 4px 0 0;
        font-size: 1rem;
    }
}

.fieldset {
    margin: 0 0 20px;
}

.fieldset > .legend {
    font-weight: bold;
    font-size: inherit;
    margin: 0 0 15px;
}

.fieldset .row > .field.required > .label::after {
    content: '*';
    color: #e02b27;
    font-size: 1.2rem;
    margin: 0 0 0 5px;
}

.fieldset > .field > .label, .fieldset .row > .field > .label {
    font-weight: 600px;
    margin-bottom: 5px;
}

input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type*="date"], input[type="email"] {
    border-radius: 10px;
    height: 45px;
    font-size: 16px;
    border: 1px solid #263238;
    padding: 0 15px;
}

select {
    height: 45px;
    border-radius: 10px;
    border: 1px solid #263238;
}

.actions-toolbar.move-end {
    justify-content: end;
    gap: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all 0.3s;
}
.switch::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
}

.checkbox:checked + .switch::after {
    left: 20px;
}
.checkbox:checked + .switch {
    background-color: #34c759;
}
.checkbox.ca {
    display: none;
}

.addresses-header .title {
    font-size: 20px;
}

.addresses-list-container {
    display: grid;
}

.addresses-list-content {
    width: 85%;
    justify-self: center;
}

.address-list {
    border-top: 1px solid #878b9f;
    padding: 20px 0;
}

.address-list a.action.edit, .address-list a.action.delete {
    color: #5c7682 !important;
}

.address-list a.action.edit:hover {
    color: #178652 !important;
    svg {
        fill: #178652;
    }
}

.address-list a.action.delete:hover {
    color: #d32d2d !important;
    svg {
        fill: #d32d2d;
    }
}

.default-address-tag {
    padding: 10px 15px;
    background: #d0dcfd;
    width: fit-content;
    border-radius: 10px;
    height: fit-content;
    font-size: 14px;
    font-weight: 700;
}

.account-information-container, .account-information-shipping-address-container, .form.form-edit-account, .addresses-list-container, .form.form-newsletter, input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type*="date"], input[type="email"] {
    font-size: 16px;
}

@media (max-width: 767px) {
    .account-information-container, .account-information-shipping-address-container, .form.form-edit-account, .addresses-list-container, .form.form-newsletter, input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type*="date"], input[type="email"] {
        font-size: 14px !important;
    }
}

.addresses-header .title, .account-information-container .title {
    font-weight: 700;
}

.addresses-header .description {
    font-size: 14px;
    color: #878b9f;
}

.addresses-header .default-btn {
    font-size: 16px !important;
}

@media (max-width: 767px) {
    .default-address-tag {
        font-size: 12px !important;   
    }
    .addresses-header .default-btn {
        font-size: 14px !important;
    }
}

.account-information-container .description {
    color: #878b9f;
    border-bottom: 1px solid #878b9f;
}

/* Profile photo + full name row, above the Email Address/Phone/etc. list.
   Avatar is a 60px circle (radius 30px per request); gap between avatar
   and name is 20px; name itself is black and bold. The row already has
   bottom padding (pb-4, in the .phtml markup) before the Email Address
   row starts, so a border-bottom here draws the divider line right in
   that gap, between the avatar/name and Email Address. */
.account-name-row {
    /* Full name row now also holds the "Edit Profile" button, pushed to
       the far right (MainAxisAlignment.spaceBetween equivalent):
       .account-name-left group on the left, button on the right. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* Same divider style as the one above "Address"/"Default"
       (.account-information-shipping-address-container's border-top),
       so both dividers on this page look identical. */
    border-bottom: 1px solid #878b9f;
}

.account-name-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-avatar {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    object-fit: cover;
    flex-shrink: 0;
}

.account-fullname {
    color: #000;
    font-weight: 700;
    /* Base was 14px (fs-14 utility, now removed from the markup below
       since it's !important and would override this); +4 per request. */
    font-size: 18px;
}

/* Logout stacked below Edit Profile, same button size (both reuse the
   theme's .default-btn: same padding/border-radius/font-size), just
   colored red instead of the default teal-green. */
.account-name-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.account-name-actions a.action {
    /* align-items: stretch above makes both buttons the same (widest)
       width, so without this the shorter "Logout" text sits left-aligned
       inside its now-wider button instead of centered. */
    text-align: center;
}

.action.logout.default-btn {
    background: #d32d2d !important;
    border: 1px solid #d32d2d !important;
    color: #fff !important;
}

.action.logout.default-btn:hover {
    background: #b91c1c !important;
    border: 1px solid #b91c1c !important;
    color: #fff !important;
}

.account-information-container {
    /* Left-aligned so it starts at the same left edge as the Address
       block below it, instead of being centered (which pushed it in
       from the left while Address stayed flush left). Width is 100%
       (was 85%) so the divider under the name is the same length as
       the divider above Address/Default, instead of stopping short. */
    width: 100%;
    justify-self: start;
}

.account-information-shipping-address-container {
    border-top: 1px solid #878b9f;
}

.account-information-shipping-address-container .title {
    font-weight: normal;
    color: #585a66;
}

/* "Default" indicator badge next to the "Address" title -- reuses the
   same pill shape/weight as the existing .default-address-tag badge on
   the address book page, but in the requested #005646 color instead of
   that badge's blue. */
.default-indicator {
    padding: 2px 10px;
    background: rgba(0, 86, 70, 0.12);
    color: #005646;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
    height: fit-content;
}

.account-information-shipping-address-container .action a{
    font-size: 14px;
    color: #878b9f !important;
    text-decoration: underline !important;
}

.account-information-shipping-address-container .address-box {
    padding: 10px 25px;
    border: 1px solid #878b9f;
    border-radius: 10px;
}

.form.form-edit-account .legend.title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.form.form-edit-account .description {
    font-size: 14px;
    color: #878b9f;
}

.form.form-edit-account .avatar-container {
    display: grid;
}

.form.form-edit-account .avatar-container .field-name-avatar {
    width: 85%;
    justify-self: center;
    border-top: 1px solid #878b9f;
    padding: 15px 0px;
}

.avatar-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-wrapper .profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

.avatar-wrapper .avatar-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    z-index: 5;
}

.avatar-wrapper .avatar-spinner {
    font-size: 30px;
    margin-bottom: 6px;
    color: #ffffff;
}

.avatar-wrapper .avatar-loading-text {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.avatar-message-box {
    max-width: 500px;
}

.avatar-message-box .message {
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 500;
}

.avatar-message-box .message.message-success {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.avatar-message-box .message.message-error {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.field-name-avatar img {
    border-radius: 50%;
}

.avatar-file-upload {
    border: 1px solid #263238;
    border-radius: 10px;
    padding: 8px 15px;
    transition: all 250ms;
    cursor: pointer;
    display: inline-block;
}

.avatar-file-upload:hover {
    color: white;
    background: #263238;
}

.avatar-file-upload.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.field.gender input[type="radio"] {
    width: 2rem;
    height: 2rem;
    border: 2px solid #071952;
}

form .field.choice input, fieldset .field.choice input {
  margin-right: 0.5rem;
}

input[type="radio"] {
  margin: 0px 0px 0 0;
    margin-right: 0px;
}

.field.gender input[type="radio"]:checked {
    background: #071952;

}

.field.choice input[type="checkbox"] {
    margin-top: 0px;
    top: 0px;
}

.fieldset.password .field.password .control {
    display: block;
}

.password-strength-meter {
    margin-top: 0.5rem;
    border-radius: 0.5rem;
}

.password-weak .password-strength-meter::before, .password-medium .password-strength-meter::before, .password-strong .password-strength-meter::before, .password-very-strong .password-strength-meter::before {
    border-radius: 0.5rem;
}

/* My Orders */

.my-orders-container .title {
    font-size: 20px;
    font-weight: 700;
}

.my-orders-container .description {
    font-size: 14px;
    color: #878887;
}

.order-status-filter-wrapper {
    border-top: 1px solid #878887;
    padding-top: 15px;
    margin-bottom: 10px;
}

.order-status-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.my-orders-container .search-container {
    margin: 15px 0;
    position: relative;
}

.my-orders-container .search-container .search-input {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 20px !important;
    padding: 0 12px 0 42px !important;
    height: 48px !important;
    width: 100% !important;
    color: #333333 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.my-orders-container .search-container .search-input:focus {
    border-color: #adb5bd !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(173, 181, 189, 0.25) !important;
}

.my-orders-container .search-container .search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-orders-container .search-container .search-icon-svg {
    width: 20px;
    height: 20px;
    color: #888888;
}

.my-orders-container .status-btn {
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease;
    opacity: 0.85;
}

.my-orders-container .status-btn.active {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 2px 3px rgb(123, 123, 123);
}

.my-orders-container .status-btn:hover {
    opacity: 1;
}


.orders-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0px 7px -5px black;
    transition: all 200ms ease;
}

.orders-container .order-link:hover .order {
    scale: 1.005;
    box-shadow: 0 0px 8px -3px #3a504e;
}

.order-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.order-info .order-id {
    color: #585a66;
}

.status-item-count-wrapper {
    display: flex;
    text-align: right;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.status-item-count-wrapper .item-count {
    color: #585a66;
}

.status-item-count-wrapper .order-status {
    width: fit-content;
    padding: 5px 12px;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}


.order-products .product-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.order-products .product-list .product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.order-products .product-list .product-item .product-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border-radius: 8px;
    border: 2.5px solid #005646;
    box-sizing: border-box;
    object-fit: cover;
}

.order-products .product-list .product-item .product-details {
    flex: 1;
    padding-left: 10px;
}

.order-products .product-list .product-item .product-details .product-name {
    font-size: 16px;
}

.order-products .product-list .product-item .product-details .product-color {
    color: #585a66;
    margin-top: 4px;
    font-size: 14px;
}

.order-products .product-list .product-item .product-details .product-qty {
    color: #585a66;
    margin-top: 4px;
}

.order-products .product-list .product-item .product-subtotal {
    margin-left: 20px;
    text-align: right;
    font-weight: 700;
}


.order-summary {
    text-align: right;
    font-size: 14px;
    color: #878b9f;
}

.order-summary .original-subtotal {
    font-size: 12px;
    text-decoration: line-through;
    color: #888;
    margin-right: 5px;
}

.order-summary .discounted-subtotal {
    color: #888;
}

.order-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #c7c6c5;
    padding-top: 15px;
}

.order-footer .order-date {
    font-size: 16px;
    color: #585a66;
    line-height: inherit;
}

.order-footer .order-total {
    font-weight: 700;
}

.order-footer .order-total .grand-total {
    margin-left: 15px;
}

@media (max-width: 768px) {
    .order-footer .order-total .grand-total {
        margin-left: 0;
    }
}

/* My Order Detail */

.order-detail-container .title {
    font-size: 20px;
    font-weight: 700;
}

.order-detail-container .description {
    font-size: 14px;
    color: #878887;
}

.order-detail-container .line-divider {
    width: 80%;
    border-bottom: 1px solid #878b9f;
    margin: 20px 0 15px 0;
}

.order-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    border-top: 1px solid #c7c6c5;
    margin-top: 15px;
    padding-top: 15px;
}

.order-shipping-tracking-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.shipping-address-container, .tracking-order-container {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
    width: 100%;
}

.tracking-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tracking-order-header .title {
    margin-bottom: 0 !important;
}

.tracking-order-header .tracking-number-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #1f2933;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.tracking-order-header .tracking-number-link:hover {
    color: #005646;
}

.tracking-order-header .tracking-number-link .open-in-new-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
}

.shipping-address-container .title, .tracking-order-container .title, .order-products .title, .subtotal-order-container .title, .order-detail-container .additional-price .title {
    font-size: 18px;
    font-weight: normal;
}

.shipping-address-container .shipping-address, .tracking-order-container .tracking-order {
    padding: 16px 20px;
    border: 1px solid #878b9f;
    border-radius: 10px;
    font-size: 16px;
}

.shipping-address-details {
    line-height: 1.55;
    color: #374151;
}

.shipping-address-details .recipient-name {
    font-weight: 700;
    color: #111827;
}

/* Tracking Stepper Timeline */
.tracking-stepper {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.stepper-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 22px;
}

.stepper-item:last-child {
    padding-bottom: 0;
}

.stepper-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 16px;
    flex-shrink: 0;
}

.stepper-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.stepper-item.is-active .stepper-dot {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    background: #005646;
    border: 2.5px solid #a7f3d0;
    box-shadow: 0 0 0 2px #005646;
}

.stepper-line {
    width: 2px;
    background: #e2e8f0;
    flex-grow: 1;
    margin: 6px 0 2px;
}

.stepper-content {
    flex-grow: 1;
}

.stepper-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.stepper-status {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.stepper-item.is-active .stepper-status {
    color: #005646;
    font-weight: 700;
}

.stepper-time {
    font-size: 13px;
    color: #878b9f;
    white-space: nowrap;
}

.stepper-message {
    font-size: 14px;
    color: #4b5563;
    margin-top: 4px;
    line-height: 1.45;
    word-break: break-word;
}

.tracking-empty-stepper {
    padding: 10px 0;
    font-size: 14px;
    color: #878b9f;
}

.tracking-stepper-toggle {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
    padding-left: 32px;
}

.btn-tracking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #005646;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-tracking-toggle:hover {
    color: #003e33;
    background: rgba(0, 86, 70, 0.08);
}

.btn-tracking-toggle:focus {
    outline: none;
}

.btn-tracking-toggle .toggle-icon {
    transition: transform 0.2s ease;
}

.order-products {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .order-details-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.product-pricing {
    text-align: right;
}

.product-pricing .discount {
    font-size: 12px;
    color: #878b9f;
    margin-right: 5px;
    text-decoration: line-through;
}

.product-pricing .subtotal{
    font-weight: 700;
}

.subtotal-order-container {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #c7c6c5;
    padding: 20px 0;
}

.subtotal-order-container .content {
    font-size: 16px;
    font-weight: 700;
}

.payship-method {
    border: 1px solid #878b9f;
    border-radius: 10px;
    padding: 10px 20px;
}

.payship-method .method-box {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.order-detail-container .additional-price {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 700;
}

.grand-total-container {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #c7c6c5;
    padding-top: 15px;
    margin-top: 10px;
}

.grand-total-container .title {
    font-size: 18px;
    font-weight: 700;
    color: #c01010;
}

.grand-total-container .content {
    font-size: 16px;
    font-weight: 700;
    color: #c01010;
}

.order-date-cancel-container {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    align-items: center;
}
.order-date-cancel-container .order-date {
    font-size: 16px;
    color: #585a68;
}

/* Wishlist Page */

@media only screen and (max-width: 768px) {
    .products-grid.wishlist .product-image-container {
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .products-grid.wishlist {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.products-grid.wishlist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    column-gap: 10px;
}

.wishlist .product-box {
    box-shadow: 0 0px 5px -4px #000;
    transition: all 200ms ease;
}


.wishlist .product-box:hover {
    box-shadow: 0 0px 5px -2px #000;
}

.wishlist .product-content {
    padding: 20px;
    position: relative;
}

.wishlist .product-content .product-name {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.wishlist .product-content .product-price .regular-price {
    text-align: center;
    color: #9d9d9d;
    font-size: 12px;
    text-decoration: line-through;
}

.wishlist .product-content .product-price .final-price {
    text-align: center;
    color: #ef3737;
    font-weight: 700;
}

.heart {
    fill: #ef3737;
    stroke-width: 0;
    transition: fill 0.3s ease;
    cursor: pointer;
}

.heart:hover {
    fill: none;
    stroke-width: 2px;
    stroke: black;
}

.wishlist .btn-remove.action.delete {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 1;
}

/* Newsletter Page */
.newsletter-banner img {
    width: 100%;
}

/* Success Logout Page */

.success-logout-container {
    text-align: center;
    padding-top: 40px;
}

.success-logout-container p{
    width: fit-content;
    padding: 20px 30px;
    background: linear-gradient(#416865, #3a504e);
    border-radius: 10px;
    font-size: 20px;
    color: white;
}

/* Login Page */

@media (min-width: 769px), print {
    .fieldset > .field:not(.choice) > .control {
        width: 100%;
        float: none;
    }
}

.login-form-container .logo-container {
    margin-bottom: 30px;
}

.login-form-container .input-password {
    padding-right: 45px;
}

.login-form-container .eye-pass {
    position: absolute;
    top: 11px;
    right: 11px;
    cursor: pointer;
    z-index: 5;
}

.login-form-container .sign-in-container {
    padding: 20px 0;
}

.login-form-container .sign-in-container .default-btn {
    padding: 8px 0 !important;
    width: 100%;
}

.login-form-container .sign-up-container.default-btn {
    padding: 8px 40px !important;
    font-weight: 700;
}

/* Sign Up Page */

@media (min-width: 769px), print {
    .fieldset > .field:not(.choice) > .label {
        float: none;
    }
    .form.create.account, .form.password.forget {
        min-width: auto;
        width: auto;
    }
}



.signup-form-container .logo-container {
    margin-bottom: 30px;
}

.signup-form-container .input-password {
    padding-right: 45px;
}

.signup-form-container .eye-pass {
    position: absolute;
    top: 11px;
    right: 11px;
    cursor: pointer;
    z-index: 5;
}

.signup-form-container .sign-in-container {
    padding: 20px 0;
}

.signup-form-container .sign-in-container .default-btn {
    padding: 8px 0 !important;
    width: 100%;
}

.signup-form-container .fieldset.additional_info {
    display: flex;
    justify-content: center;
}

/* Confirmation Page Styles  */

.page-main {
    background-color: #f5f8f8;
}

.page-wrapper {
    background: #f5f8f8;
}

.confirmation-wrapper {
    max-width: 520px;
    margin: 80px auto 120px;
    padding: 0 16px;
}

.confirmation-card {
    background: #ffffff;
    padding: 32px 36px 34px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    text-align: center;
}

.confirmation-card h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1c1c1c;
}

.confirmation-desc {
    margin-top: 8px;
    font-size: 14px;
    color: #6f6f6f;
    line-height: 1.5;
}

.confirmation-form {
    margin-top: 22px;
}

.confirmation-form .field {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.confirmation-form label {
    font-weight: 600;
    text-wrap: nowrap;
}

.confirmation-form .required {
    color: #d00;
    margin-left: 4px;
}

.confirmation-form input {
    width: 280px;
    height: 38px;
    padding: 6px 10px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font-size: 14px;
    color: black;
}



.confirmation-divider {
    margin: 26px 0 18px;
    border-top: 1px solid #dcdcdc;
}

.confirmation-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.confirmation-actions button {
    background: #1e6b5c;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.confirmation-actions button:hover {
    background: #185a4d;
}

.confirmation-back {
    font-size: 13px;
    color: #2c2c2c;
    text-decoration: none;
}

.confirmation-back:hover {
    text-decoration: underline;
}
/* =========================================================================
   Login Option page redesign (Figma: "Porto x SPX" - Sign Up/Login Page,
   node 1:1325). Scoped to .porto-login-page / .porto-auth-topbar so it does
   not affect the register page or any other customer form.
   ========================================================================= */

.porto-auth-topbar {
    background: #005646;
    padding: 16px 0;
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0;
}

.porto-auth-topbar-logo {
    display: inline-block;
}

.porto-auth-topbar-logo img {
    height: 22px;
    width: auto;
}

.porto-login-page .porto-login-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #000;
    margin: 0 0 18px 0;
    line-height: 1.3;
}

.porto-login-page .porto-login-heading strong {
    font-weight: 700;
}

.porto-login-page .porto-form .input-text {
    border-radius: 15px;
    border: 1px solid #000;
}

.porto-login-page .login-form-container .action.login.default-btn,
.porto-login-page .action.login.default-btn {
    background: #005646;
    border-radius: 15px;
    padding: 14px 30px;
    width: auto !important;
    min-width: 136px;
}

.porto-login-page .sign-in-container {
    display: flex;
    justify-content: flex-end;
}

/* Password step: "Sign in" should match the "Use a One-Time Code" button
   below it (full width, 56px tall) instead of the right-aligned pill sizing
   used by step 1's "Continue" button. */
.porto-login-page .sign-in-container.sign-in-container--full {
    justify-content: stretch;
}

.porto-login-page .sign-in-container.sign-in-container--full .action.login.default-btn {
    width: 100% !important;
    height: 56px;
    min-width: 0;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.porto-login-page .porto-login-lang {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #000;
}

.porto-login-page .porto-login-lang-change {
    color: #7d7d7d;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    margin-left: 8px;
}

.porto-login-page .porto-login-legal {
    color: #696969;
    font-size: 13px;
    line-height: 1.5;
    margin: 4px 0 18px 0;
}

.porto-login-page .porto-login-legal a {
    color: #696969;
    font-weight: 700;
    text-decoration: underline;
}

/* Register page: consolidated single-line consent checkbox, styled to match
   the login page's short legal text (overrides the more generic
   .terms-row .term label span rule via higher selector specificity). */
.porto-register-page .terms-row .term label .porto-login-legal {
    color: #696969;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    margin: 0;
}

.porto-register-page .terms-row .term label .porto-login-legal a {
    color: #696969;
    font-weight: 700;
    text-decoration: underline;
}

/* Social login (Google) block: reposition above the email field and match
   the pill-shaped button from the Figma design. The button markup, its own
   "OR" divider, and an inline <style> tag are rendered by
   Mageplaza_SocialLogin::form/social.phtml (a third-party extension
   template); !important is used here because that inline style is emitted
   later in the document and otherwise wins on equal selector specificity. */
.porto-login-page .porto-social-login-wrapper,
.porto-register-page .porto-social-login-wrapper {
    margin-bottom: 0 !important;
}

.porto-login-page .porto-social-login-wrapper .social-login-section,
.porto-login-page .porto-social-login-wrapper .social-login-section .block-content,
.porto-register-page .porto-social-login-wrapper .social-login-section,
.porto-register-page .porto-social-login-wrapper .social-login-section .block-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.porto-login-page .porto-social-login-wrapper .actions-toolbar.social-btn,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.social-btn {
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
}

.porto-login-page .porto-social-login-wrapper .social-provider-btn,
.porto-login-page .porto-social-login-wrapper .actions-toolbar.google-login .social-provider-btn,
.porto-register-page .porto-social-login-wrapper .social-provider-btn,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.google-login .social-provider-btn {
    width: 100% !important;
    height: 56px !important;
    border-radius: 15px !important;
    border-color: #000 !important;
    justify-content: center;
}

/* Mageplaza_SocialLogin/css/style.css pulls the icon out of flex flow with
   ".btn-social > :first-child { position: absolute; left:0; ... }" (built for
   its own left-icon layout) and reserves space for it with
   ".social-btn .btn-social { padding: 6px 12px 6px 44px }". Both are higher
   specificity than our own button rules above, so with them left unopposed
   the icon renders pinned to the left edge instead of centered as a group
   with the label. Neutralize both, scoped to our buttons only, so the icon
   becomes a normal flex item again and justify-content: center centers the
   icon+text pair together. */
.porto-login-page .porto-social-login-wrapper .btn-social,
.porto-register-page .porto-social-login-wrapper .btn-social {
    padding: 10px 18px !important;
}

.porto-login-page .porto-social-login-wrapper .btn-social > :first-child,
.porto-register-page .porto-social-login-wrapper .btn-social > :first-child {
    position: static !important;
}

/* The button label text ("Google") comes from the SocialLogin extension's
   own config and its template is intentionally left unedited (per its
   "do not edit" notice); the Figma copy is applied visually instead. */
.porto-login-page .porto-social-login-wrapper .actions-toolbar.google-login .btn-text,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.google-login .btn-text {
    font-size: 15px !important;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #202124;
}

.porto-login-page .porto-social-login-wrapper .actions-toolbar.google-login .btn-text::after,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.google-login .btn-text::after {
    content: none !important;
}

.porto-login-page .porto-right ul li:before {
    color: #005646;
}

.porto-login-page .porto-right-heading {
    font-family: 'Poppins', sans-serif;
}

/* Login & register pages: porto-auth-topbar as header flush with top of viewport */
body.customer-account-login,
body.customer-account-create {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.customer-account-login .page-wrapper,
body.customer-account-create .page-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.customer-account-login .page-header,
body.customer-account-create .page-header {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #005646 !important;
    width: 100% !important;
}

body.customer-account-login .page-main,
body.customer-account-login #maincontent,
body.customer-account-create .page-main,
body.customer-account-create #maincontent {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.customer-account-login .columns,
body.customer-account-create .columns {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.customer-account-login .column.main,
body.customer-account-login .columns .column.main,
body.customer-account-create .column.main,
body.customer-account-create .columns .column.main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.customer-account-login #contentarea,
body.customer-account-create #contentarea {
    display: none !important;
}

body.customer-account-login .porto-auth-topbar,
body.customer-account-create .porto-auth-topbar {
    margin: 0 !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Right-hand register panel removed on request; center the login form. */
.porto-login-page .porto-login-grid,
.porto-register-page .porto-login-grid {
    display: block;
    max-width: 460px;
    margin: 0 auto;
}

/* Step 2 (password step): shows the email/phone entered in step 1 next to a
   "Change" link back to step 1 (Figma: "Sign Up/ Login Page - Sign in", node 1:1359). */
.porto-login-page .porto-login-account-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #000;
}

.porto-login-page .porto-login-account-value {
    font-weight: 600;
    word-break: break-all;
}

.porto-login-page .porto-login-account-line a,
.porto-login-page .porto-login-change-link {
    color: #000;
    font-weight: 600;
    text-decoration: underline !important;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.porto-login-page .porto-login-account-line a:hover,
.porto-login-page .porto-login-change-link:hover {
    color: #005646;
    text-decoration: underline !important;
}

/* Static (non-functional) "Use a One-Time Code" button on the password step.
   Full OTP flow (sending/verifying a code) is not implemented yet; shown as a
   disabled placeholder matching the Figma layout, same treatment as the
   "Continue with Apple" button on step 1. */
.porto-login-page .otp-login-static {
    width: 100%;
    margin: 10px 0 0 0;
}

.porto-login-page .otp-login-static .otp-provider-btn {
    width: 100%;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border: 1px solid #000;
    background: #fff;
    color: #202124;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.55;
}


/* Apple Login button */
.porto-login-page .porto-social-login-wrapper .actions-toolbar.apple-login,
.porto-login-page .porto-social-login-wrapper .actions-toolbar.apple-login-static,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.apple-login,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.apple-login-static {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding-top: 0 !important;
}

.actions-toolbar.apple-login .social-provider-btn {
    width: 100% !important;
    height: 56px !important;
    border-radius: 15px !important;
    border-color: #000 !important;
    background: #000 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
}

.actions-toolbar.apple-login .social-provider-btn:hover {
    background: #222 !important;
    color: #fff !important;
}

.actions-toolbar.apple-login .icon-wrap {
    height: 41px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.actions-toolbar.apple-login .icon-wrap i {
    width: 20px;
    height: 41px;
    display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23fff'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.actions-toolbar.apple-login .icon-wrap i:before {
    content: none;
}

.actions-toolbar.apple-login .btn-text,
.porto-login-page .porto-social-login-wrapper .actions-toolbar.apple-login .btn-text,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.apple-login .btn-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    color: #fff !important;
}

.actions-toolbar.apple-login .btn-text::after,
.porto-login-page .porto-social-login-wrapper .actions-toolbar.apple-login .btn-text::after,
.porto-register-page .porto-social-login-wrapper .actions-toolbar.apple-login .btn-text::after {
    content: none !important;
}

.porto-login-page .porto-social-login-wrapper .social-separator,
.porto-register-page .porto-social-login-wrapper .social-separator {
    width: 100% !important;
    margin: 10px 0 10px 0 !important;
    text-align: center;
}

.porto-login-page .field.email,
.porto-register-page .field.email {
    margin-top: 0 !important;
}

.porto-register-page .porto-register-header-section {
    margin-bottom: 20px;
}

.porto-register-page .porto-register-header-section .legend {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.porto-register-page .porto-register-login-prompt {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #4a5568;
    margin: 0 !important;
}

.porto-register-page .porto-register-login-prompt .login-link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1f2933;
    text-decoration: underline !important;
    cursor: pointer;
    margin-left: 4px;
    transition: color .2s ease;
}

.porto-register-page .porto-register-login-prompt .login-link:hover {
    color: #005646;
    text-decoration: underline !important;
}

.porto-register-page #group-fields-customer-attributes,
.porto-register-page .group-fields-customer-attributes,
#group-fields-customer-attributes {
    display: none !important;
}

/* Confirmation dialog on login page */
.porto-confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
    backdrop-filter: blur(2px);
}

.porto-confirm-modal {
    background: #ffffff;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    padding: 30px 24px 24px;
    text-align: center;
}

.porto-confirm-modal-text {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1f2933;
    line-height: 1.5;
    margin: 0 0 24px 0;
}

.porto-confirm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.porto-confirm-modal-actions .action {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.porto-confirm-btn-cancel {
    background: #f1f3f5;
    color: #495057;
    border: 1px solid #ced4da;
}

.porto-confirm-btn-cancel:hover {
    background: #e9ecef;
    color: #212529;
}

.porto-confirm-btn-ok {
    background: #005646;
    color: #ffffff;
    border: 1px solid #005646;
}

.porto-confirm-btn-ok:hover {
    background: #004235;
    color: #ffffff;
}

/* Customer Account Voucher Modal Popup */
body.voucher-modal-open {
    overflow: hidden;
}

.voucher-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.voucher-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.voucher-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    padding: 32px 24px 24px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.voucher-modal-overlay.is-open .voucher-modal-card {
    transform: translateY(0) scale(1);
}

.voucher-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
    outline: none;
}

.voucher-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg);
}

.voucher-modal-icon-wrapper {
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voucher-modal-icon-bg {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #eef6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #92C5C6;
}

.voucher-modal-badge {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.voucher-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.voucher-modal-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.voucher-modal-preview {
    background: #f8fafc;
    border: 1.5px dashed #5C7682;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}

.voucher-modal-preview:hover {
    background: #eef6f6;
    border-color: #005646;
    transform: translateY(-2px);
}

.voucher-preview-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voucher-preview-tag {
    background: #5C7682;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.voucher-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.voucher-preview-arrow {
    color: #5C7682;
    display: flex;
    align-items: center;
}

.voucher-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voucher-modal-btn-primary {
    display: block;
    width: 100%;
    background: #005646;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 20px;
    border-radius: 10px;
    text-decoration: none !important;
    text-align: center;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0, 86, 70, 0.25);
}

.voucher-modal-btn-primary:hover {
    background: #004235;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 86, 70, 0.35);
}

.voucher-modal-btn-secondary {
    display: block;
    width: 100%;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.voucher-modal-btn-secondary:hover {
    color: #64748b;
}

@media (max-width: 480px) {
    .voucher-modal-card {
        padding: 28px 18px 20px;
        border-radius: 16px;
    }
    .voucher-modal-title {
        font-size: 18px;
    }
    .voucher-modal-desc {
        font-size: 13px;
    }
}