/*
Theme Name: iBid Child
Theme URI: https://ibid.modeltheme.com/
Template: ibid
Author: ModelTheme
Author URI: http://modeltheme.com/
Description: Multi Vendor Auctions WooCommerce Theme
Version: 1.1.0
Text Domain: ibid
Tags: custom-header, custom-menu, featured-images, post-formats, sticky-post
*/
/* Theme customization starts here
------------------------------------------------------- */

/* =====================================================================
   POPGRIT — permanent dark foundation (2026-06-01)
   Replaces the wp-dark-mode plugin (removed). The iBid theme's true
   default background is WHITE; only Elementor sections + our custom
   components painted themselves dark, and the plugin darkened the rest.
   With the plugin gone, these rules make dark the AUTHORED baseline so
   generic pages (404, account, etc.), the body, the login/signup modal
   and the search overlay are seamlessly dark instead of reverting white.

   Palette matches the Coms stack: bg #0a0a0a, surface #141414,
   border #262626, text #f3f3f1 / muted #9a9a98, brand yellow #FCCA19.
   ===================================================================== */

:root {
  --pg-bg: #0a0a0a;
  --pg-surf: #141414;
  --pg-bd: #262626;
  --pg-tx: #f3f3f1;
  --pg-tx2: #9a9a98;
  --pg-y: #fcca19;
}

/* --- base surfaces: catch the body + generic theme pages (incl. 404) ---
   The iBid theme enqueues responsive.css + mt-addons (Bootstrap) AFTER the
   child stylesheet, setting `body{background:#fff}` and `body{background:
   var(--bs-body-bg)}`. Those are plain `body` selectors (same specificity as
   ours but later in load order), so we use `html body` (one extra element →
   higher specificity, wins regardless of order) and override the Bootstrap
   var. No !important needed on the base. */
:root,
html {
  --bs-body-bg: #0a0a0a;
}
html body,
html body #page,
html body .site-content,
html body .content-area,
html body #primary,
html body main.site-main {
  background-color: var(--pg-bg);
  color: var(--pg-tx);
}

/* default body text on the theme reverts to near-black (#242424 / #3f3f3f),
   which is invisible on dark — lift it to the light palette */
html body .content-area,
html body .entry-content,
html body .page-content {
  color: var(--pg-tx);
}

/* generic 404 / theme error + utility pages */
html body.error404 .content-area,
html body.error404 #primary {
  background-color: var(--pg-bg);
  color: var(--pg-tx);
}
html body.error404 h1,
html body.error404 h2,
html body.error404 p {
  color: var(--pg-tx) !important;
}

/* --- login / signup modal (iBid ModelTheme modal renders pure white) --- */
.modeltheme-content,
#login-modal-content,
.modeltheme-modal .modal-content {
  background-color: var(--pg-surf) !important;
  color: var(--pg-tx) !important;
  border: 1px solid var(--pg-bd) !important;
}
.modeltheme-content h1,
.modeltheme-content h2,
.modeltheme-content h3,
.modeltheme-content label,
#login-modal-content label {
  color: var(--pg-tx) !important;
}
.modeltheme-content input,
.modeltheme-content select,
.modeltheme-content textarea,
#login-modal-content input,
#login-modal-content select {
  background-color: #0f0f0f !important;
  color: var(--pg-tx) !important;
  border: 1px solid var(--pg-bd) !important;
}

/* --- fixed search overlay (renders near-white) --- */
.fixed-search-overlay,
.search-overlay {
  background-color: rgba(10, 10, 10, 0.97) !important;
  color: var(--pg-tx) !important;
}
.fixed-search-overlay input,
.search-overlay input {
  background-color: transparent !important;
  color: var(--pg-tx) !important;
  border-bottom: 1px solid var(--pg-bd) !important;
}

.pg-footer {
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 70px 6vw 50px;
}
.pg-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 50px;
}
.pg-footer-wordmark {
  font-family: "ImpactLabelReversed", sans-serif !important;
  font-size: 22px;
  letter-spacing: 0.3em;
  color: #fcca19;
  margin-bottom: 16px;
  display: block;
}
.pg-footer-tagline {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.7;
  max-width: 240px;
}
.pg-footer-col-label {
  font-family: "ImpactLabelReversed", sans-serif !important;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #fcca19;
  margin-bottom: 24px;
  display: block;
}
.pg-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pg-footer-links li {
  margin-bottom: 14px;
}
.pg-footer-links a {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none !important;
  transition: color 0.2s;
  display: block;
}
.pg-footer-links a:hover {
  color: #fff;
}
/* Join/Register CTA (replaced the newsletter column 2026-06-01 — single email
   channel by design: you register or you get nothing). */
