/* ============================================================
   TRIP PLANNER PAGE
============================================================ */

.trip-planner-page {

    min-height: 100vh;

    background:
        #f5f8f6;

    padding-bottom: 60px;

}


/* ============================================================
   BRAND LINK
============================================================ */

.planner-brand-link {

    display: flex;

    align-items: center;

    gap: 12px;

    color: inherit;

    text-decoration: none;

}


/* ============================================================
   BACK BUTTON
============================================================ */

.back-to-map-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 10px 15px;

    border-radius: 10px;

    background: #f1f7f4;

    color: #174a3c;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}


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

.planner-hero {

    background:
        linear-gradient(135deg,
            #174a3c,
            #276b55);

    color: #ffffff;

    padding: 40px 5%;

}


.planner-hero-content {

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 18px;

}


.planner-hero-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

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

    font-size: 30px;

}


.planner-hero h2 {

    margin: 0;

    font-size: 30px;

}


.planner-hero p {

    margin: 7px 0 0;

    opacity: 0.8;

}


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

.planner-container {

    max-width: 1200px;

    margin: 30px auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 350px;

    gap: 25px;

}


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

.planner-card {

    background:
        #ffffff;

    border-radius:
        18px;

    padding:
        24px;

    margin-bottom:
        20px;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.05);

}


.planner-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

}


.planner-card-header h3 {

    margin: 0;

    color:
        #174a3c;

}


.planner-card-header p {

    margin: 5px 0 0;

    color:
        #888;

    font-size:
        12px;

}


.planner-count {

    padding:
        7px 11px;

    border-radius:
        20px;

    background:
        #e9f4ef;

    color:
        #174a3c;

    font-size:
        11px;

    font-weight:
        700;

}


/* ============================================================
   DESTINATIONS
============================================================ */

.planner-destinations {

    display:
        grid;

    gap:
        12px;

}


.planner-destination {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        12px;

    border:
        1px solid #eeeeee;

    border-radius:
        14px;

}


.planner-destination img {

    width:
        90px;

    height:
        75px;

    object-fit:
        cover;

    border-radius:
        10px;

}


.planner-destination-info {

    flex:
        1;

}


.planner-destination-info h4 {

    margin:
        0;

    color:
        #174a3c;

}


.planner-destination-info p {

    margin:
        5px 0;

    color:
        #777;

    font-size:
        12px;

}


.remove-planner-place {

    border:
        none;

    background:
        transparent;

    color:
        #d64545;

    cursor:
        pointer;

    font-size:
        18px;

}


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

.planner-empty-state {

    text-align:
        center;

    padding:
        40px 20px;

}


.planner-empty-state>div {

    font-size:
        50px;

}


.planner-empty-state h3 {

    color:
        #174a3c;

}


.planner-empty-state p {

    color:
        #888;

    font-size:
        13px;

}


.explore-map-btn {

    display:
        inline-block;

    margin-top:
        10px;

    padding:
        10px 16px;

    border-radius:
        9px;

    background:
        #174a3c;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

}


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

.planner-form-grid {

    display:
        grid;

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

    gap:
        15px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.form-group label {

    color:
        #555;

    font-size:
        12px;

    font-weight:
        700;

}


.form-group input,
.form-group select {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        11px;

    border:
        1px solid #dddddd;

    border-radius:
        9px;

    background:
        #ffffff;

    font-size:
        13px;

}


/* ============================================================
   OPTIONS
============================================================ */

.option-grid {

    display:
        grid;

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

    gap:
        12px;

}


.option-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        16px;

    border:
        1px solid #eeeeee;

    border-radius:
        12px;

    cursor:
        pointer;

}


.option-card input {

    position:
        absolute;

    opacity:
        0;

}


.option-card:has(input:checked) {

    border-color:
        #174a3c;

    background:
        #f1f7f4;

}


.option-icon {

    font-size:
        25px;

}


.option-card strong {

    color:
        #174a3c;

    font-size:
        13px;

}


.option-card small {

    color:
        #888;

    font-size:
        10px;

}


/* ============================================================
   TEXTAREA
============================================================ */

.special-requests {

    width:
        100%;

    box-sizing:
        border-box;

    resize:
        vertical;

    padding:
        13px;

    border:
        1px solid #dddddd;

    border-radius:
        10px;

    font-family:
        inherit;

    font-size:
        13px;

}


/* ============================================================
   SIDEBAR
============================================================ */

.planner-sidebar {

    position:
        sticky;

    top:
        100px;

    height:
        fit-content;

}


.summary-card {

    background:
        #ffffff;

    border-radius:
        18px;

    padding:
        22px;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.06);

}


.summary-header {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid #eeeeee;

}


.summary-header>span {

    font-size:
        25px;

}


.summary-header h3 {

    margin:
        0;

    color:
        #174a3c;

}


.summary-header p {

    margin:
        4px 0 0;

    color:
        #888;

    font-size:
        11px;

}


/* ============================================================
   SUMMARY STAT
============================================================ */

.summary-stat {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        15px 0;

    border-bottom:
        1px solid #f0f0f0;

}


.summary-stat span {

    color:
        #777;

    font-size:
        12px;

}


.summary-stat strong {

    color:
        #174a3c;

    font-size:
        12px;

    text-align:
        right;

}


/* ============================================================
   REQUEST QUOTE
============================================================ */

.request-quote-button {

    width:
        100%;

    margin-top:
        20px;

    padding:
        13px;

    border:
        none;

    border-radius:
        10px;

    background:
        #174a3c;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

}


.quote-note {

    margin:
        12px 0 0;

    color:
        #888;

    font-size:
        10px;

    line-height:
        1.5;

    text-align:
        center;

}


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

@media (max-width: 850px) {

    .planner-container {

        grid-template-columns:
            1fr;

    }


    .planner-sidebar {

        position:
            static;

    }


    .main-navigation {

        display:
            none;

    }

}


@media (max-width: 600px) {

    .planner-container {

        padding:
            0 12px;

    }


    .planner-form-grid {

        grid-template-columns:
            1fr;

    }


    .option-grid {

        grid-template-columns:
            1fr;

    }


    .planner-card {

        padding:
            18px;

    }


    .planner-hero {

        padding:
            30px 20px;

    }


    .planner-hero h2 {

        font-size:
            24px;

    }


    .planner-destination img {

        width:
            70px;

        height:
            65px;

    }

}