/* ==========================================================================
   MADE EASY Publications - Book detail page
   BOOKDETAIL.php  (e.g. /bookdetail/<slug>/<id>)
   --------------------------------------------------------------------------
   Same approach categorypage.css takes: this file only loads on the book
   detail page, so .main_wrapper is widened here to match the full-bleed
   header, and the legacy 80/20 float pair is dropped.

   Everything the redesign owns is scoped under .bd-page and prefixed .bd-.
   style.css and screens.css use very broad selectors (bare `p`, `li`, class
   names with no parent), so the reset block below is what keeps them from
   leaking into the new markup — and the .bd- prefix keeps the new rules from
   leaking back out into the tabs/carousels the rest of the site still uses.

   The two gradients are lifted verbatim from style.css .prdctdtlsbuynow and
   .prdctdtls_view_sample so the buttons stay the site's buttons.
   ========================================================================== */

.bd-page {
    --bd-red: #b21f24;
    --bd-red-dark: #8d181c;
    --bd-red-tint: #fbe4e2;
    --bd-blue-panel: #ddeeff;
    --bd-blue-line: #b9d9fa;
    --bd-gold: #f5c400;
    --bd-gold-line: #c38007;
    --bd-ink: #2f3542;
    --bd-body: #4a5464;
    --bd-muted: #7a8494;
    --bd-line: #e2e6ec;
    --bd-star: #c8a415;
    --bd-radius: 8px;

    /* Hero greys are neutral rather than blue-tinted, and none of them go
       near-black: the bold label sits one shade darker than its value. */
    --bd-title: #58595b;
    --bd-label: #6d6e71;
    --bd-value: #808285;

    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    color: var(--bd-body);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 1. full-bleed shell ------------------------------------------ */

/* The header's piracy strip, this page, and the footer links all sit in a
   .main_wrapper. Widening it here keeps all three on the same gutter. */
.main_wrapper {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 clamp(12px, 2vw, 34px);
}

/* The detail pane was the 80% half of an 80/20 float pair; the left rail is
   gone from the markup (the header's "More" dropdown owns #categoryList now). */
.bd-page .rgtsection {
    float: none;
    width: 100%;
}

.bd-page .rgtinrcntr {
    padding-left: 0;
    width: 100%;
}

/* ---------- 2. resets against style.css / screens.css -------------------- */

.bd-page *,
.bd-page *:before,
.bd-page *:after { box-sizing: border-box; }

.bd-page a { text-decoration: none; color: inherit; }
.bd-page img { max-width: 100%; border: 0; }

/* style.css sets `p { font-family: "Arial Black" }` on this page via the inline
   <style> block that used to live in BOOKDETAIL.php; the tab bodies are
   admin-authored HTML, so they get normal body copy back. */
.bd-page p {
    font-family: inherit;
    line-height: 1.7;
    margin: 0 0 1em;
}

.bd-page h1, .bd-page h2, .bd-page h3 {
    margin: 0;
    padding: 0;
    line-height: 1.35;
    color: var(--bd-ink);
}

/* ---------- 3. hero card ------------------------------------------------- */

.bd-hero {
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    padding: 18px 30px 30px;
    margin: 14px 0 22px;
}

/* Own row rather than an absolutely positioned corner: a long book title wraps
   to two or three lines and would otherwise run underneath the pill. */
.bd-hero__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.bd-hero__main {
    display: flex;
    gap: 38px;
    align-items: flex-start;
}

.bd-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #e2231a;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 7px 6px 20px;
    border-radius: 999px;
    transition: background .18s ease;
}
.bd-back:hover { background: #b8170f; color: #fff; }

/* The arrow rides in a white disc at the pill's right edge, so the padding
   above is asymmetric — the disc supplies the gap on that side itself. */
.bd-back__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    color: #e2231a;
}
.bd-back__icon svg { width: 16px; height: 16px; display: block; }

.bd-hero__media {
    flex: 0 0 345px;
    max-width: 345px;
}

.bd-hero__media .zoom-small-image,
.bd-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

.bd-hero__body {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-hero__title {
    font-size: 30px;
    font-weight: 400;
    color: var(--bd-title);
    line-height: 1.3;
    margin-bottom: 18px;
    word-wrap: break-word;
}

/* ---------- 4. spec rows ------------------------------------------------- */

/* Two columns so ISBN/pages and binding/rating pair up as in the design; a row
   with a single cell spans both. Hairlines are drawn per row, not per cell. */
.bd-specs {
    border-top: 1px solid var(--bd-line);
    margin-bottom: 18px;
}

.bd-specs__row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bd-line);
}