.pg-footer-join-text {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  margin-bottom: 16px;
}
.pg-footer-join-btn {
  display: inline-block;
  background: #fcca19;
  color: #0a0a0a !important;
  text-decoration: none !important;
  font-family: "ImpactLabelReversed", sans-serif !important;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 12px 28px;
  transition: background 0.2s;
}
.pg-footer-join-btn:hover {
  background: #ffd84b;
  color: #0a0a0a !important;
}
.pg-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 50px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pg-footer-copy {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.18);
}
/* tablet → 2-col, phone → 1-col (reconstructed from the original cascade) */
@media (max-width: 900px) {
  .pg-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .pg-footer-inner {
    grid-template-columns: 1fr;
  }
  .pg-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Hide the global footer on Coms (page-id-661) — it's the social feed, an
   app-like engagement surface where a marketing footer doesn't belong (no feed
   product has one; it falsely signals "end of page" on an infinite scroll).
   The footer otherwise renders site-wide via wp_footer; this is the one
   deliberate exception. Covers both states (logged-out gate + logged-in feed,
   both carry .page-id-661). Decided 2026-06-01. Reinstate by deleting this. */


/* --- 404 page illustration: light "clouds"/art reads wrong on black.
   Tone the SVG/illustration down so the dark bg stays seamless. The
   numerals + cones are theme art; we dim the near-white cloud layers. --- */
html body.error404 img,
html body.error404 svg {
  opacity: 0.85;
}
html body.error404 .error-404-content,
html body.error404 .not-found-content {
  background-color: transparent !important;
}

/* =====================================================================
   POPGRIT — mobile-first navigation (2026-06-01)
   The iBid Bootstrap navbar collapses into nav.bottom-navbar-default
   .pull-right (floated right, width:0, x≈574 on a phone) so the opened
   .navbar-collapse renders OFF the right edge — invisible/unusable.
   We override it into a full-width dark overlay (Novamira-style, POPGRIT
   brand): the JS in functions.php toggles `body.pg-mob-open`.
   Scoped to <= 992px (iBid's mobile breakpoint).
   ===================================================================== */
