/* /Pooja/Details — Figma frame 7:159 (desktop) / 7:210 (mobile). Builds on figma-home.css (.fh buttons, tokens). */
.fd { background: var(--npj-cream); padding: 32px 0 56px; }
.fd .fd-title { font: 700 32px/40px 'Poppins', sans-serif; color: var(--npj-burgundy); margin: 0 0 16px; }
.fd .fd-sub { font: 400 14px/22px 'Poppins', sans-serif; color: var(--npj-secondary); margin: 0 0 16px; max-width: 900px; }
.fd .fd-grid { display: flex; gap: 32px; align-items: flex-start; }
.fd .fd-main { flex: 1 1 0; min-width: 0; max-width: 736px; display: flex; flex-direction: column; gap: 24px; }
.fd .fd-banner { position: relative; height: 320px; border-radius: 24px; overflow: hidden; background: #3d0906; }
.fd .fd-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd .fd-banner.is-campaign { height: auto; background: #fff1de; }
.fd .fd-banner.is-campaign img { height: auto; object-fit: contain; }
.fd .fd-banner .np-nav-banner { display: block; line-height: 0; margin: 0; }
.fd .fd-back { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; justify-content: center; width: 108px; height: 44px; border-radius: 22px; background: #fff; border: 1px solid var(--npj-border);
    font: 600 14px/24px 'Poppins', sans-serif; color: var(--npj-burgundy); text-decoration: none; white-space: pre; }
.fd .fd-back:hover { background: var(--npj-soft); color: var(--npj-burgundy); }
.fd .fd-samagri { background: var(--npj-soft); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fd .fd-samagri b { font: 500 15px/22px 'Poppins', sans-serif; color: #33211a; }
.fd .fd-samagri span { font: 400 12px/19px 'Poppins', sans-serif; color: #33211a; }
.fd .fd-samagri .fh-btn { min-height: 44px; padding: 10px 16px; font-size: 12px; width: 100%; }
.fd .fd-sec h2 { font: 600 20px/30px 'Poppins', sans-serif; color: var(--npj-burgundy); margin: 0 0 12px; }
.fd .fd-sec p, .fd .fd-sec li { font: 400 16px/26px 'Poppins', sans-serif; color: var(--npj-secondary); margin: 0 0 8px; }
.fd .fd-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fd .fd-incl li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 24px; }
.fd .fd-incl i { color: var(--npj-accent); font-size: 1.1rem; line-height: 24px; flex: none; }
.fd .fd-incl strong { color: var(--npj-ink); font-weight: 600; }
.fd .fd-steps { margin: 0; padding-left: 22px; }
.fd .fd-samagri-list { margin-top: 12px; background: #fff; border: 1px solid var(--npj-border); border-radius: 12px; padding: 10px 14px; }
.fd .fd-samagri-list summary { cursor: pointer; font: 600 14px/22px 'Poppins', sans-serif; color: var(--npj-burgundy); }

/* Booking summary card */
.fd .fd-summary { flex: 0 0 432px; position: sticky; top: 24px; background: #fff1de; border: 1px solid var(--npj-border); border-radius: 18px; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.fd .fd-price { font: 600 28px/38px 'Poppins', sans-serif; color: var(--npj-burgundy); }
.fd .fd-dur { font: 400 14px/22px 'Poppins', sans-serif; color: var(--npj-secondary); }
.fd .fd-note { font: 400 15px/24px 'Poppins', sans-serif; color: var(--npj-secondary); margin: 0; }
.fd .fd-bill { margin: 0; padding: 10px 12px; background: rgba(255, 255, 255, .6); border-radius: 10px; display: grid; gap: 6px; }
.fd .fd-bill > div { display: flex; justify-content: space-between; gap: 12px; font: 400 13px/20px 'Poppins', sans-serif; color: var(--npj-secondary); }
.fd .fd-bill dt, .fd .fd-bill dd { margin: 0; font-weight: 400; }
.fd .fd-bill dd { text-align: right; }
.fd .fd-bill small { color: #927f6c; }
.fd .fd-book { width: 100%; min-height: 48px; margin-top: 4px; }
.fd .fd-ask { width: 100%; min-height: 44px; }
.fd .fd-terms { font: 400 13px/20px 'Poppins', sans-serif; color: var(--npj-secondary); margin: 0; }
.fd .fd-terms a { color: var(--npj-accent); text-decoration: underline; }

@media (max-width: 991px) {
    .fd .fd-grid { flex-direction: column; }
    .fd .fd-main { max-width: none; width: 100%; }
    .fd .fd-summary { flex: none; width: 100%; position: static; order: -1; }
}
@media (max-width: 767px) {
    .fd { padding: 20px 0 96px; }
    .fd .fd-title { font-size: 26px; line-height: 34px; }
    .fd .fd-banner { height: 240px; border-radius: 20px; }
    .fd .fd-sec p, .fd .fd-sec li { font-size: 15px; line-height: 24px; }
    .fd .fd-summary { padding: 16px 20px 20px; }
}

/* Campaign banners carry their own logo/title in the artwork, so Back sits above them instead of covering them. */
.fd .fd-banner.is-campaign { display: flex; flex-direction: column-reverse; gap: 10px; background: none; overflow: visible; }
.fd .fd-banner.is-campaign .fd-back { position: static; align-self: flex-start; }
.fd .fd-banner.is-campaign .np-nav-banner { border-radius: 20px; overflow: hidden; }