/*
 Theme Name:   Metaportal Child
 Author:       David
 Version:      1.0.0
*/

.main_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 150px;
}

.container_cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}


/* ===== 1. Grid Container Styles ===== */
.product-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Increased gap slightly for the bold design */
    padding: 25px;
    justify-content: center;
}

/* ===== 2. Product Card Styles ===== */
.product-card {
    /* Sizing for the 2x4 grid */
    flex-basis: calc(25% - 25px);
    
    /* Card Appearance - Dark Theme */
    /* A deep, dark blue-purple that complements your #7000FF background */
    background-color: #1a1a2e; 
    /* A subtle border using your muted #9BA0B8 text color */
    border: 1px solid #3a3f58;
    border-radius: 12px; /* Slightly more rounded for a modern feel */
    overflow: hidden;
    
    /* Flexbox settings for the content inside the card */
    display: flex;
    flex-direction: column;
    text-align: center;
    
    /* A subtle glow effect that intensifies on hover */
    box-shadow: 0 0 15px rgba(204, 0, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect: lift the card and make the glow stronger */
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(204, 0, 255, 0.5);
}

/* ===== 3. Card Content Styles ===== */
.product-image {
    width: 100%;
    height: auto;
    display: block;
    /* Adds a subtle blend effect if images are on a transparent background */
    mix-blend-mode: luminosity; 
    opacity: 0.8;
    transition: opacity 0.3s ease, mix-blend-mode 0.3s ease;
}
.product-card:hover .product-image {
    mix-blend-mode: normal; /* Image color returns to normal on hover */
    opacity: 1.0;
}

.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    /* Using your Accent color (White) for max readability */
    color: #FFFFFF; 
}

.custom-product-price { /* <-- RENAMED */
    font-size: 1.3rem; /* Made price slightly larger */
    font-weight: bold;
    margin-top: auto;
    margin-bottom: 20px;
    /* Using your Primary Brand color to make the price pop */
    color: #CC00FF;
}

.add-to-cart-button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    /* Using your Accent color (White) for button text */
    color: #FFFFFF; 
    /* Using your Primary Brand color for the button background */
    background-color: #CC00FF;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.add-to-cart-button:hover {
    /* A slightly darker, richer purple for the hover effect */
    background-color: #a300cc;
}


.checkout-button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    /* Using your Accent color (White) for button text */
    color: #FFFFFF; 
    /* Using your Primary Brand color for the button background */
    background-color: #CC00FF;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.cart-page-container 
{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-top: 40px;
    margin-bottom: 100px;
}

#cart-items-wrapper
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cart-item
{
    display: flex;
    flex-direction: row;
    margin: 10px;
    border-top: 1px solid #999;
}

.cart-item-image
{
    width: 40%;
    margin: 10px;
}

.cart-item-details
{
    margin-top: 10px;
    padding: 20px;
}

.cart-item-subtotal{
  padding: 20px;
}

.cart-form-container 
{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 20px;
}

.cf-1col 
{
    width: 100%;
}

.cf-2col
{
    display: flex;
    flex-direction: row;
}

.input-container {
    position: relative;
    margin: 20px 20px 20px 0px;
    width: 100%;
}

.input-field {
    width: 100%!important;
    padding: 20px 10px 10px!important; /* Extra top padding to make room for the label */
    font-size: 16px!important;
    border: 1px solid rgba(255, 255, 255, .15)!important;
    border-radius: 3px!important;
    outline: none!important;
    color: #cacaca!important;
}

.input-label {
  position: absolute;
  top: 14px; /* Aligns with input text initially */
  left: 10px;
  font-size: 16px;
  color: #999;
  pointer-events: none; /* Allows clicking through the label to the input */
  transition: all 0.2s ease-out;
  background-color: transparent; /* Masks the border behind the label if needed */
  padding: 0 5px;
}


/* When input is focused... */
.input-field:focus + .input-label,
/* ...OR when the placeholder is NOT shown (meaning user typed something) */
.input-field:not(:placeholder-shown) + .input-label {
  top: 2px;       /* Move up */
  font-size: 12px;  /* Make smaller */
  color: #999;   /* Change color (optional) */
  font-weight: bold;
}

