/*
 * UI refinements for the Prints Publications frontend.
 * Loaded after style.css / responsive.css. Uses only the existing brand values
 * (red #8f4b42, dark red #6e3832, text #333, muted #707070, 30px pill radius)
 * and does not change layout, section order or fonts.
 */

:root {
    --pp-brand: #8f4b42;
    --pp-brand-dark: #6e3832;
    --pp-text: #333;
    --pp-muted: #707070;
    --pp-focus-ring: 0 0 0 3px rgba(143, 75, 66, 0.25);
    --pp-ease: cubic-bezier(0.2, 0, 0, 1);
    --pp-fast: 150ms;
    --pp-base: 200ms;
    /* One corner radius for every button on the site */
    --pp-btn-radius: 8px;
}

/* ---------- Buttons: softer corners instead of full pills ----------
 * Legacy rules in style.css round these to 30px; this file loads later,
 * so the same selectors here take precedence. */
.bnr-btn button,
.right-header button.btn.sign-in,
.view-text button,
.buybook button.btn,
.price button.btn,
.coupon-btn input,
.update-block input,
.cart-summary .cart-summary-button .c-btn,
.cart-summary .cart-summary-button a,
.login-btn a.btn.btn-outlined,
button.place-order,
.btn-end button.btn,
.buynow button.btn,
.article button,
.product-item-price button.btn,
.submit-btn button,
.contact-btn1 button.coupan,
.mention-tag a {
    border-radius: var(--pp-btn-radius);
}

.price-search-box .form-group input.form-control {
    border-radius: 10px;
}

/* ---------- Keyboard focus ----------
 * Several rules in style.css remove outlines on focus. Restore a visible ring
 * for keyboard users only, in the brand red, without affecting mouse clicks. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--pp-brand) !important;
    outline-offset: 2px;
    box-shadow: none;
}

/* Bootstrap's default blue focus glow on inputs becomes the brand colour */
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    border-color: var(--pp-brand);
    box-shadow: var(--pp-focus-ring);
}

/* The header search fields sit in one joined control; keep its ring visible */
.custom-flex .input-search-field input:focus-visible,
.custom-flex .search-categories select.form-select:focus-visible,
.search-btn button:focus-visible,
button#scrh-btn:focus-visible,
.cart-btn button:focus-visible {
    outline: 2px solid var(--pp-brand) !important;
    outline-offset: 2px;
}

/* ---------- Interaction feedback ---------- */
a,
.btn,
button {
    transition: color var(--pp-fast) var(--pp-ease),
        background-color var(--pp-fast) var(--pp-ease),
        border-color var(--pp-fast) var(--pp-ease),
        box-shadow var(--pp-base) var(--pp-ease),
        opacity var(--pp-fast) var(--pp-ease);
}

/* Red pill buttons ("View More", "Sign In", "Buy Now", ...) darken on hover
 * using the dark red already used across the site */
.buybook button.btn:hover,
.view-text button:hover,
.book-product button.btn.cart:hover,
.cart-btn a.btn.cart:hover {
    background-color: var(--pp-brand-dark);
    color: #fff;
}

/* Make the whole "View More" pill clickable, not only its text */
.buybook button.btn a {
    color: inherit;
}

.buybook button.btn a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Round icon buttons on book cards: subtle lift on hover */
.cart-btn button.btn.arrow-btn:hover,
.cart-btn a.btn.arrow-btn:hover {
    color: var(--pp-brand);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Larger touch area for the 30px card icon buttons on touch screens,
 * without changing their visible size */
@media (pointer: coarse) {
    .cart-btn .btn.cart,
    .cart-btn .btn.arrow-btn {
        position: relative;
    }

    .cart-btn .btn.cart::before,
    .cart-btn .btn.arrow-btn::before {
        content: "";
        position: absolute;
        inset: -7px;
    }
}

/* Book covers on cards: gentle zoom on hover (pointer devices only) */
@media (hover: hover) {
    .dayimg img,
    .book-product img {
        transition: transform var(--pp-base) var(--pp-ease);
    }

    .weekbox:hover .dayimg img,
    .product-block:hover .book-product img {
        transform: scale(1.03);
    }
}

/* ---------- Header search: loading / empty / error messages ---------- */
.container_list .search-status {
    margin: 0;
    padding: 0.85rem 1.25rem;
    color: #fff;
    font-size: 0.95rem;
    text-align: left;
}

/* ---------- Layout fixes ---------- */

/* Login/reset pages: the .row inside a padding-less container-fluid pushed the
 * page 12px wider than the screen */
.pages-login > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Home book sliders span the full width, so their arrows (50px outside the
 * slider) were always off-screen and caused sideways scrolling. Bring them to
 * the slider edge, as responsive.css already does on phones. */
@media (min-width: 768px) {
    div#bookslide .owl-nav button.owl-prev {
        left: 0;
    }

    div#bookslide .owl-nav button.owl-next {
        right: 0;
    }

    div#bookslide .owl-nav button {
        background: #fff !important;
        z-index: 2;
    }
}

/* Where the page margin has room, sit the arrows just outside the cards,
 * matching the Journals slider */
@media (min-width: 1360px) {
    div#bookslide .owl-nav button.owl-prev {
        left: -45px;
    }

    div#bookslide .owl-nav button.owl-next {
        right: -45px;
    }
}

/* The slider wrapper itself also gets initialised as an empty carousel; its
 * arrows/dots do nothing and float against the page body. Hide that copy only. */
div#bookslide > .owl-nav,
div#bookslide > .owl-dots {
    display: none;
}

/* Journals slider arrows were also partly off-screen up to ~1300px wide */
@media (min-width: 768px) and (max-width: 1299.98px) {
    .book-carousel-start .owl-nav button.owl-prev {
        left: 0;
    }

    .book-carousel-start .owl-nav button.owl-next {
        right: 0;
    }

    .book-carousel-start .owl-nav button {
        background: #fff !important;
        z-index: 2;
    }
}

/* Banner indicators covered the banner text on phones */
@media (max-width: 767.98px) {
    .home-slider .carousel-indicators {
        margin-bottom: 0.25rem;
    }

    .home-slider .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .home-slider .carousel-indicators button:after {
        top: 2px;
        left: 2px;
        width: 4px;
        height: 4px;
    }

    /* Product page thumbnail strip was wider than the screen */
    .product-slider .product-slidercontainer .small-img {
        width: 100%;
        max-width: 365px;
    }

    .product-slider .product-slidercontainer .small-container {
        width: calc(100% - 50px);
        max-width: 303px;
    }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Legacy Bootstrap "danger" buttons on the old login pages use the brand colour */
.btn-danger {
    border-color: var(--pp-brand) !important;
    background-color: var(--pp-brand) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    border-color: var(--pp-brand-dark) !important;
    background-color: var(--pp-brand-dark) !important;
}