* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --dark: #07111f;
    --dark-2: #0d1b2a;

    --orange: #ff7a00;
    --gold: #ffb703;

    --text: #172033;
    --muted: #6c7484;

    --light: #f5f7fa;

    --white: #ffffff;

    --border: #e7eaf0;

    --shadow:
        0 20px 50px rgba(15, 23, 42, 0.10);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    background: var(--light);

    color: var(--text);
}


/* =====================================
   NAVBAR
===================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 78px;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 55px;

    background:
        rgba(7, 17, 31, 0.92);

    backdrop-filter: blur(18px);

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


.brand {

    display: flex;

    align-items: center;

    gap: 13px;
}


.brand-logo {

    width: 44px;
    height: 44px;

    border-radius: 14px;

    display: flex;

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

    background:
        linear-gradient(135deg,
            var(--orange),
            var(--gold));

    color: white;

    font-size: 20px;
}


.brand-text h1 {

    color: white;

    font-size: 21px;

    letter-spacing: 2px;
}

.brand-text h1 a {
    color: white;
    text-decoration: none;
}


.brand-text span {

    display: block;

    color: #aeb8c6;

    font-size: 11px;

    margin-top: 3px;
}


.nav-center {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);
}


.nav-pill {

    color: white;

    padding: 9px 17px;

    border-radius: 30px;

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

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

    font-size: 13px;

    display: flex;

    align-items: center;

    gap: 8px;
}


.nav-pill i {
    color: var(--gold);
}


.nav-actions {

    display: flex;

    align-items: center;

    gap: 18px;
}


.create-zone-btn {

    border: none;

    padding: 11px 17px;

    border-radius: 25px;

    background:
        linear-gradient(135deg,
            var(--orange),
            var(--gold));

    color: white;

    font-weight: 700;

    cursor: pointer;
}


.profile-wrapper {
    position: relative;
}


.profile-button {

    display: flex;

    align-items: center;

    gap: 9px;

    border: none;

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

    padding: 6px 12px 6px 6px;

    border-radius: 30px;

    color: white;

    cursor: pointer;
}


.profile-button img {

    width: 37px;
    height: 37px;

    border-radius: 50%;

    object-fit: cover;
}


.profile-button i {

    font-size: 11px;

    color: #aeb8c6;
}


.profile-menu {

    position: absolute;

    top: 54px;

    right: 0;

    width: 220px;

    background: white;

    border-radius: 16px;

    padding: 8px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);

    display: none;
}


.profile-menu.show {
    display: block;
}


.profile-menu a {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--text);

    padding: 12px;

    border-radius: 10px;

    font-size: 14px;
}


.profile-menu a:hover {
    background: #f4f6f9;
}


.profile-menu a i {
    width: 18px;
    color: var(--orange);
}


.profile-menu .logout {
    color: #d92d20;
}


.menu-divider {

    height: 1px;

    background: var(--border);

    margin: 5px 0;
}



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

.hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        120px 7% 70px;
}


.hero-background {

    position: absolute;

    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1500534623283-312aade485b7?w=1800&q=85"
        );

    background-size: cover;

    background-position: center;
}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(3, 10, 20, 0.93) 0%,
            rgba(3, 10, 20, 0.78) 48%,
            rgba(3, 10, 20, 0.35) 100%);
}


.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;
}


.hero-copy {
    max-width: 720px;
}


.collection-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--gold);

    font-weight: 700;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 20px;
}


.hero-copy h2 {

    color: white;

    font-size:
        clamp(45px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

    margin-bottom: 25px;
}


.hero-copy h2 span {
    color: var(--gold);
}


.hero-copy p {

    color: #d7dce5;

    font-size: 17px;

    line-height: 1.75;

    max-width: 640px;
}


.hero-actions {

    display: flex;

    gap: 12px;

    margin-top: 32px;
}


.primary-btn,
.secondary-btn {

    border: none;

    padding: 14px 21px;

    border-radius: 14px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 9px;
}


.primary-btn {

    color: white;

    background:
        linear-gradient(135deg,
            var(--orange),
            var(--gold));
}


.secondary-btn {

    color: white;

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

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


.hero-stats {

    display: flex;

    gap: 15px;
}


.hero-stat {

    min-width: 110px;

    padding: 20px;

    border-radius: 20px;

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

    backdrop-filter: blur(15px);

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

    text-align: center;

    color: white;
}


.hero-stat strong {

    display: block;

    font-size: 30px;

    color: var(--gold);

    margin-bottom: 5px;
}


.hero-stat span {

    font-size: 11px;

    color: #d7dce5;
}



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

.map-section {

    padding: 80px 7% 40px;
}


.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 25px;
}


.section-kicker {

    color: var(--orange);

    font-weight: 800;

    font-size: 11px;

    letter-spacing: 2px;
}


.section-heading h2,
.zones-heading h2 {

    font-size: 34px;

    margin-top: 7px;

    letter-spacing: -1px;
}


.section-heading p,
.zones-heading p {

    color: var(--muted);

    margin-top: 8px;
}


.map-legend {

    display: flex;

    gap: 20px;

    color: var(--muted);

    font-size: 13px;
}


.map-legend div {

    display: flex;

    align-items: center;

    gap: 7px;
}


.legend-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.upcoming-dot {
    background: var(--orange);
}


.visited-dot {
    background: #22a06b;
}


.map-container {

    position: relative;

    border-radius: 26px;

    overflow: hidden;

    box-shadow: var(--shadow);

    border:
        1px solid var(--border);
}


#worldMap {

    height: 520px;

    width: 100%;
}


.map-overlay-card {

    position: absolute;

    z-index: 500;

    left: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

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

    backdrop-filter: blur(10px);

    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);
}


.map-card-icon {

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 12px;

    background: #fff0e5;

    color: var(--orange);
}


.map-overlay-card strong {

    display: block;

    font-size: 14px;
}


.map-overlay-card span {

    display: block;

    font-size: 11px;

    color: var(--muted);

    margin-top: 3px;
}



/* =====================================
   PROGRESS
===================================== */

