/* Custom Javanese Batik Theme Override - Inspired by Katsudoto Elegance */
/* Sophisticated Javanese Batik Color Palette:
   #E8DBCB (232,219,203) - Warm Batik Cream (Primary Background)
   #F8F0E3 (248,240,227) - Light Batik Cream (Secondary Background)
   #D2AE6D (210,174,109) - Traditional Sogan Gold (Accent)
   #8B6F47 (139,111,71) - Earth Brown (Warm Brown)
   #4F0A1C (79,10,28) - Deep Batik Burgundy (Primary Text)
   #435649 (67,86,73) - Forest Green (Secondary Text)
*/

:root {
    /* Sophisticated Javanese batik colors inspired by Katsudoto */
    --warm-batik-cream: #E8DBCB;
    --light-batik-cream: #F8F0E3;
    --sogan-gold: #D2AE6D;
    --warm-earth-brown: #8B6F47;
    --deep-batik-burgundy: #4F0A1C;
    --forest-green: #435649;
    
    /* Text color system */
    --text-primary: #4F0A1C;
    --text-secondary: #435649;
    
    /* CSS Custom Properties for theme system */
    --bs-body-bg: var(--warm-batik-cream);
    --bs-body-color: var(--deep-batik-burgundy);
    --bs-primary: var(--warm-earth-brown);
    --bs-secondary: var(--sogan-gold);
    --bs-success: var(--sogan-gold);
    --bs-info: var(--forest-green);
    --bs-warning: var(--warm-earth-brown);
    --bs-danger: var(--deep-batik-burgundy);
    --bs-light: var(--light-batik-cream);
    --bs-dark: var(--deep-batik-burgundy);
}

/* Body and Background Override */
body {
    background-color: var(--warm-batik-cream) !important;
    color: var(--deep-batik-burgundy) !important;
}

/* Light theme specific overrides */
.bg-light-dark {
    background: linear-gradient(135deg, var(--warm-batik-cream) 0%, var(--light-batik-cream) 100%) !important;
    color: var(--deep-batik-burgundy) !important;
}

.bg-white-black {
    background: linear-gradient(135deg, var(--light-batik-cream) 0%, var(--sogan-gold) 50%, var(--warm-earth-brown) 100%) !important;
    color: var(--light-batik-cream) !important;
}

/* Text colors */
.text-theme-auto,
.text-auto {
    color: var(--deep-batik-burgundy) !important;
}

.text-light-dark {
    color: var(--forest-green) !important;
}

/* Button overrides */
.btn-primary {
    background: linear-gradient(45deg, var(--deep-batik-burgundy), var(--warm-earth-brown)) !important;
    border-color: var(--deep-batik-burgundy) !important;
    color: var(--light-batik-cream) !important;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(45deg, var(--forest-green), var(--deep-batik-burgundy)) !important;
    border-color: var(--forest-green) !important;
    color: var(--light-batik-cream) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 10, 28, 0.4) !important;
}

.btn-secondary {
    background-color: var(--sogan-gold) !important;
    border-color: var(--sogan-gold) !important;
    color: var(--deep-batik-burgundy) !important;
}

.btn-secondary:hover {
    background-color: var(--warm-earth-brown) !important;
    border-color: var(--warm-earth-brown) !important;
    color: var(--light-batik-cream) !important;
}

.btn-light {
    background-color: var(--light-batik-cream) !important;
    border-color: var(--warm-earth-brown) !important;
    color: var(--deep-batik-burgundy) !important;
}

.btn-light:hover {
    background-color: var(--sogan-gold) !important;
    border-color: var(--warm-earth-brown) !important;
    color: var(--deep-batik-burgundy) !important;
}

.btn-outline-auto {
    border-color: var(--warm-earth-brown) !important;
    color: var(--warm-earth-brown) !important;
    background-color: transparent !important;
}

.btn-outline-auto:hover {
    background-color: var(--warm-earth-brown) !important;
    border-color: var(--warm-earth-brown) !important;
    color: var(--light-batik-cream) !important;
}

/* Navigation */
.navbar {
    background: linear-gradient(135deg, var(--batik-cream) 0%, var(--sogan-brown) 100%) !important;
    border-top: 2px solid var(--earth-brown) !important;
    box-shadow: 0 -4px 20px rgba(139, 69, 19, 0.3) !important;
}

