/* ========================================
   Mobile Responsive Fixes for Arclok
   ======================================== */

/* ========================================
   1. NAVBAR / HEADER FIXES
   ======================================== */

/* Navbar toggler clean style — all screen sizes */
.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none;
}

/* ── Transparent Mobile Nav ─────────────────────────── */
.mobile-nav-transparent {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: transparent !important;
  padding: 0.9rem 0.5rem !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  color: #fff;
}

.mobile-nav-transparent .mobile-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0.45rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.2s;
}

.mobile-nav-transparent .mobile-nav-icon-btn:hover {
  opacity: 0.75;
}

/* Scrolled state — solid dark background */
.mobile-nav-transparent.mobile-nav-scrolled {
  background: rgb(13 13 13 / 41%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

/* ── Offset main content so it doesn't hide under fixed nav ── */
@media (max-width: 991.98px) {
  body > main {
    /* hero overlaps — no offset needed; handled by hero itself */
  }
}

/* Mobile Navbar layout overrides */
@media (max-width: 991.98px) {
  /* Fix navbar layout to show all items in one line */
  .navbar .container-fluid .row {
    margin: 0 !important;
  }

  .navbar .container-fluid .row > div {
    padding: 0 5px !important;
  }

  /* Navbar padding adjustment */
  .navbar {
    padding: 0.75rem 0.5rem !important;
  }

  /* Icons alignment */
  .navbar .list-unstyled {
    gap: 0.5rem !important;
    align-items: center;
  }

  .navbar .list-unstyled li {
    margin: 0 !important;
  }

  .navbar .list-unstyled a {
    padding: 0.25rem !important;
    display: flex;
    align-items: center;
  }

  .mobile-search-form {
    position: relative;
  }

  .mobile-search-form .form-control {
    height: 46px;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border-radius: 999px;
    font-size: 0.95rem;
  }

  .mobile-search-submit {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
  }
}

/* ========================================
   2. HERO SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  /* Reduce hero section padding */
  #billboard {
    padding: 2rem 0 !important;
  }

  #billboard .container {
    padding: 0 1rem;
  }

  #billboard .row.justify-content-center {
    margin-bottom: 1.5rem !important;
  }

  /* Hero heading */
  #billboard h1.display-3 {
    font-size: 1.75rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.3;
  }

  /* Hero description */
  #billboard p.lead {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Hero buttons */
  #billboard .d-flex.gap-3 {
    margin-bottom: 2rem !important;
    flex-direction: column;
    gap: 0.75rem !important;
  }

  #billboard .btn-lg {
    padding: 0.65rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  /* Hero swiper */
  #billboard .swiper {
    padding: 1rem 0 !important;
  }
}