.bd-specs__cell {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    font-size: 17px;
    color: var(--bd-value);
}

.bd-specs__cell--full { flex: 1 1 100%; }

.bd-specs__cell b {
    color: var(--bd-label);
    font-weight: 700;
}

.bd-specs__icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: var(--bd-value);
}
.bd-specs__icon svg { width: 100%; height: 100%; display: block; }

/* ---------- 5. price ----------------------------------------------------- */

.bd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    padding: 15px 4px 4px;
    font-size: 17px;
}

.bd-price__label {
    font-weight: 700;
    color: var(--bd-label);
    font-size: 23px;
}

/* The struck price keeps the grey of the surrounding copy — only the rule
   through it is red, so the discount reads at a glance. */
.bd-price__mrp {
    text-decoration: line-through;
    -webkit-text-decoration-color: #e2231a;
    text-decoration-color: #e2231a;
    text-decoration-thickness: 2px;
    color: var(--bd-value);
    font-size: 23px;
}

.bd-price__cost {
    font-size: 29px;
    font-weight: 700;
    color: var(--bd-label);
}

.bd-price__off {
    font-size: 17px;
    color: var(--bd-value);
}

/* ---------- 6. rating ---------------------------------------------------- */

.bd-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.bd-rating__star {
    width: 23px;
    height: 23px;
    color: #d5dae1;
}
.bd-rating__star--on { color: var(--bd-star); }
.bd-rating__star svg { width: 100%; height: 100%; display: block; }

.bd-rating__count {
    margin-left: 6px;
    font-size: 13px;
    color: var(--bd-muted);
}

/* ---------- 7. action buttons -------------------------------------------- */

.bd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.bd-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    transition: filter .18s ease;
}
.bd-btn:hover { filter: brightness(.94); color: #000; }
.bd-btn svg { width: 21px; height: 21px; flex: 0 0 21px; }

/* the site's existing gold and grey button gradients */
.bd-btn--gold {
    background: linear-gradient(to bottom,
        rgba(245,196,0,1) 0%, rgba(246,209,24,1) 50%,
        rgba(244,191,0,1) 51%, rgba(239,163,0,1) 100%);
    border-bottom: 2px solid var(--bd-gold-line);
}

.bd-btn--grey {
    background: linear-gradient(to bottom,
        rgba(200,200,200,1) 0%, rgba(211,211,211,1) 47%,
        rgba(196,196,196,1) 48%, rgba(164,164,164,1) 100%);
    border-bottom: 2px solid #696969;
}

/* Pre-order keeps the green the rest of the site already uses for it. */
.bd-btn--green {
    background: #7cb341;
    border-bottom: 2px solid #5d8a2c;
    color: #fff;
}
.bd-btn--green:hover { color: #fff; }

.bd-btn--out {
    background: #ed3e3a;
    border-bottom: 2px solid #971923;
    color: #fff;
    cursor: default;
}
.bd-btn--out:hover { color: #fff; filter: none; }

/* ---------- 8. tab panel ------------------------------------------------- */

.bd-panel {
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    padding: 26px 30px 30px;
    margin-bottom: 22px;
}

.bd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.bd-tabs li { float: none; margin: 0; }

.bd-tabs__btn {
    display: block;
    padding: 9px 20px;
    border-radius: 4px;
    background: var(--bd-red-tint);
    color: var(--bd-red);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.bd-tabs__btn:hover { background: #f7cdc9; color: var(--bd-red); }

.bd-tabs li.is-active .bd-tabs__btn {
    background: var(--bd-red);
    color: #fff;
    font-weight: 700;
}

.bd-tabpane { display: none; }
.bd-tabpane.is-active { display: block; }

/* Admin-authored HTML lands here, so give the common tags sane defaults —
   style.css strips list markers site-wide. */
.bd-tabpane ul,
.bd-tabpane ol {
    list-style: disc outside;
    padding-left: 22px;
    margin: 0 0 1em;
}
.bd-tabpane ol { list-style: decimal outside; }
.bd-tabpane li {
    float: none;
    margin-bottom: .45em;
    line-height: 1.7;
}
.bd-tabpane table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}
.bd-tabpane th,
.bd-tabpane td {
    border: 1px solid var(--bd-line);
    padding: 9px 12px;
    text-align: left;
    font-size: 14px;
}
.bd-tabpane th { background: #f6f8fa; color: var(--bd-ink); }

.bd-tabpane__empty {
    color: var(--bd-muted);
    font-style: italic;
}

/* ---------- 9. frequently bought together -------------------------------- */

.bd-fbt {
    background: var(--bd-blue-panel);
    border-radius: var(--bd-radius);
    padding: 20px 22px 24px;
    margin-top: 28px;
}

.bd-fbt__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bd-ink);
    margin-bottom: 16px;
}

.bd-fbt__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bd-fbt__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bd-blue-line);
    border-radius: 6px;
    padding: 10px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.bd-fbt__card:hover {
    box-shadow: 0 6px 18px rgba(13, 99, 201, .16);
    transform: translateY(-2px);
}

.bd-fbt__media {
    display: block;
    height: 150px;
    margin-bottom: 12px;
    background: #f2f7fe;
    border-radius: 4px;
    overflow: hidden;
}

.bd-fbt__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bd-fbt__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-ink);
    line-height: 1.4;
    margin-bottom: 6px;
    /* two lines max, so every card in the row keeps the same height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-fbt__price {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-ink);
}
.bd-fbt__price span { color: #e2231a; }

/* ---------- 10. news & events -------------------------------------------- */

.bd-news {
    background: #fff;
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    padding: 22px 30px 26px;
    margin-bottom: 30px;
}

.bd-news__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bd-ink);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bd-red);
    display: inline-block;
}

