/* ===================================================================
   HOPNEST BASE UI FRAMEWORK
   Universal design system for:
   - Kayaking
   - Taxi
   - Stays
   - Experiences
   - Rentals
   - All future Hopnest modules

   Includes:
   ✔ Global tokens
   ✔ Typography
   ✔ Utilities
   ✔ Universal Header
   ✔ Hero Section
   ✔ Cards (Option A – raised soft cards)
   ✔ Chips
   ✔ Section system
   ✔ Modals
   ✔ Grids
   ✔ Footer
=================================================================== */


/* ============================================================
   HOPNEST GLOBAL DESIGN TOKENS — FINAL MERGED VERSION
============================================================ */
:root {

    /* ---------------------------------------------------------
       PRIMARY BRAND COLORS
    --------------------------------------------------------- */
    --hn-primary: #FF5527;
    --hn-primary-soft: #FF7A50;
    --hn-primary-bg-soft: #FFF4EF;

    /* Legacy orange aliases (kept for module compatibility) */
    --hn-orange: #FF5527;
    --hn-orange-soft: #FF7A50;

    /* ---------------------------------------------------------
       TEXT COLORS
    --------------------------------------------------------- */
    --hn-text-main: #2B2B2B;
    --hn-text: #222;                     /* Alias for main body text */
    --hn-text-muted: #6B7280;            /* Soft grey */
    --hn-text-soft: #717182;            /* Slightly darker muted */
    --hn-muted: #777;                    /* Used for old price + meta */

    /* ---------------------------------------------------------
       SURFACE / BACKGROUND COLORS
    --------------------------------------------------------- */
    --hn-bg-page: #FFFFFF;
    --hn-bg-elevated: #FFFFFF;
    --hn-bg: #F5F5F7;                    /* Neutral Hopnest background */
    --hn-bg-soft: #FAFAFA;

    /* ---------------------------------------------------------
       BORDER COLORS
    --------------------------------------------------------- */
    --hn-border: #E0E0E0;                /* Your added border tone */
    --hn-border-soft: #E5E7EB;
    --hn-border-subtle: #ECECEC;

    /* ---------------------------------------------------------
       FEEDBACK COLORS
    --------------------------------------------------------- */
    --hn-success-bg: #E9FFE9;
    --hn-success-border: #2ECC71;
    --hn-error: #D63031;

    /* ---------------------------------------------------------
       SHADOW SYSTEM
    --------------------------------------------------------- */
    --hn-shadow-sm: 0 6px 18px rgba(0,0,0,0.06);
    --hn-shadow-md: 0 12px 28px rgba(0,0,0,0.08);
    --hn-shadow-lg: 0 18px 36px rgba(0,0,0,0.12);

    /* ---------------------------------------------------------
       RADIUS SYSTEM
    --------------------------------------------------------- */
    --hn-radius-sm: 6px;
    --hn-radius-md: 12px;
    --hn-radius-lg: 20px;                /* Standard Hopnest card radius */
    --hn-radius-pill: 999px;

    /* ---------------------------------------------------------
       GRADIENTS
    --------------------------------------------------------- */
    --hn-grad-orange: linear-gradient(135deg, var(--hn-primary), var(--hn-primary-soft));

    /* ---------------------------------------------------------
       SPACING TOKENS
    --------------------------------------------------------- */
    --hn-space-xs: 6px;
    --hn-space-sm: 10px;
    --hn-space-md: 16px;
    --hn-space-lg: 24px;
    --hn-space-xl: 32px;

    /* ---------------------------------------------------------
       SECTION SPACING
    --------------------------------------------------------- */
    --hn-section-padding-y: 60px;
}


/* ============================================================
   GLOBAL RESET + UTILITIES
============================================================ */
body {
    margin: 0;
    padding: 0;
    background: var(--hn-bg-page);
    font-family: 'Poppins', sans-serif;
    color: var(--hn-text-main);
    -webkit-font-smoothing: antialiased;
}

html {
    font-family: 'Poppins', sans-serif;
}


a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: #FFEDE6;
    text-decoration: none;
}

.rupee {
    font-family: "Inter", sans-serif; /* You can change this later */
    margin-right: 1px;
}

