/* ==================================================
MADDY LÍ LEGAL PAGES
================================================== */

body {

    margin: 0;

    background: #000;

    color: white;

    font-family: Arial, sans-serif;

}

html {

    scroll-behavior: smooth;

}

::selection {

    background: white;

    color: black;

}

a {

    text-decoration: none;

}

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

.legal-hero {

    padding: 160px 60px 100px;

    text-align: center;

    border-bottom: 1px solid rgba(255,255,255,0.08);

}

.legal-hero h1 {

    font-size: 72px;

    font-weight: 200;

    letter-spacing: 12px;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.legal-hero p {

    max-width: 800px;

    margin: auto;

    color: #9f9f9f;

    font-size: 18px;

    line-height: 1.8;

    letter-spacing: 1px;

}

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

.legal-content {

    max-width: 1000px;

    margin: auto;

    padding: 100px 60px;

}

.legal-content section {

    margin-bottom: 80px;

}

.legal-content h2 {

    font-size: 24px;

    font-weight: 300;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 1px solid rgba(255,255,255,0.08);

}

.legal-content p {

    color: #a5a5a5;

    font-size: 16px;

    line-height: 2;

}

.legal-content ul {

    padding-left: 20px;

}

.legal-content li {

    color: #a5a5a5;

    line-height: 2;

    margin-bottom: 10px;

}


/* ==================================================
TOP BAR
================================================== */

.legal-overlay {

    backdrop-filter: blur(3px);

    position: fixed;

    top: 0;
    left: 0;

    height: 90px;
    width: 100%;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding: 60px;

    box-sizing: border-box;

    z-index: 9999;

    pointer-events: none;

}

.header-actions {

    display: flex;

    align-items: center;

    gap: 18px;

    pointer-events: auto;

}

/* ==================================================
BASKET
================================================== */

.basket-link {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    border: 1px solid rgba(255,255,255,0.3);

    background: rgba(255,255,255,0.04);

    transition: all 0.3s ease;

}

.basket-link:hover {

    background: white;

    color: black;

}

/* ==================================================
NEWSLETTER
================================================== */

.newsletter-link {

    height: 42px;

    padding: 0 22px;

    display: flex;

    align-items: center;

    color: white;

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;

    border: 1px solid rgba(255,255,255,0.3);

    background: rgba(255,255,255,0.04);

    transition: all 0.3s ease;

}

.newsletter-link:hover {

    background: white;

    color: black;

}

/* ==================================================
LANGUAGE
================================================== */

.language-selector {

    background: transparent;

    border: 1px solid rgba(255,255,255,0.25);

    color: white;

    padding: 10px 14px;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.3s ease;

}

.language-selector:hover {

    border-color: white;

}

.language-selector option {

    background: black;

    color: white;

}

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

.legal-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 40px;

    border: 1px solid rgba(255,255,255,0.3);

    color: white;

    text-transform: uppercase;

    letter-spacing: 3px;

    transition: all 0.4s ease;

}

.legal-button:hover {

    background: white;

    color: black;

}



/* ==================================================
TRACK ORDER
================================================== */

.track-container {

    max-width:650px;

    margin:auto;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.1);

    padding:60px;

    backdrop-filter:blur(10px);

}

.input-group {

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:30px;

}

.input-group label {

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#888;

}

.input-group input {

    background:transparent;

    border:none;

    border-bottom:1px solid rgba(255,255,255,0.3);

    color:white;

    padding:15px 5px;

    font-size:16px;

    outline:none;

}

.input-group input:focus {

    border-bottom:1px solid white;

}

#trackingForm button {

    margin-top:30px;

    width:100%;

    height:60px;

    background:transparent;

    border:1px solid rgba(255,255,255,0.3);

    color:white;

    text-transform:uppercase;

    letter-spacing:4px;

    cursor:pointer;

    transition:.4s;

}

#trackingForm button:hover {

    background:white;

    color:black;

}

#tracking-result {

    margin-top:50px;

    padding:30px;

    border:1px solid rgba(255,255,255,0.15);

    color:#aaa;

    display:none;

}



/* ==================================================
WHATSAPP CONTACT
================================================== */


.whatsapp-container {

    max-width:650px;

    margin:auto;

    text-align:center;

    padding:70px 50px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

}

.whatsapp-container h2 {

    font-size:28px;

    letter-spacing:5px;

    font-weight:300;

    text-transform:uppercase;

}

.whatsapp-container p {

    color:#9f9f9f;

    font-size:17px;

    line-height:2;

    margin:35px auto;

}

.whatsapp-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:60px;

    padding:0 45px;

    border:1px solid rgba(255,255,255,0.3);

    color:white;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:12px;

    transition:.4s;

}

.whatsapp-button:hover {

    background:white;

    color:black;

}


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

.luxury-footer {

    background: #f5f1eb;

    padding: 80px 60px;

    margin-top: 120px;

}

.footer-container {

    display: flex;

    justify-content: space-between;

    gap: 60px;

    flex-wrap: wrap;

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 14px;

    min-width: 180px;

}

.footer-column h3 {

    color: black;

    font-size: 15px;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 10px;

}

.footer-column a {

    color: #333;

    text-decoration: none;

    font-size: 14px;

    transition: opacity 0.3s ease;

}

.footer-column a:hover {

    opacity: 0.5;

}

/* ==================================================
SOCIAL ICONS
================================================== */

.social-icons {

    display: flex;

    gap: 14px;

    margin-top: 10px;

}

.social-icons a {

    width: 34px;

    height: 34px;

    border: 1px solid black;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: black;

    transition: all 0.3s ease;

}

.social-icons a:hover {

    background: black;

    color: white;

}

/* ==================================================
RESPONSIVE
================================================== */

@media (max-width: 768px) {

.legal-hero {

    padding: 140px 30px 70px;

}

.legal-hero h1 {

    font-size: 42px;

    letter-spacing: 6px;

}

.legal-content {

    padding: 70px 30px;

}

.overlay {

    padding: 25px;

}

.header-actions {

    gap: 10px;

}

.footer-container {

    flex-direction: column;

    gap: 40px;

}

}

/*===================================================
INSTAGRAM PAGE
================================================== */

.instagram-container {

    max-width:700px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

}

.instagram-container h2 {

    font-size:32px;

    font-weight:300;

    letter-spacing:6px;

    text-transform:uppercase;

}

.instagram-container p {

    color:#9f9f9f;

    text-align: justify;

    font-size:17px;

    line-height:2;

    margin:35px 0;

}

.instagram-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 60px;

    padding: 0 50px;

    border: 1px solid rgba(255,255,255,0.3);

    color: white;

    font-size: 12px;

    letter-spacing: 4px;

    text-transform: uppercase;

    transition: .4s;

    cursor: pointer;
}

.instagram-button:hover {

    background: #ffffff;

    color: #000000;

    border-color: #ffffff;
}


/*===================================================
TIKTOK PAGE
===================================================*/

.tiktok-container {

    max-width:700px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);
}

.tiktok-container h2 {

    font-size:32px;

    font-weight:300;

    letter-spacing:6px;

    text-transform:uppercase;
}

.tiktok-container p {

    text-align: justify;

    color:#9f9f9f;

    font-size:17px;

    line-height:2;

    margin:35px 0;
}

.tiktok-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:60px;

    padding:0 50px;

    border:1px solid rgba(255,255,255,0.3);

    color: #ffffff;

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    transition:.4s;

    cursor:pointer;
}

.tiktok-button:hover {

    background: #ffffff;

    color: #000000;

    border-color: #ffffff;
}