@media (max-width: 992px) {
  /* --- prevent iOS Safari auto-zoom on input focus ---
     The theme's body font is 14px; any form field < 16px makes iPhone Safari
     zoom in when tapped. Force 16px on all text-entry fields (and lift body
     copy to 16px for readability). --- */
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="password"],
  html body input[type="tel"],
  html body input[type="number"],
  html body input[type="search"],
  html body input[type="url"],
  html body select,
  html body textarea {
    font-size: 16px !important;
  }
  html body,
  html body p {
    font-size: 16px;
  }

  /* --- slimmer mobile header (was ~105px → ~64px). The height comes from
     .navbar-header content (logo 64px + toggle). Shrink the logo + tighten
     paddings so the bar lands ~64px. --- */
  html body #ibid-main-head {
    min-height: 64px !important;
  }
  html body #ibid-main-head .navbar-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }
  html body #ibid-main-head .logo,
  html body #ibid-main-head .navbar-brand {
    height: auto !important;
    line-height: 1 !important;
  }
  html body #ibid-main-head .logo img,
  html body #ibid-main-head .navbar-brand img {
    max-height: 30px !important;
    height: 30px !important;
    width: auto !important;
  }
  html body #ibid-main-head .logo h1,
  html body #ibid-main-head .logo a {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* --- hamburger: make it a clear, tappable control --- */
  html body button.navbar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 10px 4px !important;
    border: 1px solid var(--pg-bd) !important;
    border-radius: 10px !important;
    background: var(--pg-surf) !important;
    position: relative;
    z-index: 100060;
  }
  html body button.navbar-toggle .icon-bar {
    background: var(--pg-tx) !important;
    width: 22px !important;
  }

  /* --- hide the theme's broken Bootstrap collapse on mobile; we use our own --- */
  html body .navbar-collapse {
    display: none !important;
  }

  /* hamburger → ✕ morph when open */
  html body.pg-mob-open button.navbar-toggle .icon-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  html body.pg-mob-open button.navbar-toggle .icon-bar:nth-child(2) {
    opacity: 0;
  }
  html body.pg-mob-open button.navbar-toggle .icon-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  html body button.navbar-toggle .icon-bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    margin: 3px auto;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* ---------------------------------------------------------------
     OUR custom mobile menu (#pg-mobile-menu, built by functions.php JS).
     Appended to <body>, so no inherited theme flex/float/positioning.
     Full-width dark overlay, big tap rows, hairline dividers.
     --------------------------------------------------------------- */
  /* High specificity (html body #id) + explicit values so the theme's
     `html body ul{display:flex}` and other rules can't leak in. Hardcode the
     dark hex (don't rely on --pg-bg cascading into this late-appended node). */
  html body #pg-mobile-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #0a0a0a !important;
    z-index: 100050 !important;
    padding: 78px 0 40px !important; /* clears the ~64px header */
    overflow-y: auto !important;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }
  html body.pg-mob-open #pg-mobile-menu {
    transform: translateX(0);
    visibility: visible;
  }
  html body.pg-mob-open {
    overflow: hidden;
  } /* lock page scroll behind overlay */

  html body #pg-mobile-menu .pg-mm-list {
    display: block !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  html body #pg-mobile-menu .pg-mm-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #262626 !important;
  }
  html body #pg-mobile-menu .pg-mm-item > a {
    display: block !important;
    padding: 20px 24px !important;
    min-height: 56px;
    line-height: 1.3 !important;
    color: #f3f3f1 !important;
    text-decoration: none !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }
  html body #pg-mobile-menu .pg-mm-item > a:active,
  html body #pg-mobile-menu .pg-mm-item > a:hover {
    background: #141414 !important;
    color: #fcca19 !important;
  }
  html body #pg-mobile-menu .pg-mm-item.is-active > a {
    color: #fcca19 !important;
    border-left: 3px solid #fcca19;
    padding-left: 21px !important;
  }
  /* Sign in / My account row, set apart at the foot */
  html body #pg-mobile-menu .pg-mm-foot {
    margin-top: 18px !important;
    border-top: 1px solid #262626 !important;
    border-bottom: none !important;
  }
  html body #pg-mobile-menu .pg-mm-foot > a {
    color: #fcca19 !important;
  }
}

/* keep our custom menu hidden entirely on desktop */
@media (min-width: 993px) {
  #pg-mobile-menu {
    display: none !important;
  }
}

/* =====================================================================
   POPGRIT — dark surfaces, site-wide convention (2026-06-02)
   A dark site shouldn't flash white panels. This sweep darkens the
   dropdowns, custom selects, search boxes, form fields, WooCommerce
   notices/tabs, the shop toolbar, product cards and the My Account
   left-nav that the theme/Woo still render light (found via a live audit
   of /my-account, /market, single product). Convention: dark panel
   #1e1e1e / surface #141414, hairline border var(--pg-bd), light text
   var(--pg-tx), brand teal #21c7b6 on hover, left-aligned nav. `html body`
   + !important so these beat the late, low-specificity theme/Woo CSS.
   Mirrors the My Popgrit dropdown (styled in the Customizer header block).
   ===================================================================== */

/* --- custom selects (.nice-select) + their option lists (shop "sort by") --- */
html body .nice-select,
html body .nice-select.orderby,
html body .nice-select.form-control1 {
  background-color: #1e1e1e !important;
  color: var(--pg-tx) !important;
  border: 1px solid var(--pg-bd) !important;
}
html body .nice-select .list {
  background-color: #1e1e1e !important;
  border: 1px solid var(--pg-bd) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}
