/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme for PerPak
 Author:       XTemos / PerPak
 Author URI:   http://perpak.local
 Template:     woodmart
 Version:      1.0.1
 Text Domain:  woodmart
*/

/* ==========================================================================
   PERPAK TYPOGRAPHY SYSTEM
   Headings: Josefin Sans
   Body text: Inter
   ========================================================================== */

/* 1. Global CSS Custom Properties */
:root {
  --wd-text-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --wd-title-font: 'Josefin Sans', sans-serif !important;
  --wd-entities-title-font: 'Josefin Sans', sans-serif !important;
  --wd-widget-title-font: 'Josefin Sans', sans-serif !important;
  --wd-header-el-font: 'Josefin Sans', sans-serif !important;
  --wd-alternative-font: 'Josefin Sans', sans-serif !important;

  /* Elementor Kit tokens */
  --e-global-typography-primary-font-family: 'Josefin Sans', sans-serif !important;
  --e-global-typography-secondary-font-family: 'Josefin Sans', sans-serif !important;
  --e-global-typography-text-font-family: 'Inter', sans-serif !important;
  --e-global-typography-accent-font-family: 'Josefin Sans', sans-serif !important;

  /* PerPak Rentals tokens */
  --pp-font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --pp-font-heading: 'Josefin Sans', sans-serif !important;
}

/* 2. Global Body & Reading Typography (Inter) */
html,
body,
p,
span,
li,
a,
input,
textarea,
select,
button,
label,
table,
td,
th,
.elementor-text-editor,
.woodmart-text-block,
.woocommerce-product-details__short-description,
.entry-content,
.product-description,
.dokan-dashboard,
.perpak-product-card,
.sharely-single-product-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 3. Global Headings & Display Titles (Josefin Sans) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title,
.entry-title,
.product_title,
.product-title,
.woodmart-title,
.woodmart-entry-title,
.wd-entities-title,
.section-title,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6,
.sharely-product-title,
.sharely-section-title,
.sharely-vendor-info h3,
.sharely-price-amount,
.sharely-big-score,
.perpak-product-card .card-title,
.perpak-product-card .card-price,
.perpak-category-card span,
.category-card-title,
.woodmart-navigation .item-level-0 > a,
.whb-navigation .item-level-0 > a,
.main-nav > li > a,
.widget-title,
.dokan-dashboard-header h1,
.whb-column h1,
.whb-column h2,
.whb-column h3 {
  font-family: 'Josefin Sans', sans-serif !important;
  letter-spacing: -0.015em;
}

/* 4. Fine-tuning Headings Weights & Appearance */
h1, .h1, .elementor-widget-heading h1, .sharely-product-title {
  font-weight: 700 !important;
  line-height: 1.15;
}

h2, .h2, .elementor-widget-heading h2, .sharely-section-title {
  font-weight: 700 !important;
  line-height: 1.25;
}

h3, .h3, .elementor-widget-heading h3, .perpak-product-card .card-title {
  font-weight: 600 !important;
  line-height: 1.3;
}

h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 600 !important;
}

