/* Filename:  assets/styles.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    overflow-y: scroll; /* Forces the vertical scrollbar to always be visible */
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #0073e6;
    box-shadow: 0 0 8px rgba(0, 115, 230, 0.3);
}

/* New slider for general site settings */
.setting-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.setting-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.setting-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d9534f; /* Red for OFF state (dot on the left) */
    transition: .4s;
}

.setting-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

.setting-switch input:checked + .setting-slider {
    background-color: #0E8B25; /* Green for ON state (dot on the right) */
}

.setting-switch input:focus + .setting-slider {
    box-shadow: 0 0 1px #0E8B25;
}

.setting-switch input:checked + .setting-slider:before {
    transform: translateX(26px);
}

.setting-slider.round {
    border-radius: 24px;
}

.setting-slider.round:before {
    border-radius: 50%;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Set the desired fixed height for the header */
    display: flex;
    flex-direction: column;
    z-index: 3001;
    justify-content: center;
    align-items: center;
    background-color: #222;
    color: #fff;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
}


.header {
    background: #428bca;
    padding: 15px;
    border: 1px solid grey;
    border-bottom: 0;
    text-align: center;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

header h1 {
    margin: 0;
    padding: 2rem 0;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Add spacing between Login and Cart buttons */
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 20px; /* Add spacing between the links */
}

.sales-disabled-message {
    background-color: #d9534f; /* Red background */
    color: #fff;              /* White text */
    border-radius: 5px;       /* Rounded corners, consistent with other elements */
    padding: .5rem 1rem;    /* Some padding for readability */
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    margin: 0 1rem;           /* Horizontal margin to separate from other nav elements */
}

button {
    background-color: #428bca; /* Fallback Color */
    background-color: rgba(66, 139, 202, 1);
    color: #fff;
    padding: 0.5rem 1rem;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
    display: inline-block; /* Keep buttons aligned */
}

button:hover {
    background-color: #3276b1; /* Fallback solid color */
    background-color: rgba(50, 118, 177, 1);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

button:active {
    background-color: #003c7e; /* Fallback solid color */
    background-color: rgba(0, 60, 126, 1); /* Primary color */
    box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.3);
    outline: 1px solid #fff; /* White border */
    outline-offset: -2px; /* Offset inside the button for effect */
    box-shadow: 0 0 0 2px #000000; /* Add an outer black border */
}

button.delete-button {
    background-color: #d9534f; /* Red for delete/negative actions */
}

button.delete-button:hover {
    background-color: #c9302c;
}

button.delete-button:active {
    background-color: #a12a22;
}

button.submit-button {
    background-color: #428bca; /* Primary blue */
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

button.submit-button:hover {
    background-color: #3276b1; /* Darker blue */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

button.submit-button:active {
    background-color: #003c7e; /* Darkest blue */
    box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.3); /* Pressed effect */
    outline: 1px solid #ffffff;
    outline-offset: -2px;
}

.button { /* Needs to stay in styles.css */
    background-color: #428bca; /* Blue color */
    margin-right: 1rem;
    margin-left: auto;
    padding-right: 1rem;color: #fff;
    padding: 0.5rem 1rem;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* Ensures link behaves like a button */
    transition: background-color 0.3s, box-shadow 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
    display: inline-block; /* Keep buttons aligned */
}

.button-alt.button-red {
    background-color: #d9534f !important;
    border-color: #d9534f !important;
    color: #fff !important;
}

.button:hover {
    background-color: #3276b1; /* Darker blue */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
    background-color: #003c7e; /* Darkest blue */
    box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.3);
    outline: 1px solid #fff;
    outline-offset: -2px;
}

.button-alt { /* Needs to stay in styles.css */
    background-color: #0E8B25;
    margin-right: 1rem;

    padding-right: 1rem;color: #fff;
    padding: 0.5rem 1rem;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* Ensures link behaves like a button */
    transition: background-color 0.3s, box-shadow 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
    display: inline-block; /* Keep buttons aligned */
    align-self: center;
    width: auto;
}

.button-alt:hover {
    background-color: #0C7A20;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.button-alt:active {
    background-color: #095A18;
    box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.3);
    outline: 1px solid #fff;
    outline-offset: -2px;
}
.nav-link {
    color: #fff;
    margin: 0 1rem;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
    position: relative;
    display: inline-block;
}


