/* Styles for group buttons */
.group-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    gap: 10px;
    margin: 20px auto; /* Center the group-buttons container */
    justify-content: center; /* Center the buttons horizontally */
    max-width: 90%; /* Limit the width to ensure proper centering */
    padding: 0 10px; /* Optional padding to ensure alignment within the container */
}

.group-button {
    background: var(--button-bg);
    color: var(--button-text-color);
    border: none;
    padding: 8px 16px; /* Adjust padding as needed */
    font-size: 0.8rem; /* Adjust font size */
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.group-button:hover {
    background: var(--button-hover-bg);
    transform: scale(1.03); /* Slightly increased scale on hover */
}

/* Dropdown select styles */
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    color: #333;
}

select:focus {
    border-color: #696cff;
    outline: none;
}
input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    color: #333;
}

input:focus {
    border-color: #696cff;
    outline: none;
}

/* Product card styles */
.products {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 columns with flexibility */
    gap: 20px; /* Space between products */
    margin: 20px auto; /* Space above and below */
    padding: 0 10px; /* Optional padding for alignment */
    max-width: 1200px; /* Maximum width */
    box-sizing: border-box;
    justify-content: center; /* Center the grid */
}

/* Product card styling */
.product {
    background: #fff; /* White background */
    border: 1px solid #ddd; /* Light border around product */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
    transition: transform 0.3s, box-shadow 0.3s; /* Transition effects */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    position: relative;
    width: 100%; /* Full width of the grid container */
    aspect-ratio: 1 / 1; /* Equal width and height to make it square */
    padding: 0; /* Remove padding */
    box-sizing: border-box;
}

.product-image-container {
    width: 100%;
    height: 120px;             /* ارتفاع معقول */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 8px;        /* يفصل الصورة عن الاسم */
}

.product-image {
    max-width: 80%;            /* مساحة فارغة حول الصورة */
    max-height: 100%;
    object-fit: contain;
}

/* Product name styling */
.product-name {
    margin: 0;                 
    padding: 4px 0;            /* حشو عمودي خفيف */
    font-size: 1rem;
}
.product-price {
    margin: 0;
    padding: 2px 0 6px;
    font-size: 0.95rem;
    color: #555;
}
/* Hide extra details in product card */
/* خفي جميع عناصر div داخل .product ما عدا .product-balances */
.product div:not(.product-balances),
.product p,
.product .product-price,
.product .product-field {
    display: none; /* يزيل العناصر ما عدا product-balances */
}
/* إظهار منتج الأرصد الجديدة */
.product .product-balances {
    display: block; /* أو inline-block حسب التصميم */
}


/* Hover effect on product card */
.product:hover {
    transform: scale(1.03); /* Slightly scale up */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow */
}

/* General Dark Theme Overrides */
body.dark-theme {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
}

/* Product cards in Dark Theme */
body.dark-theme .product {
    background: #333; /* Dark background for product cards */
    border: 1px solid #555; /* Darker border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

/* Product image container and image */
body.dark-theme .product-image-container {
    background: #333; /* Ensure background of image container is dark */
}

body.dark-theme .product-image {
    filter: brightness(80%); /* Slightly dim the product image to blend with dark background */
}

/* Product name in Dark Theme */
body.dark-theme .product-name {
    color: #ddd; /* Lighter text color for product name */
    background: #333; /* Dark background for the product name */
    border-top: 1px solid #555; /* Darker border for the product name */
}

/* Product price and other details */
body.dark-theme .product-price {
    color: #ddd; /* Lighter text color for product price */
}

body.dark-theme .balances {
    color: #ddd; /* Lighter text color for balances */
}

body.dark-theme .modal-content h3 {
    color: #ddd; /* Lighter color for modal headings */
}

body.dark-theme .modal-content {
    background-color: #444; /* Darker background for modal content */
    color: #ddd; /* Lighter text color for modal content */
    border: 1px solid #555; /* Darker border for modal content */
}

body.dark-theme .product-field {
    color: #ddd; /* Lighter text color for additional fields */
}

/* Modal for product details */
body.dark-theme .modal {
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker overlay */
}

body.dark-theme .modal-content {
    background-color: #444; /* Darker background for modal content */
    color: #ddd; /* Lighter text color for modal content */
}

/* Modal close button */
body.dark-theme .modal .close {
    color: #ddd; /* Lighter color for close button */
}

body.dark-theme .modal .close:hover {
    color: #696cff; /* Lighter color on hover */
}

/* Loading modal */
body.dark-theme #loading-modal .modal-content {
    background-color: #444; /* Darker background for loading modal */
    color: #ddd; /* Lighter text color for loading modal */
}