/* ========================================
   3. FEATURES SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .features {
    padding: 2rem 0 !important;
  }

  .features .feature-item {
    padding: 1.5rem 1rem !important;
  }

  .features .feature-icon {
    margin-bottom: 0.75rem !important;
  }

  .features .feature-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .features h4 {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .features p {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   4. CATEGORIES SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .categories {
    padding: 2rem 0 !important;
  }

  .categories .section-header {
    margin-bottom: 1.5rem !important;
  }

  .categories .section-title {
    font-size: 1.5rem !important;
  }
}

/* ========================================
   5. NEW ARRIVALS SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .new-arrival {
    padding: 2rem 0 !important;
  }

  .section-header-compact {
    margin-bottom: 1.5rem !important;
  }

  .section-header-compact h2 {
    font-size: 1.5rem !important;
  }

  .section-header-compact p {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   6. NEWSLETTER SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .newsletter-section {
    padding: 2rem 0 !important;
  }

  .newsletter-content {
    padding: 1.5rem 0 !important;
  }

  .newsletter-section h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .newsletter-section p {
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ========================================
   7. BLOG SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .blog-section {
    padding: 2rem 0 !important;
  }

  .blog-section .section-header {
    margin-bottom: 1.5rem !important;
  }

  .blog-section .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .blog-section .section-subtitle {
    font-size: 0.875rem !important;
  }

  /* Blog card spacing */
  .blog-card {
    margin-bottom: 1rem;
    height: auto !important;
  }

  .blog-card-content {
    padding: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .blog-card-img {
    margin-bottom: 0 !important;
  }

  .blog-card-img img {
    margin-bottom: 0 !important;
  }

  .blog-meta {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .blog-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
  }

  .blog-excerpt {
    font-size: 0.875rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
  }

  .blog-read-more {
    font-size: 0.875rem !important;
    margin-bottom: 0 !important;
    display: inline-block;
  }

  /* Blog swiper spacing */
  .blog-swiper {
    padding: 0 !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0 !important;
  }

  .blog-swiper .swiper-slide {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .blog-swiper .swiper-pagination {
    bottom: 0 !important;
    margin-top: 0.75rem !important;
  }

  .blog-section .text-center.mt-5 {
    margin-top: 2rem !important;
  }
}

/* ========================================
   8. REVIEWS SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .reviews-section {
    padding: 2rem 0 !important;
  }

  .reviews-section .section-header {
    margin-bottom: 1.5rem !important;
  }

  .reviews-section .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .reviews-section .section-subtitle {
    font-size: 0.875rem !important;
  }

  /* Review card spacing */
  .review-card {
    padding: 1.5rem 1rem !important;
    margin-bottom: 1rem;
    height: auto !important;
  }

  .review-avatar {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 0.75rem !important;
  }

  .review-avatar img {
    width: 60px !important;
    height: 60px !important;
  }

  .review-stars {
    font-size: 0.875rem !important;
    margin-bottom: 0.75rem !important;
  }

  .review-text {
    font-size: 0.875rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
  }

  .review-author {
    font-size: 0.95rem !important;
    margin-bottom: 0.25rem !important;
  }

  .review-location {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
  }

  /* Reviews swiper spacing */
  .reviews-swiper {
    padding: 0 !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0 !important;
  }

  .reviews-swiper .swiper-slide {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .reviews-swiper .swiper-pagination {
    bottom: 0 !important;
    margin-top: 0.75rem !important;
  }

  /* Customer stats */
  .reviews-section .row.mt-5 {
    margin-top: 2rem !important;
  }

  .stat-item h3 {
    font-size: 2rem !important;
  }

  .stat-item p {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   9. FAQ SECTION FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .faq-section {
    padding: 2rem 0 !important;
  }

  .faq-section .section-header {
    margin-bottom: 1.5rem !important;
  }

  .faq-section .section-title {
    font-size: 1.5rem !important;
  }

  .faq-section .section-subtitle {
    font-size: 0.875rem !important;
  }

  .faq-accordion .accordion-button {
    font-size: 0.95rem !important;
    padding: 1rem !important;
  }

  .faq-accordion .accordion-body {
    font-size: 0.875rem !important;
    padding: 1rem !important;
  }
}

/* ========================================
   10. SHOP PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .shop-sidebar {
    margin-bottom: 2rem;
  }

  .shop-sidebar .widget {
    margin-bottom: 1.5rem !important;
  }

  .shop-sidebar .widget-title {
    font-size: 1.1rem !important;
  }

  /* Product grid */
  .product-item {
    margin-bottom: 1.5rem;
  }

  .product-item .product-content h5 {
    font-size: 0.95rem !important;
  }

  .product-item .product-content a {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   11. PRODUCT DETAIL PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .product-details {
    margin-top: 1.5rem;
  }

  .product-title {
    font-size: 1.5rem !important;
  }

  .product-price h3 {
    font-size: 1.75rem !important;
  }

  .product-description h5 {
    font-size: 1.1rem !important;
  }

  .product-description p {
    font-size: 0.875rem !important;
  }

  .product-actions .btn {
    font-size: 0.875rem !important;
    padding: 0.65rem 1rem !important;
  }

  /* Product images */
  .main-image img {
    height: 300px !important;
  }

  .thumbnail-img {
    height: 60px !important;
  }
}

/* ========================================
   12. CART PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .cart-item {
    padding: 1rem 0 !important;
  }

  .cart-item .row > div {
    margin-bottom: 0.5rem;
  }

  .cart-item img {
    height: 60px !important;
  }

  .cart-item h6 {
    font-size: 0.95rem !important;
  }

  .quantity-controls {
    justify-content: flex-start !important;
  }

  .quantity-input {
    width: 50px !important;
  }

  .cart-summary {
    margin-top: 2rem;
    padding: 1.5rem !important;
  }

  .cart-summary h5 {
    font-size: 1.1rem !important;
  }
}

/* ========================================
   13. CHECKOUT PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .checkout-section {
    padding: 2rem 0 !important;
  }

  .checkout-section h2 {
    font-size: 1.5rem !important;
  }

  .checkout-section h5 {
    font-size: 1.1rem !important;
  }

  .order-summary {
    margin-top: 2rem;
  }
}

/* ========================================
   14. FOOTER FIXES
   ======================================== */

/* Footer logo — fluid, looks good on all screen sizes */
.footer-logo-link {
  display: inline-block;
  line-height: 1;
}

.footer-logo-img {
  display: block;
  width: clamp(140px, 18vw, 280px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  #footer {
    padding: 2rem 0 !important;
  }

  #footer .footer-menu {
    margin-bottom: 2rem;
  }

  .footer-logo-img {
    width: clamp(130px, 36vw, 200px);
  }

  #footer p {
    font-size: 0.875rem !important;
  }

  #footer .footer-menu-list li {
    margin-bottom: 0.5rem;
  }

  #footer .footer-menu-list a {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   15. GENERAL MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 767.98px) {
  /* Section headers */
  .section-header {
    text-align: center;
    margin-bottom: 1.5rem !important;
  }

  .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .section-subtitle {
    font-size: 0.875rem !important;
  }

  /* Buttons */
  .btn-lg {
    font-size: 0.95rem !important;
    padding: 0.65rem 1.5rem !important;
  }

  .btn {
    font-size: 0.875rem !important;
  }

  /* Container padding */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Swiper pagination */
  .swiper-pagination {
    bottom: 0 !important;
    position: relative !important;
    margin-top: 0.75rem !important;
  }

  /* Swiper wrapper spacing */
  .swiper-wrapper {
    margin-bottom: 0 !important;
  }

  /* Arrow navigation - hide on very small screens */
  .icon-arrow {
    display: none !important;
  }
}

