@import "tailwindcss" source(none);
@source "../../helpers";
@source "../../javascript";
@source "../../views";
@source "../../default_templates";
@source "../../assets/stylesheets/store.tailwind.css";

@import "intl-tel-input/build/css/intlTelInput";

html,
body {
  @apply h-full w-full m-0 p-0;
}

::selection {
  background-color: var(--fmdb-text-highlight);
  color: var(--fmdb-text-dark);
}

.iti {
  --iti-path-flags-1x: url("/images/flags/flags.webp");
  --iti-path-flags-2x: url("/images/flags/flags@2x.webp");
  --iti-path-globe-1x: url("/images/flags/globe.webp");
  --iti-path-globe-2x: url("/images/flags/globe@2x.webp");

  @apply w-full;
}

.desktop-only {
  @apply hidden lg:block;
}

.mobile-only {
  @apply block lg:hidden;
}

/* Specific classes added for SAM's home page to work */

.max-w-2xl {
  @apply max-w-2xl;
}

.max-w-xl {
  @apply max-w-xl;
}

.max-w-lg {
  @apply max-w-lg;
}

.mx-auto {
  @apply mx-auto;
}

.mx-sm {
  @apply mx-3;
}

.gap-3 {
  @apply gap-3;
}

.justify-center {
  @apply justify-center;
}

.mt-md {
  @apply mt-5;
}

.my-sm {
  @apply my-3;
}

.my-md {
  @apply my-5;
}

.p-md {
  @apply p-5;
}

.py-sm {
  @apply py-3;
}

.py-md {
  @apply py-5;
}

.grid {
  @apply grid;
}

.grid-cols-1 {
  @apply grid-cols-1;
}

@media screen and (min-width: 768px) {
  .md\:grid-cols-2 {
    @apply grid-cols-2;
  }
}

/* End of SAM's home page specific classes */

table thead th {
  text-align: left;
}

.text-right {
  @apply text-right;
}

/* Hide number input arrows */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.text-primary-content {
  color: var(--fmdb-primary-content) !important;
}

.text-primary {
  color: var(--fmdb-primary) !important;
}

.text-muted {
  color: var(--fmdb-text-muted) !important;
}

.text-danger {
  color: var(--fmdb-error) !important;
}

.text-success {
  color: var(--fmdb-success) !important;
}

.text-warning {
  color: var(--fmdb-warning) !important;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  max-height: 700px;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  opacity: 0;
}

.slide-in-enter-active {
  transition: all 0.3s ease;
  max-height: 700px;
  overflow: hidden;
}

.slide-in-leave-active {
  /* No transition */
}

.slide-in-enter-from,
.slide-in-leave-to {
  max-height: 0;
  opacity: 0;
}

/* The key class for smooth position transitions */
.list-move {
  transition: transform 0.5s ease;
}

/* Optional: animations for enter/leave */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from {
  opacity: 0;
}

.list-leave-to {
  opacity: 0;
}

/* Ensure leaving items are taken out of layout flow */
.list-leave-active {
  position: absolute;
}

.slide-down-up-enter-active,
.slide-down-up-leave-active {
  transition: all 0.5s;
  max-height: 700px;
  overflow: hidden;
}

