/* --- CSS ทั้งหมดที่ปรับปรุงแล้ว --- */
* { box-sizing: border-box; }
:root { /* Define theme colors */
    --bg-dark-primary: #1a1a1a; --bg-dark-secondary: #212529; --bg-dark-tertiary: #0e0e0e;
    --border-dark: #333; --text-primary: #e8e8e8; --text-secondary: #adb5bd;
    --text-accent: #ffc107; /* Yellow accent */ --color-success: #28a745; --color-danger: #dc3545;
    --color-button-buy-text: #18c803; /* Green text for price */
    --color-button-hover-border: #2fc41e;
    --modal-form-bg: #343a40; --modal-form-border: #555;
    --border-radius-main: 10px; --border-radius-small: 6px;
}
body { font-family: 'Kanit', sans-serif; background-color: var(--bg-dark-tertiary); color: var(--text-primary); line-height: 1.6; }
.content-area { padding: 1rem; max-width: 1200px; margin-left: auto; margin-right: auto; }

.card-main-content { background-color: var(--bg-dark-primary); border-radius: var(--border-radius-main); border: 1px solid var(--border-dark); box-shadow: 0 2px 5px rgba(0,0,0,0.2); color: var(--text-primary); margin-bottom: 1.5rem; overflow: hidden; }
.card-header-custom { background-color: var(--bg-dark-secondary); border-bottom: 1px solid var(--border-dark); color: var(--text-primary); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.card-header-custom h4 { margin: 0; font-size: clamp(18px, 4vw, 22px); display: flex; align-items: center; gap: 0.6rem; color: var(--text-primary); font-weight: 500; }
.card-header-custom h4 i { color: var(--text-accent); }
.card-body-custom { padding: 1.5rem; }
.instructions { font-size: 13px; color: var(--text-secondary); margin-top: -1rem; margin-bottom: 1rem; }
/* .btn-auto-mode { font-size: 12px; pointer-events: none; opacity: 0.7; } */ /* Commented out as it wasn't used */

 /* UID/ID Input Area */
 .uid-section { margin-bottom: 1.5rem; }
 .uid-label-link { text-decoration: none; display: inline-block; margin-bottom: 0.5rem;}
 .uid-label { background-color: var(--modal-form-bg); border: 1px solid var(--modal-form-border); color: var(--text-accent); padding: 0.3rem 0.8rem; border-radius: var(--border-radius-small); font-size: 14px; display: inline-flex; align-items: center; gap: 0.4rem; transition: background-color 0.2s ease; }
 .uid-label:hover { background-color: #444; color: #fff; }
 .form-control.uid-input { background-color: var(--modal-form-bg); border: 1px solid var(--modal-form-border); color: #fff; font-size: 16px; padding: 0.75rem; border-radius: var(--border-radius-small); }
 .form-control.uid-input::placeholder { color: #888; }
 .form-control.uid-input:focus { background-color: var(--modal-form-bg); border-color: var(--text-accent); box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25); color: #fff; }
 .uid-error { display: none; color: var(--color-danger); font-size: 13px; margin-top: 0.5rem; font-weight: 500; }
 select#server { display: none; /* Controlled by PHP/JS now */ margin-top: 1rem; background-color: var(--modal-form-bg); border: 1px solid var(--modal-form-border); color: #fff; font-size: 14px; border-radius: var(--border-radius-small); padding: 0.75rem; }
 select#server.visible { display: block; }

 /* Denomination Selection */
 .denomination-label { color: var(--text-secondary); font-size: 14px; margin-bottom: 0.8rem; font-weight: 500; }
 .item-button-wrapper { padding: 0.3rem; height: 100px; /* Fixed height */ }
 .item-container { display: flex; align-items: stretch; height: 100%; }
 .shop-btne { /* Button for selecting item */
     background-color:#2a2d30; border: solid 1px #444; border-radius:var(--border-radius-small); width: 100%; height: 100%;
     display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;
     transition: all 0.2s ease-in-out; position: relative; overflow: hidden; text-align: center; padding: 5px;
 }
 .shop-btne:hover { border-color: var(--text-accent); background-color: #313538; transform: translateY(-2px); }
 .shop-btne.selected { border-color: var(--color-success); background-color: #28a7451a; box-shadow: 0 0 10px #28a74580; }
 .text-ee { /* Item Description */ font-size: clamp(12px, 2.2vw, 14px); font-weight: 400; color: var(--text-primary); margin: 2px 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .text-dd { /* Selling Price */ color:var(--color-button-buy-text); font-weight:700; font-size: clamp(14px, 2.8vw, 16px); margin: 2px 0; }
 .tick { /* Tick mark */
     position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background-color: var(--color-success);
     border-radius: 50%; display: none; align-items: center; justify-content: center;
 }
 .tick::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: white; font-size: 12px; }
 .shop-btne.selected .tick { display: flex; }
 /* Make button text unselectable */
 .shop-btne h6 {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
 }

 /* Responsive Adjustments */
 @media only screen and (max-width: 600px) {
     .card-body-custom { padding: 1rem; }
     .item-button-wrapper { padding: 0.2rem; height: 90px;}
     .text-ee { font-size: 12px;}
     .text-dd { font-size: 14px;}
 }

 /* Alert Styling (Used for API Off message) */
 .alert.ttcolor { /* Keeping name from original, though might rename */
    background: linear-gradient(to right, #333, #111);
    border: 1px solid var(--border-dark);
    border-radius: var(--border-radius-main);
    color: white;
 }
 .alert.ttcolor img { max-width: 150px; }
 .alert.ttcolor h3 {
    background: linear-gradient(to right, #ff4040 0%, #ff9e00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem;
    font-weight: bold;
 }

 /* SweetAlert Custom Icon Border */
 .swal2-icon.no-border {
    border: none !important;
    box-shadow: none !important;
 }

 /* Lightbox adjustments for dark theme if needed */
 .lb-data .lb-caption { color: var(--text-primary); }
 .lb-data .lb-number { color: var(--text-secondary); }
 .lb-close { filter: invert(1); } /* Make close button white */