.progress-section {

    padding: 20px 7% 50px;
}


.progress-card {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 22px;

    padding: 25px 28px;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.05);
}


.progress-info {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.progress-info span {

    font-size: 10px;

    color: var(--orange);

    font-weight: 800;

    letter-spacing: 1.5px;
}


.progress-info h3 {

    margin-top: 5px;

    font-size: 19px;
}


.progress-info strong {

    font-size: 28px;

    color: var(--orange);
}


.progress-track {

    height: 9px;

    border-radius: 20px;

    background: #edf0f4;

    margin-top: 20px;

    overflow: hidden;
}


.progress-fill {

    height: 100%;

    width: 0%;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            var(--orange),
            var(--gold));

    transition: width 0.5s ease;
}


.progress-bottom {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    font-size: 12px;

    color: var(--muted);
}



/* =====================================
   ZONES
===================================== */

.zones-section {

    padding: 25px 7% 90px;
}


.zones-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 28px;
}


.zone-counter {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    border-radius: 12px;

    background: white;

    border: 1px solid var(--border);

    font-size: 13px;

    color: var(--muted);
}


.zone-counter i {
    color: var(--orange);
}


.tabs {

    display: flex;

    gap: 8px;

    padding: 5px;

    width: fit-content;

    background: #e9edf2;

    border-radius: 14px;

    margin-bottom: 28px;
}


.tab {

    border: none;

    background: transparent;

    padding: 12px 19px;

    border-radius: 10px;

    color: var(--muted);

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;
}


.tab span {

    min-width: 22px;

    height: 22px;

    display: inline-flex;

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

    background: rgba(0, 0, 0, 0.07);

    border-radius: 50%;

    font-size: 11px;
}


.tab.active {

    background: white;

    color: var(--text);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.07);
}


.tab.active span {

    background: var(--orange);

    color: white;
}



/* =====================================
   DESTINATION CARDS
===================================== */

.destination-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill,
            minmax(310px, 1fr));

    gap: 25px;
}