.slide-down-up-enter-from,
.slide-down-up-leave-to {
  max-height: 0;
  overflow: hidden;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.7s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-in-fast-enter-active {
  transition: opacity 0.3s ease;
}

.fade-in-fast-leave-active {
  /* No transition */
}

.fade-in-fast-enter-from,
.fade-in-fast-leave-to {
  opacity: 0;
}

/* Smooth Slide Right Animation using max-width */
.slide-right-enter-active {
  transition: max-width 1s ease;
  overflow: hidden;
}

.slide-right-leave-active {
  transition: all 1s ease;
  overflow: hidden;
  min-width: 0;
}

.slide-right-enter-from{
  max-width: 0;
}

.slide-right-leave-to {
  max-width: 0;
  width: 0;
  opacity: 0;
}

.slide-right-enter-to,
.slide-right-leave-from {
  max-width: 100%;
}

/* Main CSS */

.fmdb--app-container {
  @apply flex flex-col;
  min-height: 100vh;
  background-color: var(--fmdb-background);
  font-family: var(--fmdb-body-font);
  font-size: var(--fmdb-body-font-size);
  font-weight: var(--fmdb-body-font-weight);
}

.fmdb--main-content {
  flex: 1;
  padding-bottom: 2rem;
}

.fmdb--page-container {
  max-width: 1200px;
  @apply mx-auto;
}

.fmdb--page-title {
  @apply text-3xl font-semibold text-left;
}

.fmdb--page-subtitle {
  @apply text-left;
  color: var(--fmdb-text-muted);
}

.fmdb--faq-page-title {
  @apply text-3xl font-semibold text-center mt-5;
}

.fmdb--faq-page-subtitle {
  @apply text-center;
  color: var(--fmdb-text-muted);
}

.fmdb--portal-content-container .fmdb--faq-page-title {
  @apply text-left;
}

.fmdb--portal-content-container .fmdb--faq-page-subtitle {
  @apply text-left;
}

.fmdb--section {
  @apply py-8;
}

.fmdb--section-title {
  @apply text-3xl font-bold text-center mt-5;
}

.fmdb--page-subtitle {
  @apply text-center text-base lg:text-lg lg:mt-2;
  color: var(--fmdb-text-muted);
}

.fmdb--page-content {
  @apply text-base px-3 xl:px-0;
  color: var(--fmdb-text-dark);
  line-height: 1.6;
}

.fmdb--policy-content h1,
.fmdb--policy-content h2,
.fmdb--policy-content h3,
.fmdb--policy-content h4,
.fmdb--policy-content h5,
.fmdb--policy-content h6 {
  @apply mt-3;
}

.fmdb--badge {
  background-color: var(--fmdb-background-dark);
  color: var(--fmdb-text-dark);
  @apply px-3 rounded-sm text-xs py-1 font-medium;
}

/* Heading Styles */
h1 {
  @apply text-4xl font-bold;
  color: var(--fmdb-text-dark);
}

h2 {
  @apply text-3xl font-semibold;
  color: var(--fmdb-text-dark);
}

h3 {
  @apply text-2xl font-semibold;
  color: var(--fmdb-text-dark);
}

h4 {
  @apply text-xl font-medium;
  color: var(--fmdb-text-dark);
}

h5 {
  @apply text-lg font-medium;
  color: var(--fmdb-text-dark);
}

h6 {
  @apply text-base font-medium;
  color: var(--fmdb-text-dark);
}

.fmdb--page-content-bold {
  @apply font-bold;
}

.fmdb--hero-image {
  @apply w-full h-auto;
}

.fmdb--ecom-hero-container {
  background-image: url("/store/ecom_hero_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  @apply h-auto lg:h-[450px];
}

.fmdb--ecom-hero-container-inner {
  @apply flex flex-col lg:flex-row lg:h-full justify-center;
}

.fmdb--ecom-hero-content {
  @apply flex flex-col mt-12 lg:my-0 justify-end;
}

.fmdb--ecom-collection-groups-container {
  @apply flex mt-5;
}

.fmdb--ecom-collection-group {
  @apply flex-1 px-2 py-4 text-center font-medium cursor-pointer relative;
  background: var(--fmdb-background-dark);
}

.fmdb--down-arrow {
  @apply absolute bottom-[-6px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px];
  border-top-color: var(--fmdb-primary);
}

.fmdb--ecom-collection-group:hover {
  background: #E0E0E0;
}

.fmdb--ecom-collection-group.active {
  background: var(--fmdb-primary);
  color: var(--fmdb-primary-content);
}

.fmdb--ecom-collection-group-content-name {
  @apply text-center text-lg font-medium py-1;
}

.fmdb--ecom-collection-groups-content {
  @apply grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3 mt-5;
  min-height: 450px;
}

.fmdb--ecom-hero-content-box {
  @apply py-3 px-6 lg:w-[560px] rounded-xl mx-auto text-center mb-6;
  background-color: rgba(255, 255, 255, 0.9)
}

.fmdb--ecom-hero-content-header {
  @apply text-xl lg:text-2xl leading-10 lg:leading-12 font-bold lg:w-[540px] text-center text-shadow-gray-300;
  color: var(--fmdb-primary);
}

.fmdb--ecom-hero-content-subheader {
  @apply my-1 text-base text-center;
  color: var(--fmdb-text-dark);
}

.fmdb--ecom-hero-content-header br,
.fmdb--ecom-hero-content-subheader br {
  @apply hidden md:block;
}

.fmdb--usp-text {
  @apply text-center text-base lg:text-lg my-8;
  color: var(--fmdb-text-muted);
}

.fmdb--hero-container {
  background-image: url("/store/hero_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  @apply h-auto lg:h-[450px];
}

.fmdb--hero-container-inner {
  @apply flex flex-col lg:flex-row lg:h-full;
}

.fmdb--hero-content {
  @apply flex flex-col mt-12 lg:my-0 lg:justify-center;
}

.fmdb--hero-content-box {
  @apply p-6 lg:w-[640px] rounded-xl;
}

.fmdb--hero-content-header {
  @apply text-4xl lg:text-5xl leading-10 lg:leading-12 font-semibold lg:w-[540px] text-center lg:text-left;
}

.fmdb--hero-content-header strong {
  color: var(--fmdb-primary);
}

.fmdb--hero-content-subheader {
  @apply my-3 text-lg text-center lg:text-left;
  color: var(--fmdb-text-muted);
}

.fmdb--hero-content-header br,
.fmdb--hero-content-subheader br {
  @apply hidden md:block;
}

.fmdb--hero-content-bullets {
  @apply flex flex-col lg:flex-row gap-3 text-sm text-center lg:text-left items-center mt-5 lg:mt-0;
}

.fmdb--hero-buy-widget {
  @apply flex flex-row lg:flex-grow justify-center;
}

.fmdb--card {
  border: 1px solid var(--fmdb-border);
  @apply w-full p-8 bg-white lg:p-10 rounded-lg shadow-md;
}

.fmdb--card-sm {
  @apply p-4;
  box-shadow: none;
}

.fmdb--card-icon {
  background-color: var(--fmdb-primary-light);
  @apply pt-4 my-3 mx-auto w-20 h-20 rounded-full leading-20;
}

.fmdb--card-icon-sm {
  background-color: var(--fmdb-primary-light);
  @apply pt-2 my-3 mx-auto w-10 h-10 rounded-full leading-10;
}

.fmdb--card-sm .fmdb--card-icon {
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  padding-top: 0.8rem;
  margin: 0.5rem auto;
}

.fmdb--card-title {
  @apply text-xl;
  @apply font-semibold;
  @apply text-center;
}

.fmdb--card-subtitle {
  @apply text-center text-sm;
  color: var(--fmdb-text-muted);
}

.fmdb--card-sm .fmdb--card-title {
  @apply text-base;
  margin: 0.5rem 0;
  @apply font-medium;
}

.fmdb--card-content {
  @apply text-base;
  color: var(--fmdb-text-muted);
  @apply text-center;
  margin: 1rem 0 2rem 0;
  padding: 0 2rem;
}

.fmdb--card-sm .fmdb--card-content {
  font-size: 0.875rem;
  margin: 0.5rem 0;
  padding: 0 0.5rem;
}

.fmdb--contact-card {
  @apply md:mx-auto mb-8 max-w-xl p-8;
}

.fmdb--contact-form {
  @apply mt-8;
}

/* Header */

.fmdb--header-container {
  border-bottom: 1px solid var(--fmdb-border);
}

.fmdb--announcement-bar {
  background-color: var(--fmdb-primary);
  color: var(--fmdb-primary-content);
  padding: 0.25rem;
  @apply text-sm;
}

.fmdb--header {
  @apply flex justify-between items-center py-4 lg:py-8;
}

.fmdb--logo {
  width: 125px;
  @apply mx-3 md:mx-0;
}

.fmdb--mobile-nav-button {
  @apply flex justify-end gap-2 rounded-lg md:hidden p-2 mx-3 cursor-pointer;
  border: 1px solid var(--fmdb-border);
}

.fmdb--mobile-nav-icon {
  @apply w-6 h-6;
}

.fmdb--mobile-nav-container {
  @apply absolute bg-white w-full p-3;
  top: var(--header-bottom);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.fmdb--desktop-nav {
  @apply hidden md:flex justify-end gap-6;
}

.fmdb--nav-link {
  color: var(--fmdb-text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.fmdb--nav-link:hover {
  color: var(--fmdb-primary-dark);
}

.fmdb--mobile-nav-container .fmdb--nav-link {
  @apply block w-full py-3 text-center;
}

.fmdb--mobile-nav-divider {
  @apply border-b border-gray-200 my-3;
}

.fmdb--mobile-nav-actions {
  @apply grid grid-cols-2 gap-3;
}

.fmdb--header-actions {
  @apply hidden md:flex justify-end gap-2;
}

.fmdb--label {
  @apply text-sm;
  @apply font-medium;
  color: var(--fmdb-text-muted);
}

.fmdb--btn {
  text-decoration: none;
  @apply font-medium;
  transition: color 0.3s ease, border-color 0.3s ease;
  padding: 0.4rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  border: 2px solid transparent;
  @apply text-center;
}

.fmdb--btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fmdb--btn-narrow {
  padding: 0.4rem 0.75rem;
}

.fmdb--btn-primary {
  color: var(--fmdb-primary-content);
  background-color: var(--fmdb-primary);
  border-color: var(--fmdb-primary);
}

.fmdb--btn-primary:hover {
  color: var(--fmdb-primary-content);
  background-color: var(--fmdb-primary-dark);
  border-color: var(--fmdb-primary-dark);
}

.fmdb--btn-secondary {
  color: var(--fmdb-text-dark);
  background-color: var(--fmdb-secondary);
  border-color: var(--fmdb-secondary);
}

.fmdb--btn-secondary:hover {
  color: black;
  background-color: var(--fmdb-secondary-dark);
  border-color: var(--fmdb-secondary-dark);
}

.fmdb--btn-light {
  color: var(--fmdb-text-dark);
  background-color: var(--fmdb-background-dark);
  border-color: var(--fmdb-background-dark);
}

.fmdb--btn-light:hover {
  background-color: var(--fmdb-background-dark);
  border-color: var(--fmdb-background-dark);
}

.fmdb--btn-link {
  @apply cursor-pointer underline;
  color: var(--fmdb-text-muted);
  transition: color 0.3s ease;
}

.fmdb--btn-link:hover {
  color: var(--fmdb-text-dark);
}

.fmdb--btn-link-sm {
  @apply cursor-pointer text-sm underline;
  color: var(--fmdb-text-muted);
  transition: color 0.3s ease;
}

.fmdb--btn-link-sm:hover {
  color: var(--fmdb-text-dark);
}

.fmdb--btn-tall {
  @apply py-3;
}

.fmdb--pagination {
  @apply flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  @apply mt-4;
}

.fmdb--pagination-button {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--fmdb-secondary);
}

.fmdb--pagination-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fmdb--pagination-button:hover:not(:disabled) {
  background-color: var(--fmdb-secondary-dark);
}

/* Footer */
.fmdb--footer {
  background-color: var(--fmdb-primary);
  color: var(--fmdb-primary-content);
  @apply p-4;
  margin-top: auto;
  /* Pushes footer to the bottom */
  border-top: 1px solid var(--fmdb-border);
  @apply flex items-center justify-between;
}

.fmdb--footer-text {
  @apply text-xs;
}

/* Signup Page Specific Styles */
.fmdb--signup-page-container {
  @apply flex justify-center items-center p-8;
  min-height: calc(100vh - 160px);
  background-color: var(--fmdb-background-light);
}

.fmdb--signup-card {
  max-width: 450px;
}

.fmdb--signup-title {
  @apply text-2xl;
  @apply font-semibold;
  @apply text-center;
  color: var(--fmdb-text-dark);
  @apply mb-2;
}

.fmdb--signup-subtitle {
  @apply text-center;
  @apply mb-8;
}

.fmdb--form-group {
  @apply mb-4;
}

.fmdb--form-group label {
  display: block;
  font-size: 0.875rem;
  @apply font-medium;
  color: var(--fmdb-text-dark);
  margin-bottom: 0.375rem;
}

.fmdb--input {
  border: 1px solid var(--fmdb-border);
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  @apply w-full;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.fmdb--input-sm {
  @apply text-sm p-2;
}

.fmdb--input::placeholder {
  color: #adb5bd;
}

.fmdb--input:disabled,
.fmdb--input[readonly] {
  background-color: var(--fmdb-background-light);
  color: var(--fmdb-text-muted);
  cursor: not-allowed;
}

.fmdb--input:focus {
  border-color: var(--fmdb-primary);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(253, 201, 14, 0.25);
}

.fmdb--file-input {
  background-color: var(--fmdb-background-light);
  padding: 0;
}

.fmdb--file-input::file-selector-button {
  background-color: var(--fmdb-background-dark);
  color: var(--fmdb-text-dark);
  border: none;
  border-radius-top-left: 0.375rem;
  border-radius-bottom-left: 0.375rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
}

.fmdb--password-input-wrapper {
  @apply flex items-center relative;
}

.fmdb--password-input-wrapper .fmdb--input {
  padding-right: 2.5rem;
}

.fmdb--password-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fmdb-text-muted);
  padding: 0.25rem;
}

.fmdb--password-toggle:hover {
  color: var(--fmdb-text-dark);
}

.fmdb--form-group-checkbox {
  @apply flex items-center gap-2;
  @apply mb-6;
}

.fmdb--checkbox {
  @apply w-4 h-4;
  border-radius: 0.25rem;
  border: 1px solid var(--fmdb-border);
  accent-color: var(--fmdb-primary);
}

.fmdb--checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(253, 201, 14, 0.25);
}

.fmdb--link {
  color: var(--fmdb-primary);
  text-decoration: none;
  @apply font-medium;
}

.fmdb--link:hover {
  text-decoration: underline;
  color: var(--fmdb-primary-dark);
}

.fmdb--tos-checkbox {
  margin-top: 2rem;
}

.fmdb--error-message {
  color: var(--fmdb-error);
}

.fmdb--cart-icon-container {
  @apply p-2 relative;
}

.fmdb--cart-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--fmdb-text-dark);
}

.fmdb--cart-icon-count {
  @apply absolute top-0 right-0 text-xs rounded-full px-2;
  background-color: var(--fmdb-primary);
  color: var(--fmdb-primary-content);
}

.fmdb--cart-items-container {
  @apply w-full overflow-x-auto;
}

.fmdb--cart-items {
  @apply w-full table-auto;
}

.fmdb--cart-items th {
  @apply font-medium border-b py-1 text-sm;
  border-color: var(--fmdb-border);
}

.fmdb--cart-items tbody td {
  @apply py-3;
}

.fmdb--cart-items tfoot td {
  @apply py-3;
}

.fmdb--cart-item-image {
  @apply w-16 h-16;
}

.fmdb--cart-image-placeholder {
  @apply w-16 h-16 bg-white;
}

.fmdb--cart-item-name {
  @apply text-sm md:text-lg font-medium px-3;
}

.fmdb--cart-item-price {
  @apply text-sm md:text-base;
}

.fmdb--cart-totals-calculations-container {
  @apply flex items-center justify-between;
}

.fmdb--cart-child-quantity {
  @apply pr-7 md:pr-16;
}

/* Checkout Styles */
.fmdb--checkout-container {
  @apply w-full mt-6 flex flex-col gap-3;
}

#fmdb--checkout-timer-warning-container .fmdb--alert-warning{
  @apply text-sm flex gap-3;
  color: var(--fmdb-alert);
}

