/*
Theme Name: Karpet Tambang Emas
Theme URI: https://karpettambangemas.com
Author: Karpet Tambang Emas Team
Author URI: https://karpettambangemas.com
Description: SEO Optimized WordPress theme for Karpet Tambang Emas (Gold Mining Carpet) landing page. Features professional gold color theme, SEO optimized content with Schema markup, responsive design, and Indonesian language. Version 2.0.0 includes full gold theme redesign and complete SEO optimization for "karpet tambang emas" keyword.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karpet-tambang-emas
Tags: custom-header, custom-menu, featured-images, theme-options, translation-ready, seo-optimized, gold-theme, mining

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333333;
    line-height: 1.6;
    background: linear-gradient(180deg, #FFF9E6 0%, #FFFFFF 50%, #FFF9E6 100%);
}

/* Header Styles - Gold Theme */
.site-header {
    background: linear-gradient(135deg, #1a1410 0%, #2d1f0f 100%);
    color: #FFFFFF;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(212, 175, 55, 0.3);
    border-bottom: 2px solid #D4AF37;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #D4AF37;
    text-decoration: none;
}

.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.site-description {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #e0e0e0;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide empty navigation */
.main-navigation:empty {
    display: none;
}

.nav-menu li {
    margin-left: 20px;
}

.nav-menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #D4AF37;
}

/* Hero Section - Gold Theme */
.hero-section {
    /* Gold gradient overlay + background image */
    background: 
        linear-gradient(135deg, 
            rgba(26, 20, 16, 0.75) 0%, 
            rgba(139, 105, 20, 0.65) 25%, 
            rgba(212, 175, 55, 0.55) 50%, 
            rgba(139, 105, 20, 0.65) 75%, 
            rgba(26, 20, 16, 0.75) 100%),
        url('http://karpettambangemas.com/wp-content/uploads/2026/06/hero.png') center center;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    color: #FFFFFF;
    padding: 0;
    text-align: center;
    position: relative;
    min-height: 450px;
    max-height: 500px;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gold shimmer effect overlay */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at center, rgba(255, 215, 0, 0.15) 0%, transparent 70%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 215, 0, 0.03) 2px,
            rgba(255, 215, 0, 0.03) 4px
        );
    pointer-events: none;
    z-index: 1;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.hero-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 20px;
    position: relative;
    z-index: 2;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.hero-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
    color: #FFD700;
    text-shadow: 
        0 0 15px rgba(255, 215, 0, 0.8),
        2px 2px 6px rgba(0, 0, 0, 1),
        0 0 30px rgba(255, 215, 0, 0.4);
}

.hero-section h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFD700;
    text-shadow: 
        3px 3px 10px rgba(0, 0, 0, 1),
        0 0 25px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(255, 215, 0, 0.4),
        -2px -2px 8px rgba(0, 0, 0, 0.8);
}

.hero-description {
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
    color: #FFFFFF;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 1),
        3px 3px 10px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
    color: #1a1410;
    padding: 0.75rem 2.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0px;
    transition: all 0.3s ease;
    border: 2px solid #FFD700;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.cta-button:hover {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1410;
    border-color: #FFA500;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
}

/* Features Section - Gold Theme */
.features-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9E6 100%);
}

.features-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #1a1410;
    margin-bottom: 3rem;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #D4AF37 0%, #FFD700 100%);
    margin: 1rem auto 0;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9E6 100%);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #FFD700;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
    border-color: #FFA500;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a1410;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.feature-card p {
    color: #333;
    font-size: 0.95rem;
}

/* About Section - Gold Theme */
.about-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #FFF9E6 0%, #FFFFFF 100%);
}

.about-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #1a1410;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.about-text p {
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(212, 175, 55, 0.3);
    border: 3px solid #FFD700;
}

/* Products Section - Gold Theme */
.products-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9E6 100%);
}

.products-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.product-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9E6 100%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #FFD700;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(212, 175, 55, 0.45);
    border-color: #FFA500;
}

.product-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-bottom: 3px solid #FFD700;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-content {
    padding: 1.5rem;
}

.product-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a1410;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
}

