/* =====================================================================
   responsiveStyle.css
   ---------------------------------------------------------------------
   Bootstrap 5 integration layer + device-complete responsive rules for
   every page in resources/views/frontend.

   Load order (resources/views/frontend/layouts/head.blade.php):
     1. bootstrap.min.css              -> Bootstrap 5 reboot + grid
     2. toastr.min.css                 -> notifications
     3. loginStyle / homeStyle / dashboardStyle / utilsStyle /
        utilsGrid / auctionPageStyle  -> BCA theme
     4. responsiveStyle.css            -> THIS FILE (always last)

   Breakpoints mirror Bootstrap 5 so grid and theme agree:
     xs  < 576px        phones (portrait)
     sm  576 - 767px    large phones / phones (landscape)
     md  768 - 991px    tablets
     lg  992 - 1199px   laptops
     xl  1200 - 1399px  desktops
     xxl >= 1400px      wide desktops
   plus guards for very small (<=360px), ultra-wide (>=1600px) screens,
   short landscape phones, touch-only devices and print.

   Stylesheets referenced from inside @yield('content') or inline
   @stack('style') blocks are applied *after* this file, so overrides of
   those rules use one extra level of specificity (see `body .contactContainer`).
   ===================================================================== */


/* =====================================================================
   1. GLOBAL / DEVICE SANITY CHECKS
   ===================================================================== */

html {
    /* iOS: keep text legible when the device is rotated. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Anchor links must not hide under the sticky mobile header. */
    scroll-padding-top: 80px;
}

body {
    /* A single overflowing element must never create a sideways scroll. */
    overflow-x: hidden;
    min-height: 100vh;
}

/* Height of the site header (.Nav). The full-height auth screens
   (login, signup, forgot-password, otp, reset-password) subtract it so
   they fit exactly one viewport on every breakpoint. */
:root {
    --bca-header-h: 75px;
}

@media screen and (max-width: 800px) {
    :root {
        --bca-header-h: 64px;
    }
}

/* Media should never be wider than its container. */
img,
svg,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

img {
    height: auto;
}

h1, h2, h3, h4, h5, h6,
p, li, td, th, dt, dd, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Bootstrap's reboot underlines every anchor; the BCA design is button-like.
   Prose links (legal pages, item descriptions, deal terms) stay underlined
   so they remain discoverable inside long CMS content. */
a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

.terms-content a,
.terms-container a,
.dealTerms a,
.description a {
    text-decoration: underline;
}

/* Visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #D6482C;
    outline-offset: 2px;
}

/* Bootstrap's 100vh helpers are inaccurate on mobile browsers (URL bar).
   Use dvh where supported, keeping vh as the fallback. */
.min-vh-100 {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}


/* =====================================================================
   2. BOOTSTRAP <-> BCA THEME BRIDGE
   Bootstrap loads first on purpose; these rules only harmonise the parts
   of Bootstrap that would otherwise fight the existing BCA design.
   ===================================================================== */

/* Containers keep the same horizontal rhythm as .mainContainer/.content. */
.container,
.container-fluid {
    width: 100%;
    padding-inline: clamp(16px, 3vw, 40px);
}

.container {
    max-width: 1140px;
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 1240px;
    }
}

/* Bootstrap buttons themed with the BCA palette (Bootstrap 5 CSS-var API). */
.btn-primary,
.bca-hero-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: #D6482C;
    --bs-btn-border-color: #D6482C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b93b22;
    --bs-btn-hover-border-color: #b93b22;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b93b22;
    --bs-btn-active-border-color: #b93b22;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #D6482C;
    --bs-btn-disabled-border-color: #D6482C;
    --bs-btn-focus-shadow-rgb: 214, 72, 44;
}

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(214, 72, 44, 0.25);
}

/* Home hero call to action (index.blade.php). */
.bca-hero-btn {
    color: #fff;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
}

/* Bootstrap form controls inherit the existing BCA input styling. */
.form-control,
.form-select {
    padding: 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 15px;
    background-color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: #D6482C;
    box-shadow: 0 0 0 0.2rem rgba(214, 72, 44, 0.15);
}

.form-label,
.form-group > label {
    font-weight: 600;
    color: #111827;
}

/* Bootstrap's responsive heading scale is smaller than the old browser
   default; keep the remaining (unstyled) headings readable on phones. */