/* Shared styles for both pseudo-elements */
.nav-link::before,
.nav-link::after {
    content: "";
    position: absolute;
    height: 2px;              /* 2px thick */
    background-color: #428bca;
    opacity: 0;
    transition: transform 0.15s linear, opacity 0.15s linear;  /* Faster transition */
}

.csp-content {
  border: 1px solid grey;
  padding: 20px;
   background-color: rgba(255, 255, 255, 0.6); /* Slightly lighter semi-transparent background */
    border-radius: 8px; /* Rounded corners for a polished look */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

.csp-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 200px;
  padding: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.6); /* Slightly lighter semi-transparent background */
    border-radius: 8px; /* Rounded corners for a polished look */
    border: 1px solid white;
 box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
    }

/* Top bar: extended 5px on each side, starting 4px above its final position */
.nav-link::before {
    top: -6px;      /* Final position above the text */
    left: -5px;     /* Extend 5px to the left */
    right: -5px;    /* Extend 5px to the right */
    transform: translateY(-4px);
}

/* Bottom bar: extended 5px on each side, starting 4px below its final position */
.nav-link::after {
    bottom: -6px;   /* Final position below the text */
    left: -5px;     /* Extend 5px to the left */
    right: -5px;    /* Extend 5px to the right */
    transform: translateY(4px);
}

/* On hover, both bars move into place (translateY(0)) and fade in (opacity: 1) */
.nav-link:hover::before,
.nav-link:hover::after {
    transform: translateY(0);
    opacity: 1;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #777c75;
    color: black;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
    position: relative;
    z-index: 0;
}

main {
    flex: 1;
    padding: 1rem 0;
    z-index: 2; /* Higher than .logo-container */
    box-sizing: border-box;
    margin-top: calc(var(--header-height, 70px));
}

input::placeholder,
textarea::placeholder {
    color: #444; /* Darker gray for better contrast */
    opacity: 1; /* Ensure full visibility */
    font-style: italic; /* Differentiate placeholder from user input */
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px; /* Explicit height for the footer */
    background-color: #222; /* Match your desired footer background color */
    color: #fff; /* Match your footer text color */
    text-align: center;
    padding: 0.5rem;
    z-index: 3001; /* Ensure it stays above other elements if necessary */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.6); /* Slightly lighter semi-transparent background */
    border-radius: 8px; /* Rounded corners for a polished look */
    overflow: hidden; /* Ensure content stays within rounded corners */
    border: 1px solid grey;
}

th {
    font-weight: bold;
    text-align: left;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.8); /* Slightly darker for better contrast */
    color: #333; /* Darker text for readability */
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Faint border for separation */
}

td {
    padding: 0.75rem;
    color: black; /* Ensure good contrast against semi-transparent background */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Subtle divider for rows */
}
/*
tr:hover {
    background-color: rgba(245, 245, 245, 0.8); 
    transition: background-color 0.3s; 
}
*/
.logo-container {
    position: fixed;
    top: 80px; /* Space below the header */
    left: 0;
    right: 0;
    bottom: 30px; /* Space above the footer */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0; /* Keep it above content but below modals if any */
    background-color: transparent; /* Optional background to separate from content */
    filter: blur(1px);
}

