/* =========================================================
NONO HOME PAGE
========================================================= */

:root {
--green: #087b3d;
--green-dark: #056b34;
--light-green: #f1f8f3;

--text: #18201b;  
--muted: #69716c;  

--border: #e8ece9;  

--white: #ffffff;

}

* {
box-sizing: border-box;
}


html {
scroll-behavior: smooth;
}

body {
margin: 0;

background: #ffffff;  

color: var(--text);  

font-family:  
    "Inter",  
    Arial,  
    sans-serif;  

font-size: 13px;

}

/* =========================================================
HEADER
========================================================= */

.site-header {
width: 100%;

background: white;

}

/* TOP HEADER */

.top-header {
height: 57px;

position: relative;  

display: flex;  

align-items: center;  

justify-content: center;  

padding: 0 24px;

}

/* MENU */

.menu-button {
position: absolute;

left: 22px;  
top: 13px;  

width: 34px;  
height: 34px;  

border: none;  

background: transparent;  

color: #111;  

font-size: 26px;  

cursor: pointer;  

display: flex;  

align-items: center;  
justify-content: center;

}

/* =========================================================
LOGO
========================================================= */

.nono-logo {
position: relative;

width: 120px;  
height: 48px;  

display: flex;  

flex-direction: column;  

align-items: center;  

justify-content: flex-start;  

color: var(--green);  

text-decoration: none;

}

.logo-name {
position: relative;

height: 31px;  

color: var(--green);  

font-size: 31px;  

line-height: 30px;  

font-weight: 800;  

letter-spacing: -2.5px;

}

/*
IMPORTANT:
The curve is positioned underneath the final O.
It does NOT cross through the letter.
*/

.logo-curve {
position: absolute;

width: 17px;  
height: 8px;  

right: 0px;  
bottom: -1px;  

border-bottom: 2.5px solid var(--green);  

border-radius:  
    0 0 15px 15px;  

transform: rotate(-7deg);  

pointer-events: none;

}

.logo-slogan {
margin-top: 3px;

color: var(--green);  

font-size: 7px;  

line-height: 8px;  

font-weight: 600;  

letter-spacing: 0;

}

/* =========================================================
ACCOUNT
========================================================= */

.address-header .header-actions {
position: absolute;

right: 24px;  

display: flex;  

align-items: center;  

gap: 28px;

}

.sign-in {
display: flex;

align-items: center;  

gap: 8px;  

color: #111;  

text-decoration: none;  

font-size: 12px;

}

.sign-in i {
font-size: 20px;
}

.cart-icon {
position: relative;

color: #111;  

text-decoration: none;  

font-size: 21px;

}

.cart-count {
position: absolute;

top: -8px;  
right: -9px;  

width: 15px;  
height: 15px;  

display: flex;  

align-items: center;  
justify-content: center;  

border-radius: 50%;  

background: var(--green);  

color: white;  

font-size: 8px;  

font-weight: 700;

}

/* =========================================================
SEARCH
========================================================= */

.search-area {
height: 39px;

display: flex;  

align-items: center;  

justify-content: center;

}

.search-container {
width: min(58%, 590px);

height: 34px;  

display: flex;  

overflow: hidden;  

border: 1.5px solid #4f9b6c;  

border-radius: 6px;  

background: white;

}

.search-container input {
flex: 1;

min-width: 0;  

border: none;  

outline: none;  

padding: 0 14px;  

color: #222;  

font-size: 11px;

}

.search-container input::placeholder {
color: #747a76;
}

.search-container button {
width: 43px;

border: none;  

background: var(--green);  

color: white;  

font-size: 15px;  

cursor: pointer;  

transition: background .2s;

}

.search-container button:hover {
background: var(--green-dark);
}

/* =========================================================
CATEGORY NAVIGATION
========================================================= */

.main-navigation {
width: 100%;

min-height: 53px;  

display: grid;  

grid-template-columns:  
    repeat(10, 1fr);  

align-items: center;  

padding: 4px 22px;  

background: var(--green);  

border-radius:  
    11px 11px 0 0;

}

.nav-item {
min-width: 0;

display: flex;  

flex-direction: column;  

align-items: center;  

justify-content: center;  

gap: 4px;  

color: white;  

text-decoration: none;  

font-size: 9px;  

font-weight: 500;  

padding: 5px 2px;

}

.nav-item i {
font-size: 17px;

line-height: 18px;

}

.nav-item:hover,
.nav-item.active {
opacity: .9;
}

/* =========================================================
HERO
========================================================= */

.hero-section {
width: 100%;

max-width: 1200px;  

height: 380px;  

margin: 0 auto;  

overflow: hidden;  

background: #f2f8f4;  

border-radius:  
    0 0 10px 10px;

}

.hero-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center -85px;
}

/* FALLBACK BANNER */

