/* =====================================================
   TRAVEL PLANNER
   STYLE.CSS (PART 1)
===================================================== */

/* =====================
   RESET
===================== */

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

html {
    scroll-behavior: smooth;
}

:root {

    --primary: #14b8a6;
    --primary-dark: #0f766e;

    --secondary: #f59e0b;
    --secondary-dark: #d97706;

    --danger: #ef4444;
    --success: #22c55e;

    --bg: #eef5f7;
    --card: #ffffff;

    --text: #1f2937;
    --muted: #64748b;

    --border: #dbe4ea;

    --shadow: 0 10px 30px rgba(0, 0, 0, .08);
    --shadow-hover: 0 18px 40px rgba(20, 184, 166, .18);

    --radius: 16px;
}

/* =====================
   BODY
===================== */

body {

    font-family: "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

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

.hero {

    min-height: 420px;

    background:
        linear-gradient(rgba(9, 31, 56, .75), rgba(20, 184, 166, .45)),
        url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80");

    background-size: cover;
    background-position: center;

}

.hero-overlay {

    padding: 30px 8%;
}

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

.navbar {

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

}

.logo {

    color: white;
    text-decoration: none;

    font-size: 1.8rem;
    font-weight: 700;

    transition: .3s;
}

.logo:hover {

    color: #fde68a;
    letter-spacing: 1px;
}

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

.nav-actions {

    display: flex;
    gap: 15px;
}

.btn {

    padding: 12px 22px;

    border: none;
    border-radius: 10px;

    cursor: pointer;

    font-weight: 600;

    transition: .3s;
}

.btn:hover {

    transform: translateY(-3px);
}

.btn:active {

    transform: scale(.96);
}

.btn-primary {

    background: var(--primary);
    color: white;
}

.btn-primary:hover {

    background: var(--primary-dark);
}

.btn-light {

    color: white;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(8px);
}

.btn-light:hover {

    background: rgba(255, 255, 255, .28);
}

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

.hero-content {

    text-align: center;

    margin-top: 90px;

    color: white;

    animation: fadeDown .8s ease;
}

.eyebrow {

    letter-spacing: 4px;

    opacity: .9;

    margin-bottom: 15px;
}

.hero-content h1 {

    font-size: 3.3rem;

    margin-bottom: 15px;
}

.trip-meta {

    font-size: 1.1rem;

    opacity: .95;
}

/* =====================
   MAIN
===================== */

.container {

    width: min(1200px, 92%);

    margin: -70px auto 60px;
}

/* =====================
   SECTION CARD
===================== */

.section-card {

    background: var(--card);

    border-radius: var(--radius);

    padding: 30px;

    margin-bottom: 30px;

    box-shadow: var(--shadow);

    transition: .35s;

    animation: fadeUp .7s ease;
}
.card1 {

    margin-top: 8%;
}

.section-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-hover);
}

/* =====================
   HEADINGS
===================== */

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}

.section-heading h2 {

    position: relative;

    display: inline-block;
}

.section-heading h2::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 55%;

    height: 4px;

    border-radius: 20px;

    background: linear-gradient(to right, var(--primary), var(--secondary));

    transition: .4s;
}

.section-card:hover .section-heading h2::after {

    width: 100%;
}

.section-heading p {

    color: var(--muted);

    margin-top: 8px;
}

.compact {

    margin-bottom: 20px;
}

/* =====================
   FORM GRID
===================== */

.overview-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;
}

.info-item {

    display: flex;

    flex-direction: column;
}

.info-label {

    margin-bottom: 8px;

    font-weight: 600;
}

/* =====================
   INPUT
===================== */

input {

    width: 100%;

    padding: 14px;

    border-radius: 10px;

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

    background: #fcfdff;

    font-size: .95rem;

    transition: .3s;
}

input:hover {

    border-color: var(--primary);
}

input:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(20, 184, 166, .15);

    transform: scale(1.02);
}

/* =====================
   SAVE BUTTON
===================== */

#tripForm button {

    margin-top: 25px;
}

#submit-result {

    margin-top: 15px;

    color: var(--success);

    font-weight: 600;
}

/* =====================
   INPUT BOXES
===================== */

.input-box,
.activity-form {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 15px;

    margin-bottom: 25px;
}

.input-box button {

    border: none;

    border-radius: 10px;

    background: var(--primary);

    color: white;

    cursor: pointer;

    font-weight: 600;

    transition: .3s;
}

.input-box button:hover {

    background: var(--primary-dark);

    transform: translateY(-3px);
}

/* =====================
   DETAIL CARD
===================== */

.detail-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #f8fcfc;

    border-left: 6px solid var(--primary);

    padding: 22px;

    border-radius: 12px;

    transition: .35s;
}

.detail-card:hover {

    transform: translateX(8px);

    box-shadow: 0 10px 25px rgba(20, 184, 166, .15);
}

