/* assets/styles/responsive.css */

/* Desktop overrides: Ensure mobile-only elements are hidden on larger screens */
@media (min-width: 769px) {
  .hamburger-menu {
    display: none;
  }
  .mobile-menu {
    display: none !important;
  }
  /* Optionally hide any mobile-specific adjustments not needed on desktop */
}

/* Mobile Styles for screens up to 768px wide */
@media (max-width: 768px) {
  /* Change nav layout to a row with space-between */
  nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Left section: show hamburger only, hide regular nav-links */
  .nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
  }
  .nav-links {
    display: none;
  }
  
  /* Middle section (sales messages) not needed on mobile */
  .nav-middle {
    display: none;
  }
  
  /* Right section: keep language toggle, login, and cart aligned right */
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
  }
  
  /* Hamburger menu: show and left-justify */
  .hamburger-menu {
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 5px;
  }
  
  /* Mobile Menu Styling */
  .mobile-menu {
    display: none;  /* Hidden by default; toggled via JS */
    position: absolute;
    top: 100%; /* Place immediately below the header */
    left: 0;
    width: 70%;
    background-color: #222;
    padding: 1rem;
    z-index: 2000;
  }
  .mobile-menu a {
    display: block;
    color: #fff;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    text-decoration: none;
  }
  .nav-right a#login-button {
    display: none;
  }
  
  /* Adjust containers and text sizes for index page */
  .index-container {
    width: 90%;
    margin: 10px auto;
  }
  .index-intro h1 {
    font-size: 2rem;
  }
  .index-intro p {
    font-size: 1.2rem;
  }
  
  /* Product grid adjustments */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
  }
  
  /* Product details: stack image and info vertically */
  .product-details-container {
    flex-direction: column;
    align-items: center;
  }
  .product-details-image-container,
  .product-details-info {
    max-width: 100%;
    margin: 0 auto;
  }
  .product-details-image {
    width: 90%;
    height: auto;
  }
  
  /* Adjust buttons for easier tapping */
  button, .button, .button-alt {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }
  
  /* Optionally, adjust header if needed */
  header {
    height: auto;
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .footer-center {
    display: none; /* Hide the copyright text on mobile */
  }
  .footer-left {
    width: 100%;
  }
  .footer-right {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Order Status Page Mobile Adjustments (scoped to .location-container) */
  .location-container {
    width: 95%;
    padding: 10px;
  }
  
  .location-container .left-right {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  
  .location-container .wide-left {
    width: 100%;
    text-align: center;
  }
  
  /* Scope form styling to the order status form only */
  .order-status-form {
    width: 100%;
  }
  
  .order-status-form .form-group {
    width: 100%;
    text-align: left;
  }
  
  .order-status-form .form-input {
    width: 100%;
    font-size: 1rem;
    padding: 10px;
  }
  
  /* This rule now applies only to the button inside the order status form */
  .location-container .order-status-form .button-alt {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }
  
  .location-container .order-result h2,
  .location-container .order-section h3 {
    font-size: 1.5rem;
    text-align: center;
  }
  
  .location-container .order-details-list,
  .location-container .order-item-details {
    text-align: left;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  /* Ensure key contact page containers don’t force a fixed width */
  .outer-shell,
  .contact-container,
  .form-wrapper,
  .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* For .outer-shell, retain the original top and bottom padding (1rem)
     but use a smaller horizontal padding (10px) to avoid overflow */
  .outer-shell {
    margin: 1rem auto !important;
    padding: 1rem 10px !important;
  }

  /* Ensure inputs and textareas stay within their containers */
  .contact-container input,
  .contact-container textarea {
    width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .location-container {
    width: 95%;
    padding: 10px;
    margin: 1rem auto;
  }
  
  .content-container {
    flex-direction: column;
  }
  
  .map-container,
  .address-container {
    max-width: 100%;
    min-width: 0;
    padding: 10px;
  }
  
  .map-container iframe {
    height: 300px;
  }
  
  .address-container p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  /* Products Page Mobile Adjustments */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
  }
  
  .product-item {
    padding: 0.75rem;
    /* Remove or reduce the fixed min-height if not needed on mobile */
    min-height: auto;
  }
  
  .product-item h3 {
    font-size: 1.2rem;
  }
  
  .product-image-container {
    height: 150px;
  }
  .product-item:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  /* Make product details info occupy 95% of horizontal space */
  .product-details-info {
    width: 95%;
    max-width: 95%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* For customization group, stack the label and input vertically */
  .customization-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* Ensure the customization input fits within the container */
  .customization-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
  }
}

@media (max-width: 768px) {
  /* Ensure the cart container uses nearly full width */
  .cart-container {
    width: 95%;
    margin: 1rem auto;
    padding: 0.5rem;
    box-sizing: border-box;
  }
  
  /* Scale down table fonts and padding */
  .cart-container table {
    font-size: 0.9rem;
    width: 100%;
    display: block;
    overflow-x: auto;
  }
  .cart-container table td:nth-child(-n+2) {
    padding-left: 0.1rem; /* Adjust this value as needed */
    padding-right: 0;
    white-space: normal;   /* Allow the cell to wrap text if needed */
    word-wrap: break-word;
  }
  .cart-container thead th,
  .cart-container td {
    padding-left: 0.1rem;
    padding-right: 0;
    white-space: normal;   /* Allow the cell to wrap text if needed */
    word-wrap: break-word;
    box-sizing: border-box;
  }
  
  /* Adjust the summary and shipping areas for vertical stacking */
  .summary-wrapper {
    flex-direction: column;
    gap: 0.5rem;
    padding: 10px;
  }
  
  .summary-row {
    flex-direction: column;
  }
  
  /* Make summary containers and postal code area full width */
  .summary-container,
  .postal-code-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .postal-code-container input[type="text"] {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Stack buttons vertically */
  .button-container {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  .cart-container .item-image {
    display: none;
  }
  .cart-container .summary-row {
    flex-direction: column;
  }
  .cart-container .postal-code-container {
    order: 1;
    margin-bottom: 0.3rem;
  }
  .cart-container .summary-container {
    order: 2;
  }
  /* Hide only the continue shopping form (assumed to be the first form) */
  .cart-container .button-container > form:first-of-type {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Make the checkout container use more of the viewport width */
  .checkout-container {
    width: 95%;
    margin: 1rem auto;
    padding: 10px;
    box-sizing: border-box;
  }

  /* Stack billing and shipping sections vertically */
  .billing-shipping-container {
    flex-direction: column;
    gap: 1rem;
  }
  .billing-info, .shipping-info {
    width: 100%;
    margin-bottom: 1rem;
  }

  /* Adjust the payment options area to stack vertically */
  .payment-options-container {
    flex-direction: column;
    gap: 1rem;
  }
  .payment-methods,
  .payment-details {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  /* Ensure form inputs, selects, and textareas span full width */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    box-sizing: border-box;
  }
  .order-summary-total {
    width: 100%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* Success page container adjustments */
  .container.order-confirmation {
    width: 95%;
    margin: 1rem auto;
    padding: 10px;
    box-sizing: border-box;
  }
  
  /* Reduce padding inside the content area */
  .order-confirmation .content {
    padding: 10px;
  }
  
  /* Make the order summary table more compact */
  .order-summary table,
  .table-wrap {
    font-size: 0.9rem;
  }
  
  /* Stack billing and shipping details vertically */
  .details-container {
    flex-direction: column;
    gap: 1rem;
  }
  .billing-details,
  .shipping-details {
    width: 100%;
  }
  
  /* Stack buttons vertically */
  .button-container {
    flex-direction: column;
    gap: 10px;
  }
  .order-confirmation .button-container > form:first-of-type {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Make the portal wrapper use nearly full width on mobile */
  .portal-wrapper {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
  }
  
  /* Ensure the form container adapts to the smaller viewport */
  .form-container {
    width: 100%;
    padding: 30px 20px 0;
    box-sizing: border-box;
  }
  
  /* Make sure the login form itself and its inputs/buttons are full width */
  .portal-form-login {
    width: 100%;
    box-sizing: border-box;
  }
  
  .portal-form-login input {
    width: 100%;
    margin-bottom: 1rem;
    box-sizing: border-box;
  }
  
  .portal-form-login button {
    width: 100%;
    margin-top: 0.3rem;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* Ensure the CSP report container fits within the viewport */
  .csp-bg {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
  }
  
  /* Adjust the inner content for readability on small screens */
  .csp-content {
    padding: 10px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  
  /* Scale down the heading font size */
  .csp-content h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Adjust paragraph spacing */
  .csp-content p {
    margin: 0.5rem 0;
    line-height: 1.4;
  }
}

@media (max-width: 768px) {
  /* Make the portal wrapper use nearly full width */
  #portal-page .portal-wrapper {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* Ensure the portal container scales properly */
  #portal-page .portal-container {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* Scale down the portal title and center it */
  #portal-page .portal-title {
    font-size: 1.8rem;
    text-align: center;
  }

  /* Adjust paragraphs for smaller screens */
  #portal-page .portal-container p {
    font-size: 1rem;
    text-align: center;
    margin: 0.5rem 0;
  }

  /* Make the portal form full width */
  #portal-page .portal-form {
    width: 100%;
    margin: 1rem auto;
    box-sizing: border-box;
  }
  
  /* Stack form elements vertically with appropriate spacing */
  #portal-page .portal-form label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  #portal-page .portal-form input,
  #portal-page .portal-form select,
  #portal-page .portal-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
  }
  
  /* Make the save settings button full width */
  #portal-page .portal-form button {
    width: 100%;
    margin-top: 0.5rem;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* Ensure dashboard layout changes only affect the dashboard page */
  #dashboard-page .dashboard-container {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
    flex-direction: column; /* Stack content vertically */
    position: relative;
    z-index: 3000; /* Adjust as needed to ensure it sits on top */
  }

  /* Stack the dashboard navigation buttons vertically */
  #dashboard-page .dashboard-nav {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    justify-content: center;
  }
  #dashboard-page .dashboard-nav .button-alt {
    width: 100%;
    text-align: center;
  }

  /* Stack the dashboard-info content vertically */
  #dashboard-page .dashboard-info {
    flex-direction: column;
    align-items: center;
  }
  #dashboard-page .dashboard-info span {
    margin-bottom: 0.5rem;
  }

  /* Adjust the header title for smaller screens */
  #dashboard-page .header h1 {
    font-size: 1.8rem;
    text-align: center;
  }

  /* Optionally, remove any fixed max-height on the content area */
  #dashboard-page .dashboard-content {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 768px) {
  /* Hide the desktop login link on mobile */
  .desktop-login {
    display: none;
  }
  .language-toggle-container {
    display: none;
  }
  /* Show the mobile login icon on mobile */
  .mobile-login, .mobile-lang-icon {
    display: inline-block;
    margin-right: 1rem;
  }
  /* (Optionally, adjust the size of the mobile login icon) */
  .mobile-login img {
    height: 28px; /* Increase as needed */
  }
  .mobile-lang-menu {
    display: none; /* Toggled via JavaScript */
    position: absolute;
    top: 80px; /* Adjust to appear just below header */
    right: 10px;
    background-color: #222;
    padding: 0.5rem;
    border-radius: 5px;
    z-index: 3000;
  }
    .mobile-lang-menu a,
    .mobile-lang-menu form label {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 769px) {
  /* On desktop, hide the mobile login icon */
  .mobile-login,
  .mobile-lang-icon,
  .mobile-lang-menu {
    display: none;
  }
  .mobile-cart,
  .mobile-lang-icon,
  .mobile-lang-menu {
    display: none !important;
  }
}

/* NEW: Hide the cart on mobile */
@media (max-width: 768px) {
    .desktop-cart {
    display: none !important;
  }
   .mobile-cart {
    position: relative;
    display: inline-block;
    margin-right: 10px;
  }
  /* Style the cart count badge */
  .mobile-cart .badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background-color: #d9534f;
    color: #fff;
    border-radius: 50%;
    width: 20px;       /* Fixed width */
    height: 20px;      /* Fixed height to force a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
  }
  #sales-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

/* Modal content */
#sales-modal-content {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  max-width: 90%;
}

}

