/**
 * Utility Classes
 * Replaces inline style="..." attributes with CSS classes
 * CSP-safe alternative to runtime style writes
 */

/* Display utilities */
.is-hidden {
    display: none !important;
}

.is-block {
    display: block !important;
}

.is-flex {
    display: flex !important;
}

.is-inline-block {
    display: inline-block !important;
}

/* Visibility utilities */
.is-visible {
    visibility: visible !important;
}

.is-invisible {
    visibility: hidden !important;
}

/* Opacity utilities */
.opacity-full {
    opacity: 1 !important;
}

.opacity-half {
    opacity: 0.5 !important;
}

.opacity-zero {
    opacity: 0 !important;
}

.opacity-loading {
    opacity: 0.6 !important;
    transition: opacity 0.2s ease;
}

.notification-fade-out {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

/* Pointer events utilities */
.pointer-events-auto {
    pointer-events: auto !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

/* Position utilities */
.position-fixed {
    position: fixed !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

/* Z-index utilities */
.z-9999 {
    z-index: 9999 !important;
}

/* Logo error fallback */
.logo-img-error {
    display: none !important;
}

.logo-text-fallback {
    display: flex !important;
}

.logo-text-fallback-block {
    display: block !important;
}

/* Mega menu states */
.mega-menu-visible {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 80px !important;
    z-index: 9999 !important;
}

.mega-menu-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Theme toggle loading state */
.theme-toggle-loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.theme-toggle-ready {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hero slider states */
.hero-slide-active {
    display: block !important;
    visibility: visible !important;
}

.hero-slide-inactive {
    display: none !important;
}

/* iOS video slides: Use visibility/opacity instead of display:none to allow autoplay */
.hero-slide-inactive-ios-video {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Keep display: block so element stays in layout for iOS autoplay */
    display: block !important;
}

.hero-slide-hidden-state {
    /* Crossfade için slide DOM'da kalsın; görünmezlik opacity ile yönetiliyor */
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
}

/* In-stock filter states */
.slab-card-visible {
    display: block !important;
}

.slab-card-hidden {
    display: none !important;
}

.no-results-visible {
    display: block !important;
}

.no-results-hidden {
    display: none !important;
}

/* Transform utilities */
.transform-rotate-180 {
    transform: rotate(180deg) !important;
}

.transform-rotate-0 {
    transform: rotate(0deg) !important;
}

/* Modal navigation states */
.modal-nav-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.modal-nav-enabled {
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Mega menu max width utility */
.mega-menu-maxw {
    max-width: calc(100vw - 2rem);
}

/* Footer background utility */
.footer-bg-dark {
    background-color: #020202;
}

/* Footer background utility (light theme) */
.footer-bg-light {
    background-color: #ffffff;
}

/* Divider border utility */
.border-divider-soft {
    border-color: #a89f9133;
}

/* Footer logo height utility */
.footer-logo-h {
    height: 3.25rem;
    line-height: 3.25rem;
}

/* Muted gold text utility */
.text-muted-gold {
    color: #A89F91;
}

/* Footer WhatsApp button */
.footer-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1.2px solid rgba(255,255,255,0.18);
    border-radius: 9999px;
    color: #ffffff;
    background: transparent;
    font-family: var(--site-font-family);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.footer-wa-btn:hover,
.footer-wa-btn:focus {
    background: rgba(37,211,102,0.06);
    border-color: #25d366;
    color: #25d366;
}
.footer-wa-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.footer-wa-text {
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Light theme overrides for footer button */
.footer-bg-light .footer-wa-btn {
    border-color: rgba(0,0,0,0.12);
    color: #111827;
}
.footer-bg-light .footer-wa-btn:hover,
.footer-bg-light .footer-wa-btn:focus {
    background: rgba(37,211,102,0.04);
    color: #128c7e;
}

/* Compact inline WhatsApp icon (for footer social row) */
.footer-wa-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    border: none;
    width: auto;
    height: auto;
    min-width: 0;
    color: inherit;
    background: transparent;
    transition: color 120ms ease, transform 120ms ease;
}
.footer-wa-inline:hover,
.footer-wa-inline:focus {
    transform: translateY(-2px);
}
.footer-bg-light .footer-wa-inline {
    /* keep color inherited from utility classes like text-white/60 or text-gray */
    color: inherit;
}

/* Tone down WhatsApp icon fill to match other social icons on dark theme */
.footer-wa-inline svg {
    opacity: 0.62; /* visually match text-white/60 */
    transition: opacity 120ms ease;
}
.footer-wa-inline:hover svg,
.footer-wa-inline:focus svg {
    opacity: 1;
}

/* Ensure WhatsApp label text shows original casing across site */
.wa-text,
.cta-wa-text,
.desktop-wa-btn-text,
.mobile-wa-btn-text,
.footer-wa-text,
.product-wa-btn span {
    text-transform: none !important;
}

/* Honeypot field: hidden from users (not in layout, not focusable), bots may fill it */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Newsletter email: autofill text readable on dark footer (override browser default) */
#newsletter-form input[type="email"]:-webkit-autofill,
#newsletter-form input[type="email"]:-webkit-autofill:hover,
#newsletter-form input[type="email"]:-webkit-autofill:focus,
#newsletter-form input[type="email"]:-webkit-autofill:active,
#newsletter-form input[type="email"]:autofill,
#newsletter-form input[type="email"]:autofill:hover,
#newsletter-form input[type="email"]:autofill:focus,
#newsletter-form input[type="email"]:autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    caret-color: #fff !important;
    transition: background-color 600000s 0s, color 600000s 0s !important;
}

/* Video opacity utilities - CSP-safe replacement for video.style.opacity */
.video-opacity-0 {
    opacity: 0 !important;
}

.video-opacity-1 {
    opacity: 1 !important;
}

/* Video appearance utilities - CSP-safe replacement for video.style.webkitAppearance */
.video-no-appearance {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Will-change utilities - CSP-safe replacement for element.style.willChange */
.will-change-transform {
    will-change: transform !important;
}

.will-change-transform-opacity {
    will-change: transform, opacity !important;
}

.will-change-none {
    will-change: auto !important;
}

/* SEO-only content - visible to search engines, hidden from users */
/* Google-friendly: content remains in DOM, accessible to crawlers */
.seo-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}