.bd-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.bd-news__item {
    float: none;
    border: 1px solid var(--bd-line);
    border-left: 3px solid var(--bd-red);
    border-radius: 5px;
    padding: 14px 16px;
    background: #fbfcfd;
    font-size: 14px;
    line-height: 1.65;
}

.bd-news__item a { color: var(--bd-red); text-decoration: underline; }

.bd-news__by {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--bd-muted);
}

.bd-news__more {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-red);
}

/* ---------- 11. review tab ----------------------------------------------- */

.bd-review__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bd-review__item {
    float: none;
    border-bottom: 1px solid var(--bd-line);
    padding: 16px 0;
    font-size: 14px;
    line-height: 1.7;
}
.bd-review__item:last-child { border-bottom: 0; }

.bd-review__by {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--bd-muted);
}
.bd-review__by strong { color: var(--bd-ink); }

.bd-review__empty { color: var(--bd-muted); }

.bd-review__write {
    display: inline-block;
    margin-bottom: 18px;
    padding: 9px 22px;
    border-radius: 4px;
    background: var(--bd-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.bd-review__write:hover { background: var(--bd-red-dark); color: #fff; }

/* The review form is the site's existing .wirte_rview markup; only its width
   is constrained here so it does not stretch across the full-bleed page. */
.bd-page .wirte_rview { max-width: 620px; }

/* ---------- 12. responsive ----------------------------------------------- */

@media (max-width: 1100px) {
    .bd-fbt__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .bd-hero { padding: 14px 20px 26px; }
    .bd-hero__main {
        flex-direction: column;
        gap: 24px;
    }
    .bd-hero__media {
        flex: 0 0 auto;
        max-width: 300px;
        margin: 0 auto;
    }
    .bd-hero__title { font-size: 25px; }
    .bd-specs__cell { font-size: 16px; }
    .bd-panel { padding: 20px 18px 24px; }
    .bd-news { padding: 18px 18px 22px; }
}

@media (max-width: 700px) {
    .bd-fbt__grid { grid-template-columns: repeat(2, 1fr); }
    /* stack the paired cells so a long publisher name has the full width */
    .bd-specs__cell { flex: 1 1 100%; }
    .bd-specs__row { border-bottom: 0; }
    .bd-specs__row .bd-specs__cell { border-bottom: 1px solid var(--bd-line); }
    .bd-actions { gap: 10px; }
    .bd-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 460px) {
    .bd-fbt__grid { grid-template-columns: 1fr; }
    .bd-hero__title { font-size: 21px; }
    .bd-specs__cell { font-size: 15px; }
    .bd-price__label,
    .bd-price__mrp { font-size: 19px; }
    .bd-price__cost { font-size: 23px; }
    .bd-price__off { font-size: 15px; }
    .bd-back { font-size: 15px; padding-left: 16px; }
    .bd-tabs__btn { padding: 8px 13px; font-size: 13px; }
}