/* Main stylesheet for the website */ 

:root {
    --dark-bg: #1a1a1a;
    --dark-text: #f8f9fa;
    --dark-secondary-text: #cccccc;
    --dark-primary-accent: #6a0572; /* ม่วง */
    --dark-secondary-accent: #0a2d48; /* ฟ้ามืด */
    --dark-success: #27ae60; /* เขียว */
    --dark-bright-green: #00FF00; /* เขียวสว่าง */
    --dark-border: #333333;
}

body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

.navbar {
    background-color: var(--dark-secondary-accent) !important; /* ฟ้ามืด */
    border-bottom: 1px solid var(--dark-border);
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--dark-text) !important;
}

.navbar .nav-link:hover {
    color: var(--dark-primary-accent) !important; /* ม่วง */
}

.card {
    background-color: #2a2a2a; /* เทาเข้ม */
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.card-title {
    color: var(--dark-text); /* สีขาว */
    font-weight: bold;
}

.card-text {
    color: var(--dark-secondary-text);
    text-align: justify;
    hyphens: auto;
    word-break: break-word;
}

.list-group-item {
    background-color: #2a2a2a;
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* Adjust pagination links for dark theme */
.pagination .page-item .page-link {
    background-color: #2a2a2a;
    color: var(--dark-text);
    border-color: var(--dark-border);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background-color: var(--dark-primary-accent);
    border-color: var(--dark-primary-accent);
    color: var(--dark-text);
}

.pagination .page-item.disabled .page-link {
    background-color: #2a2a2a;
    color: var(--dark-secondary-text);
    border-color: var(--dark-border);
}

.dark-footer {
    background-color: var(--dark-secondary-accent) !important; /* ใช้สีฟ้ามืด */
    color: var(--dark-text);
    border-top: 1px solid var(--dark-border);
}

/* Specific styles already existing, ensuring they work with dark theme */
.media-card.selected-image {
    border: 3px solid var(--dark-success); /* ใช้สีเขียวสำหรับ border ที่เลือก */
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
    background-color: #2a2a2a;
    color: var(--dark-text);
}

.btn-purple {
    background-color: var(--dark-primary-accent);
    border-color: var(--dark-primary-accent);
    color: var(--dark-text);
}

.btn-purple:hover {
    background-color: #5a0463; /* Darker shade of purple on hover */
    border-color: #5a0463;
}

.text-bright-green {
    color: var(--dark-bright-green);
}

.text-blue {
    color: var(--dark-secondary-accent);
}

.star-rating .fa-star {
    color: gold;
}

.special-price-large {
    font-size: 115%; /* Increase font size by 15% */
}

.article-banner-fullwidth {
    width: 100%;
    aspect-ratio: 3 / 1; /* width to height ratio, e.g., 800px width will result in 200px height */
    object-fit: cover;
}

.product-reference-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Styles for product card buttons in articles on mobile */
@media (max-width: 767.98px) {
    .product-card-btn {
        width: 100%; /* Full width on mobile */
        padding: 0.5rem 1rem; /* Increased padding */
        font-size: 1.25rem; /* Increased font size */
        margin-bottom: 0.75rem; /* Space between stacked buttons */
    }

    .product-card-btn:last-child {
        margin-bottom: 0; /* No margin for the last button in a stack */
    }
}