.destination-card {

    background: white;

    border-radius: 23px;

    overflow: hidden;

    border:
        1px solid var(--border);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.destination-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.12);
}


.destination-image {

    height: 235px;

    position: relative;

    background-size: cover;

    background-position: center;
}


.destination-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 45%,
            rgba(0, 0, 0, 0.55));
}


.country-label {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 2;

    padding: 7px 11px;

    border-radius: 20px;

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

    font-size: 11px;

    font-weight: 800;
}


.status-label {

    position: absolute;

    right: 15px;

    top: 15px;

    z-index: 2;

    padding: 7px 11px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 800;
}


.status-upcoming {

    background: #fff1e5;

    color: var(--orange);
}


.status-visited {

    background: #e5f7ee;

    color: #168356;
}


.wonder-number {

    position: absolute;

    z-index: 3;

    bottom: 14px;

    left: 17px;

    color: white;

    font-size: 12px;

    font-weight: 700;
}


.destination-content {

    padding: 20px;
}


.destination-content h3 {

    font-size: 22px;

    margin-bottom: 4px;
}


.destination-location {

    font-size: 12px;

    color: var(--orange);

    font-weight: 700;

    margin-bottom: 12px;
}


.destination-description {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    min-height: 63px;
}


.attributes {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 16px;
}


.attribute {

    padding: 9px;

    border-radius: 10px;

    background: #f6f8fa;

    font-size: 10px;

    color: var(--muted);
}


.attribute strong {

    display: block;

    color: var(--text);

    margin-top: 3px;

    font-size: 11px;
}


.card-actions {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 17px;
}


.card-btn {

    border: none;

    padding: 11px;

    border-radius: 11px;

    cursor: pointer;

    font-weight: 700;

    font-size: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;
}


.details-btn {

    background: var(--dark);

    color: white;
}


.direction-btn {

    background: #eef2f6;

    color: var(--text);
}


.visit-btn {

    grid-column: 1 / -1;

    background:
        linear-gradient(135deg,
            var(--orange),
            var(--gold));

    color: white;
}


.visited-card .visit-btn {

    background: #e8f7f0;

    color: #168356;
}



/* =====================================
   EMPTY STATE
===================================== */

.empty-state {

    display: none;

    text-align: center;

    padding: 70px 20px;

    background: white;

    border-radius: 22px;

    border: 1px solid var(--border);
}


.empty-state.show {
    display: block;
}


.empty-state i {

    font-size: 45px;

    color: var(--orange);

    margin-bottom: 15px;
}


.empty-state h3 {
    margin-bottom: 8px;
}


.empty-state p {
    color: var(--muted);
}



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

footer {

    background: var(--dark);

    color: white;

    padding: 28px 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.footer-brand strong {

    display: block;

    letter-spacing: 2px;
}


.footer-brand span {

    color: #8894a5;

    font-size: 11px;

    margin-top: 5px;

    display: block;
}


.footer-right {

    display: flex;

    gap: 10px;

    color: #8894a5;

    font-size: 11px;
}



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

@media(max-width: 1000px) {

    .navbar {
        padding: 0 25px;
    }

    .nav-center {
        display: none;
    }

    .hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-stats {
        width: 100%;
    }

    .section-heading,
    .zones-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

}


@media(max-width: 700px) {

    .navbar {
        height: 70px;
    }

    .brand-text span {
        display: none;
    }

    .create-zone-btn {
        display: none;
    }

    .profile-button span {
        display: none;
    }

    .hero {
        padding: 120px 25px 60px;
    }

    .hero-copy h2 {
        letter-spacing: -2px;
    }

    .hero-stats {
        display: grid;

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

        gap: 8px;
    }

    .hero-stat {
        min-width: auto;

        padding: 15px 8px;
    }

    .map-section,
    .progress-section,
    .zones-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    #worldMap {
        height: 430px;
    }

    .destination-grid {
        grid-template-columns: 1fr;
    }

    footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .footer-right {
        flex-wrap: wrap;
    }

}