.detail-card h3 {

    margin-bottom: 6px;
}

.detail-card p {

    color: var(--muted);
}

.detail-card strong {

    color: var(--primary);

    font-size: 1.3rem;
}

/* =====================
   ANIMATIONS
===================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(35px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }

}

@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-30px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }

}
/* =====================================================
   STYLE.CSS (PART 2)
   Continue below Part 1
===================================================== */


/* =========================
   ACTIVITIES SECTION
========================= */

.activities-heading {
    align-items: center;
}

#add-activity-btn {
    transition: .3s;
}

#add-activity-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(20, 184, 166, .25);
}


/* =========================
   TABLE
========================= */

.table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

thead {

    background: linear-gradient(90deg,
            var(--primary),
            var(--primary-dark));

    color: white;
}

th {

    padding: 18px;
    text-align: left;
    font-weight: 600;
}

td {

    padding: 16px;
}

tbody tr {

    transition: .3s;
    border-bottom: 1px solid var(--border);
}

tbody tr:nth-child(even) {

    background: #fbfdfd;
}

tbody tr:hover {

    background: #ecfeff;
    transform: scale(1.01);
}


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

table button {

    border: none;
    cursor: pointer;

    padding: 8px 14px;

    border-radius: 8px;

    color: white;

    margin-right: 8px;

    font-weight: 600;

    transition: .3s;
}

table button:first-child {

    background: var(--secondary);
}

table button:first-child:hover {

    background: var(--secondary-dark);

    transform: translateY(-2px);
}

table button:last-child {

    background: var(--danger);
}

table button:last-child:hover {

    background: #dc2626;

    transform: translateY(-2px);
}


/* =========================
   ACTIVITY SUMMARY
========================= */

.activity-summary {

    display: flex;

    justify-content: flex-end;

    gap: 40px;

    margin-top: 25px;
}

.activity-summary div {

    background: #f8fcfc;

    padding: 18px 24px;

    border-radius: 12px;

    min-width: 170px;

    text-align: center;

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

    transition: .3s;
}

.activity-summary div:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 25px rgba(20, 184, 166, .15);
}

.activity-summary span {

    display: block;

    color: var(--muted);

    margin-bottom: 8px;
}

.activity-summary strong {

    font-size: 1.5rem;

    color: var(--primary);
}


/* =========================
   COST SUMMARY
========================= */

.cost-summary {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}

.cost-box {

    width: 180px;

    background: white;

    border-radius: 15px;

    padding: 25px;

    text-align: center;

    box-shadow: var(--shadow);

    transition: .35s;
}

.cost-box:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0, 0, 0, .12);
}

.cost-box span {

    display: block;

    color: var(--muted);

    margin-bottom: 12px;
}

.cost-box strong {

    font-size: 1.5rem;
}

.accommodation-box {

    border-top: 5px solid #14b8a6;
}

.accommodation-box strong {

    color: #14b8a6;
}

.transportation-box {

    border-top: 5px solid #3b82f6;
}

.transportation-box strong {

    color: #3b82f6;
}

.activities-box {

    border-top: 5px solid #f59e0b;
}

.activities-box strong {

    color: #f59e0b;
}

.total-box {

    border-top: 5px solid #ef4444;
}

.total-box strong {

    color: #ef4444;
}

.operator {

    font-size: 2rem;

    font-weight: bold;

    color: #94a3b8;
}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar {

    width: 10px;
}

::-webkit-scrollbar-track {

    background: #edf2f7;
}

::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary-dark);
}


/* =========================
   SELECTION
========================= */

::selection {

    background: var(--primary);
    color: white;
}


/* =========================
   FADE ANIMATION
========================= */

@keyframes floatCard {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }

}

.total-box {

    animation: floatCard 3s ease-in-out infinite;
}


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

@media(max-width:992px) {

    .hero-content h1 {

        font-size: 2.6rem;
    }

    .activity-summary {

        justify-content: center;
    }

}


@media(max-width:768px) {

    .navbar {

        flex-direction: column;

        gap: 20px;
    }

    .nav-actions {

        flex-wrap: wrap;

        justify-content: center;
    }

    .hero {

        min-height: 500px;
    }

    .hero-content {

        margin-top: 60px;
    }

    .hero-content h1 {

        font-size: 2.2rem;
    }

    .section-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .activity-summary {

        flex-direction: column;

        align-items: center;
    }

    .activity-summary div {

        width: 100%;
    }

    .cost-summary {

        flex-direction: column;
    }

    .operator {

        display: none;
    }

    .cost-box {

        width: 100%;
    }

}


@media(max-width:500px) {

    .hero-content h1 {

        font-size: 1.8rem;
    }

    .logo {

        font-size: 1.4rem;
    }

    .section-card {

        padding: 20px;
    }

    th,
    td {

        padding: 12px;
        font-size: .9rem;
    }

    input {

        padding: 12px;
    }

}