/* =============================================================================
   99 Hotels — desktop homepage additions
   -----------------------------------------------------------------------------
   Kept in its own file, separate from the purchased template's own style.css
   and plugins.css (neither of which is edited), so every rule 99 Hotels added
   is in one place and the template's original files stay exactly as supplied.

   Palette and type match the template's own (Outfit font, #91765a gold accent,
   #14100c near-black), reused for consistency — nothing new is invented here.
   ============================================================================= */

.btn-99 {
    display: inline-block;
    padding: 16px 34px;
    background: #91765a;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease-out;
}
.btn-99:hover { background: #14100c; color: #fff; }
.btn-99-outline {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 4px;
    margin-left: 14px;
    transition: all 0.3s ease-out;
}
.btn-99-outline:hover { background: #fff; color: #14100c; }

/* Hero overlay content, sitting on the template's own .banner-header /
   bg-fixed / data-background mechanism — the image itself is untouched. */
.hero-99 .caption { max-width: 720px; }
.hero-99 h1 { font-size: 52px; line-height: 1.15; margin-bottom: 18px; }
.hero-99 p.lead-99 { font-size: 18px; color: #f1ede7; margin-bottom: 34px; max-width: 620px; }

/* Explore-states grid */
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 22px;
}
.state-card {
    display: block;
    position: relative;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    background: #14100c;
    box-shadow: 0 6px 18px rgba(20,16,12,.12);
}
.state-card img {
    width: 100%; height: 100%; object-fit: cover; opacity: .78;
    transition: transform .4s ease, opacity .4s ease;
}
.state-card:hover img { transform: scale(1.06); opacity: .55; }
.state-card .state-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(20,16,12,0) 0%, rgba(20,16,12,.85) 100%);
    color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px;
}
.state-card .state-count {
    display: block; font-size: 11px; font-weight: 400; color: #e6ddd2; margin-top: 2px;
}

/* Destination (city) pill row */
.destination-row { display: flex; flex-wrap: wrap; gap: 14px; }
.destination-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 1px solid #e5ddd2; border-radius: 40px;
    color: #14100c; text-decoration: none; font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 500; transition: all .25s ease;
}
.destination-pill:hover { background: #91765a; border-color: #91765a; color: #fff; }

/* Featured hotels grid */
.hotel-grid-99 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.hotel-card-99 {
    border: 1px solid #eee2d3; border-radius: 8px; overflow: hidden;
    background: #fff; box-shadow: 0 4px 14px rgba(20,16,12,.06);
}
.hotel-card-99 .img { height: 190px; overflow: hidden; background: #f2ede4; }
.hotel-card-99 .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-card-99 .body { padding: 18px 20px 20px; }
.hotel-card-99 h5 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 4px; color: #14100c; }
.hotel-card-99 .loc { font-size: 13px; color: #78716a; margin-bottom: 10px; }
.hotel-card-99 .rate { font-size: 13px; color: #91765a; font-weight: 600; margin-bottom: 14px; }
.hotel-card-99 .rate strong { font-size: 17px; color: #14100c; }
.hotel-card-99 .actions { display: flex; gap: 10px; }
.hotel-card-99 .actions a {
    flex: 1; text-align: center; padding: 10px 12px; border-radius: 4px;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
}
.hotel-card-99 .actions a.book { background: #91765a; color: #fff; }
.hotel-card-99 .actions a.book:hover { background: #14100c; }
.hotel-card-99 .actions a.view { background: #f2ede4; color: #14100c; }
.hotel-card-99 .actions a.view:hover { background: #e5ddd2; }

/* ₹99 model + How-it-works */
.model-99 {
    background: #faf7f2; border: 1px solid #eee2d3; border-radius: 8px;
    padding: 34px 36px; margin-top: 10px;
}
.model-99 .row-99 { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e5ddd2; font-size: 15px; }
.model-99 .row-99:last-child { border-bottom: none; font-weight: 700; color: #91765a; }
.model-99 .row-99 span:last-child { font-weight: 700; color: #14100c; }

.steps-99 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px; }
.step-99 { text-align: center; }
.step-99 .num { width: 46px; height: 46px; line-height: 46px; border-radius: 50%; background: #91765a; color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; margin: 0 auto 14px; }
.step-99 h6 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 6px; color: #14100c; }
.step-99 p { font-size: 13px; color: #78716a; margin: 0; }

@media (max-width: 767px) {
    .hero-99 h1 { font-size: 34px; }
    .btn-99-outline { margin-left: 0; margin-top: 12px; }
}