/* =====================================================
   TABARAK HAJI PLUS
   MOBILE UI
===================================================== */

:root {

    --green: #006f61;
    --green-dark: #00584d;
    --green-light: #e7f3f1;

    --gold: #e8aa20;
    --gold-light: #fff3d8;

    --text: #075e56;
    --gray: #71858a;
    --light: #f5f8f7;

    --white: #ffffff;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: #f5f8f7;

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =====================================================
   APP
===================================================== */

.app {

    width: 100%;

    max-width: 900px;

    margin: auto;

    min-height: 100vh;

    background: #ffffff;

    padding-bottom: 95px;

}


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

.top-header {

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 30px;

    background: #fff;

}


.logo-area {

    display: flex;

    align-items: center;

    text-decoration: none;

}


.logo-area img {

    width: 285px;

    max-width: 72vw;

    height: auto;

    display: block;

}


.notification-btn {

    position: relative;

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 5px 22px rgba(0,0,0,.08);

    color: var(--green);

    font-size: 27px;

    cursor: pointer;

}


.notification-dot {

    position: absolute;

    right: 13px;

    top: 10px;

    width: 10px;

    height: 10px;

    background: #ed2636;

    border-radius: 50%;

    border: 2px solid white;

}


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

.haji-hero {

    position: relative;

    height: 350px;

    margin: 5px 30px 25px;

    border-radius: 28px;

    overflow: hidden;

}


.hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,92,79,.98) 0%,
            rgba(0,92,79,.86) 28%,
            rgba(0,92,79,.40) 52%,
            rgba(0,92,79,0) 80%
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    width: 50%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 50px;

    color: #fff;

}


.hero-content h1 {

    font-family: Georgia, serif;

    font-size: 53px;

    line-height: .98;

    margin-bottom: 22px;

}


.hero-content h1 span {

    display: block;

    color: #f2b328;

}


.hero-content p {

    max-width: 370px;

    font-size: 20px;

    line-height: 1.45;

    color: #f5ffff;

}


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

.category-section {

    padding: 0 30px 20px;

}


.category-scroll {

    display: flex;

    gap: 14px;

    overflow-x: auto;

    scrollbar-width: none;

}


.category-scroll::-webkit-scrollbar {

    display: none;

}


.category-btn {

    flex: 0 0 auto;

    min-width: 150px;

    height: 65px;

    border: none;

    border-radius: 25px;

    background: #f5f7f7;

    color: var(--text);

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s;

}


.category-btn.active {

    background: var(--green);

    color: white;

}


.category-btn:hover {

    transform: translateY(-2px);

}


/* =====================================================
   PACKAGE LIST
===================================================== */

.package-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 0 30px 25px;

}


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

.haji-card {

    display: grid;

    grid-template-columns: 42% 58%;

    min-height: 290px;

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    box-shadow:
        0 7px 25px rgba(0,0,0,.07);

}


.package-image {

    position: relative;

    min-height: 290px;

    overflow: hidden;

}


.package-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.package-label {

    position: absolute;

    top: 25px;

    left: 25px;

    padding: 12px 20px;

    border-radius: 18px;

    background: var(--green);

    color: white;

    font-size: 16px;

    font-weight: 700;

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

}


.package-label.gold {

    background: var(--gold);

}


.package-label.platinum {

    background: var(--green);

}


/* =====================================================
   PACKAGE INFO
===================================================== */

.package-info {

    position: relative;

    padding: 28px 30px;

}


.package-info h2 {

    font-family: Georgia, serif;

    font-size: 34px;

    margin-bottom: 3px;

    color: var(--text);

}


.duration {

    color: #63787d;

    font-size: 19px;

    margin-bottom: 22px;

}


/* =====================================================
   FACILITY
===================================================== */

.facility-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-bottom: 24px;

}


.facility {

    display: flex;

    align-items: center;

    gap: 14px;

}


.facility > i {

    color: var(--green);

    font-size: 32px;

    width: 38px;

    text-align: center;

}


.facility span {

    display: block;

    font-size: 16px;

    color: #314c50;

    margin-bottom: 5px;

}


.facility strong {

    display: block;

    font-size: 16px;

    color: #687c81;

    font-weight: 500;

}


/* =====================================================
   PRICE
===================================================== */

.price {

    display: flex;

    flex-direction: column;

}


.price span {

    color: #9ba6a8;

    font-size: 16px;

    margin-bottom: 4px;

}


.price strong {

    font-size: 34px;

    color: var(--green);

}