.fmdb--checkout-timer-warning-time-remaining {
  @apply text-right;
  width: 150px;
  font-size: 2rem;
  margin-top: 0.5rem;
  font-weight: 500;
  font-family:'Courier New', Courier, monospace;
}

#fmdb--cart-order-summary-container .fmdb--cart-item-image {
  @apply w-12 h-12;
}

#fmdb--cart-order-summary-container .fmdb--cart-image-placeholder {
  @apply w-12 h-12 bg-white;
}

.fmdb--address-select-item {
  @apply my-3 flex gap-3;
}

.fmdb--address-select-icon {
  @apply w-6 h-6;
  color: var(--fmdb-secondary);
  transition: color 0.2s ease;
}

.fmdb--address-select-item-selected .fmdb--address-select-icon {
  color: var(--fmdb-primary);
}

.fmdb--address-select-item-selected .fmdb--address-select-text {
  @apply font-semibold;
}

.fmdb--checkout-address {
  @apply flex flex-col p-2;
  border: 1px solid var(--fmdb-border);
  border-radius: 0.375rem;
}

.fmdb--checkout-address-selected {
  border: 2px solid var(--fmdb-primary);
  border-radius: 0.375rem;
}

.fmdb--checkout-icon {
  @apply w-6 h-6;
  color: var(--fmdb-secondary);
}