/* Loading spinner */
body.dark-theme .spinner {
    border-left: 4px solid #3498db; /* Spinner color can remain the same */
}

.modal {
    display: none; /* Hide modal by default */
    position: fixed; /* Fixed positioning */
    z-index: 1000; /* Layer above other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Allow scrolling if content exceeds modal */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(5px); /* Blur effect for modal background */
}

.modal-content {
    background-color: #fff; /* White background */
    width: 500px; /* Fixed width */
    max-width: 90%; /* Limit width to avoid stretching too wide */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Light shadow */
    position: absolute; /* Absolute positioning within the modal */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for the fixed width */
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in width and height calculations */
    overflow: auto; /* Allow vertical scrolling if content exceeds height */
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

.modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth color transition */
}

.modal .close:hover {
    color: #696cff; /* Color change on hover */
}

.modal-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 24px;
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Modal fields styling */
#modal-fields {
    margin-top: 20px;
}

.product-field p {
    margin: 10px 0;
    font-size: 16px;
    color: #555;
}

/* Button styling */
#buy-button {
    display: inline-block;
    color: #fff; /* Button text color */
    border: none;
    border-radius: 4px; /* Rounded corners */
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s; /* Smooth background color transition */
    width: 100%;
    margin-top: 0.5em;
    padding: 0.6em;
    background: #696cff;
}

#buy-button:hover {
    background: var(--button-hover-bg);
}

/* Button styling */
#query-button {
    display: inline-block;
    color: #fff; /* Button text color */
    border: none;
    border-radius: 4px; /* Rounded corners */
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s; /* Smooth background color transition */
    width: 100%;
    margin-top: 0.5em;
    padding: 0.6em;
    background: #696cff;
}

#query-button:hover {
    background: var(--button-hover-bg);
}


#quantity-container, #modal-total-price {
    margin-top: 20px;
}

/* Loading modal */
#loading-modal {
    display: none; /* Hide loading modal by default */
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); /* Light border */
    border-left: 4px solid #3498db; /* Spinner color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite; /* Spin animation */
}

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

/* Search form styles */
#searchForm {
    margin-bottom: 20px;
}

#searchInput {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--slide-menu-border);
    margin-bottom: 10px;
    transition: border-color 0.3s; /* Smooth border color transition */
}

#searchInput:focus {
    border-color: #007bff; /* Change border color on focus */
}

#searchResults {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--slide-menu-border);
    border-radius: 5px;
    background: #ffffff;
}

#searchResults li {
    padding: 10px;
    border-bottom: 1px solid var(--slide-menu-border);
    cursor: pointer;
    transition: background 0.3s;
}

#searchResults li:hover {
    background: var(--link-hover-color);
    color: #ffffff;
}

/* Responsive design for different screen sizes */
@media (max-width: 1200px) {
    .products {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 columns */
    }
}

@media (max-width: 992px) {
    .products {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 columns */
    }
}

@media (max-width: 768px) {
    .products {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
    }
}

@media (max-width: 480px) {
    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
    }
}

/* حاوية القائمة المنسدلة */
#modal-fields .dropdown {
    position: absolute;
    z-index: 1000; /* للتأكد من ظهورها فوق العناصر الأخرى */
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px; /* تحديد الحد الأقصى لارتفاع القائمة */
    overflow-y: auto;  /* إتاحة التمرير إذا كانت النتائج كثيرة */
    width: 100%; /* جعل العرض مماثل لحقل الإدخال */
    padding: 0;
    margin-top: 5px;
    list-style-type: none; /* إزالة النقاط من القائمة */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0; /* إزالة الهامش الافتراضي */
}

