/**
* 2007-2025 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2025 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
.mma-container-header {
    background: transparent !important; /* Removes white background */
}

.mma-content-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
}

.mma-header-left-group  {
    display: flex;
    align-items: center;
    width: 40%;
    gap: 15px;
}

.mma-nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mma-header-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Styling for the Power Button */
.mma-basic-button.mma-btn-round {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5a5a5a;
    color: white;
}
.member_area_logo{
    max-width: 20%;
}
.mma-welcome-message{
    font-size: x-large;
    color: #102c43;
    font-weight:bolder;
}

  .magnify-group {
    opacity: 0;
    display: none;
    transform: scale(1);
    transform-origin: center; /* Scale from center */
  }
  .magnify-group .magnify-lens-fill-white {
    fill: #FFFFFF; /* White fill for inner lens */
    stroke: none; /* No stroke on this fill layer */
  }
  .magnify-group .magnify-lens-fill-blue {
    fill: #92D3F5; /* Blue fill for lens highlight */
    stroke: none;
  }
  .magnify-group .magnify-lens-fill-grey {
    fill: #D0CFCE; /* Grey fill for main lens */
    stroke: none;
  }
  .magnify-group .magnify-handle-fill {
    fill: #3F3F3F; /* Dark grey fill for handle */
    stroke: none;
  }
  .magnify-group .magnify-outline {
    fill: none; /* Outlines should have no fill */
    stroke: #000000; /* Black stroke for outlines */
  }
  /* --- Glasses State (Initially Hidden) --- */
  .glasses-group {
    opacity: 0;
    transform: scale(0);
    /* Set transform-origin to the center of the glasses for smooth scaling */
    transform-origin: 37.5px 37.5px; /* (72/2 for viewBox height, 72/2 for width - roughly center) */
  }
  /* Specific styling for elements within the glasses group */
  .glasses-group .glasses-lens-fill {
    fill: #D0CFCE; /* Fill for lenses */
    stroke: #000000; /* Stroke for lens outlines */
    stroke-width: 1.8457; /* Specific stroke for lenses */
  }
  .glasses-group .glasses-frame-outline {
    fill: none; /* Frame paths are outlines */
    stroke: #000000; /* Stroke for frame outlines */
    stroke-width: 2; /* Specific stroke for frame */
  }
  .glasses-group .glasses-bridge-path {
    fill: none; /* Bridge path is an outline */
    stroke: #000000;
    stroke-width: 2;
  }

  /* --- Shimmer Effect Styles --- */
  .shimmer-rect {
    opacity: 0; /* Initially hidden */
    transform: translateX(-100%); /* Start off-screen to the left */
    animation: shimmer-slide 2s infinite linear; /* Apply animation */
    animation-play-state: paused; /* Pause by default */
    pointer-events: none; /* Ensure shimmer doesn't interfere with clicks */
  }
  @keyframes shimmer-slide {
    0% { transform: translateX(-72px); } /* Start one viewBox width to the left */
    100% { transform: translateX(72px); } /* End one viewBox width to the right */
  }

  /* Container for text */
  #message {
    margin-top: 20px;
    font-size: 1.2em;
    font-family: sans-serif;
    color: #333;
  }
.order-reference-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2; /* Ensures it's above other elements */
}
.order-reference {
    font-size: 1.5rem!important;
    font-weight: 900;
    color: #000000;
    text-shadow: 2px 2px 5px rgb(255 255 255);
    opacity: 0;
    letter-spacing: .2rem; 
    transition: opacity 0.3s ease-in-out;
}
.card:hover .order-reference {
    opacity: 1;
}

/* This rule is already present in your CSS, just confirming its importance */
.card:hover .magnify-group {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.icon-button {
  width: 45px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  z-index: 100;
  user-select: none;
  border-radius: 50%;
  transition: background-color 0.2s ease;

  /* Performance & interaction polish */
  outline: none;
  box-shadow: none;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

/* Hover effect */
.icon-button:hover {
  background-color: rgba(96, 125, 139, 0.49);
}

/* Focus & active suppression */
.icon-button:focus,
.icon-button:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.icon-button::-moz-focus-inner {
  border: 0;
}