/* Highlight the input border on focus */
.input-field:focus {
  border-color: #007BFF;
}


/* 1. The Container */
.floating-select-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* 2. Styling Select2 to look like a text input */
.floating-select-container .select2-container .select2-selection--single {
    height: 60px; /* Taller height for floating label space */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding-top: 20px; /* Push text down */
    padding-left: 6px;
    display: flex;
    align-items: center;
    background-color: transparent!important;
}


.select2-dropdown {
    background-color: #ffffff; 
    border: 1px solid #ccc;
}

/* Remove the blue outline on focus */
.floating-select-container .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #999;
}

/* Hide the default Select2 arrow if you want, or style it */
.floating-select-container .select2-selection__arrow {
    height: 54px !important;
    top: 1px !important;
}


.floating-select-container .select2-selection__rendered {
    color: #999!important;
}

.floating-select-container .select2-selection__clear {
    color:#999!important;
}

/* 3. The Floating Label */
.floating-label {
    position: absolute;
    left: 12px;
    top: 18px; /* Center vertically initially */
    font-size: 16px;
    color: #999;
    pointer-events: none;
    transition: 0.2s ease all;
    background-color: transparent;
    z-index: 10; /* Sit on top of Select2 */
}

/* 4. The "Float" State */
/* We will add the class 'float-active' via JavaScript */
.floating-select-container.float-active .floating-label {
    top: 6px;        /* Move up */
    font-size: 11px; /* Make small */
    color: #999;
    font-weight: 600;
}

#mKrForm {
  display: none;
  margin-top: 40px;
}

#cart-icon-container 
{
  cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

#cart-icon-container:hover 
{
    transform: scale(1.1);
    background-color: #a300cc;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* ===== 4. RESPONSIVE DESIGN FOR PHONES ===== */
@media (max-width: 768px) {
    .product-grid-container {
        padding: 15px;
        gap: 20px;
    }

    .product-card {
        /* Cards take up full width on mobile */
        flex-basis: 100%;
    }
}



/* The full-screen overlay container */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it stays on top */
}

/* The spinner circle */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Animation definition */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#primary {
  width: 90% !important;
  margin: 50px auto !important;
}


/* Product Actions Container */
.product-actions {
    margin-top: 10px;
    height: 40px; /* Fixed height to prevent jumping */
}

/* Initial Add Button */
.btn-add-initial {
    width: 100%;
    background-color: #CC00FF;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-add-initial:hover {
    background-color: #a300cc;
}

/* Quantity Controls Container */
.qty-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #ddd;
    overflow: hidden;
}

/* Plus/Minus Buttons */
.qty-controls button {
    background: #e9ecef;
    border: none;
    width: 35px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    transition: background 0.2s;
}

.qty-controls button:hover {
    background: #ced4da;
}

.qty-controls .btn-minus { color: #dc3545; }
.qty-controls .btn-plus { color: #28a745; }

/* The Number Display */
.qty-number {
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

/* --- Quantity Controls Container --- */
.cart-qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 6px; /* Rounded corners */
    background-color: #fff;
    overflow: hidden; /* Ensures buttons stay inside the rounded corners */
    width: fit-content;
}

/* --- Plus & Minus Buttons --- */
.cart-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background-color: #f9f9f9;
    color: #555;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.cart-qty-btn:hover {
    background-color: #e2e6ea; /* Darker grey on hover */
    color: #000;
}

.cart-qty-btn:active {
    background-color: #dae0e5; /* Click effect */
}

/* --- The Number Display --- */
.cart-qty-number {
    width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    user-select: none; /* Prevents selecting the number when clicking fast */
}

/* --- Trash / Remove Button --- */
.btn-remove-item {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #dc3545; /* Standard Error Red */
    padding: 8px;
    margin-left: 12px; /* Space between qty controls and trash */
    border-radius: 50%; /* Circular hover effect */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-item:hover {
    background-color: #fff5f5; /* Light red background */
    color: #a71d2a; /* Darker red icon */
    transform: scale(1.1); /* Slight zoom */
}

/* Optional: Align icons perfectly */
.cart-qty-btn i, 
.btn-remove-item i {
    pointer-events: none; /* Ensures click event hits the button, not the icon */
}