.nav-link {
    color: var(--dark-batik) !important;
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    color: var(--earth-brown) !important;
    background-color: rgba(139, 69, 19, 0.1) !important;
}

/* Cards and containers */
.border {
    border-color: var(--earth-brown) !important;
}

.shadow {
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2) !important;
}

.shadow-sm {
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.15) !important;
}

/* Form elements */
.form-control {
    background-color: var(--batik-cream) !important;
    border-color: var(--earth-brown) !important;
    color: var(--dark-batik) !important;
}

.form-control:focus {
    background-color: var(--batik-cream) !important;
    border-color: var(--earth-brown) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 69, 19, 0.25) !important;
    color: var(--dark-batik) !important;
}

.form-select {
    background-color: var(--batik-cream) !important;
    border-color: var(--earth-brown) !important;
    color: var(--dark-batik) !important;
}

.form-select:focus {
    border-color: var(--earth-brown) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 69, 19, 0.25) !important;
}

/* Progress bar */
.progress {
    background-color: rgba(139, 69, 19, 0.2) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--earth-brown), var(--sogan-brown)) !important;
}

/* Alerts */
.alert-info {
    background-color: rgba(212, 175, 122, 0.2) !important;
    border-color: var(--sogan-brown) !important;
    color: var(--dark-batik) !important;
}

.alert-success {
    background-color: rgba(212, 175, 122, 0.2) !important;
    border-color: var(--sogan-brown) !important;
    color: var(--dark-batik) !important;
}

/* Primary pane and desktop mode */
.primary-pane {
    background: linear-gradient(135deg, 
        var(--batik-cream) 0%, 
        var(--sogan-brown) 30%, 
        var(--earth-brown) 70%, 
        var(--dark-batik) 100%) !important;
}

/* Countdown timer */
.countdown-container {
    background: linear-gradient(135deg, var(--batik-cream), var(--sogan-brown)) !important;
    border: 2px solid var(--earth-brown) !important;
    color: var(--dark-batik) !important;
}

.countdown-number {
    color: var(--earth-brown) !important;
    text-shadow: 2px 2px 4px rgba(44, 24, 16, 0.2) !important;
}

/* Gallery enhancements */
.gallery-photo {
    border: 3px solid var(--earth-brown) !important;
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3) !important;
}

.gallery-photo:hover {
    border-color: var(--dark-batik) !important;
    box-shadow: 0 12px 35px rgba(44, 24, 16, 0.4) !important;
    transform: scale(1.02) !important;
}

/* Wedding gift section */
.gift-card {
    background: linear-gradient(135deg, var(--batik-cream), var(--sogan-brown)) !important;
    border: 2px solid var(--earth-brown) !important;
    color: var(--dark-batik) !important;
}

.gift-card:hover {
    background: linear-gradient(135deg, var(--sogan-brown), var(--earth-brown)) !important;
    border-color: var(--dark-batik) !important;
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.4) !important;
}

/* Enhanced text contrast for better readability */
.gift-option h5,
.gift-option .font-weight-bold {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(248, 240, 227, 0.8) !important;
}

