/* Custom Styles for Road Dawg Mobile Grooming */

/* Camo accent utility */
.bg-camo {
    background-color: #4b5320;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23383e18' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3 5 3 5-3v80l-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3-5 3-5-3V0z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Texture overlay to make it feel rugged */
.texture-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.text-shadow-military {
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}

/* Hover effects for buttons */
.btn-tactical {
    transition: all 0.2s ease-in-out;
}
.btn-tactical:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Map placeholder */
.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Global Premium Hover Effects
   ========================================================================== */

/* --- Card Effects --- */

/* Base Card Hover Behavior */
.card-hover {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, box-shadow;
}

.card-hover:hover {
    transform: translateY(-5px) scale(1.01);
}

/* Disabled Hover Effect */
.card-no-hover {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}
.card-no-hover:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Soft Glow Effect */
.card-glow {
    position: relative;
    /* Ensure z-index allows pseudo-element to be behind content but visible if needed */
    z-index: 1; 
}

.card-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: inherit; /* Inherit border radius from parent */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 
                0 0 15px rgba(75, 83, 32, 0.2); /* Soft olive glow */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-glow:hover::before {
    opacity: 1;
}

/* Premium Frame Effect */
.card-premium-frame {
    position: relative;
    overflow: hidden; /* Contains the pseudo-element highlight */
}

.card-premium-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.card-premium-frame:hover::after {
    border-color: rgba(255, 215, 0, 0.6); /* Gold outline */
}

/* --- Button Effects --- */

/* Base Premium Button */
.btn-premium {
    position: relative;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease;
    will-change: transform, box-shadow;
    overflow: hidden; /* For any internal overflow effects */
}

/* Hover State */
.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2), 
                0 0 10px rgba(255, 215, 0, 0.3); /* Goldish glow */
}

/* Active/Pressed State */
.btn-premium:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .card-hover, 
    .card-glow::before, 
    .card-premium-frame::after, 
    .btn-premium {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important; /* Or 0 depending on context, keeping simple */
    }
    .card-hover:hover, 
    .btn-premium:hover {
        transform: none !important;
    }
}