.fmdb--checkout-address-selected .fmdb--checkout-icon {
  color: var(--fmdb-primary);
}

.fmdb--address-select-item-selected .fmdb--address-select-text {
  @apply font-semibold;
}

.fmdb--checkout-shipping-method-selected .fmdb--checkout-icon {
  color: var(--fmdb-primary);
}

.fmdb--checkout-shipping-method {
  @apply flex flex-col p-2;
  border: 1px solid var(--fmdb-border);
  border-radius: 0.375rem;
}

.fmdb--checkout-shipping-method-selected {
  border: 2px solid var(--fmdb-primary);
  border-radius: 0.375rem;
}

/* Dropdown Styles */
.fmdb--dropdown {
  position: relative;
  display: inline-block;
}

.fmdb--dropdown-trigger {
  @apply flex items-center gap-2;
  background: none;
  border: none;
  cursor: pointer;
  @apply p-2;
}

.fmdb--user-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--fmdb-text-dark);
}

.fmdb--caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--fmdb-text-dark);
  transition: transform 0.2s ease;
}

.fmdb--dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  border: 1px solid var(--fmdb-border);
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 1000;
  @apply mt-2;
}

.fmdb--dropdown-item {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--fmdb-text-dark);
  text-decoration: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.fmdb--dropdown-item:hover {
  background-color: var(--fmdb-background-dark);
}

.fmdb--features-grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-5 my-12;
}

/* Product Collection */

.fmdb--product-collection-products {
  @apply flex flex-col md:flex-row gap-6 my-3;
}

.fmdb--product-filters {
  @apply flex-none;
  width: 220px;
}

.fmdb--product-sort-container {
  @apply flex gap-2 justify-end;
}

.fmdb--product-sort-label {
  @apply pt-2 w-16;
}

.fmdb--product-sort-select {
  @apply w-48;
}

.fmdb--product-search-input {
  @apply w-full;
}

.fmdb--product-filter-container {
  @apply w-full my-5;
}

.fmdb--product-filter-container label {
  @apply block font-medium text-sm;
  color: var(--fmdb-text-muted);
}

.fmdb--products-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 my-6;
}

.fmdb--products-grid-4 {
  @apply lg:grid-cols-4;
}

.fmdb--products-grid-3 {
  @apply md:grid-cols-3;
}

.fmdb--products-grid-2 {
  @apply md:grid-cols-2;
}

.fmdb--loading .fmdb--products-grid {
  @apply opacity-50;
}

.fmdb--product-image-container {
  @apply w-full aspect-square overflow-hidden;
}