/* عنصر داخل القائمة */
#modal-fields .dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex; /* استخدام flexbox لتوزيع العناصر */
    justify-content: space-between; /* توزيع العناصر في السطر */
    align-items: center; /* محاذاة العناصر عموديًا في المنتصف */
    border-bottom: 1px solid #ccc; /* خط فاصل بين العناصر */
}

/* تغيير لون الخلفية عند تمرير الفأرة */
#modal-fields .dropdown li:hover {
    background-color: #f0f0f0;
}

/* للتأكد من أن القائمة تظهر بشكل جيد */
#modal-fields {
    position: relative;
}


.delete-icon {
    color: red; /* لون الإشارة */
    font-weight: bold; /* جعل الإشارة بخط عريض */
    cursor: pointer; /* تغيير المؤشر عند التمرير على الإشارة */
    font-size: 18px; /* حجم الخط */
}

.delete-icon:hover {
    color: darkred; /* لون عند التمرير فوق الإشارة */
}
/*  إطار الأكواد */
#codes-container {
  cursor: pointer;           /* النقر على الإطار ينسخ الكلّ */
  padding: 1rem;             /* مساحة داخلية مريحة */ 
  background-color: #f9fafb; /* لون خلفي فاتح */ 
  border: 2px solid #e5e7eb; /* إطار رقيق */
  border-radius: 0.5rem;     /* حواف منحنية */ 
  font-family: monospace;    /* خط ثابت العرض */ 
  font-size: 0.95rem;        /* حجم نص مناسب */ 
  line-height: 1.4;          /* تباعد الأسطر لراحة العين */ 
  user-select: none;         /* منع تحديد النص عند السحب */ 
  transition: background-color 0.2s, border-color 0.2s;
}

/* عند المرور بالفأرة */
#codes-container:hover {
  background-color: #ffffff;
  border-color: #d1d5db;
}

/* قائمة مرقمة نظيفة */
#codes-container ol {
  margin: 0;
  padding-left: 1.5rem;      /* مسافة لموضع الأرقام */ 
  list-style: decimal outside;/* ترقيم خارجي افتراضي */ :contentReference[oaicite:4]{index=4}
}

/* عناصر القائمة */
#codes-container ol li {
  margin-bottom: 0.5rem;     /* هامش أسفل كل سطر */ 
  color: #111827;            /* لون نص داكن */ 
}

/* فلاش أخضر عند النسخ */
@keyframes flash-green {
  0%   { background-color: #d1fae5; border-color: #10b981; }
  50%  { background-color: #a7f3d0; border-color: #059669; }
  100% { background-color: #f9fafb; border-color: #e5e7eb; }
}

#codes-container.copied {
  animation: flash-green 0.8s ease-in-out;
}
/* ========= BEGIN: Wallet Balances Styling ========= */
div.product ul.product-balances {
  display: flex;               /* نستخدم flex للتوزيع الأفقي للسجلات */
  flex-wrap: wrap;             /* إن كانت الأرصدة كثيرة، تنتقل للسطر التالي */
    gap: 4px 8px;                /* مسافات ثابتة بين البنود */
  margin-top: 8px;             /* هامش علوي يفصلها عن السعر */
  padding: 6px 12px;           /* حشو داخلي مناسب */
  background: rgba(255,255,255,0.9);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  list-style: none;
  width: auto;                 /* تأخذ العرض الطبيعي داخل البطاقة */
  position: static;            /* ضمن التدفق الطبيعي */
}
/* تنسيق عنصر الرصيد الواحد */
.product ul.product-balances li {
  display: inline-block;      /* عرض أفقي */
  margin: 0 6px;              /* مسافة جانبية بين الأرصدة */
  font-size: 0.85rem;         /* حجم نص مناسب */
  color: #1a1a1a;             /* لون نص داكن */
  background: #f0f0f0;        /* خلفية فاتحة للتمييز */
  padding: 4px 8px;           /* حشو داخلي */
  border-radius: 4px;         /* حواف بسيطة */
  min-width: 40px;            /* عرض أدنى لثبات التخطيط */
}

/* عند تحويم البطاقة: رفع ظل البطاقة وإبراز الرصيد */
.product:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.product:hover ul.product-balances {
  background: rgba(255, 255, 255, 1); /* تكثيف الخلفية عند التحويم */
  transition: background 0.2s ease;
}

/* ========= END: Wallet Balances Styling ========= */