.error-pages {
    display: inline-block; /* Makes the div only as wide as necessary */
    background: rgba(255, 255, 255, 0.6); /* Light background */
    padding: 20px; /* Space around the text */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Centers text inside */
    position: absolute; /* Positions it in the middle */
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.forbidden-text {
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    color: black;
    text-shadow: 
        1px 1px 0 rgba(255,255,255, 0.2),  /* Right and bottom shadow */
        -1px 1px 0 rgba(255,255,255, 0.2), /* Left and bottom shadow */
        1px -1px 0 rgba(255,255,255, 0.2), /* Right and top shadow */
        -1px -1px 0 rgba(255,255,255, 0.2); /* Left and top shadow */
}

.subtext {
    font-size: 30px;
    text-align: center;
    color: black;
    margin-top: 20px;
    text-shadow: 
        1px 1px 0 rgba(255,255,255, 0.2),  /* Right and bottom shadow */
        -1px 1px 0 rgba(255,255,255, 0.2), /* Left and bottom shadow */
        1px -1px 0 rgba(255,255,255, 0.2), /* Right and top shadow */
        -1px -1px 0 rgba(255,255,255, 0.2); /* Left and top shadow */
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure the logo scales proportionally */
    filter: brightness(150%); /* Increase brightness */
    opacity: 0.2; /* Optional: Make the logo semi-transparent */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.product-price { /* Used on multiple pages */
    color: black; /* Base text color */
    font-weight: bold;
    text-shadow: 
        1px 1px 0 rgba(255,255,255, 0.2),  /* Right and bottom shadow */
        -1px 1px 0 rgba(255,255,255, 0.2), /* Left and bottom shadow */
        1px -1px 0 rgba(255,255,255, 0.2), /* Right and top shadow */
        -1px -1px 0 rgba(255,255,255, 0.2); /* Left and top shadow */
    font-size: 1.5rem; 
    margin-bottom: 1rem;
}

.toast {
    background-color: #0E8B25;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
    margin-bottom: 10px;
    text-align: center; /* Centers the text in multi-line toasts */
}

.toast.error {
    background-color: #d9534f;
    color: #fff;
}

.toast .toast-icon {
    font-size: 18px; /* Size of the icon */
    color: #fff; /* White icon color */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.footer-container {
  display: flex;
  align-items: center;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
}

/* Left column: left-aligned text */
.footer-left {
  text-align: left;
}

.footer-left a {
  margin-left: 10px;
  margin-right: 10px;
}

/* Center column: centered text */
.footer-center {
  text-align: center;
}

/* Right column: empty, used to balance the center column */
.footer-right {
  text-align: right;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.6);
  margin: 5vh auto;  /* 5% margin from top and bottom to center vertically */
  padding: 20px;
  width: 80%;
  max-width: 700px;
  max-height: 75vh;  /* Limit the height to 90% of the viewport height */
  overflow-y: auto;  /* Add vertical scroll if content exceeds max-height */
  border-radius: 5px;
    border: 1px solid white; 
    border-radius: 8px;
}

.modal-inner {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid grey;          /* 1px solid border (adjust color as needed) */
  border-radius: 8px;              /* Rounded corners for the inner box */
  padding: 20px;
}

.modal-trigger {
    text-decoration: none;
      color: #fff;
}

/* Close button */
.modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
  color: #000;
  text-decoration: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0E8B25; /* Green for EN */
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider {
    background-color: #428bca; /* Blue for FR */
}
input:focus + .slider {
    box-shadow: 0 0 1px #428bca;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.slider.round {
    border-radius: 24px;
}
.slider.round:before {
    border-radius: 50%;
}

        /* Container for the language toggle */
        .language-toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        /* Fixed width for language label prevents layout shift */
        .language-label {
            display: inline-block;
            width: 30px;
            text-align: center;
            font-weight: bold;
        }
        .language-toggle-container .lang-label {
    font-weight: bold;
}


#main-product-image {
    border: 1px solid white; 
}

#toast-container {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 50%; /* Position the container in the center horizontally */
    transform: translateX(-50%); /* Center-align the container */
    z-index: 2000; /* Ensure it appears above other content */
    display: flex; /* Allows stacking of multiple toasts */
    flex-direction: column; /* Stacks toasts vertically */
    align-items: center; /* Center-align toasts within the container */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    transform: translateY(-10px);
}

to {
    opacity: 1;
    transform: translateY(0);
}

}
@keyframes fadeOut {
    from {
        opacity: 1;
    transform: translateY(0);
}

to {
    opacity: 0;
    transform: translateY(-10px);
}
}