/* 5. Nav Links and Menu Items */
.whb-navigation .menu > li > a,
.whb-secondary-menu .menu > li > a,
.woodmart-navigation .menu > li > a {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 6. Buttons with Display Typography */
.btn,
.button,
.elementor-button,
.woodmart-btn,
.sharely-btn-store,
.sharely-btn-book {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 7. PerPak Single Product Cart Button & Spinner States */
.sharely-btn-rent-now {
  position: relative !important;
  overflow: hidden;
}
.sharely-btn-rent-now.loading {
  color: transparent !important;
  pointer-events: none;
}
.sharely-btn-rent-now.loading svg {
  opacity: 0;
}
.sharely-btn-rent-now.loading:after {
  content: "";
  position: absolute;
  top: calc(50% - 11px);
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  border: 3px solid rgba(6, 35, 22, 0.25);
  border-top-color: #062316;
  border-radius: 50%;
  animation: ppSpin 0.7s infinite linear;
}
@keyframes ppSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 8. Unified Dark Grey Product Card Top-Left Badge for All Types */
.perpak-product-card .cat-badge,
.perpak-badge-sale,
.perpak-badge-item_rent,
.perpak-badge-apartment,
.perpak-badge-commercial,
.perpak-badge-land,
.perpak-type-badge-card {
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
}

/* 9. Mobile Responsive Product Cards (max-width: 767px) */
@media (max-width: 767px) {
  /* Compact Ad Type Badge on Mobile Product Cards */
  .perpak-product-card .cat-badge,
  .perpak-product-card .card-media .cat-badge,
  .perpak-badge-sale,
  .perpak-badge-item_rent,
  .perpak-badge-apartment,
  .perpak-badge-commercial,
  .perpak-badge-land,
  .perpak-type-badge-card,
  .card-media .cat-badge,
  .product-grid-item .cat-badge,
  .wd-product .cat-badge {
    display: inline-flex !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 2.5px 7px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #334155 !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    max-width: calc(100% - 44px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 3 !important;
    letter-spacing: 0.01em !important;
  }

  .perpak-products-grid {
    gap: 10px !important;
  }
  .perpak-product-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .perpak-product-card .card-body {
    padding: 10px 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: flex-start !important;
  }
  .perpak-product-card .card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 35px !important;
  }
  .perpak-product-card .card-price-row {
    margin-bottom: 5px !important;
  }
  .perpak-product-card .card-price,
  .perpak-product-card .card-price .woocommerce-Price-amount {
    font-size: 15px !important;
  }
  .perpak-product-card .card-meta {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    color: #64748b !important;
  }
  /* Hide vendor name on mobile to keep meta clean and single-line */
  .perpak-product-card .card-meta .meta-dot,
  .perpak-product-card .card-meta .meta-vendor,
  .perpak-product-card .card-meta .meta-item:last-child {
    display: none !important;
  }
  /* Hide tags/specs on mobile to eliminate clutter and make cards compact and uniform */
  .perpak-product-card .card-specs {
    display: none !important;
  }
}

/* ==========================================================================
   PERPAK SINGLE PRODUCT MOBILE RESPONSIVE GUARDS
   ========================================================================== */
body.single-product {
  overflow-x: hidden !important;
}

@media (max-width: 991px) {
  .single-product .main-page-wrapper,
  .single-product .site-content,
  .single-product-page,
  .sharely-single-product-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 768px) {
  .single-product .main-page-wrapper {
    padding-top: 10px !important;
  }
  .sharely-single-product-container {
    padding: 14px 14px 30px 14px !important;
  }
  /* Ensure WoodMart breadcrumbs don't double up or overflow */
  .single-product .page-title-default {
    display: none !important;
  }
}

.perpak-mobile-sticky-bar {
  display: none !important;
}

/* ==========================================================================
   PERPAK CUSTOMER-TO-VENDOR UPGRADE & STORE URL STYLES
   ========================================================================== */
.woocommerce-MyAccount-navigation-link--account-migration a {
  color: #0284c7 !important;
  font-weight: 600 !important;
}
.woocommerce-MyAccount-navigation-link--account-migration a:hover {
  color: #0369a1 !important;
}

.perpak-customer-upgrade-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 16px;
  padding: 24px 28px;
  margin: 20px 0 30px 0;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
  box-sizing: border-box;
}

.perpak-customer-upgrade-card .perpak-cuc-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(2, 132, 199, 0.12);
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.perpak-customer-upgrade-card .perpak-cuc-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.perpak-customer-upgrade-card .perpak-cuc-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.perpak-customer-upgrade-card .perpak-cuc-desc {
  font-size: 14px;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

.perpak-customer-upgrade-card .perpak-cuc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #ffffff !important;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.perpak-customer-upgrade-card .perpak-cuc-btn:hover {
  background: #0284c7;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

@media (max-width: 768px) {
  .perpak-customer-upgrade-card {
    padding: 20px;
  }
  .perpak-customer-upgrade-card .perpak-cuc-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .perpak-customer-upgrade-card .perpak-cuc-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Account Migration Page Form */
.perpak-vendor-upgrade-wrapper {
  max-width: 680px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.perpak-vendor-upgrade-header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.perpak-vendor-upgrade-header .perpak-vuh-icon {
  font-size: 38px;
  margin-bottom: 10px;
}

.perpak-vendor-upgrade-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.perpak-vendor-upgrade-header .perpak-vuh-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

.perpak-vendor-upgrade-form .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}

.perpak-vendor-upgrade-form .form-control {
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.perpak-vendor-upgrade-form .form-control:focus {
  border-color: #0284c7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.perpak-field-hint {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 5px;
}

.perpak-terms-row {
  margin: 20px 0 24px 0;
}

.perpak-terms-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}

.perpak-upgrade-submit-btn {
  width: 100% !important;
  padding: 14px 24px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.perpak-upgrade-submit-btn:hover {
  background: #0284c7 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

@media (max-width: 600px) {
  .perpak-vendor-upgrade-wrapper {
    padding: 20px 18px;
    border-radius: 12px;
  }
  .perpak-vendor-upgrade-header h2 {
    font-size: 20px;
  }
}