.gift-option p {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.gift-option .font-monospace {
    color: var(--deep-batik-burgundy) !important;
    font-weight: 600 !important;
    background-color: rgba(248, 240, 227, 0.9) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Better contrast for all cards and containers */
.bg-theme-auto {
    background: linear-gradient(135deg, var(--warm-batik-cream) 0%, rgba(210, 174, 109, 0.2) 100%) !important;
    color: var(--deep-batik-burgundy) !important;
    border: 1px solid rgba(139, 111, 71, 0.3) !important;
}

.bg-theme-auto h1,
.bg-theme-auto h2,
.bg-theme-auto h3,
.bg-theme-auto h4,
.bg-theme-auto h5,
.bg-theme-auto h6 {
    color: var(--text-primary) !important;
    text-shadow: 1px 1px 2px rgba(248, 240, 227, 0.8) !important;
}

.bg-theme-auto p,
.bg-theme-auto span,
.bg-theme-auto small {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Improved contrast for icons */
.icon-wrapper .text-primary {
    color: var(--warm-earth-brown) !important;
}

.icon-wrapper .text-danger {
    color: var(--deep-batik-burgundy) !important;
}

.icon-wrapper .text-success {
    color: var(--forest-green) !important;
}

/* Better visibility for bank details */
.bank-item,
.contact-item,
.address-item {
    background-color: rgba(248, 240, 227, 0.95) !important;
    border: 1px solid rgba(139, 111, 71, 0.4) !important;
}

.bank-item p,
.contact-item p,
.address-item p {
    color: var(--deep-batik-burgundy) !important;
    font-weight: 600 !important;
}

/* Enhanced readability for countdown and other sections */
.countdown-number {
    color: var(--text-primary) !important;
    text-shadow: 2px 2px 4px rgba(248, 240, 227, 0.8) !important;
    font-weight: 800 !important;
}

.count-item {
    background: linear-gradient(135deg, var(--warm-batik-cream) 0%, rgba(210, 174, 109, 0.3) 100%) !important;
    border: 1px solid rgba(139, 111, 71, 0.4) !important;
}

.count-item .count-num {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    text-shadow: 1px 1px 3px rgba(248, 240, 227, 0.8) !important;
}

.count-item .count-text {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* Improved text contrast for comments section */
.comment-card h5,
.comment-card .fw-bold {
    color: var(--dark-batik) !important;
    font-weight: 700 !important;
}

.comment-card p,
.comment-card small {
    color: var(--dark-batik) !important;
    font-weight: 500 !important;
}

/* Better contrast for form labels and inputs */
.form-label {
    color: var(--dark-batik) !important;
    font-weight: 600 !important;
}

/* Enhanced button text visibility */
.btn-outline-auto {
    color: var(--dark-batik) !important;
    border-color: var(--earth-brown) !important;
    font-weight: 600 !important;
}

.btn-outline-auto:hover {
    color: var(--batik-cream) !important;
    background-color: var(--earth-brown) !important;
    border-color: var(--earth-brown) !important;
}

/* Wedding date section text improvements */
.wedding-date h2,
.wedding-date p {
    color: var(--text-primary) !important;
    text-shadow: 1px 1px 2px rgba(245, 241, 232, 0.6) !important;
}

.font-esthetic {
    color: var(--text-primary) !important;
    text-shadow: 2px 2px 4px rgba(245, 241, 232, 0.8) !important;
    font-weight: 700 !important;
}

/* Gallery title and description */
.photo-title {
    color: var(--text-primary) !important;
    text-shadow: 2px 2px 4px rgba(245, 241, 232, 0.8) !important;
    font-weight: 700 !important;
}

.photo-description {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(245, 241, 232, 0.6) !important;
}

/* Timeline text in love story */
.timeline-text {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Alert information box */
.alert-info {
    background-color: rgba(212, 175, 122, 0.3) !important;
    border-color: var(--earth-brown) !important;
    color: var(--dark-batik) !important;
}

.alert-info p {
    color: var(--dark-batik) !important;
    font-weight: 500 !important;
}

/* Animation enhancements */
@keyframes batik-pulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 69, 19, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(139, 69, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 69, 19, 0); }
}

.pulse-batik {
    animation: batik-pulse 2s infinite;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .primary-pane {
        background: linear-gradient(180deg, 
            var(--batik-cream) 0%, 
            var(--sogan-brown) 100%) !important;
    }
    
    .navbar {
        background: var(--batik-cream) !important;
        border-top: 1px solid var(--earth-brown) !important;
    }
}

/* Dark mode compatibility (if theme switcher is used) */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--dark-batik);
    --bs-body-color: var(--batik-cream);
}

[data-bs-theme="dark"] .bg-light-dark {
    background: linear-gradient(135deg, var(--dark-batik) 0%, var(--indigo-blue) 100%) !important;
    color: var(--batik-cream) !important;
}

[data-bs-theme="dark"] .bg-white-black {
    background: linear-gradient(135deg, var(--dark-batik) 0%, var(--indigo-blue) 50%, var(--earth-brown) 100%) !important;
    color: var(--batik-cream) !important;
}

/* Wave separator styling for Javanese batik theme */
.svg-wrapper svg {
    color: var(--sogan-brown) !important;
}

.color-theme-svg {
    color: var(--sogan-brown) !important;
}

.color-theme-svg path {
    fill: var(--sogan-brown) !important;
}

/* Alternative gradient wave separators for more visual interest */
.svg-wrapper svg.gradient-wave {
    background: linear-gradient(135deg, var(--sogan-brown) 0%, var(--earth-brown) 100%);
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIzMjAiIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAsMTYwTDQ4LDE0NEM5NiwxMjgsMTkyLDk2LDI4OCwxMDYuN0MzODQsMTE3LDQ4MCwxNzEsNTc2LDE2NS4zQzY3MiwxNjAsNzY4LDk2LDg2NCw5NkM5NjAsOTYsMTA1NiwxNjAsMTE1MiwxNTQuN0MxMjQ4LDE0OSwxMzQ0LDc1LDEzOTIsMzcuM0wxNDQwLDBMMTQ0MCwzMjBMMTM5MiwzMjBDMTM0NCwzMjAsMTI0OCwzMjAsMTE1MiwzMjBDMTA1NiwzMjAsOTYwLDMyMCw4NjQsMzIwQzc2OCwzMjAsNjcyLDMyMCw1NzYsMzIwQzQ4MCwzMjAsMzg0LDMyMCwyODgsMzIwQzE5MiwzMjAsOTYsMzIwLDQ4LDMyMEwwLDMyMFoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K") center/cover;
    mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIzMjAiIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAsMTYwTDQ4LDE0NEM5NiwxMjgsMTkyLDk2LDI4OCwxMDYuN0MzODQsMTE3LDQ4MCwxNzEsNTc2LDE2NS4zQzY3MiwxNjAsNzY4LDk2LDg2NCw5NkM5NjAsOTYsMTA1NiwxNjAsMTE1MiwxNTQuN0MxMjQ4LDE0OSwxMzQ0LDc1LDEzOTIsMzcuM0wxNDQwLDBMMTQ0MCwzMjBMMTM5MiwzMjBDMTM0NCwzMjAsMTI0OCwzMjAsMTE1MiwzMjBDMTA1NiwzMjAsOTYwLDMyMCw4NjQsMzIwQzc2OCwzMjAsNjcyLDMyMCw1NzYsMzIwQzQ4MCwzMjAsMzg0LDMyMCwyODgsMzIwQzE5MiwzMjAsOTYsMzIwLDQ4LDMyMEwwLDMyMFoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K") center/cover;
}

/* Specific wave separator variations for different sections */
.wave-variant-1 {
    color: var(--sogan-brown) !important;
}

.wave-variant-2 {
    color: var(--earth-brown) !important;
}

.wave-variant-3 {
    color: var(--batik-cream) !important;
}

/* Add subtle patterns to waves for batik authenticity */
.batik-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(44, 24, 16, 0.05) 2px,
        rgba(44, 24, 16, 0.05) 4px
    );
    pointer-events: none;
}