#language-modal-overlay {
  background-color: rgba(34, 34, 34, 0.8);
}

#language-modal-content {
  background-color: #222; /* Same as nav bar */
  color: #fff;           /* Same as nav bar text */
  border: none;          /* Remove any default borders */
}
/* Mobile Optimizations for Dashboard Page */
@media (max-width: 768px) {
  /* Dashboard Container: Use nearly full width and stack content vertically */
  #dashboard-page .dashboard-container {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
    flex-direction: column;
  }

  /* Dashboard Navigation: Stack buttons vertically for easier tapping */
  #dashboard-page .dashboard-nav {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    justify-content: center;
  }
  #dashboard-page .dashboard-nav .button-alt {
    width: 100%;
    text-align: center;
  }

  /* Dashboard Info: Stack the welcome text and last login info */
  #dashboard-page .dashboard-info {
    flex-direction: column;
    align-items: center;
  }
  #dashboard-page .dashboard-info span {
    margin-bottom: 0.5rem;
  }

  /* Header Title: Scale down for mobile screens */
  #dashboard-page .header h1 {
    font-size: 1.8rem;
    text-align: center;
  }

  /* Dashboard Content: Remove fixed height to allow vertical expansion */
  #dashboard-page .dashboard-content {
    max-height: none;
    overflow-y: visible;
  }

  /* Tables within the dashboard: Adjust font size, padding, and allow horizontal scrolling */
  #dashboard-page .portal-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  #dashboard-page .portal-table th,
  #dashboard-page .portal-table td {
    padding: 0.25rem;
    font-size: 0.8rem;
  }

  /* Confirm Dialog: Ensure modal scales properly on mobile */
  #confirmDialog .wtf {
    padding: 1rem;
    width: 90%;
    max-width: 300px;
  }
}
@media (max-width: 768px) {
  /* Ensure the settings table doesn't overflow */
  .settings-table {
    width: 100%;           
    margin: 0 auto;        /* Center the table */
    table-layout: auto;    /* Columns size automatically */
  }
  .settings-table th,
  .settings-table td {
    white-space: nowrap;
    padding: 8px; /* Adjust as needed for readability */
  }
  .settings-table th:nth-child(3),
  .settings-table td:nth-child(3) {
    display: none;
  }
  /* Stack the buttons vertically and make them full-width */
  .edit-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0px;
  }
  .edit-buttons button {
    width: auto;           /* Only as wide as the content */
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    margin:0;
  }
}
@media (max-width: 768px) {
  .inline-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Optional: adds spacing between elements */
  }
  .inline-fields select,
  .inline-fields input {
    width: 100%; /* Makes dropdown and text field span the container’s width */
  }
  .inline-fields button {
    width: auto;           /* Button only takes as much width as needed */
    align-self: flex-start; /* Align button to the left (or adjust as desired) */
  }
}
@media (max-width: 768px) {
  /* Only affect password management page */
  #password-management .portal-form {
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
  }
  #password-management .portal-form .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
  }
  #password-management .portal-form .form-group label {
    margin-bottom: 0.5rem;
  }
  #password-management .portal-form input,
  #password-management .portal-form select {
    width: 100%;
    box-sizing: border-box;
  }
  /* Ensure buttons only take up as much space as needed */
  #password-management .portal-form button {
    width: auto;
    align-self: flex-start;
    margin-right: 0.5rem; /* Optional: spacing between buttons */
  }
}
@media (max-width: 768px) {
  /* Make sure the container doesn't exceed the viewport width */
  #view-all-tables {
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  /* Stack the buttons vertically and align them to the left */
  #view-all-tables .table-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
  }
  #view-all-tables .table-links a.button {
    width: 100%;  /* Only as wide as needed */
    padding: 0.5rem 1rem;
    text-align: center
  }
  /* Make sure the table container and table itself are responsive */
  #view-all-tables #table-view-container {
    width: 100%;
    overflow-x: auto;
  }
  #view-all-tables table.portal-table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    box-sizing: border-box;
  }
}