/* =====================================================
   RESPONSIVE STYLES FOR RahQist
   File: assets/css/responsive.css
   Last Updated: Dec 2025
   ===================================================== */

/* ================= PRINT ================= */
@media print {
  #reportContent {
    box-shadow: none;
    border: none;
  }

  .report-controls-print-hide,
  .sales-report-back,
  .report-form {
    display: none !important;
  }

  .report-table,
  .report-table tr,
  .report-table th,
  .report-table td {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* ================= MOBILE & TABLET (≤767px) ================= */
@media (max-width: 767px) {

  /* Typography & buttons */
  body { font-size: 14px; }

  h5 { font-size: 1.015rem; }
  .lead { font-size: 1.05rem; }

  .btn-sm {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .card-body { padding: 2px !important; }
  .input-with-icon button { display: none; }

  /* Hero */
  .hero-bg {
    min-height: 340px;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .hero-bg .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Product thumbnails */
  .product-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid #eef2f6;
    position: relative;
  }

  .product-thumb img,
  .product-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-thumb .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 50;
  }

  button.product-thumb {
    position: relative !important;
  }

  
  /* Product hero media */
  .product-hero-media {
    height: 420px;
    width: 100%;
    overflow: hidden;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid #eef2f6;
  }

  .product-hero-media img,
  .product-hero-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Sales report */
  .sales-report-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 1rem;
    gap: 0.7rem;
  }

  .sales-report-summary {
    flex-direction: column;
    gap: 0.7rem;
  }

  .sales-report-table-wrap {
    padding: 0.5rem;
  }
.top-contact-bar {
	font-size: 0.8rem;
	padding: 0.2rem 0;
}

.top-contact-container { gap: 0.5rem;}

  .contact-form-vivid,
  .contact-info-card {
    padding: 1rem;
  }

  /* Checkout */
  .checkout-wrap {
    flex-direction: column;
  }
  .checkout-wrap .cart-column,
  .checkout-wrap .summary-column {
    flex: 1 1 100%;
    min-width: 0;
  }
  .checkout-wrap .summary-column { border-left: none; border-top: 4px solid var(--brand); width: 100% !important; padding-left: 0 !important; margin-top: .8rem; }
  .checkout-wrap .cart-column { width: 100% !important; }

  .contact-form-vivid { border-left-width: 4px; }
  	.dropdown-menu-rightside { position: absolute !important; left: auto !important; right: 0 !important; top: 115% !important; transform: none !important; }

    /* End Max 767px */
}



/* ================= MOBILE (≤575px) ================= */
@media (max-width: 576px) {
  .buy-now { padding-left: .5rem; padding-right: .5rem;} 

  .container { padding-left: 0.5rem; padding-right: 0.5rem;}
  .contact-deco { display: none;}

  .navbar .nav-link,
  .navbar .dropdown-item,
  .navbar .nav-icon-link { font-size: 1rem;}
  
  .product-info-compact {
    padding-top: 24px;
    padding-right: 24px;
  }

  .product-info-compact h1 {
    margin-top: 0 !important;
    margin-bottom: .5rem !important;
  }
  .purchase-actions .btn {
    padding: .375rem .5rem;
    font-size: .85rem;
    }
  .sales-report-summary .card { min-width: 120px; padding: .7rem .6rem;}
  .sales-report-table-wrap { border-radius: .5rem;}
}

/* ================= TABLET & DESKTOP ================= */

@media (min-width: 576px) {

}

@media (max-width: 991.98px) {
	#headerSearchForm.header-search-flyout {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background: #fff;
		padding: .6rem 1rem;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		z-index: 1100;
	}
	#headerSearchForm.header-search-flyout .input-with-icon { max-width: 100%; }
  .navbar-collapse {
		background: #ffffff;
		padding: 0.35rem 0.5rem 0.6rem;
		border-radius: 0;
		box-shadow: none;
		border-top: 1px solid #e5e5e5;
	}

	.navbar-collapse .nav-link {
		color: var(--text);
		padding: 0.25rem 0;
		background: transparent;
		border-bottom: 1px solid #f0f0f0;
	}

	.navbar-collapse .nav-link:last-child {
		border-bottom: none;
	}

	#mainNav .nav-link::after { display: none; }

	.navbar-collapse .btn {
		width: 100%;
		margin-top: 0.35rem;
	}

	.navbar-collapse .btn-outline-brand {
		background: #fff;
		border: 1px solid var(--brand);
		color: var(--brand);
		box-shadow: none;
	}

	.navbar-collapse .btn-brand {
		background: var(--brand);
		color: #fff;
		box-shadow: none;
	}

  /* End Max 991.98px */
}

@media (min-width: 992px) {
  .input-with-icon { max-width: 300px; }

  #mainNav {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .product-thumbs .product-thumb {
    width: 72px;
    height: 72px;
  }

  .category-strip {
    justify-content: flex-end;
    overflow-x: visible;
  }
}

/* ================= EXTRA MOBILE (≤540px) ================= */
@media (max-width: 540px) {
  .order-details-table td.label { width: 120px; display: table-cell; }
  .order-details-table td.sep { width: 18px; }
}