.fmdb--product-image {
  @apply w-full h-auto object-cover;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fmdb--product-image-container:hover .fmdb--product-image {
  transform: scale(1.15);
}

.fmdb--product-image-thumbnails {
  @apply grid grid-cols-4 gap-3 my-3;
}

.fmdb--product-image-thumbnail-image {
  @apply cursor-pointer;
}

.fmdb--product-image-thumbnail-image.selected {
  border: 2px solid var(--fmdb-primary);
}

.fmdb--product-card-title {
  @apply text-lg font-medium mt-3 text-center;
}

.fmdb--product-card-price {
  @apply text-base font-medium text-center;
  color: var(--fmdb-text-muted);
}

.fmdb--add-to-cart-button-container {
  @apply flex flex-row;
  transition: opacity 0.3s ease;
}

.fmdb--btn-disabled {
  @apply opacity-50 cursor-not-allowed;
}

.fmdb--add-to-cart-button-container div {
  transition: all 0.7s ease;
  overflow: clip;
}

.fmdb--add-to-cart-button-quantity-container {
  @apply flex items-center justify-center rounded-full mr-2;
  background: color-mix(in oklab, var(--fmdb-primary) 30%, transparent);
}

.fmdb--cart-items-container .fmdb--add-to-cart-button-quantity-container{
  background: color-mix(in oklab, var(--fmdb-text-muted) 30%, transparent);
  @apply max-w-28;
}

.fmdb--product-card-container .fmdb--add-to-cart-button-quantity-outer-container {
  @apply w-1/2;
}

.fmdb--add-to-cart-button-quantity-container .fmdb--btn-item-quantity {
  @apply font-bold cursor-pointer p-2 hover:bg-gray-100 w-10 h-10 block rounded-full overflow-clip;
  color: var(--fmdb-text-dark);
  background: var(--fmdb-primary);
  border: 1px solid var(--fmdb-primary-dark);
}

.fmdb--add-to-cart-button-quantity-container .fmdb--btn-item-quantity:hover {
  background: var(--fmdb-primary-dark);
}

.fmdb--btn-item-quantity .fmdb--btn-icon {
  @apply w-5 h-5 mx-auto;
}

.fmdb--cart-items-container .fmdb--add-to-cart-button-quantity-container .fmdb--btn-item-quantity {
  @apply p-1 w-8 h-8;
  background: #AAAAAA;
  border: 1px solid #AAAAAA;
}

.fmdb--cart-items-container .fmdb--add-to-cart-button-quantity-container .fmdb--btn-item-quantity:hover {
  background: #9A9A9A;
}

.fmdb--cart-items-container .fmdb--btn-item-quantity .fmdb--btn-icon {
  @apply w-4 h-4 mx-auto;
}

.fmdb--add-to-cart-button-quantity-text {
  @apply text-black text-center shrink-0 grow;
  padding: 0.4rem;
}

.fmdb--product-page-container .fmdb--add-to-cart-button-quantity-text{
  @apply w-16;
}

.fmdb--cart-items-container .fmdb--add-to-cart-button-quantity-text {
  padding: 0.2rem;
  @apply text-sm
}

/* Product */

.fmdb--product-page-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.fmdb--product-image-container {
  @apply w-full aspect-square;
}

.fmdb--product-image {
  @apply w-full h-auto object-cover;
}

.fmdb--product-info-container {
  @apply flex flex-col gap-3;
}

.fmdb--product-page-quantity-container {
  @apply flex gap-1 pr-3;
  background-color: var(--fmdb-background-light);
  transition: max-width 1s ease;
  overflow: clip;
}

.fmdb--product-title {
  @apply text-2xl font-medium;
}

.fmdb--product-price {
  @apply text-lg font-medium;
  color: var(--fmdb-text-muted);
}

.fmdb--product-short-description {
  @apply text-base;
  color: var(--fmdb-text-muted);
}

/* Buy Widget */

.fmdb--buy-widget {
  background: #fff;
  border: 1px solid var(--fmdb-border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(44, 47, 51, 0.08);
  @apply my-3 lg:my-12 mx-3 lg:mx-auto p-3 lg:p-6;
}

.fmdb--buy-tabs {
  @apply flex;
  @apply mb-4;
}

.fmdb--buy-tab {
  flex: 1;
  background: none;
  border: none;
  @apply text-lg;
  @apply font-medium;
  color: var(--fmdb-text-muted);
  padding: 0.5rem 0;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.fmdb--buy-tab-active {
  color: var(--fmdb-text-dark);
  border-bottom: 4px solid var(--fmdb-primary);
  background: none;
}

.fmdb--buy-price-row {
  @apply flex items-center justify-center gap-3 text-center;
  @apply mb-4;
  @apply text-lg;
}

.fmdb--buy-price-value {
  @apply font-semibold;
  font-size: 1.4rem;
  color: var(--fmdb-text-dark);
}

.fmdb--buy-price-metal {
  @apply font-bold;
  margin-right: 0.25rem;
}

.fmdb--buy-price-label {
  color: var(--fmdb-text-muted);
  @apply text-xs;
  margin-left: auto;
}

.fmdb--buy-input-switch {
  @apply flex justify-end gap-2;
  @apply mb-4;
}

.fmdb--buy-input-tab {
  background: var(--fmdb-secondary);
  color: var(--fmdb-text-muted);
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  @apply text-base;
  @apply font-medium;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.fmdb--buy-input-tab-active {
  background: var(--fmdb-primary);
  color: var(--fmdb-text-dark);
}

.fmdb--buy-input-box {
  @apply flex items-center justify-center gap-3;
  @apply mb-4;
}

.fmdb--buy-input-container {
  @apply relative;
}

.fmdb--buy-input {
  border: 1px solid var(--fmdb-border);
  border-radius: 0.5rem;
  @apply text-base;
  width: 140px;
  text-align: right;
  background: #fff;
  color: var(--fmdb-text-dark);
}

.fmdb--buy-input-with-prefix {
  padding: 0.3rem 0.5rem 0.3rem 2.7rem;
}

.fmdb--buy-input-with-suffix {
  padding: 0.3rem 2.7rem 0.3rem 0.5rem;
}

.fmdb--buy-unit {
  color: var(--fmdb-text-muted);
  @apply text-sm;
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.fmdb--buy-unit-prefix {
  right: auto;
  left: 0.6rem;
}

.fmdb--buy-equals {
  color: var(--fmdb-text-muted);
  @apply text-lg;
}

.fmdb--buy-quick-btns {
  @apply flex justify-between gap-2 mb-4;
}

.fmdb--buy-quick-btn {
  background: none;
  border: 2px solid var(--fmdb-border);
  border-radius: 0.5rem;
  padding: 0.25rem 1rem;
  @apply text-sm whitespace-nowrap;
  color: var(--fmdb-text-dark);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.fmdb--buy-quick-btn:hover {
  background: var(--fmdb-secondary);
}

.fmdb--buy-quick-btn-active {
  @apply font-bold;
}

.fmdb--confirm-order-container {
  max-width: 640px;
  @apply mx-auto;
  margin-bottom: 3rem;
}

.fmdb--confirm-order-container h3 {
  @apply font-semibold;
}

.fmdb--confirm-order-title {
  font-size: 1.7rem;
  @apply font-semibold;
  @apply mt-4;
}

.fmdb--table {
  @apply w-full;
  @apply text-sm;
  border-collapse: separate;
  border-spacing: 0;
}

.fmdb--confirm-order-table {
  @apply text-sm whitespace-nowrap;
}

.fmdb--confirm-order-table th {
  @apply font-medium;
  background-color: var(--fmdb-background-dark);
  @apply p-2;
}

.fmdb--confirm-order-table td {
  border-bottom: 1px solid var(--fmdb-border);
  @apply p-2;
}

.fmdb--confirm-order-table tfoot td {
  @apply font-semibold;
  border-bottom: none;
}

.fmdb--order-invoice-table th {
  @apply font-medium;
  @apply p-2;
  background-color: var(--fmdb-background-dark);
}

.fmdb--order-invoice-table td {
  border-bottom: 1px solid var(--fmdb-border);
  @apply p-2;
}

.fmdb--order-invoice-table tfoot td {
  @apply font-semibold;
  border-bottom: none;
}

/* Portal Dashboard */
.fmdb--portal-page-container {
  @apply flex flex-col lg:flex-row;
}

.fmdb--portal-nav-container {
  @apply p-4 pb-0 w-full md:w-[270px];
}

.fmdb--portal-content-container {
  flex: 1;
  @apply p-4;
}

.fmdb--portal-content-container .fmdb--hero-image {
  @apply hidden;
}

.fmdb--portal-content-container .fmdb--page-title {
  @apply font-semibold;
  font-size: 1.5rem;
}

.fmdb--portal-content-container h4 {
  @apply font-medium;
  @apply mb-2;
  color: var(--fmdb-text-dark);
}

.fmdb--portal-side-nav-toggle {
  @apply flex lg:hidden cursor-pointer rounded-lg py-3 px-5 mb-3 justify-between;
  background-color: var(--fmdb-background-dark);
}

.fmdb--side-nav {
  @apply flex flex-col;
}

.fmdb--side-nav-title {
  padding: 0 0.75rem;
  @apply font-medium;
  @apply text-sm;
  @apply mt-4;
  @apply mb-2;
  color: var(--fmdb-text-muted);
}

.fmdb--side-nav-title:first-child {
  margin-top: 0;
}

.fmdb--side-nav-item {
  padding: 0.75rem 1.25rem;
  transition: background-color 0.2s ease;
  color: var(--fmdb-text-muted);
  text-decoration: none;
  @apply font-normal;
  @apply text-sm;
}

.fmdb--side-nav-item:hover {
  background-color: var(--fmdb-background-dark);
}

.fmdb--side-nav-icon {
  vertical-align: text-bottom;
  margin-right: 1rem;
}

.fmdb--side-nav-item-active {
  transition: all 0.5s ease;
  color: var(--fmdb-text-dark);
  @apply font-semibold;
  background-color: var(--fmdb-background-dark);
}

.fmdb--side-nav-item-active:hover {
  background-color: var(--fmdb-background-dark);
}

.fmdb--gradient-bg-primary {
  background: linear-gradient(-180deg, var(--fmdb-primary) 0%, var(--fmdb-primary-dark) 100%);
}

.fmdb--wallet-balance-container {
  @apply flex;
  gap: 1rem;
  background: linear-gradient(-180deg, var(--fmdb-primary) 0%, var(--fmdb-primary-dark) 100%);
  border-radius: 0.5rem;
  padding: 1.25rem 2rem;
  @apply mb-6;
  box-shadow: 0 2px 8px rgba(44, 47, 51, 0.08);
  min-width: 340px;
}

.fmdb--wallet-balance-label {
  color: white;
  @apply text-xl;
  @apply font-bold;
  letter-spacing: 0.01em;
  margin-top: 3px;
}

.fmdb--wallet-balance-amount {
  color: white;
  @apply text-xl;
  margin-top: 0.25rem;
  @apply font-medium;
  letter-spacing: 0.01em;
  font-family: 'Courier New', Courier, monospace
}

.fmdb--portal-orders-table {
  @apply w-full;
  border-collapse: separate;
  border-spacing: 0;
}

.fmdb--portal-orders-table th {
  @apply font-medium;
  border-top: 2px solid var(--fmdb-text-dark);
  border-bottom: 2px solid var(--fmdb-text-dark);
  padding: 0.5rem 1rem;
}

.fmdb--portal-orders-table td {
  border-bottom: 1px solid var(--fmdb-border);
  color: var(--fmdb-text-dark);
  @apply p-4;
  transition: background-color 0.2s ease;
}

.fmdb--portal-order-row:hover td {
  background-color: var(--fmdb-background-light);
}

.fmdb--order-type-purchase {
  background-color: #caffbd;
  color: #378a00;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  @apply text-xs font-medium;
}

.fmdb--order-type-sale {
  background-color: #ffecc4;
  color: #a88100;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  @apply text-xs font-medium;
}

.fmdb--order-status-pending {
  background-color: #ffecc4;
  color: #a88100;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  @apply text-xs font-medium;
}

.fmdb--order-status-shipped {
  background-color: #d4e4f1;
  color: #002a59;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  @apply text-xs font-medium;
}

.fmdb--order-status-delivered {
  background-color: #caffbd;
  color: #378a00;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  @apply text-xs font-medium;
}

.fmdb--order-status-cancelled {
  background-color: #ffd4d4;
  color: #a80000;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  @apply text-xs font-medium;
}

.fmdb--portal-pagination {
  @apply flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  @apply mt-4;
}

.fmdb--portal-pagination-button {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.fmdb--portal-pagination-button.disabled {
  opacity: 0.5;
  cursor: default;
}

.fmdb--portal-pagination-button:hover:not(.disabled) {
  background-color: var(--fmdb-background-dark);
}

.fmdb--portal-pagination-page-number {
  cursor: default;
  user-select: none;
  @apply text-sm;
}

/* Invoice styles */
.fmdb--invoice-container {
  background: var(--fmdb-white);
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  max-width: 800px;
  @apply p-4;
  @apply mx-auto;
}

.fmdb--invoice-body {
  padding: 1.5rem;
}

.fmdb--invoice-header {
  @apply mb-8;
}

.fmdb--invoice-title {
  @apply font-semibold mb-8 uppercase text-3xl;
}

.fmdb--invoice-contact-info {
  @apply mt-2;
  color: var(--fmdb-text-dark);
}

.fmdb--invoice-details {
  @apply mb-8;
}

.fmdb--invoice-info-grid {
  @apply grid grid-cols-3 gap-4;
}

.fmdb--invoice-section-title {
  @apply text-xl;
  @apply font-semibold;
  @apply mb-2;
}

.fmdb--invoice-text {
  color: var(--fmdb-text-dark);
}

.fmdb--invoice-items {
  @apply mb-8;
}

.fmdb--invoice-table-container {
  overflow-x: auto;
}

.fmdb--invoice-table {
  @apply w-full;
  border-collapse: collapse;
}

.fmdb--invoice-table-header {
  border-bottom: 1px solid var(--fmdb-border);
}

.fmdb--invoice-table-header th {
  padding: 0.75rem;
  @apply font-semibold;
}

.fmdb--invoice-table-row {
  border-bottom: 1px solid var(--fmdb-border);
}

.fmdb--invoice-table-row:hover {
  background-color: var(--fmdb-background);
}

.fmdb--invoice-table-row td {
  padding: 0.75rem;
}

.fmdb--invoice-footer {
  @apply text-center;
  margin-top: 2rem;
  color: var(--fmdb-text-dark);
  font-style: italic;
}

.fmdb--divider {
  height: 1px;
  background-color: var(--fmdb-border);
  margin: 1.5rem 0;
}

.fmdb--faq-question {
  @apply font-medium;
  @apply text-lg;
}

.fmdb--faq-answer {
  color: var(--fmdb-text-muted);
  @apply text-base;
}

/* Buy Page Styles */
.fmdb--buy-page-price-row {
  @apply gap-3;
  @apply mb-4;
}

.fmdb--buy-page-price-value {
  @apply font-semibold;
  @apply text-3xl;
  color: var(--fmdb-text-dark);
}

.fmdb--buy-page-price-label {
  color: var(--fmdb-text-muted);
  @apply text-sm;
}

.fmdb--buy-page-input-box {
  @apply flex;
  align-items: left;
  @apply gap-6;
  @apply mb-4;
}

.fmdb--buy-page-input-container {
  position: relative;
}

.fmdb--buy-page-input {
  border: 1px solid var(--fmdb-border);
  border-radius: 0.5rem;
  font-size: 1.2rem;
  width: 150px;
  text-align: right;
  background: #fff;
  color: var(--fmdb-text-dark);
  @apply p-2;
}

.fmdb--gift-email-input {
  border: 1px solid var(--fmdb-border);
  border-radius: 0.5rem;
  font-size: 1rem;
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--fmdb-text-dark);
  @apply p-2;
}

.fmdb--gift-message-textarea {
  border: 1px solid var(--fmdb-border);
  border-radius: 0.5rem;
  font-size: 1rem;
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--fmdb-text-dark);
  resize: vertical;
  font-family: inherit;
  @apply p-2;
}

.fmdb--buy-page-input-with-prefix {
  padding-left: 3.5rem;
}

.fmdb--buy-page-input-with-suffix {
  padding-right: 3.5rem;
}

.fmdb--buy-page-unit {
  color: var(--fmdb-text-muted);
  @apply text-base;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.fmdb--buy-page-unit-prefix {
  right: auto;
  left: 1rem;
}

.fmdb--buy-page-equals {
  color: var(--fmdb-text-muted);
  font-size: 1.5rem;
}

.fmdb--alert-error {
  background-color: #f1cdd2;
  border: 1px solid var(--fmdb-error);
  border-radius: 0.5rem;
  @apply p-4;
  color: var(--fmdb-error);
}

.fmdb--alert-warning {
  background-color: var(--fmdb-primary-light);
  border: 1px solid var(--fmdb-primary);
  border-radius: 0.5rem;
  @apply p-4;
  color: #a88100;
}

.fmdb--alert-info {
  background-color: #cff4fc;
  border: 1px solid #9eeaf9;
  border-radius: 0.5rem;
  @apply p-4;
  color: #042e49;
}

.fmdb--alert-neutral {
  background-color: var(--fmdb-background-dark);
  border: 1px solid var(--fmdb-border);
  border-radius: 0.5rem;
  @apply p-4;
  color: var(--fmdb-text-dark);
}

.fmdb--alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 0.5rem;
  @apply p-4;
  color: #155724;
}

/* Toast Styles */
.fmdb--toast-container {
  position: fixed;
  z-index: 1000;

  /* Desktop: top right */
  @apply lg:left-auto lg:right-4 lg:transform-none;
}

.fmdb--toast {
  border-radius: 0.5rem;
  @apply p-4 relative;
  @apply text-sm;
  @apply font-medium;
  @apply my-3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 340px;
  min-width: 280px;
  transition: all 0.3s ease;
}

.fmdb--toast-close-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}

.fmdb--toast-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.fmdb--toast-error {
  background-color: #f1cdd2;
  border: 1px solid var(--fmdb-error);
  color: var(--fmdb-error);
}

.fmdb--toast-warning {
  background-color: var(--fmdb-primary-light);
  border: 1px solid var(--fmdb-primary);
  color: #a88100;
}

.fmdb--toast-info {
  background-color: #cff4fc;
  border: 1px solid #9eeaf9;
  color: #042e49;
}

/* Ticket Styles */

.fmdb--portal-ticket-status-open {
  background-color: #ffecc4;
  color: #a88100;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  white-space: nowrap;
  @apply text-sm;
  @apply font-medium;
}

.fmdb--portal-ticket-status-resolved {
  background-color: #caffbd;
  color: #378a00;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  width: fit-content;
  white-space: nowrap;
  @apply text-sm;
  @apply font-medium;
}

.fmdb--portal-ticket-status-in-progress {
  background-color: #e6f0fb;
  color: #6f96fe;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  width: fit-content;
  @apply text-sm;
  @apply font-medium;
}

.fmdb--portal-ticket-status-closed {
  background-color: #ffe4e0;
  color: #eb0a0a;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  width: fit-content;
  @apply text-sm;
  @apply font-medium;
}

.fmdb--portal-tickets-table {
  @apply font-medium;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--fmdb-text-muted);
}

.fmdb--portal-tickets-table th {
  @apply font-medium;
  border-top: 2px solid var(--fmdb-text-dark);
  border-bottom: 2px solid var(--fmdb-text-dark);
  padding: 0.5rem 1rem;
}

.fmdb--portal-tickets-table td {
  border-bottom: 1px solid var(--fmdb-border);
  color: var(--fmdb-text-dark);
  @apply p-4;
  transition: background-color 0.2s ease;
}

.fmdb--portal-tickets-table tr:hover td {
  background-color: var(--fmdb-background-light);
}

/* Modal Styles */
.fmdb--modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.fmdb--modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  z-index: 1001;
  max-width: 90%;
  width: 500px;
  overflow-y: scroll;
  max-height: 90vh;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fmdb--modal-content {
  @apply w-full;
}

.fmdb--modal-title {
  @apply font-semibold text-lg;
}

.fmdb--invoice-container {
  @apply p-8 border;
  border-color: var(--fmdb-border);
}

.fmdb--modal-header {
  @apply flex justify-between items-center;
}

.fmdb--modal-close {
  @apply cursor-pointer text-xl;
}

@media print {
  .no-print {
    display: none;
  }

  .fmdb--invoice-container {
    border: none;
    padding: 0;
  }
}

.fmdb--social-media-icons svg path {
  fill: var(--fmdb-primary-content)
}

.fmdb--portal-list-date-header {
  color: var(--fmdb-text-muted);
  @apply my-3;
}

.fmdb--wallet-arrow-right {
  transition: transform 0.3s ease;
}

.fmdb--wallet-balance-container:hover .fmdb--wallet-arrow-right {
  animation: bounceRight 0.8s ease infinite;
}

@keyframes bounceRight {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(6px);
  }
}

.fmdb--live-metal-prices-bar-container {
  @apply border-t py-2;
  border-color: var(--fmdb-border);
}

.fmdb--live-metal-prices-bar {
  @apply flex flex-col md:flex-row justify-between items-center gap-2 md:gap-0;
}

.fmdb--price-update-timer {
  @apply flex w-full justify-center md:justify-end;
  gap: 8px;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.fmdb--price-update-timer-label {
  @apply text-xs font-medium;
}

.fmdb--price-update-timer-value {
  @apply font-medium text-xs w-12;
  color: #333;
}

.fmdb--live-metal-prices-container {
  @apply flex justify-between items-center flex-grow gap-2 md:gap-4;
}

.fmdb--live-metal-prices {
  @apply flex justify-center items-center gap-1 flex-1 font-semibold text-nowrap text-xs;
  color: var(--fmdb-text-dark);
  min-width: 120px;
  text-align: right;
}

.fmdb--live-metal-prices.error {
  color: var(--fmdb-error);
}

.fmdb--live-metal-price-label {
  @apply font-medium text-xs;
  color: var(--fmdb-text-dark);
}

.fmdb--live-metal-price-value {
  @apply text-xs;
  color: var(--fmdb-text-muted);
}

.fmdb--price-icon {
  @apply hidden md:inline-block;
  color: var(--fmdb-primary-content);
  width: 16px;
  height: 16px;
}

.fmdb--live-metal-prices-header {
  @apply hidden md:flex justify-between items-center gap-2 text-xs text-nowrap px-3;
}

.fmdb--gift-actions-container {
  @apply flex gap-4 items-center justify-between;
}

.fmdb--gift-action-accept-icon {
  color: var(--fmdb-success);
  width: 24px;
  height: 24px;
  font-weight: bold;
  cursor: pointer;
}

.fmdb--gift-action-decline-icon {
  color: var(--fmdb-error);
  width: 24px;
  height: 24px;
  font-weight: bold;
  cursor: pointer;
}

.fmdb--gift-action-text {
  @apply text-xs font-bold;
  color: white;
  cursor: pointer;
}

.fmdb--product-specifications-title {
  @apply mt-5;
}

.fmdb--product-specification {
  @apply grid grid-cols-2 gap-2 w-full p-3;
}

.fmdb--product-specification:nth-child(even) {
  background-color: var(--fmdb-background-light);
}

.fmdb--product-specification-label {
  @apply font-medium;
}

.fmdb--product-specification-value {
  @apply text-right;
}

/* Vault Item Styles */
.fmdb--vault-item-container {
  @apply flex flex-col justify-center items-center gap-2 p-2;
}

.fmdb--vault-item-image {
  @apply w-16 h-16;
}

.fmdb--vault-info-container {
  @apply flex whitespace-nowrap justify-between items-center gap-2;
}

.fmdb--vault-item {
  @apply flex flex-col;
  border: 2px solid var(--fmdb-border);
  border-radius: 0.375rem;
}

.fmdb--vault-item-selected {
  border: 2px solid var(--fmdb-primary);
  border-radius: 0.375rem;
}