@media screen and (max-width: 575.98px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

/* Overflowing data in tables/embeds (CMS content, deal terms) must scroll
   inside its own box instead of breaking the page layout. */
.terms-content table,
.description table,
.dealTerms table,
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.terms-content iframe,
.description iframe,
.dealTerms iframe,
.terms-content video,
.description video {
    max-width: 100%;
}


/* =====================================================================
   3. DESIGN-SYSTEM CLASS FALLBACKS
   Classes used by the account views that had no CSS definition anywhere,
   so those screens stay usable (and readable) on every device.
   ===================================================================== */

.secondary-bg { background-color: #F5F5F5; }
.body-color { color: #2C2B2B; }
.primary-regular-font { font-family: inherit; }
.heading-medium { font-weight: 600; }
.level-4 { font-size: 18px; line-height: 1.3; }
.level-6 { font-size: 14px; line-height: 1.4; }
.nav-item { list-style: none; }
.cursor-pointer { cursor: pointer; }

.profile-tabs {
    border-radius: 18px;
    height: 100%;
}

.profile-tab-img img,
.sidebar_profile_image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-color: #fff;
}


/* =====================================================================
   4. HEADER / MOBILE NAVIGATION DRAWER
   ===================================================================== */

@media screen and (max-width: 800px) {
    .Nav {
        padding-inline: 12px;
    }

    /* The drawer is fixed and full height: use dynamic viewport units so the
       last links are always reachable next to mobile browser chrome. */
    .sideBtns {
        height: 100vh;
        height: 100dvh;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .sideBtns .hor-flex a,
    .sideBtns .logoutBtn {
        min-height: 44px;
    }

    .sideBtns h2 {
        white-space: normal;
    }

    /* Centre the toggle inside the 64px bar (dashboardStyle positions it
       absolutely at the top of the bar). */
    .hamburger {
        top: 50%;
        transform: translateY(-50%);
        right: 8px;
        font-size: 24px;
    }
}

@media screen and (max-width: 400px) {
    /* Use the full width of very small phones for the drawer. */
    .sideBtns {
        width: 100vw;
        max-width: 100vw;
        padding-inline: 14px;
    }
}


/* =====================================================================
   5. FOOTER
   ===================================================================== */

@media screen and (max-width: 480px) {
    .dashboard footer {
        padding: 24px 14px;
    }

    .dashboard footer .upper {
        gap: 18px;
    }

    .dashboard footer .links {
        font-size: 14px;
        row-gap: 8px;
    }

    .dashboard footer .copyright {
        row-gap: 10px;
    }

    .dashboard footer .copyright p {
        font-size: 13px;
    }

    .dashboard footer .copyright .socials {
        gap: 14px;
        margin-top: 8px;
    }
}

/* Ultra-wide screens: keep the footer content from stretching edge to edge. */
@media screen and (min-width: 1440px) {
    .dashboard footer .upper,
    .dashboard footer .copyright {
        width: 100%;
        max-width: 1240px;
        margin-inline: auto;
    }
}


/* =====================================================================
   6. HOME PAGE (index.blade.php)
   ===================================================================== */

@media screen and (max-width: 1024px) {
    /* The featured card used a hard 350px height, which stretches on
       tablets: let the aspect-ratio drive the height instead. */
    .header .feature .auctionItemCard img {
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: 420px;
    }
}

@media screen and (max-width: 480px) {
    .homeContainer .homeContent .header {
        margin-block: 12px;
        padding-block: 12px;
        padding-inline: 12px;
        row-gap: 24px;
    }

    .homeContainer .homeContent .header h1 {
        font-size: 24px;
    }

    .sectionTitle {
        font-size: 24px;
        margin-bottom: 22px;
    }

    /* Stacked, full-width taps for the hero CTAs. */
    .header .buttonsContainer {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
        padding-top: 20px;
    }

    .header .buttonsContainer a,
    .bca-hero-btn {
        width: 100%;
        text-align: center;
        padding-block: 14px;
    }

    .featuredAuctionsMap {
        margin-top: 40px;
        padding-inline: 12px;
    }
}

@media screen and (max-width: 360px) {
    .homeContainer .homeContent .header h1 {
        font-size: 22px;
    }

    .hiwTitle {
        font-size: 17px;
    }
}


/* =====================================================================
   7. AUCTIONS LIST (auction/index.blade.php)
   The page stylesheet is linked from inside @yield('content'), so the
   overrides below carry one extra level of specificity.
   ===================================================================== */

@media screen and (max-width: 767.98px) {
    .AuctionPage {
        padding-inline: 16px;
        margin-block: 20px;
    }

    .auctionPageControls {
        gap: 14px;
        margin-bottom: 22px;
    }

    .AuctionPage .auctionPageControls .controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .AuctionPage .auctionPageControls .controls label {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Thumb-friendly (>=44px) filter and search controls. */
    .AuctionPage .auctionSearchBar,
    .AuctionPage .auctionPageControls .controls label select {
        min-height: 46px;
        padding: 12px 16px;
        font-size: 16px;
    }

    .AuctionPage .auctionContainer {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 22px;
    }

    .AuctionPage .auctionItemCard img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .AuctionPage .auctionItemCard .cardText {
        padding: 14px 16px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    /* Two cards per row on large phones / phone landscape. */
    .AuctionPage .auctionContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }
}

@media screen and (max-width: 359.98px) {
    .AuctionPage {
        padding-inline: 12px;
    }
}

/* On phones the floating "Create Auction" button covered page content, the
   footer and the chat bubble (and the per-page duplicates were hidden).
   The layout level button - the one rendered by layouts/app.blade.php -
   becomes a centred inline pill; page level duplicates keep hiding. */
@media screen and (max-width: 800px) {
    .createItemBtn {
        visibility: hidden;
    }

    .dashContainer > a {
        display: block;
        width: 100%;
        text-align: center;
        padding-inline: 16px;
    }

    .dashContainer > a > .createItemBtn {
        visibility: visible;
        position: static;
        right: auto;
        bottom: auto;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 20px auto 26px;
        padding: 12px 22px;
        width: auto;
        max-width: 100%;
        border-radius: 50px;
        background-color: #D6482C;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(214, 72, 44, 0.3);
        transform: none;
    }

    .dashContainer > a > .createItemBtn svg {
        width: 22px;
        height: 22px;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: #fff;
    }
}


/* =====================================================================
   8. AUCTION DETAIL (auction/show.blade.php)
   Overrides of the page stylesheet use a `body` prefix to win the cascade.
   ===================================================================== */

@media screen and (max-width: 767.98px) {
    body .auctionItemViewContainer {
        padding-inline: 16px;
    }

    body .auctionItemViewContainer .itemContent .description {
        font-size: 15px;
        line-height: 1.55;
    }

    body .subHeading {
        margin-top: 26px;
        font-size: 20px;
    }

    body .nextRoundCountdown h2 {
        font-size: 22px;
    }

    body .bestFinalContainer {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    body .auctionItemViewContainer {
        padding-inline: 12px;
    }

    body .auctionItemViewContainer .itemContent h1 {
        font-size: 24px;
    }

    body .auctionItemViewContainer .itemContent .description {
        font-size: 14.5px;
    }
}


/* =====================================================================
   9. AUTH PAGES (auth/login, signup, forgot-password, otp, reset-password)
   The page specific rules live in loginStyle.css (login / signup /
   forgot-password) and auth.css (otp / reset-password) because those two
   files are applied AFTER this one. Only page agnostic helpers stay here.
   ===================================================================== */

@media screen and (max-width: 991.98px) {
    /* 48px tall primary actions are easier to hit with a thumb. */
    .login-btn,
    .signup-left .login-btn {
        min-height: 48px;
    }
}

@media screen and (max-width: 575.98px) {
    .signUp .termsCheckBox,
    .contactForm .termsCheckBox {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .otp-container {
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================================================
   10. ACCOUNT / PROFILE (account/profile/index, account/profile/edit)
   ===================================================================== */

@media screen and (max-width: 991.98px) {
    /* The profile edit page stacks its sidebar above the form below 992px. */
    .profile-tabs {
        margin-bottom: 22px;
        height: auto;
    }

    .profile-edit-modern-section {
        padding: 40px 0 50px;
    }
}

@media screen and (max-width: 575.98px) {
    .profileContainer .header h2 {
        word-break: break-word;
    }

    .profileContainer .accountControls button {
        min-height: 44px;
        font-size: 15px;
    }

    .personalInformationContainer .informationBoxes .saveBtn,
    .profileContainer .accountControls button {
        width: 100%;
        max-width: 100%;
    }

    .toggleContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
    }
}


/* =====================================================================
   11. LEGAL / STATIC CONTENT (page.blade.php, how-it-works, about, faqs)
   ===================================================================== */

@media screen and (max-width: 680px) {
    .terms-container {
        padding: 20px 14px;
    }

    .terms-header h1 {
        font-size: 22px;
    }

    .terms-content > h2:first-of-type {
        font-size: 22px;
    }
}

/* CMS driven content can include long unbroken strings (URLs, SKUs). */
.terms-content,
.description,
.dealTerms,
.mainContainer,
.howItWorks {
    overflow-wrap: anywhere;
}

@media screen and (max-width: 600px) {
    .mainContainer .content .howItWorks .workCards {
        width: 100%;
        max-width: 100%;
    }

    .workCards .card {
        padding: 14px 16px;
    }
}


/* =====================================================================
   12. CONTACT PAGE (contact-us.blade.php)
   ContactUs.css loads from inside @yield('content'), so use `body`.
   ===================================================================== */

@media screen and (max-width: 400px) {
    body .contactContainer {
        margin: 28px 10px;
        padding: 22px 14px;
    }

    body .contactSubtitle {
        font-size: 14px;
    }

    .contactButton {
        min-height: 48px;
    }
}


/* =====================================================================
   13. IOS SAFARI INPUT-ZOOM GUARD
   iOS zooms the whole page when a focused field renders below 16px.
   The OTP boxes are excluded because they are intentionally sized down
   on very small screens (see auth.css).
   ===================================================================== */

@media screen and (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.otp-input),
    select:not(.otp-input),
    textarea {
        font-size: 16px !important;
    }
}


/* =====================================================================
   14. DEVICE SPECIFIC GUARDS
   ===================================================================== */

/* --- Short landscape phones (e.g. 667x375, 844x390) --- */
@media screen and (max-height: 520px) and (orientation: landscape) {
    .homeContainer .homeContent .header {
        margin-block: 16px;
        padding-block: 16px;
    }

    .header .buttonsContainer {
        padding-top: 16px;
    }

    .featuredAuctionsMap {
        margin-top: 30px;
    }

    .howItWorks {
        margin-top: 30px;
    }

    /* Keep the auth forms reachable without scrolling in landscape. */
    .loginContainer,
    .loginCoverImage {
        min-height: auto;
    }

    .loginCoverImage {
        display: none;
    }

    .signup-wrapper,
    .signup-wrapper .row {
        min-height: auto;
    }

    .otp-container {
        margin: 14px 0 8px;
    }

    .sideBtns {
        padding-block: 8px;
    }
}

/* --- Touch / no-hover devices: hover effects stick after a tap --- */
@media (hover: none), (pointer: coarse) {
    body .auctionItemCard:hover {
        transform: none;
    }

    .createItemBtn:hover,
    .contactButton:hover,
    .profile-edit-btn:hover,
    .logoutBtn:hover {
        transform: none;
    }

    a,
    button,
    [role="button"],
    select,
    label,
    input[type="checkbox"] {
        -webkit-tap-highlight-color: rgba(214, 72, 44, 0.15);
    }
}

/* --- Respect the user's motion preference --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Ultra-wide / 4K monitors: cap the reading width and add columns --- */
@media screen and (min-width: 1600px) {
    body .AuctionPage,
    body .auctionItemViewContainer,
    body .createFormContainer,
    body .terms-container,
    body .mainContainer,
    body .content,
    body .site-content,
    body .homeContainer .homeContent {
        width: 100%;
        max-width: 1440px;
        margin-inline: auto;
    }

    body .auctionContainer {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    body .terms-content {
        column-gap: 60px;
    }

    body .header .feature {
        max-width: 900px;
    }
}

/* --- Print: drop the chrome, keep the content --- */
@media print {
    .Nav,
    .hamburger,
    .sideBtns,
    .menuBackdrop,
    .createItemBtn,
    .chatbot-button,
    .chatbot-popup,
    .header .buttonsContainer,
    .auctionPageControls .controls,
    .carousel-btn,
    .carousel-dots,
    footer {
        display: none !important;
    }

    body,
    .dashboard,
    .dashContainer {
        background: #fff !important;
    }

    a {
        color: #000 !important;
    }

    body .AuctionPage,
    body .auctionItemViewContainer,
    body .createFormContainer,
    body .terms-container,
    body .mainContainer,
    body .homeContainer {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    body .terms-content {
        column-count: 1 !important;
        margin: 0 !important;
    }

    .auctionItemCard {
        break-inside: avoid;
    }

    .auctionItemCard img {
        height: auto !important;
    }
}