/* ========================================
   RESPONSIVE STYLES - MOBILE & TABLET
   ======================================== */

/* Tablet Landscape & Below (1200px) */
@media (max-width: 1199px) {

  .container,
  .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .testimonials .left_text {
    flex: 0 0 280px !important;
    padding-right: 30px;
  }

  .testimonials .left_text h2 {
    font-size: 32px !important;
  }

  .product-details-content {
    padding-left: 20px;
  }
}

/* Tablet Portrait & Below (992px) */
@media (max-width: 991px) {

  /* Section Padding */
  .section-padding {
    padding: 60px 0;
  }

  /* Header */
  header .container-fluid {
    padding: 10px 15px;
  }

  header .navbar {
    padding: 10px 15px;
  }

  header .navbar-brand {
    position: static;
    transform: none;
  }

  .header-items {
    gap: 15px;
  }

  .header-items>a,
  .header-items button {
    padding: 8px 12px;
    font-size: 13px;
  }

  .header-items button i {
    font-size: 20px;
  }

  /* Banner */
  .banner-heading {
    height: 200px;
  }

  .banner-heading h1 {
    font-size: 28px;
  }

  /* Listing Page */
  .listing-page {
    flex-direction: column;
    gap: 30px;
  }

  .listing-page-left {
    width: 100%;
    min-width: 100%;
  }

  .listing-page-right {
    width: 100%;
  }

  /* Product Grid */
  .row.g-4 {
    gap: 20px !important;
  }

  /* Product Details */
  .product-details-section .row {
    flex-direction: column;
  }

  .product-details-content {
    padding-left: 0;
    margin-top: 30px;
  }

  /* Testimonials */
  .testimonials {
    padding: 80px 0 !important;
  }

  .testimonials .slider_parent {
    flex-direction: column;
  }

  .testimonials .left_text {
    flex: 1 !important;
    padding-right: 0;
    margin-bottom: 40px;
  }

  .testimonials .left_text h2 {
    font-size: 28px !important;
  }

  .testimonials_slider_container {
    padding-left: 0;
  }

  /* Footer */
  footer .footer-main {
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .footer-link {
    margin-bottom: 30px;
  }

  /* Contact Us */
  .contact-us-left,
  .contact-us-right {
    padding: 40px 30px;
  }

  /* Form Elements */
  .h_banner_2 {
    height: 350px;
  }

  .h_banner_2 h2 {
    font-size: 24px;
  }

  .h_banner_2 .form-control {
    height: 50px;
    font-size: 13px;
  }

  .h_banner_2 button {
    max-width: 140px;
  }
}

/* Mobile Landscape & Below (768px) */
@media (max-width: 767px) {

  /* Typography */
  :root {
    --web-h1-headline: 28px;
    --web-h2-headline: 24px;
    --web-h3-headline: 20px;
    --h4-web-headline: 18px;
    --web-h5-headline: 16px;
  }

  /* Section Padding */
  .section-padding {
    padding: 40px 0;
  }

  /* Header */
  header .container-fluid {
    flex-wrap: wrap;
    justify-content: space-between !important;
  }

  header .container-fluid .navbar-brand {
    position: static;
    transform: none;
    order: 1;
    flex: 0 0 auto;
    max-width: 150px;
  }

  header .container-fluid .navbar-brand img {
    max-width: 100%;
    height: auto;
  }

  .header-items {
    gap: 8px;
    order: 2;
    flex: 0 0 auto;
  }

  .header-items>a .subtitle-2,
  .header-items button .subtitle-2 {
    display: none;
  }

  .header-items>a,
  .header-items button {
    padding: 8px;
    min-width: auto;
  }

  .header-items>a img,
  .header-items button img {
    max-width: 20px;
  }

  /* Menu Bar */
  .menu-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menu-bar .navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .menu-bar .nav-link {
    padding: 10px 8px;
    font-size: 11px;
  }

  /* Banner */
  .banner-heading {
    height: 150px;
  }

  .banner-heading h1 {
    font-size: 22px;
  }

  .banner-heading-sm {
    height: 70px;
  }

  /* Product Card */
  .card-product {
    max-width: 100%;
  }

  .card-product figure {
    height: 300px;
    padding: 20px;
  }

  .card-product figcaption .h5-web {
    font-size: 16px;
  }

  .card-product .price-tag,
  .card-product .body-1 {
    font-size: 16px;
  }

  .card-product .price-tag span,
  .card-product .body-1 span {
    font-size: 16px;
  }

  .card-product .btn-black {
    width: 100% !important;
    height: 45px !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
  }

  /* Product Details */
  .product-details-content {
    padding-left: 0;
    margin-top: 20px;
  }

  .badge-pre-arrival {
    font-size: 10px;
    padding: 6px 12px;
  }

  .product-price {
    font-size: 20px;
  }

  .original-price {
    font-size: 20px;
  }

  .quantity-selector {
    height: 45px;
  }

  .qty-btn {
    width: 45px;
  }

  .btn-wishlist {
    height: 45px;
    font-size: 12px;
  }

  /* Product Tabs */
  .product-nav-tabs .nav-link {
    font-size: 14px;
    padding: 12px 8px;
  }

  /* Offering Cards */
  .offering-card,
  .card-offering {
    aspect-ratio: 4 / 3;
  }

  .offering-overlay,
  .card-overlay {
    padding: 20px;
  }

  .offering-overlay h3,
  .card-overlay .h3-web {
    font-size: 18px !important;
  }

  .offering-overlay p,
  .card-overlay p {
    font-size: 14px !important;
  }

  /* Swiper Navigation */
  .swiper-button-prev,
  .swiper-button-next {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  .recent-prev,
  .recent-next {
    width: 36px;
    height: 36px;
  }

  .featured-prev,
  .featured-next {
    width: 32px;
    height: 32px;
  }

  .recent-prev i,
  .recent-next i,
  .featured-prev i,
  .featured-next i {
    font-size: 16px;
  }

  /* Product Slider */
  .product_slider_ {
    padding-top: 60px !important;
  }

  .product_slider_ .swiper-button-prev,
  .product_slider_ .swiper-button-next {
    top: 20px;
  }

  .product_slider_ .swiper-button-prev {
    right: 40px;
  }

  /* Testimonials */
  .testimonials {
    padding: 60px 0 !important;
  }

  .testimonials .left_text svg {
    width: 100px !important;
    margin-bottom: 20px;
  }

  .testimonials .left_text h2 {
    font-size: 24px !important;
    margin-bottom: 30px !important;
  }

  .testimonials-prev,
  .testimonials-next {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px;
  }

  .testimonials_card {
    padding: 30px 20px !important;
  }

  .testimonials_card h4 {
    font-size: 16px !important;
  }

  .testimonials_card p.body-text {
    font-size: 14px !important;
  }

  .testimonials_card figure {
    width: 50px !important;
    height: 50px !important;
    margin-right: 15px !important;
  }

  /* Footer */
  footer .footer-main {
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .footer-link ul {
    gap: 12px;
  }

  .footer-link ul a {
    font-size: 14px;
  }

  /* Contact Us */
  .contact-us-left,
  .contact-us-right {
    padding: 30px 20px;
  }

  /* FAQ */
  .accordion-button {
    font-size: 14px;
  }

  .accordion-body {
    font-size: 13px;
  }

  /* Banner Form */
  .h_banner_2 {
    height: 300px;
    padding: 20px;
  }

  .h_banner_2 h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .h_banner_2 .form-control {
    height: 45px;
    font-size: 12px;
  }

  .h_banner_2 button {
    max-width: 120px;
    font-size: 12px;
  }

  /* Pagination */
  .pagination {
    gap: 3px;
  }

  .pagination .page-link {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* Filter Box */
  .filter-box {
    padding: 12px;
  }

  .filter-accordion .accordion {
    gap: 20px;
  }

  /* Login Page */
  .login-wraper {
    padding: 15px;
  }

  .login-content-inner-body {
    padding: 20px;
  }

  .login-bg {
    background-size: 20%, 20%;
  }
}

/* Mobile Portrait (576px) */
@media (max-width: 575px) {

  /* Container */
  .container,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Typography */
  :root {
    --web-h1-headline: 24px;
    --web-h2-headline: 20px;
    --web-h3-headline: 18px;
    --h4-web-headline: 16px;
    --web-h5-headline: 14px;
  }

  /* Header */
  .header-items>a img,
  .header-items button img {
    width: 20px;
  }

  header .container-fluid .navbar-brand {
    max-width: 120px;
  }

  header .navbar {
    padding: 10px 15px;
  }

  /* Menu Bar - Make scrollable */
  .menu-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
  }

  .menu-bar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  .menu-bar .navbar-nav {
    flex-wrap: nowrap !important;
    min-width: max-content;
  }

  .menu-bar .nav-link {
    padding: 8px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* Banner */
  .banner-heading {
    height: 120px;
  }

  .banner-heading h1 {
    font-size: 18px;
  }

  /* Product Card */
  .card-product figure {
    height: 250px;
    padding: 15px;
  }

  .card-product figcaption .h5-web {
    font-size: 14px;
    gap: 8px;
  }

  .card-product .price-tag,
  .card-product .body-1 {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .card-product .price-tag span,
  .card-product .body-1 span {
    font-size: 14px;
  }

  .card-product .btn-black {
    height: 40px !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  .card-product .heart-btn {
    width: 28px;
    height: 28px;
    top: 10px;
    right: 10px;
  }

  .recent-offering-tab {
    font-size: 10px;
    padding: 8px 12px;
  }

  /* Product Details */
  .product-price {
    font-size: 18px;
  }

  .original-price {
    font-size: 18px;
  }

  .meta-label {
    min-width: 80px;
    font-size: 13px;
  }

  .meta-value {
    font-size: 13px;
  }

  .product-nav-tabs .nav-link {
    font-size: 13px;
    padding: 10px 5px;
  }

  /* Offering Cards */
  .offering-overlay,
  .card-overlay {
    padding: 15px;
  }

  .offering-overlay h3,
  .card-overlay .h3-web {
    font-size: 16px !important;
    margin-bottom: 6px;
  }

  .offering-overlay p,
  .card-overlay p {
    font-size: 13px !important;
  }

  /* Swiper Navigation */
  .swiper-button-prev,
  .swiper-button-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* Testimonials */
  .testimonials .left_text svg {
    width: 80px !important;
  }

  .testimonials .left_text h2 {
    font-size: 20px !important;
  }

  .testimonials_card {
    padding: 25px 15px !important;
  }

  .testimonials_card .head {
    margin-bottom: 25px;
  }

  .testimonials_card figure {
    width: 45px !important;
    height: 45px !important;
  }

  /* Footer */
  .footer-link ul a {
    font-size: 13px;
  }

  .footer-link ul a i {
    font-size: 20px;
  }

  /* Contact Form */
  .contact-us-left,
  .contact-us-right {
    padding: 25px 15px;
  }

  /* Banner Form */
  .h_banner_2 {
    height: 250px;
  }

  .h_banner_2 h2 {
    font-size: 18px;
  }

  /* Form Controls */
  .form-control,
  .form-select {
    font-size: 13px;
  }

  .btn {
    font-size: 13px;
  }

  /* Modal */
  .alert-modal .modal-dialog {
    margin: 15px;
  }

  /* Login */
  .login-content-inner-header h3 {
    font-size: 20px;
  }

  .login-content-inner-header p {
    font-size: 14px;
  }
}

/* Extra Small Mobile (480px) */
@media (max-width: 479px) {

  /* Product Grid - Force single column */
  .row>.col-lg-3,
  .row>.col-md-4,
  .row>.col-sm-6 {
    width: 100%;
    max-width: 100%;
  }

  /* Header Logo */
  header .navbar-brand img {
    max-width: 120px;
  }

  /* Menu Bar */
  .menu-bar .nav-link {
    padding: 8px;
    font-size: 11px;
  }

  /* Product Slider Buttons */
  .product_slider_ .swiper-button-prev {
    right: 35px;
  }

  /* Testimonials Navigation */
  .testimonials-prev,
  .testimonials-next {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px;
  }

  /* Featured Products Header */
  .featured-products-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .featured-products-header h2 {
    font-size: 18px;
  }

  /* Swiper Nav Buttons */
  .swiper-nav-buttons {
    gap: 8px;
  }
}

/* Landscape Orientation Fixes */
@media (max-height: 500px) and (orientation: landscape) {
  .login-wraper {
    min-height: auto;
    padding: 20px;
  }

  .banner-heading {
    height: auto;
    min-height: 100px;
    padding: 20px 0;
  }

  .h_banner_2 {
    height: auto;
    min-height: 200px;
    padding: 30px 20px;
  }
}

/* ========================================
   RESPONSIVE BUTTON STYLES
   ======================================== */

/* Tablet Landscape & Below (992px) */
@media (max-width: 991px) {

  /* Standard Buttons */
  .btn {
    height: 48px;
    padding: 0px 18px;
    font-size: 13px;
  }

  .btn i {
    font-size: 18px;
  }

  /* Button Variants */
  .btn-black,
  .btn-gray,
  .btn-border {
    height: 48px;
  }

  .btn-icon {
    width: 38px;
    height: 38px;
  }

  .btn-icon i {
    font-size: 22px;
  }
}

/* Mobile Landscape & Below (768px) */
@media (max-width: 767px) {

  /* Standard Buttons */
  .btn {
    height: 46px;
    padding: 0px 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .btn i {
    font-size: 18px;
  }

  /* Button Variants */
  .btn-black,
  .btn-gray,
  .btn-border {
    height: 46px;
    min-height: 44px;
    /* Touch-friendly minimum */
  }

  .btn-icon {
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
  }

  .btn-icon i {
    font-size: 20px;
  }

  /* Filter Buttons */
  .btn-filter {
    font-size: 12px;
    padding: 8px 14px;
    height: 40px;
  }

  /* Review Action Buttons */
  .btn-review-action {
    font-size: 12px;
    padding: 8px 14px;
  }

  /* Full Width Buttons on Mobile */
  .btn-block-mobile {
    width: 100% !important;
  }
}

/* Mobile Portrait (576px) */
@media (max-width: 575px) {

  /* Standard Buttons */
  .btn {
    height: 44px;
    padding: 0px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .btn i {
    font-size: 16px;
  }

  /* Button Variants */
  .btn-black,
  .btn-gray,
  .btn-border {
    height: 44px;
    min-height: 44px;
    /* Touch-friendly minimum */
  }

  .btn-icon {
    width: 34px;
    height: 34px;
    min-width: 44px;
    min-height: 44px;
  }

  .btn-icon i {
    font-size: 18px;
  }

  /* Filter Buttons */
  .btn-filter {
    font-size: 11px;
    padding: 6px 12px;
    height: 38px;
  }

  /* Review Action Buttons */
  .btn-review-action {
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Button Groups */
  .btn-group .btn {
    padding: 0px 10px;
  }

  /* Quantity Buttons */
  .qty-btn {
    width: 40px;
    min-width: 44px;
  }

  /* Make forms full width */
  .form-inline .btn,
  .input-group .btn {
    min-width: 100px;
  }
}

/* Extra Small Mobile (480px) */
@media (max-width: 479px) {

  /* Standard Buttons */
  .btn {
    height: 44px;
    padding: 0px 12px;
    font-size: 11px;
  }

  .btn i {
    font-size: 16px;
  }

  /* Ensure touch-friendly sizes */
  .btn,
  .btn-black,
  .btn-gray,
  .btn-border,
  button {
    min-height: 44px;
    /* iOS/Android recommended minimum */
  }

  /* Icon Buttons */
  .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .btn-icon i {
    font-size: 18px;
  }

  /* Small text buttons */
  .btn-sm {
    height: 36px;
    min-height: 36px;
    padding: 0px 10px;
    font-size: 10px;
  }

  /* Button spacing in groups */
  .btn-group {
    gap: 8px;
  }

  .btn-group .btn {
    padding: 0px 8px;
    flex: 1;
  }

  /* Keep text readable */
  .btn,
  button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

  /* Ensure all interactive elements are touch-friendly */
  .btn,
  button,
  a.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Remove hover states on touch devices */
  .btn:hover,
  .btn-black:hover,
  .btn-gray:hover,
  .btn-border:hover {
    transform: none;
  }

  /* Add active states for touch feedback */
  .btn:active,
  .btn-black:active,
  .btn-gray:active,
  .btn-border:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* Print Styles */
@media print {

  header,
  footer,
  .header-items,
  .menu-bar,
  .swiper-button-prev,
  .swiper-button-next,
  .testimonials-nav,
  .btn,
  button {
    display: none !important;
  }

  .site-wraper {
    min-height: auto;
  }

  .section-padding {
    padding: 20px 0;
  }
}