/* Universal container */
.hn-container {
    max-width: 1200px;
    margin: 0 auto;
   /* padding: 0 16px;*/
}

/* Universal section */
.hn-section {
    padding: var(--hn-section-padding-y) 16px;
}

.hn-section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--hn-text-main);
}

.hn-section-subtitle {
    color: var(--hn-text-muted);
    font-size: 15px;
    margin-bottom: 20px;
}

/* Flex utilities */
.hn-flex { display: flex; align-items: center; }
.hn-flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Text utilities */
.hn-text-muted { color: var(--hn-text-muted); }

.hn-alert-color{color: #FF5527;}

/* ============================================================
   UNIVERSAL HEADER MODULE
============================================================ */

.hn-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--hn-border-subtle);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px 0;
}

.hn-header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.hn-header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hn-logo-box {
    background: var(--hn-primary);
    padding: 10px;
    border-radius: var(--hn-radius-sm);
}

.hn-logo-box img {
    width: 32px;
    height: 32px;
}

.hn-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--hn-text-main);
}

.hn-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hn-menu-toggle {
    display: none;
    font-size: 28px;
    color: var(--hn-primary);
    background: none;
    border: none;
    cursor: pointer;
}

/* Mobile menu */
.hn-mobile-menu {
    display: none;
    position: absolute;
    top: 65px;
    right: 16px;
    background: #fff;
    border: 1px solid var(--hn-border-subtle);
    border-radius: var(--hn-radius-lg);
    width: 300px;
    padding: 20px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    z-index: 2000;
}

.hn-mobile-menu.active {
    display: block;
}

.hn-mobile-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    color: var(--hn-primary);
    border-bottom: 1px solid #f0f0f0;
}

.hn-mobile-menu .store-buttons{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    align-items: flex-start;
}

.hn-mobile-menu .store-buttons a svg {
    width: 100%;
    height: auto;
    max-height: 48px;
}

.hn-mobile-menu .menu-item:last-child {
    border-bottom: none;
}

@media (max-width: 650px) {
    .hn-header-right { display: none !important; }
    .hn-menu-toggle { display: block; }
    .hn-logo-text { font-size: 18px; }
}


/* ============================================================
   BUTTON SYSTEM
============================================================ */

.hn-btn {
    padding: 12px 18px;
    border-radius: var(--hn-radius-md);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.18s ease-in-out;
    text-decoration: none;
}

.hn-btn-primary {
    background: var(--hn-primary);
    color: #fff;
    border-color: var(--hn-primary);
}

.hn-btn-primary:hover {
    background: var(--hn-primary-soft);
    transform: translateY(-1px);
}

.hn-btn-outline {
    background: #fff;
    color: var(--hn-primary);
    border-color: var(--hn-primary);
}

.hn-btn-outline:hover {
    background: var(--hn-primary-soft);
    color: #fff;
}


/* ============================================================
   HERO SECTION (Universal)
============================================================ */

.hn-hero {
    position: relative;
    padding: 130px 18px 150px;
    text-align: center;
    color: white;

    background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%),
        var(--hn-hero-bg, url(''));
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hn-hero-content {
    max-width: 860px;
    margin: 0 auto;
}

.hn-hero-title {
    font-size: clamp(28px, 7vw, 44px);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
    text-shadow: 0 12px 28px rgba(0,0,0,0.75);
}

.hn-hero-support {
    font-size: clamp(15px, 4vw, 18px);
    margin-bottom: 32px;
    opacity: 0.9;
}

/* Hero CTA card */
.hn-hero-cta-card {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(16px);
    padding: 26px 30px;
    border-radius: var(--hn-radius-lg);
    box-shadow: var(--hn-shadow-lg);
    max-width: 460px;
    margin: 10px auto 0;
}

.hn-hero-cta-title {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.95;
}

.hn-hero-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 10px;
}

/* Trust badges */
.hn-hero-trust {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hn-hero-trust-item {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    padding: 10px 16px;
    border-radius: var(--hn-radius-pill);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.22);
}


/* ============================================================
   UNIVERSAL CARD SYSTEM (Option A style)
============================================================ */

.hn-card {
    background: var(--hn-bg-elevated);
    border-radius: var(--hn-radius-lg);
    border: 1px solid var(--hn-border-soft);
    box-shadow: var(--hn-shadow-md);
    overflow: hidden;
    transition: .25s ease;
}