.gold-price strong {

    color: var(--gold);

}


/* =====================================================
   DETAIL BUTTON
===================================================== */

.detail-btn {

    position: absolute;

    right: 28px;

    bottom: 28px;

    width: 62px;

    height: 62px;

    border: none;

    border-radius: 50%;

    background: #e5f2f0;

    color: var(--green);

    font-size: 24px;

    cursor: pointer;

    transition: .2s;

}


.detail-btn:hover {

    transform: scale(1.08);

}


.gold-detail {

    background: var(--gold-light);

    color: var(--gold);

}


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

.bottom-nav {

    position: fixed;

    z-index: 100;

    bottom: 12px;

    left: 50%;

    transform: translateX(-50%);

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

    height: 92px;

    background: var(--green);

    border-radius: 30px;

    display: grid;

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

    align-items: center;

    padding: 8px;

    box-shadow:
        0 10px 30px rgba(0,80,70,.25);

}


.nav-item {

    height: 76px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 7px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    border-radius: 20px;

}


.nav-item i {

    font-size: 25px;

}


.nav-item.active {

    color: #ffd02d;

}


.nav-item:hover {

    color: #ffd02d;

}


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

@media (max-width: 700px) {

    .top-header {

        height: 90px;

        padding: 10px 18px;

    }


    .logo-area img {

        width: 190px;

    }


    .notification-btn {

        width: 48px;

        height: 48px;

        font-size: 22px;

    }


    .haji-hero {

        height: 250px;

        margin: 5px 16px 18px;

        border-radius: 20px;

    }


    .hero-content {

        width: 58%;

        padding-left: 22px;

    }


    .hero-content h1 {

        font-size: 37px;

        margin-bottom: 12px;

    }


    .hero-content p {

        font-size: 13px;

        line-height: 1.4;

    }


    .category-section {

        padding: 0 16px 15px;

    }


    .category-btn {

        min-width: 120px;

        height: 48px;

        font-size: 13px;

        border-radius: 18px;

    }


    .package-list {

        padding: 0 16px 20px;

        gap: 12px;

    }


    .haji-card {

        grid-template-columns: 44% 56%;

        min-height: 180px;

        border-radius: 18px;

    }


    .package-image {

        min-height: 180px;

    }


    .package-label {

        top: 14px;

        left: 14px;

        padding: 8px 12px;

        font-size: 11px;

        border-radius: 12px;

    }


    .package-info {

        padding: 17px 15px;

    }


    .package-info h2 {

        font-size: 24px;

    }


    .duration {

        font-size: 13px;

        margin-bottom: 15px;

    }


    .facility-grid {

        gap: 8px;

        margin-bottom: 12px;

    }


    .facility {

        gap: 6px;

    }


    .facility > i {

        font-size: 19px;

        width: 22px;

    }


    .facility span {

        font-size: 10px;

        margin-bottom: 2px;

    }


    .facility strong {

        font-size: 9px;

    }


    .price span {

        font-size: 10px;

    }


    .price strong {

        font-size: 18px;

    }


    .detail-btn {

        right: 12px;

        bottom: 12px;

        width: 42px;

        height: 42px;

        font-size: 17px;

    }


    .bottom-nav {

        height: 68px;

        bottom: 8px;

        width: calc(100% - 20px);

        border-radius: 20px;

    }


    .nav-item {

        height: 58px;

        font-size: 9px;

        gap: 4px;

    }


    .nav-item i {

        font-size: 19px;

    }

}


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

@media (max-width: 480px) {

    .app {

        max-width: 100%;

    }


    .logo-area img {

        width: 175px;

    }


    .haji-hero {

        height: 220px;

    }


    .hero-content {

        width: 62%;

    }


    .hero-content h1 {

        font-size: 31px;

    }


    .hero-content p {

        font-size: 11px;

    }


    .haji-card {

        grid-template-columns: 43% 57%;

    }


    .package-image {

        min-height: 170px;

    }


    .package-info {

        padding: 13px 11px;

    }


    .package-info h2 {

        font-size: 20px;

    }


    .duration {

        font-size: 10px;

    }


    .facility-grid {

        grid-template-columns: 1fr 1fr;

        gap: 5px;

    }


    .facility strong {

        font-size: 8px;

    }


    .price strong {

        font-size: 16px;

    }


    .detail-btn {

        width: 37px;

        height: 37px;

        font-size: 14px;

    }


    .bottom-nav {

        height: 64px;

    }

}