/* Wave transitions that complement background changes */
.bg-light-dark + .svg-wrapper svg {
    color: var(--earth-brown) !important;
}

.bg-white-black + .svg-wrapper svg {
    color: var(--sogan-brown) !important;
}

/* Dark mode wave adjustments */
[data-bs-theme="dark"] .svg-wrapper svg {
    color: var(--indigo-blue) !important;
}

[data-bs-theme="dark"] .color-theme-svg {
    color: var(--indigo-blue) !important;
}

[data-bs-theme="dark"] .color-theme-svg path {
    fill: var(--indigo-blue) !important;
}

/* Custom mask effect for couple images */
.mask-couple {
    -webkit-mask: url('../assets/images/ornaments/mask-couple.png') center/contain no-repeat;
    mask: url('../assets/images/ornaments/mask-couple.png') center/contain no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mask-couple-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}

.mask-couple-frame::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 31px;
    width: 87%;
    height: 92%;
    background-image: url('../assets/images/ornaments/frame-couple.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

/* Custom mask effect for cover images */
.mask-cover {
    -webkit-mask: url('../assets/images/ornaments/mask-cover.png') center/contain no-repeat;
    mask: url('../assets/images/ornaments/mask-cover.png') center/contain no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    width: 85%;
    height: auto;
    object-fit: cover;
}

.mask-cover-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}

.mask-cover-frame::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 31px;
    width: 87%;
    height: 92%;
    background-image: url('../assets/images/ornaments/frame-cover.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

/* Mobile adjustments for mask-cover frame positioning */
@media (max-width: 768px) {
    .mask-cover-frame::after {
        top: 10px;
        left: 25px;
        width: 87%;
        height: 95%;
    }
}