.hn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15,23,42,0.18);
}

.hn-card-body {
    padding: 16px;
}

.hn-card-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--hn-text-main);
}

.hn-card-subtext {
    font-size: 14px;
    color: var(--hn-text-soft);
}


/* ============================================================
   CHIP SYSTEM
============================================================ */

.hn-chip {
    background: #fff;
    border: 1px solid var(--hn-border-soft);
    padding: 8px 14px;
    border-radius: var(--hn-radius-md);
    font-size: 13px;
    white-space: nowrap;
}

.hn-chip-soft {
    background: var(--hn-primary-bg-soft);
    color: var(--hn-primary);
    border: 1px solid #ffd2c4;
}

.hn-chip-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.hn-chip-list::-webkit-scrollbar {
    height: 3px;
}


/* ============================================================
   MODAL SYSTEM
============================================================ */

.hn-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    justify-content: center;
    align-items: flex-end;
    backdrop-filter: blur(4px);
    z-index: 999999;
}

.hn-modal.active {
    display: flex !important;
}

.hn-modal-box {
    background: #fff;
    width: 100%;
    max-width: 500px;
    border-radius: 22px 22px 0 0;
    padding: 22px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--hn-shadow-md);
    position: relative;
}

.hn-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
}

.hn-modal-img {
    width: 100%;
    height: 200px;
    border-radius: var(--hn-radius-md);
    object-fit: cover;
    margin-bottom: 16px;
}


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

.hn-footer {
    background: #2A2A2A;
    color: #EAEAEA;
    padding: 50px 20px 0;
    margin-top: 60px;
}

.hn-footer-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.hn-footer h2 {
    font-size: 22px;
    margin-bottom: 12px;
    color: #fff;
}

.hn-footer p {
    font-size: 15px;
    color: #CFCFCF;
    line-height: 1.6;
}

.hn-footer-bottom {
    text-align: center;
    padding: 15px;
    background: #1E1E1E;
    font-size: 14px;
    color: #9A9A9A;
    margin-top: 40px;
}


/* PROVIDER PAGE */

.hn-provider-hero-img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: var(--hn-radius-lg);
}

.hn-provider-title {
    font-size: 26px;
    font-weight: 700;
    margin-top: 16px;
}

.hn-provider-destination {
    color: var(--hn-text-muted);
    margin-bottom: 8px;
}

.hn-provider-price {
    margin-top: 6px;
    font-size: 22px;
}

.hn-price-final {
    font-weight: 700;
    color: var(--hn-primary);
}

.hn-price-old {
    text-decoration: line-through;
    font-size: 14px;
    color: #888;
    margin-left: 8px;
}

.hn-provider-section {
    margin-top: 28px;
}

.hn-provider-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.hn-provider-text {
    color: var(--hn-text-soft);
    line-height: 1.6;
}

.hn-provider-list {
    margin: 0;
    padding-left: 20px;
    color: var(--hn-text-soft);
}

.hn-provider-cta-box {
    margin-top: 35px;
    padding: 20px;
    border: 1px solid var(--hn-border-soft);
    border-radius: var(--hn-radius-lg);
    text-align: center;
    box-shadow: var(--hn-shadow-sm);
}

.hn-provider-cta-btn {
    width: 100%;
    margin-top: 12px;
}

.hn-provider-wa-btn {
    width: 100%;
    margin-top: 10px;
}


/* ================================
   FOOTER MODULE (taxi-footer)
   ================================ */

.taxi-footer {
    background: #2A2A2A;
    color: #EAEAEA;
    padding: 50px 20px 0 20px;
    margin-top: 60px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
    gap: 40px;
}

.footer-container h2 {
    margin-bottom: 12px;
    font-size: 22px;
    color: #FFFFFF;
}

.footer-about,
.footer-contact {
    flex: 1;
    min-width: 280px;
}

.footer-about p,
.footer-contact p {
    line-height: 1.6;
    font-size: 15px;
    color: #CFCFCF;
}

.footer-bottom {
    margin-top: 40px;
    padding: 15px;
    text-align: center;
    background: #1E1E1E;
    color: #9A9A9A;
    font-size: 14px;
}