/* ========================================
   BLOG & REVIEWS SWIPER SPECIFIC FIXES
   ======================================== */

@media (max-width: 767.98px) {
  /* Ensure blog and review swipers have proper spacing */
  .blog-section .swiper,
  .reviews-section .swiper {
    padding-bottom: 2.5rem !important;
  }

  .blog-section .swiper-pagination,
  .reviews-section .swiper-pagination {
    position: absolute !important;
    bottom: 0.5rem !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* ========================================
   16. ABOUT PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  /* About page hero */
  .display-4 {
    font-size: 2rem !important;
  }

  .lead {
    font-size: 1rem !important;
  }

  /* About sections */
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .mb-5 {
    margin-bottom: 2rem !important;
  }

  /* Team member images */
  .rounded-circle {
    width: 100px !important;
    height: 100px !important;
  }

  /* Values section */
  .col-md-4.text-center {
    margin-bottom: 2rem !important;
  }

  /* CTA section */
  .bg-light.p-5 {
    padding: 2rem !important;
  }

  .bg-light.p-5 h3 {
    font-size: 1.5rem !important;
  }
}

/* ========================================
   17. CONTACT PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  /* Contact form card */
  .card-body.p-5 {
    padding: 1.5rem !important;
  }

  .card-body h3 {
    font-size: 1.5rem !important;
  }

  /* Contact info cards */
  .col-lg-4 {
    margin-top: 2rem;
  }

  .card-body h5 {
    font-size: 1.1rem !important;
  }

  .card-body h6 {
    font-size: 0.95rem !important;
  }

  .card-body p {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   18. ACCOUNT & ORDERS PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .account-section {
    padding: 2rem 0 !important;
  }

  .account-section h2 {
    font-size: 1.5rem !important;
  }

  .account-section .card {
    margin-bottom: 1.5rem;
  }

  .order-item {
    padding: 1rem !important;
  }

  .order-item h6 {
    font-size: 0.95rem !important;
  }

  .order-item p {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   19. WISHLIST PAGE FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .wishlist-item {
    padding: 1rem 0 !important;
  }

  .wishlist-item img {
    height: 80px !important;
  }

  .wishlist-item h6 {
    font-size: 0.95rem !important;
  }

  .wishlist-item .btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* ========================================
   20. BREADCRUMB FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .breadcrumb {
    font-size: 0.8rem !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 1rem !important;
  }

  .breadcrumb-item {
    padding: 0 !important;
  }
}

/* ========================================
   21. OFFCANVAS MENU FIXES
   ======================================== */

@media (max-width: 767.98px) {
  .offcanvas {
    max-width: 85% !important;
  }

  .offcanvas-header {
    padding: 1rem !important;
  }

  .offcanvas-title {
    font-size: 1.25rem !important;
  }

  .offcanvas-body {
    padding: 1rem !important;
  }

  .offcanvas-body .nav-link {
    padding: 0.75rem 0 !important;
    font-size: 0.95rem !important;
  }

  .offcanvas-body .dropdown-menu {
    padding: 0.5rem 0 !important;
  }

  .offcanvas-body .dropdown-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}