html body .nice-select .option {
  color: var(--pg-tx) !important;
  background: transparent !important;
}
html body .nice-select .option:hover,
html body .nice-select .option.focus,
html body .nice-select .option.selected {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* --- search boxes (product search / header menu-search) --- */
html body form.woocommerce-product-search,
html body .menu-search,
html body .menu-search .form-control,
html body .woocommerce-product-search input.search-field,
html body form.woocommerce-product-search input {
  background-color: #1e1e1e !important;
  color: var(--pg-tx) !important;
  border-color: var(--pg-bd) !important;
}
html body .menu-search input::placeholder,
html body .woocommerce-product-search input::placeholder {
  color: var(--pg-tx2) !important;
}

/* --- number / quantity inputs that still render white --- */
html body input.qty,
html body .quantity input.qty,
html body input[type="number"] {
  background-color: #0f0f0f !important;
  color: var(--pg-tx) !important;
  border: 1px solid var(--pg-bd) !important;
}

/* --- WooCommerce notices (info / message / error) --- */
html body .woocommerce-info,
html body .woocommerce-message,
html body .woocommerce-noreviews,
html body .woocommerce-error {
  background-color: #1e1e1e !important;
  color: var(--pg-tx) !important;
  border-top: 3px solid var(--pg-y) !important;
}
html body .woocommerce-info::before,
html body .woocommerce-message::before {
  color: var(--pg-y) !important;
}
html body .woocommerce-info a,
html body .woocommerce-message a {
  color: var(--pg-y) !important;
}

/* --- product description / review tab panels --- */
html body .woocommerce-Tabs-panel,
html body .woocommerce-tabs .panel,
html body .wc-tab {
  background-color: transparent !important;
  color: var(--pg-tx) !important;
}

/* --- shop toolbar (sort/filter row) --- */
html body .ibid-shop-sort-group {
  background-color: #141414 !important;
  border: 1px solid var(--pg-bd) !important;
}

/* --- product cards — shop archive + related/up-sell (were white) --- */
html body .products-wrapper,
html body .archive-product-title,
html body .details-container,
html body .countdownv2_inner_holder {
  background-color: #141414 !important;
}
html body .products-wrapper {
  border: 1px solid var(--pg-bd) !important;
}
html body .archive-product-title,
html body .archive-product-title a,
html body .details-container {
  color: var(--pg-tx) !important;
}
html body .archive-product-title a:hover {
  color: var(--pg-y) !important;
}
html body .products-wrapper .amount,
html body .details-container .amount {
  color: var(--pg-y) !important;
}

/* --- WooCommerce My Account — left-nav follows the dropdown convention:
       dark panel, white text, LEFT-aligned, teal on hover/active --- */
html body .woocommerce-MyAccount-navigation ul {
  background: transparent !important;
  border: 1px solid var(--pg-bd) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .woocommerce-MyAccount-navigation li {
  background: transparent !important;
  border-bottom: 1px solid var(--pg-bd) !important;
}
html body .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none !important;
}
html body .woocommerce-MyAccount-navigation li a {
  display: block !important;
  background: #1e1e1e !important;
  color: var(--pg-tx) !important;
  text-align: left !important;
  padding: 13px 18px !important;
  text-decoration: none !important;
  transition: color 0.18s ease, background 0.18s ease !important;
}
html body .woocommerce-MyAccount-navigation li a:hover,
html body .woocommerce-MyAccount-navigation li.is-active a {
  background: #242424 !important;
  color: #21c7b6 !important;
}

/* --- select2 dropdowns (Dokan / Woo filters) commonly render white --- */
html body .select2-container--default .select2-selection,
html body .select2-dropdown,
html body .select2-results__options {
  background-color: #1e1e1e !important;
  color: var(--pg-tx) !important;
  border-color: var(--pg-bd) !important;
}
html body .select2-results__option {
  background: transparent !important;
  color: var(--pg-tx) !important;
}
html body .select2-results__option--highlighted {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* --- generic text inputs / selects / textareas site-wide (no white boxes):
       account edit, checkout, Dokan, comment + search forms --- */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="password"],
html body input[type="url"],
html body input[type="search"],
html body select,
html body textarea,
html body .form-control,
html body .dokan-form-control {
  background-color: #0f0f0f !important;
  color: var(--pg-tx) !important;
  border: 1px solid var(--pg-bd) !important;
}
html body input::placeholder,
html body textarea::placeholder {
  color: var(--pg-tx2) !important;
}

/* --- WooCommerce tables (cart / checkout / orders / account) --- */
html body .woocommerce table.shop_table,
html body .woocommerce .cart_totals table,
html body .woocommerce-checkout-review-order-table,
html body table.my_account_orders {
  background-color: #141414 !important;
  color: var(--pg-tx) !important;
}
html body .woocommerce table.shop_table th,
html body .woocommerce table.shop_table td,
html body .woocommerce table.shop_table tr {
  border-color: var(--pg-bd) !important;
  color: var(--pg-tx) !important;
}

.text-white {
  color: #fff !important;
}
.ibid-breadcrumbs {
  display: none;
}