.product-content p {
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.product-price {
    color: #D4AF37;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Contact Section - Gold Theme */
.contact-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #1a1410 0%, #2d1f0f 50%, #1a1410 100%);
    color: #FFFFFF;
    border-top: 3px solid #FFD700;
}

.contact-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-section .section-title {
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.contact-section .section-title::after {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
}

.contact-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}

.contact-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-icon {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.contact-info h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #FFD700;
}

.contact-info p {
    color: #f5f5f5;
}

.contact-info a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #FFD700;
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #FFFFFF;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    margin-top: 2rem;
    border: 2px solid #25D366;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.whatsapp-button:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-button .icon {
    margin-right: 0.5rem;
    font-size: 1.3rem;
}

/* Footer - Gold Theme */
.site-footer {
    background: linear-gradient(135deg, #0d0a08 0%, #1a1410 100%);
    color: #FFFFFF;
    padding: 3rem 0 1rem;
    border-top: 3px solid #FFD700;
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-column h3 {
    color: #FFD700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.footer-column p {
    color: #e0e0e0;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #FFD700;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #3d2817;
}

.footer-bottom p {
    color: #e0e0e0;
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
    .about-content {
        flex-direction: column;
    }
    
    .about-text h2 {
        font-size: 2rem;
    }
    
    .hero-section {
        min-height: 400px;
        padding: 4rem 0 3rem 0;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
    }
    
    .nav-menu {
        margin-top: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-menu li {
        margin: 5px 10px;
    }
    
    .hero-section {
        min-height: 350px;
        padding: 3rem 0 2.5rem 0;
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
        letter-spacing: 1px;
    }
    
    .hero-subtitle {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }
    
    .hero-description {
        font-size: 0.85rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 2.5rem 0 2rem 0;
        min-height: 320px;
    }
    
    .hero-section h1 {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .hero-subtitle {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
    
    .hero-description {
        font-size: 0.8rem;
        margin-bottom: 1.5rem;
    }
    
    .cta-button {
        padding: 0.65rem 2rem;
        font-size: 0.85rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info-item {
        max-width: 300px;
        margin: 0 auto;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.btn-primary {
    background-color: #D4AF37;
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #b8962e;
    color: #FFFFFF;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Product Modal Styles */
.product-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
}

.product-modal.active {
    display: flex !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9998;
}

.modal-content {
    position: relative;
    max-width: 1100px;
    width: 90%;
    margin: 50px auto;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9E6 100%);
    border-radius: 15px;
    padding: 0;
    z-index: 10000;
    box-shadow: 0 10px 50px rgba(212, 175, 55, 0.5);
    border: 3px solid #FFD700;
    animation: modalSlideIn 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-content * {
    box-sizing: border-box;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #FFD700;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s ease;
    color: #1a1410;
    font-weight: bold;
}

.modal-close:hover {
    background: #FFA500;
    transform: rotate(90deg);
}

.modal-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    padding: 3rem 2rem 2rem 2rem !important;
    min-height: 400px;
    box-sizing: border-box;
}

.modal-body > * {
    min-width: 0;
}

/* Modal Gallery */
.modal-gallery {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
}

.gallery-main {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #FFD700;
}

.gallery-main-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 215, 0, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #1a1410;
    transition: all 0.3s ease;
    z-index: 10;
}

.gallery-arrow:hover {
    background: #FFA500;
    transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gallery-thumbnail {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.gallery-thumbnail:hover {
    opacity: 1;
    border-color: #FFD700;
    transform: scale(1.05);
}

.gallery-thumbnail.active {
    opacity: 1;
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Modal Product Details */
.modal-product-details {
    padding: 0;
    overflow-y: auto;
    max-height: 600px;
}

.modal-product-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a1410;
    margin-bottom: 1rem;
    text-transform: uppercase;
    border-bottom: 3px solid #FFD700;
    padding-bottom: 0.5rem;
    line-height: 1.3;
}

.modal-product-price {
    font-size: 1.3rem;
    color: #D4AF37;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    display: block;
}

.modal-product-description {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: left;
}

.modal-product-specs {
    background: rgba(255, 249, 230, 0.6);
    padding: 1.25rem;
    border-radius: 8px;
    border: 2px solid #FFD700;
    margin-bottom: 1.25rem;
}

.modal-product-specs h4 {
    font-size: 1.1rem;
    color: #1a1410;
    margin-bottom: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
}

.modal-product-specs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-product-specs li {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    color: #333;
    font-size: 0.9rem;
    line-height: 1.6;
}

.modal-product-specs li:last-child {
    border-bottom: none;
}

.modal-product-specs li strong {
    color: #D4AF37;
    min-width: 120px;
    display: inline-block;
    font-weight: 600;
}

.modal-features {
    margin-bottom: 1.5rem;
    background: transparent !important;
}

.modal-features h4 {
    font-size: 1.1rem;
    color: #1a1410 !important;
    margin-bottom: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    background: transparent !important;
}

.modal-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent !important;
}

.modal-features li {
    padding-left: 30px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-right: 0 !important;
    position: relative;
    color: #333 !important;
    line-height: 1.8 !important;
    font-size: 0.9rem !important;
    background: transparent !important;
    display: list-item !important;
    list-style: none !important;
    margin-bottom: 8px !important;
    text-indent: 0 !important;
}

.modal-features li:before {
    content: '✓' !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    color: #FFD700 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    background: transparent !important;
    width: 16px !important;
    height: auto !important;
    display: inline-block !important;
}

.modal-cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
    color: #1a1410;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 2px solid #FFD700;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    cursor: pointer;
}

.modal-cta-button:hover {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.modal-cta-button.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-color: #25D366;
    color: #FFFFFF;
}

.modal-cta-button.whatsapp:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
}

/* Prevent body scroll when modal open */
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Force proper modal display */
.product-modal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background: transparent;
}

.product-modal * {
    box-sizing: border-box;
}

.product-modal h1, 
.product-modal h2, 
.product-modal h3, 
.product-modal h4, 
.product-modal p, 
.product-modal ul, 
.product-modal li {
    margin: 0;
    padding: 0;
    background: transparent !important;
}

.product-modal h3,
.product-modal h4 {
    display: block;
    width: 100%;
    color: #1a1410 !important;
}

.product-modal ul {
    list-style: none;
    background: transparent !important;
}

.product-modal li {
    background: transparent !important;
    color: #333 !important;
}

.product-modal p {
    display: block;
    margin-bottom: 0.5rem;
    background: transparent !important;
    color: #333 !important;
}

/* Product card cursor pointer */
.product-card {
    cursor: pointer;
}

.product-card .cta-button {
    pointer-events: all;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-content {
        margin: 20px;
        max-width: calc(100% - 40px);
    }
    
    .modal-body {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    
    .gallery-main-image {
        height: 300px;
    }
    
    .gallery-thumbnails {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .modal-product-title {
        font-size: 1.4rem;
    }
    
    .modal-cta-buttons {
        grid-template-columns: 1fr;
    }
}

/* Remove any blue highlights or selections in modal */
.product-modal *::selection {
    background: rgba(255, 215, 0, 0.3);
    color: #1a1410;
}

.product-modal *::-moz-selection {
    background: rgba(255, 215, 0, 0.3);
    color: #1a1410;
}

/* Ensure no blue backgrounds anywhere in modal */
.product-modal .modal-features,
.product-modal .modal-features h4,
.product-modal .modal-features ul,
.product-modal .modal-features li,
.product-modal .modal-product-specs,
.product-modal .modal-product-specs h4,
.product-modal .modal-product-specs ul,
.product-modal .modal-product-specs li {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure text is readable */
.product-modal .modal-features li,
.product-modal .modal-product-specs li,
.product-modal .modal-product-description {
    color: #333 !important;
    text-shadow: none !important;
}

.product-modal .modal-features h4,
.product-modal .modal-product-specs h4 {
    color: #1a1410 !important;
}

.product-modal .modal-product-specs li strong {
    color: #D4AF37 !important;
}

/* Remove any blue highlights or selections in modal */
.product-modal *::selection {
    background: rgba(255, 215, 0, 0.3);
    color: #1a1410;
}

.product-modal *::-moz-selection {
    background: rgba(255, 215, 0, 0.3);
    color: #1a1410;
}

/* Ensure no blue backgrounds anywhere in modal */
.product-modal .modal-features,
.product-modal .modal-features h4,
.product-modal .modal-features ul,
.product-modal .modal-features li,
.product-modal .modal-product-specs,
.product-modal .modal-product-specs h4,
.product-modal .modal-product-specs ul,
.product-modal .modal-product-specs li {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure text is readable */
.product-modal .modal-features li,
.product-modal .modal-product-specs li,
.product-modal .modal-product-description {
    color: #333 !important;
    text-shadow: none !important;
}

.product-modal .modal-features h4,
.product-modal .modal-product-specs h4 {
    color: #1a1410 !important;
}

.product-modal .modal-product-specs li strong {
    color: #D4AF37 !important;
}