.hero-fallback {
display: none;

width: 100%;  
height: 100%;  

align-items: center;  

justify-content: space-between;  

padding:  
    25px 80px 25px 100px;  

background:  
    linear-gradient(100deg,  
        #f3faf5,  
        #edf7f0);

}

.hero-copy h1 {
margin: 0;

color: #143c25;  

font-size: 25px;  

line-height: 1.1;  

font-weight: 500;

}

.hero-copy h1 strong {
display: block;

font-size: 40px;  

line-height: 43px;  

font-weight: 800;  

letter-spacing: -2px;

}

.hero-copy p {
margin: 9px 0 14px;

color: #143c25;  

font-size: 15px;

}

.hero-copy button {
border: none;

border-radius: 6px;  

padding:  
    9px 18px;  

background: var(--green);  

color: white;  

font-size: 11px;  

font-weight: 700;  

cursor: pointer;

}

.hero-visual {
position: relative;

width: 48%;  
height: 100%;

}

.hero-bag {
position: absolute;

left: 50%;  
top: 50%;  

transform:  
    translate(-50%, -50%) rotate(-2deg);  

width: 160px;  
height: 125px;  

border-radius: 7px;  

background: #55b92b;  

color: white;  

display: flex;  

flex-direction: column;  

align-items: center;  

justify-content: center;  

box-shadow:  
    0 7px 16px rgba(0, 0, 0, .12);

}

.hero-bag strong {
font-size: 28px;
}

.hero-bag small {
font-size: 7px;
}

.hero-discount {
position: absolute;

right: 35px;  
top: 0;  

width: 47px;  
height: 47px;  

display: flex;  

align-items: center;  
justify-content: center;  

border-radius: 50%;  

background: #61ba2d;  

color: white;  

font-size: 27px;  

font-weight: 800;  

z-index: 5;

}

.hero-visual i {
position: absolute;

color: #111;  

font-size: 40px;

}

.headphone {
left: 5px;
top: 10px;
}

.game-controller {
left: 25px;
bottom: 8px;
}

.camera {
left: 90px;
bottom: 3px;
}

.blender {
right: 5px;
top: 20px;
}

.shoe {
right: 0;
bottom: 0;

color: var(--green) !important;

}

/*

/* =========================================================
BENEFITS
========================================================= */

.benefits-section {
width: min(1360px, calc(100% - 48px));

min-height: 59px;  

margin: 9px auto 0;  

display: grid;  

grid-template-columns:  
    repeat(4, 1fr);  

border: 1px solid #eef1ef;

}

.benefit {
display: flex;

align-items: center;  

justify-content: center;  

gap: 12px;  

border-right:  
    1px solid #eef1ef;

}

.benefit:last-child {
border-right: none;
}

.benefit>i {
color: var(--green);

font-size: 21px;

}

.benefit div {
display: flex;

flex-direction: column;  

gap: 3px;

}

.benefit strong {
font-size: 9px;

font-weight: 700;

}

.benefit span {
color: #666;

font-size: 8px;

}

/* =========================================================
CONTENT
========================================================= */

.content-section {
width: min(1360px, calc(100% - 48px));

margin:  
    13px auto;

}

.section-header {
display: flex;

align-items: center;  

justify-content: space-between;  

margin-bottom: 7px;

}

.section-header h2 {
margin: 0;

font-size: 14px;  

line-height: 18px;  

font-weight: 700;

}

.section-header>a {
color: var(--green);

text-decoration: none;  

font-size: 9px;  

font-weight: 700;

}

.heading-with-timer {
display: flex;

align-items: center;  

gap: 12px;

}

.deal-timer {
color: #d64d4d;

font-size: 8px;  

font-weight: 600;

}

/* =========================================================
SHOP CATEGORY
========================================================= */

.category-grid {
display: grid;

grid-template-columns:  
    repeat(6, 1fr);  

gap: 9px;

}

.category-card {
height: 85px;

display: flex;  

flex-direction: column;  

align-items: center;  

justify-content: center;  

gap: 8px;  

border:  
    1px solid #edf0ee;  

border-radius: 5px;  

background: white;  

color: #111;  

text-decoration: none;  

box-shadow:  
    0 1px 5px rgba(0, 0, 0, .025);  

transition:  
    transform .15s,  
    box-shadow .15s;

}

.category-card:hover {
transform: translateY(-2px);

box-shadow:  
    0 3px 10px rgba(0, 0, 0, .07);

}

.category-card i {
color: var(--green);

font-size: 26px;

}

.category-card span {
font-size: 8px;

font-weight: 600;

}

/* =========================================================
PRODUCTS
========================================================= */

.product-grid {
display: grid;

grid-template-columns:  
    repeat(6, minmax(0, 1fr));  

gap: 16px;

}

.product-card {
min-width: 0;

padding: 7px;  

border:  
    1px solid #e8ecea;  

border-radius: 5px;  

background: white;  

box-shadow:  
    0 1px 4px rgba(0, 0, 0, .025);

}

.product-image {
position: relative;

height: 115px;  

display: flex;  

align-items: center;  

justify-content: center;

}

.product-image img {
display: block;

width: 100%;  
height: 100%;  

object-fit: contain;

}

.new-label {
position: absolute;

left: 0;  
top: 0;  

padding:  
    3px 5px;  

border-radius: 3px;  

background: var(--green);  

color: white;  

font-size: 6px;  

font-weight: 800;  

z-index: 2;

}

.product-name {
height: 29px;

margin-top: 3px;  

overflow: hidden;  

color: #252b27;  

font-size: 8px;  

line-height: 10px;  

font-weight: 500;

}

.product-price {
margin-top: 3px;

color: #111;  

font-size: 10px;  

font-weight: 800;

}

.old-price {
margin-left: 4px;

color: #999;  

font-size: 7px;  

font-weight: 500;  

text-decoration: line-through;

}

.rating {
margin-top: 3px;

color: #e39a15;  

font-size: 7px;

}

.rating span {
margin-left: 2px;

color: #777;

}

.add-cart {
width: 100%;

height: 19px;  

margin-top: 5px;  

border:  
    1px solid #cfe0d5;  

border-radius: 3px;  

background: white;  

color: var(--green);  

font-size: 7px;  

font-weight: 700;  

cursor: pointer;  

transition:  
    background .2s,  
    color .2s;

}

.add-cart:hover {
background: var(--green);

color: white;

}

/* =========================================================
SAVE SECTION
========================================================= */

.save-section {
width: min(1360px, calc(100% - 48px));

margin: 12px auto 0;  

padding: 10px;  

display: grid;  

grid-template-columns:  
    repeat(3, 1fr);  

gap: 18px;  

border-top:  
    1px solid #edf0ee;  

border-bottom:  
    1px solid #edf0ee;

}

.save-item {
display: flex;

align-items: center;  

gap: 11px;

}

.save-icon {
width: 38px;
height: 38px;

flex-shrink: 0;  

display: flex;  

align-items: center;  
justify-content: center;  

border-radius: 8px;  

color: var(--green);  

font-size: 23px;

}

.save-item>div:last-child {
display: flex;

flex-direction: column;  

gap: 3px;

}

.save-item strong {
font-size: 9px;
}

.save-item span {
color: #666;

font-size: 7px;

}

.save-item a {
color: var(--green);

text-decoration: none;  

font-size: 7px;  

font-weight: 800;

}

/* =========================================================
FOOTER
========================================================= */

.site-footer {
width: min(1360px, calc(100% - 48px));

margin: 0 auto;  

padding:  
    10px 0 20px;

}

.footer-grid {
display: grid;

grid-template-columns:  
    1.25fr 1.2fr 1.15fr 1fr 1fr;  

gap: 25px;

}

.footer-column h3 {
margin:
0 0 7px;

font-size: 9px;  

font-weight: 700;

}

.footer-column>a {
display: block;

color: #666;  

text-decoration: none;  

font-size: 7px;  

line-height: 15px;

}

.footer-column>a:hover {
color: var(--green);
}

/* SOCIAL */

.social-icons {
display: flex;

align-items: center;  

gap: 17px;

}

.social-icons a {
color: #111;

font-size: 13px;  

text-decoration: none;

}

.social-icons a:hover {
color: var(--green);
}

/* FOOTER BOTTOM */

.footer-bottom {
margin-top: 18px;

display: flex;  

align-items: center;  

justify-content: space-between;  

color: #777;  

font-size: 7px;

}

.footer-links {
display: flex;

align-items: center;  

gap: 12px;

}

.footer-links a {
color: #777;

text-decoration: none;

}

.footer-links span {
color: #aaa;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 850px) {

.main-navigation {  
    grid-template-columns:  
        repeat(5, 1fr);  

    row-gap: 4px;  

    padding:  
        7px 10px;  
}  


.hero-section {  
    height: 210px;  
}  


.product-grid {  
    grid-template-columns:  
        repeat(3, 1fr);  
}  


.category-grid {  
    grid-template-columns:  
        repeat(3, 1fr);  
}  


.footer-grid {  
    grid-template-columns:  
        repeat(2, 1fr);  
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 520px) {

body {  
    font-size: 12px;  
}  


.top-header {  
    height: 58px;  

    padding: 0 10px;  
}  


.menu-button {  
    left: 9px;  
}  


.header-actions {  
    right: 10px;  

    gap: 14px;  
}  


.sign-in span {  
    display: none;  
}  


.search-container {  
    width: 88%;  
}  


.main-navigation {  
    grid-template-columns:  
        repeat(5, 1fr);  

    padding: 7px 4px;  
}  


.nav-item {  
    font-size: 7px;  
}  


.nav-item i {  
    font-size: 15px;  
}  


.hero-section {  
    height: 145px;  
}  


.benefits-section {  
    width: calc(100% - 20px);  

    grid-template-columns:  
        repeat(2, 1fr);  
}  


.benefit {  
    min-height: 52px;  

    padding: 6px;  

    border-bottom:  
        1px solid #eef1ef;  
}  


.benefit:nth-child(2) {  
    border-right: none;  
}  


.benefit:nth-child(3) {  
    border-bottom: none;  
}  


.benefit:nth-child(4) {  
    border-right: none;  

    border-bottom: none;  
}  


.content-section {  
    width: calc(100% - 20px);  
}  


.category-grid {  
    grid-template-columns:  
        repeat(3, 1fr);  

    gap: 6px;  
}  


.category-card {  
    height: 75px;  
}  


.product-grid {  
    grid-template-columns:  
        repeat(2, 1fr);  

    gap: 7px;  
}  


.save-section {  
    width: calc(100% - 20px);  

    grid-template-columns: 1fr;  
}  


.site-footer {  
    width: calc(100% - 20px);  
}  


.footer-grid {  
    grid-template-columns:  
        repeat(2, 1fr);  

    gap: 20px;  
}  


.footer-bottom {  
    flex-direction: column;  

    align-items: flex-start;  

    gap: 10px;  
}

}

/* =========================================================
NONO AUTH / SIGN UP
========================================================= */

.auth-page {
background: #ffffff;
min-height: 100vh;
color: #111;
}

/* AUTH HEADER */

.auth-header {
height: 90px;

position: relative;  

display: flex;  

align-items: center;  

justify-content: center;  

border: 1px solid #eeeeee;  

background: #fff;

}

.auth-logo {
color: var(--green);
text-decoration: none;
text-align: center;
}

.auth-logo-name {
position: relative;

font-size: 52px;  
line-height: 48px;  

font-weight: 800;  

letter-spacing: -4px;

}

.auth-logo-name span {
position: absolute;

width: 25px;  
height: 16px;  

right: 2px;  
bottom: -2px;  

border-bottom: 3.5px solid var(--green);  

border-radius:  
    0 0 20px 20px;  

transform: rotate(-7deg);  

pointer-events: none;

}

.auth-logo-slogan {
margin-top: 5px;

color: var(--green);  

font-size: 11px;  

font-weight: 700;

}

.auth-close,
.auth-back {
position: absolute;

left: 35px;  

color: #111;  

text-decoration: none;  

font-size: 29px;

}

.auth-close {
top: 29px;
}

.auth-back {
top: 30px;
}

/* DELIVERY */

.delivery-bar {
height: 73px;

padding: 0 42px;  

display: flex;  

align-items: center;  

justify-content: space-between;  

border-bottom: 1px solid #eeeeee;

}

.delivery-left {
display: flex;

align-items: center;  

gap: 12px;  

font-size: 19px;

}

.delivery-left i {
font-size: 25px;
}

.delivery-left strong {
font-weight: 700;
}

.delivery-bar button {
border: none;

background: transparent;  

color: var(--green);  

font-size: 18px;  

font-weight: 700;  

cursor: pointer;

}

/* SIGNUP */

.auth-container {
width: min(100%, 965px);

margin: 0 auto;  

padding: 27px 42px 45px;

}

.signup-box {
width: 100%;
}

.signup-box h1 {
margin: 0;

text-align: center;  

font-size: 36px;  

line-height: 44px;

}

.signup-subtitle {
margin:
8px 0 34px;

text-align: center;  

color: #686868;  

font-size: 22px;  

line-height: 31px;

}

/* SOCIAL */

.social-register {
width: 100%;

height: 76px;  

margin: 0 auto 14px;  

display: flex;  

align-items: center;  

justify-content: center;  

position: relative;  

border: 2px solid #d9d9d9;  

border-radius: 12px;  

background: #fff;  

color: #111;  

font-size: 20px;  

cursor: pointer;

}

/* FACEBOOK ICON */

.social-register i {
position: absolute;

left: 24px;  

font-size: 34px;

}

/* GOOGLE ICON */

.google-icon {
position: absolute;

left: 24px;  

width: 34px;  
height: 34px;  

object-fit: contain;

}

.facebook-register i {
color: #1877f2;
}

.social-register strong {
font-weight: 600;
}

/* DIVIDER */

.or-divider {
display: flex;

align-items: center;  

gap: 25px;  

margin: 24px 0;

}

.or-divider span {
flex: 1;

height: 1px;  

background: #dddddd;

}

.or-divider strong {
font-size: 20px;

font-weight: 500;

}

/* INPUTS */

.auth-input {
height: 65px;

margin-bottom: 12px;  

display: flex;  

align-items: center;  

position: relative;  

border: 2px solid #e1e1e1;  

border-radius: 10px;  

background: #fff;

}

.auth-input>i {
width: 65px;

text-align: center;  

font-size: 25px;  

color: #111;

}

.auth-input input {
flex: 1;

height: 100%;  

min-width: 0;  

border: none;  

outline: none;  

background: transparent;  

font-family: inherit;  

font-size: 20px;  

color: #111;

}

.auth-input input::placeholder {
color: #777;
}

.password-toggle {
width: 60px;

border: none;  

background: transparent;  

font-size: 23px;  

color: #111;  

cursor: pointer;

}

.password-hint {
margin:
4px 4px 24px;

color: #555;  

font-size: 16px;

}

.code-label {
margin:
0 4px 8px;

font-size: 17px;  

color: #555;

}

/* PHONE */

.phone-row {
display: grid;

grid-template-columns: 35% 1fr;  

gap: 45px;

}

.country-code {
height: 65px;

display: flex;  

align-items: center;  

justify-content: space-between;  

padding: 0 22px;  

border: 2px solid #e1e1e1;  

border-radius: 10px;  

background: #fff;  

font-family: inherit;  

font-size: 19px;  

cursor: pointer;

}

.phone-input {
margin: 0;
}

.otp-hint {
margin:
8px 4px 27px;

color: #666;  

font-size: 16px;

}

/* NEWSLETTER */

.newsletter {
display: flex;

align-items: center;  

gap: 12px;  

margin:  
    0 5px 24px;  

font-size: 18px;  

cursor: pointer;

}

.newsletter input {
display: none;
}

.custom-checkbox {
width: 28px;
height: 28px;

display: flex;  

align-items: center;  
justify-content: center;  

flex-shrink: 0;  

border-radius: 4px;  

background: var(--green);  

color: white;  

font-size: 17px;

}

/* CONTINUE */

.continue-button,
.create-account-button {
width: 100%;

height: 68px;  

border: none;  

border-radius: 13px;  

background: var(--green);  

color: white;  

font-family: inherit;  

font-size: 23px;  

font-weight: 700;  

cursor: pointer;

}

.continue-button:hover,
.create-account-button:hover {
background: var(--green-dark);
}

.terms-text {
margin:
20px auto 0;

max-width: 800px;  

text-align: center;  

color: #666;  

font-size: 17px;  

line-height: 27px;

}

.terms-text a {
color: var(--green);

font-weight: 700;  

text-decoration: none;

}

/* =========================================================
VERIFICATION
========================================================= */

.verification-container {
width: min(100%, 900px);

margin: 0 auto;  

padding:  
    28px 35px 60px;  

text-align: center;

}

.verification-art {
height: 470px;

display: flex;  

align-items: center;  

justify-content: center;

}

.art-circle {
width: 440px;
height: 440px;

position: relative;  

border-radius: 50%;  

background: #f1f8f3;

}

/* PHONE */

.phone-outline {
position: absolute;

left: 50%;  
top: 48%;  

width: 205px;  
height: 410px;  

transform: translate(-50%, -50%);  

border:  
    5px solid var(--green);  

border-radius: 32px;

}

.phone-notch {
position: absolute;

left: 50%;  
top: -5px;  

width: 80px;  
height: 18px;  

transform: translateX(-50%);  

background: var(--green);  

border-radius:  
    0 0 15px 15px;

}

/* SECURITY CARD */

.security-card {
position: absolute;

left: 50%;  
top: 50%;  

width: 290px;  
height: 185px;  

transform: translate(-50%, -50%);  

display: flex;  

flex-direction: column;  

align-items: center;  

justify-content: center;  

background: white;  

border-radius: 15px;  

box-shadow:  
    0 5px 15px rgba(0, 0, 0, .12);

}

.shield {
width: 72px;
height: 82px;

display: flex;  

align-items: center;  
justify-content: center;  

background: var(--green);  

color: white;  

clip-path: polygon(50% 0,  
        100% 15%,  
        95% 65%,  
        50% 100%,  
        5% 65%,  
        0 15%);  

font-size: 33px;

}

.security-dots {
display: flex;

gap: 16px;  

margin-top: 15px;

}

.security-dots span {
width: 12px;
height: 12px;

border-radius: 50%;  

background: var(--green);

}

/* DECORATIONS */

.plus {
position: absolute;

color: #51c476;  

font-size: 27px;  

font-weight: 700;

}

.plus-one {
left: 28px;
top: 70px;
}

.plus-two {
right: 25px;
top: 155px;
}

.plus-three {
left: 42px;
top: 215px;
}

.leaf {
position: absolute;

color: #35b75d;  

font-size: 42px;

}

.leaf-left {
left: 5px;
bottom: 65px;
}

.leaf-right {
right: 5px;
bottom: 65px;
}

.verification-container h1 {
margin:
0 0 27px;

font-size: 36px;

}

.verification-text {
margin: 0;

color: #555;  

font-size: 23px;

}

.verification-number {
margin:
17px 0 48px;

color: var(--green);  

font-size: 29px;  

font-weight: 700;

}

/* OTP */

.otp-container {
display: flex;

justify-content: center;  

gap: 26px;  

margin-bottom: 43px;

}

.otp-container input {
width: 76px;
height: 76px;

text-align: center;  

border:  
    2px solid #62ae7b;  

border-radius: 11px;  

outline: none;  

font-size: 30px;  

font-weight: 600;

}

.otp-container input:focus {
border-color: var(--green);

box-shadow:  
    0 0 0 2px rgba(8, 123, 61, .1);

}

.create-account-button {
width: 80%;
}

.resend-text {
margin-top: 33px;

color: #555;  

font-size: 18px;

}

.resend-text button {
border: none;

padding: 0;  

background: transparent;  

color: var(--green);  

font-family: inherit;  

font-size: inherit;  

font-weight: 700;  

cursor: pointer;

}

.resend-text strong {
color: var(--green);
}

/* =========================================================
AUTH MOBILE
========================================================= */

@media (max-width: 600px) {

.auth-header {  
    height: 72px;  
}  


.auth-logo-name {  
    font-size: 39px;  
    line-height: 37px;  
}  


.auth-logo-slogan {  
    font-size: 8px;  
}  


.auth-close,  
.auth-back {  
    left: 18px;  
    top: 23px;  
    font-size: 25px;  
}  


.delivery-bar {  
    height: 60px;  

    padding: 0 18px;  
}  


.delivery-left {  
    gap: 8px;  

    font-size: 14px;  
}  


.delivery-left i {  
    font-size: 20px;  
}  


.delivery-bar button {  
    font-size: 14px;  
}  


.auth-container {  
    padding:  
        22px 18px 35px;  
}  


.signup-box h1 {  
    font-size: 28px;  
}  


.signup-subtitle {  
    font-size: 17px;  

    line-height: 25px;  

    margin-bottom: 25px;  
}  


.social-register {  
    width: 100%;  

    height: 58px;  

    font-size: 16px;  
}  


.social-register i,  
.google-icon {  
    left: 18px;  

    font-size: 26px;  
}  


.auth-input {  
    height: 57px;  
}  


.auth-input>i {  
    width: 52px;  

    font-size: 20px;  
}  


.auth-input input {  
    font-size: 16px;  
}  


.phone-row {  
    grid-template-columns: 1fr;  

    gap: 10px;  
}  


.country-code {  
    height: 57px;  
}  


.newsletter {  
    font-size: 14px;  
}  


.continue-button {  
    height: 58px;  

    font-size: 19px;  
}  


.terms-text {  
    font-size: 13px;  

    line-height: 21px;  
}  


.verification-container {  
    padding:  
        15px 18px 40px;  
}  


.verification-art {  
    height: 310px;  
}  


.art-circle {  
    width: 280px;  
    height: 280px;  
}  


.phone-outline {  
    width: 130px;  
    height: 255px;  

    border-width: 4px;  

    border-radius: 22px;  
}  


.security-card {  
    width: 205px;  
    height: 130px;  
}  


.shield {  
    width: 52px;  
    height: 59px;  

    font-size: 24px;  
}  


.security-dots {  
    gap: 10px;  

    margin-top: 9px;  
}  


.security-dots span {  
    width: 8px;  
    height: 8px;  
}  


.leaf {  
    font-size: 28px;  
}  


.verification-container h1 {  
    font-size: 27px;  

    margin-bottom: 18px;  
}  


.verification-text {  
    font-size: 17px;  
}  


.verification-number {  
    font-size: 21px;  

    margin-bottom: 30px;  
}  


.otp-container {  
    gap: 8px;  

    margin-bottom: 30px;  
}  


.otp-container input {  
    width: 45px;  
    height: 55px;  

    font-size: 22px;  
}  


.create-account-button {  
    width: 100%;  

    height: 58px;  

    font-size: 19px;  
}  


.resend-text {  
    font-size: 14px;  
}

}

/* =========================================================
REGISTRATION SUCCESS NOTIFICATION
========================================================= */

.registration-success {
position: fixed;

top: 95px;  
left: 50%;  

transform: translateX(-50%);  

width: min(560px, calc(100% - 30px));  

min-height: 105px;  

display: flex;  

align-items: center;  

gap: 25px;  

padding: 20px 45px;  

background: #f4fbdc;  

border-left:  
    4px solid var(--green);  

border-radius: 8px;  

box-shadow:  
    0 4px 16px rgba(0, 0, 0, .10);  

z-index: 99999;  

animation:  
    successSlide .35s ease-out;

}

@keyframes successSlide {

from {  
    opacity: 0;  
    transform:  
        translate(-50%, -15px);  
}  

to {  
    opacity: 1;  
    transform:  
        translate(-50%, 0);  
}

}

.success-check {
width: 47px;
height: 47px;

flex-shrink: 0;  

display: flex;  

align-items: center;  
justify-content: center;  

border-radius: 50%;  

background: var(--green);  

color: white;  

font-size: 28px;  

font-weight: 700;

}

.success-content {
display: flex;

flex-direction: column;  

gap: 5px;

}

.success-content strong {
color: var(--green);

font-size: 19px;

}

.success-content span {
color: #222;

font-size: 13px;

}

.success-close {
position: absolute;

right: 12px;  
top: 9px;  

border: none;  

background: transparent;  

color: #555;  

font-size: 24px;  

cursor: pointer;

}

@media (max-width: 600px) {

.registration-success {  
    top: 75px;  

    padding: 16px 35px 16px 20px;  

    gap: 15px;  
}  


.success-check {  
    width: 40px;  
    height: 40px;  

    font-size: 23px;  
}  


.success-content strong {  
    font-size: 16px;  
}  


.success-content span {  
    font-size: 11px;  
}

}

/* =========================================================
NONO — ADDRESS & LIVE LOCATION PAGES
ADD THIS AT THE VERY BOTTOM OF style.css
========================================================= */

.address-page,
.live-location-page {
margin: 0;
padding: 0;
background: #ffffff;
color: #17201b;
font-family: "Inter", Arial, sans-serif;
min-height: 100vh;
}

/* =========================================================
HEADER
========================================================= */

.address-header {
height: 72px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
box-sizing: border-box;
}

.address-header h1 {
margin: 0;
font-size: 28px;
font-weight: 700;
color: #075d25;
}

.back-button {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
font-size: 29px;
color: #111111;
cursor: pointer;
}

.header-actions {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 25px;
}

.address-header .header-actions button {
border: none;
background: transparent;
padding: 0;
font-size: 28px;
color: #111111;
cursor: pointer;
}

.header-actions .cart-button {
position: relative;
}

.cart-button span {
position: absolute;
top: -11px;
right: -13px;
min-width: 22px;
height: 22px;
padding: 0 5px;
border-radius: 50%;
background: #008c2f;
color: #ffffff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}

/* =========================================================
MAIN ADDRESS CONTENT
========================================================= */

.address-content {
width: min(650px, calc(100% - 40px));
margin: 0 auto;
padding: 28px 0 110px;
box-sizing: border-box;
}

.section-title {
margin: 0 0 20px;
font-size: 22px;
font-weight: 700;
color: #08762d;
}

.manual-title {
margin-top: 32px;
}

/* =========================================================
LIVE LOCATION CARD
========================================================= */

.live-location-card {
border: 1px solid #e0e8e2;
border-radius: 20px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.location-information {
min-height: 135px;
padding: 22px;
display: flex;
align-items: center;
gap: 20px;
background: #f4faf6;
box-sizing: border-box;
}

.round-icon {
flex: 0 0 58px;
width: 58px;
height: 58px;
border-radius: 50%;
background: #e1f4e7;
color: #08762d;
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
}

.location-information h3,
.live-info-card h3 {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.4;
font-weight: 700;
color: #151b17;
}

.location-information p,
.live-info-card p {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: #3e4741;
}

.location-arrow {
margin-left: auto;
font-size: 21px;
color: #111111;
}

.green-location-button {
width: calc(100% - 40px);
height: 58px;
margin: 14px 20px;
border: none;
border-radius: 13px;
background: #008c2f;
color: #ffffff;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}

.green-location-button i {
margin-right: 10px;
}

.secure-message {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 20px 14px;
color: #555d58;
font-size: 14px;
}

.secure-message i {
color: #4d5550;
}

/* =========================================================
MANUAL ADDRESS FORM
========================================================= */

.manual-address-form {
width: 100%;
}

.address-field {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 22px;
}

.field-icon {
flex: 0 0 58px;
width: 58px;
height: 58px;
border-radius: 50%;
background: #e8f7ec;
color: #08762d;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}

.field-content {
flex: 1;
}

.field-content label {
display: block;
margin: 0 0 8px;
font-size: 16px;
font-weight: 500;
color: #313934;
}

.field-content input {
width: 100%;
height: 58px;
padding: 0 17px;
border: 1px solid #dfe4e1;
border-radius: 13px;
outline: none;
background: #ffffff;
color: #202621;
font-family: inherit;
font-size: 16px;
box-sizing: border-box;
}

.field-content input::placeholder {
color: #8a9290;
}

.field-content input:focus {
border-color: #15933f;
}

/* =========================================================
SECURITY CARD
========================================================= */

.address-security,
.privacy-card {
width: 100%;
display: flex;
align-items: center;
gap: 18px;
margin-top: 30px;
padding: 20px;
border: 1px solid #e0e4e1;
border-radius: 18px;
background: #ffffff;
box-sizing: border-box;
}

.security-icon {
position: relative;
flex: 0 0 58px;
width: 58px;
height: 58px;
border-radius: 50%;
background: #e4f6e9;
color: #08762d;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}

.security-icon .fa-lock {
position: absolute;
font-size: 14px;
}

.address-security h3,
.privacy-card h3 {
margin: 0 0 7px;
color: #08762d;
font-size: 16px;
font-weight: 700;
}

.address-security p,
.privacy-card p {
margin: 0;
color: #202721;
font-size: 15px;
line-height: 1.6;
}

.address-security>i,
.privacy-card>i {
margin-left: auto;
font-size: 21px;
color: #111111;
}

/* =========================================================
SAVE ADDRESS
========================================================= */

.save-address-button {
width: 100%;
height: 58px;
margin-top: 20px;
border: none;
border-radius: 13px;
background: #087b3d;;
color: #ffffff;
font-family: inherit;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}

/* =========================================================
LIVE LOCATION PAGE
========================================================= */

.live-location-page {
padding-bottom: 95px;
}

.live-info-card {
width: min(650px, calc(100% - 40px));
margin: 18px auto;
padding: 22px;
display: flex;
align-items: center;
gap: 20px;
border: 1px solid #e1e6e3;
border-radius: 20px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* =========================================================
MAP
========================================================= */

.map-area {
position: relative;
width: 100%;
height: 390px;
overflow: hidden;
background:
linear-gradient(25deg,
transparent 47%,
#c9d0d6 48%,
#c9d0d6 51%,
transparent 52%),
linear-gradient(145deg,
transparent 45%,
#d4d9de 46%,
#d4d9de 48%,
transparent 49%),
linear-gradient(90deg,
#f0f2f3 1px,
transparent 1px),
linear-gradient(#f0f2f3 1px,
transparent 1px);
background-size:
300px 300px,
360px 360px,
45px 45px,
45px 45px;
background-color: #eef1f2;
}

.map-road {
position: absolute;
background: #d2d7dc;
opacity: 0.9;
}

.road-one {
width: 130%;
height: 30px;
left: -15%;
top: 48%;
transform: rotate(22deg);
}

.road-two {
width: 110%;
height: 18px;
left: -5%;
top: 63%;
transform: rotate(-37deg);
}

.road-three {
width: 100%;
height: 12px;
left: 5%;
top: 25%;
transform: rotate(53deg);
}

.map-label {
position: absolute;
color: #56606a;
font-size: 15px;
font-weight: 500;
}

.label-one {
left: 8%;
top: 27%;
font-size: 20px;
font-weight: 600;
}

.label-two {
right: 13%;
top: 27%;
}

.label-three {
left: 10%;
bottom: 20%;
transform: rotate(-35deg);
}

.map-location-button {
position: absolute;
top: 25px;
right: 25px;
width: 55px;
height: 55px;
border-radius: 15px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: #08762d;
font-size: 26px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.you-are-here {
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
padding: 17px 25px;
border-radius: 18px;
background: #ffffff;
color: #151515;
font-size: 16px;
font-weight: 700;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.blue-location-dot {
position: absolute;
left: 50%;
top: 61%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #2488e8;
border: 4px solid #ffffff;
box-shadow:
0 0 0 13px rgba(36, 136, 232, 0.15);
}

/* =========================================================
CURRENT LOCATION
========================================================= */

.current-location-card {
width: min(650px, calc(100% - 40px));
margin: -25px auto 12px;
position: relative;
z-index: 2;
padding: 20px;
display: flex;
align-items: center;
gap: 18px;
background: #ffffff;
border: 1px solid #e0e5e2;
border-radius: 18px;
box-sizing: border-box;
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.06);
}

.current-location-card .round-icon {
color: #008c2f;
}

.current-location-text {
flex: 1;
}

.current-location-text h3 {
margin: 0 0 7px;
font-size: 16px;
font-weight: 700;
}

.current-location-text p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: #333a36;
}

.current-location-card>button {
border: none;
background: transparent;
color: #08762d;
font-family: inherit;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}

/* =========================================================
PRIVACY
========================================================= */

.privacy-card {
width: min(650px, calc(100% - 40px));
margin: 0 auto 15px;
}

/* =========================================================
LOCATION BUTTONS
========================================================= */

.use-location-final,
.manual-location-button {
display: block;
width: min(650px, calc(100% - 40px));
height: 58px;
margin: 15px auto;
border-radius: 13px;
font-family: inherit;
font-size: 18px;
font-weight: 700;
cursor: pointer;
box-sizing: border-box;
}

.use-location-final {
border: none;
background: #008c2f;
color: #ffffff;
}

.use-location-final i {
margin-right: 10px;
}

.manual-location-button {
background: #ffffff;
color: #08762d;
border: 2px solid #08762d;
}

/* =========================================================
BOTTOM NAVIGATION
========================================================= */

.bottom-navigation {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 82px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
border-top: 1px solid #e2e5e3;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.bottom-navigation a {
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
color: #303936;
font-size: 13px;
}

.bottom-navigation a i {
font-size: 25px;
}

.bottom-navigation a.active {
color: #08762d;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.address-header {  
    height: 68px;  
}  

.address-header h1 {  
    font-size: 22px;  
}  

.back-button {  
    left: 18px;  
    font-size: 25px;  
}  

.header-actions {  
    right: 18px;  
    gap: 17px;  
}  

.header-actions button {  
    font-size: 24px;  
}  

.address-content {  
    width: calc(100% - 30px);  
    padding-top: 22px;  
}  

.section-title {  
    font-size: 20px;  
}  

.location-information {  
    padding: 18px;  
    gap: 14px;  
}  

.location-information h3,  
.live-info-card h3 {  
    font-size: 16px;  
}  

.location-information p,  
.live-info-card p {  
    font-size: 14px;  
    line-height: 1.6;  
}  

.round-icon,  
.field-icon,  
.security-icon {  
    flex-basis: 50px;  
    width: 50px;  
    height: 50px;  
    font-size: 23px;  
}  

.field-content input {  
    height: 55px;  
}  

.address-field {  
    gap: 13px;  
    margin-bottom: 18px;  
}  

.address-security,  
.privacy-card {  
    padding: 16px;  
    gap: 13px;  
}  

.map-area {  
    height: 360px;  
}  

.live-info-card,  
.current-location-card,  
.privacy-card,  
.use-location-final,  
.manual-location-button {  
    width: calc(100% - 30px);  
}  

.current-location-card {  
    margin-top: -22px;  
    padding: 16px;  
}  

.current-location-card .round-icon {  
    flex-basis: 48px;  
    width: 48px;  
    height: 48px;  
}  

.current-location-text p {  
    font-size: 13px;  
}  

.current-location-card>button {  
    font-size: 14px;  
}  

.bottom-navigation {  
    height: 76px;  
}  

.bottom-navigation a {  
    font-size: 11px;  
}  

.bottom-navigation a i {  
    font-size: 22px;  
}

}

/* =========================================================
SMALL PHONES
========================================================= */

@media (max-width: 420px) {

.address-header h1 {  
    font-size: 19px;  
}  

.header-actions {  
    gap: 12px;  
}  

.header-actions button {  
    font-size: 22px;  
}  

.section-title {  
    font-size: 18px;  
}  

.location-information {  
    align-items: flex-start;  
}  

.location-arrow {  
    margin-top: 8px;  
}  

.map-area {  
    height: 330px;  
}  

.you-are-here {  
    font-size: 14px;  
    padding: 14px 18px;  
}

}

/* =========================================================
REAL LIVE LOCATION MAP
========================================================= */

#liveLocationMap {
width: 100%;
height: 390px;
min-height: 330px;
z-index: 1;
}

/* Keep map controls below NONO UI */

.map-area {
position: relative;
width: 100%;
height: 390px;
overflow: hidden;
}

/* REAL MAP LOCATION BUTTON */

.map-location-button {
position: absolute;
top: 20px;
right: 20px;
z-index: 500;

width: 55px;
height: 55px;

border: none;
border-radius: 15px;

background: #ffffff;
color: #08762d;

display: flex;
align-items: center;
justify-content: center;

font-size: 25px;

cursor: pointer;

box-shadow:
0 3px 12px rgba(0, 0, 0, 0.15);

}

.map-location-button:hover {
background: #f1f8f3;
}

/* DISABLED SAVE BUTTON */

.use-location-final:disabled {
opacity: 0.55;
cursor: not-allowed;
}

/* LOCATION ACCURACY TEXT */

.current-location-text small {
color: #68716b;
font-size: 12px;
}

/* MOBILE MAP */

@media (max-width: 700px) {

.map-area {
height: 360px;
}

#liveLocationMap {
height: 360px;
}

}

@media (max-width: 420px) {

.map-area {
height: 330px;
}

#liveLocationMap {
height: 330px;
}

}

/* =========================================================
SAVE LIVE LOCATION BUTTON
========================================================= */

.save-location-button {
display: block;

width: min(650px, calc(100% - 40px));  
height: 58px;  

margin: 15px auto;  

border: none;  
border-radius: 13px;  

background: #087b3d;  
color: #ffffff;  

font-family: inherit;  
font-size: 18px;  
font-weight: 700;  

cursor: pointer;

}

.save-location-button i {
margin-right: 10px;
}

.save-location-button:disabled {
background: #b9ddc4;
cursor: not-allowed;
}

@media (max-width: 700px) {

.save-location-button {  
    width: calc(100% - 30px);  
}

}

.success-message {
    width: calc(100% - 64px);
    max-width: 1100px;
    margin: 18px auto 10px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #f5fbe8;
    border-left: 4px solid #087f3f;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.success-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #087f3f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    flex-shrink: 0;
}

.success-text {
    flex: 1;
}

.success-text h3 {
    margin: 0 0 5px;
    color: #087f3f;
    font-size: 20px;
}

.success-text p {
    margin: 3px 0;
    color: #222;
    font-size: 15px;
}

.success-close {
    border: none;
    background: transparent;
    color: #333;
    font-size: 28px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .success-message {
        width: calc(100% - 30px);
        padding: 14px;
    }
}

.google-register-container {
    width: 100%;
    height: 76px;
    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;
}

#googleRegisterButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   FACEBOOK LOGIN BUTTON
   GOOGLE-STYLE COMPACT BUTTON
========================================================= */

.facebook-google-style {
    width: 400px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 4px;

    color: #1f1f1f;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.facebook-google-style:hover {
    background: #f8f9fa;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12);
}

.facebook-google-style:active {
    background: #f1f3f4;
}

.facebook-google-style i {
    font-size: 20px;
    color: #1877f2;
}

.facebook-google-style span {
    line-height: 1;
}