/*
========================================
FANSBOOK - Cross-Browser Compatibility
========================================
Ensures consistent UI appearance across Chrome and Firefox
*/

/* ========================================
   CSS RESET & NORMALIZATION
======================================== */

/* Box-sizing reset for all browsers */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* ========================================
   FONT RENDERING CONSISTENCY
======================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Consistent font rendering across browsers */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   SCROLLBAR CONSISTENCY
======================================== */

/* Custom scrollbar for Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #555 #1a1a1a;
}

/* ========================================
   INPUT & FORM ELEMENTS CONSISTENCY
======================================== */

/* Remove default styling from inputs */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Exception: Keep checkbox appearance for consent modal */
.consent-modal input[type="checkbox"],
.consent-checkbox-label input[type="checkbox"],
.adult-consent-checkbox,
.adult-consent-checkbox1 {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
}

/* Firefox specific input fixes */
input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
}

/* Consistent focus styles */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.3);
    -moz-box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.3);
    box-shadow: 0 0 0 2px rgba(1, 173, 241, 0.3);
}

/* Exception: Consent modal checkboxes should not have focus outline override */
.consent-modal input[type="checkbox"]:focus,
.consent-checkbox-label input[type="checkbox"]:focus,
.adult-consent-checkbox:focus,
.adult-consent-checkbox1:focus {
    outline: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Firefox: Remove dotted outline on focus */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Firefox: Fix for input number spinner */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Consistent textarea resize behavior */
textarea {
    resize: vertical;
}

/* ========================================
   IMAGE RENDERING CONSISTENCY
======================================== */

img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: bicubic;
}

/* Consistent image display */
img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   TEXT SELECTION CONSISTENCY
======================================== */

::selection {
    background: rgba(1, 173, 241, 0.3);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(1, 173, 241, 0.3);
    color: #ffffff;
}

/* ========================================
   BUTTON CONSISTENCY
======================================== */

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
}

/* Exception: Consent modal buttons should maintain their gradient styling */
.consent-modal-footer button,
.btn-consent-enter,
.btn-consent-leave {
    -webkit-appearance: button !important;
    -moz-appearance: button !important;
    appearance: button !important;
    border: none !important;
    padding: inherit !important;
    margin: inherit !important;
    font: inherit !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

/* Ensure gradients are not overridden */
.btn-consent-enter {
    background: linear-gradient(270deg, #01ADF1 0%, #A61651 100%) !important;
    background-image: linear-gradient(270deg, #01ADF1 0%, #A61651 100%) !important;
}

.btn-consent-leave {
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
    background-image: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important;
}

/* ========================================
   ANIMATION CONSISTENCY
======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   BACKDROP FILTER CONSISTENCY
======================================== */

/* Backdrop filter with fallback */
[style*="backdrop-filter"],
.backdrop-filter {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ========================================
   SPECIFIC FIXES FOR CHROME & FIREFOX
======================================== */

/* Chrome: Fix for subpixel rendering */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    * {
        -webkit-font-smoothing: antialiased;
    }
}

/* Firefox: Fix for font rendering */
@-moz-document url-prefix() {
    * {
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   Z-INDEX CONSISTENCY
======================================== */

/* Ensure z-index stacking works consistently */
.modal,
.popup,
.dropdown,
.tooltip {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

/* ========================================
   OVERFLOW CONSISTENCY
======================================== */

/* Consistent overflow handling */
.overflow-hidden {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.overflow-auto {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   POSITION CONSISTENCY
======================================== */

/* Fixed positioning consistency */
.fixed,
[style*="position: fixed"] {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

/* Sticky positioning with vendor prefixes */
.sticky,
[style*="position: sticky"] {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: sticky;
}

/* ========================================
   USER SELECT CONSISTENCY
======================================== */

/* Prevent text selection where needed */
.no-select,
[style*="user-select: none"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ========================================
   FLEX WRAP CONSISTENCY
======================================== */

/* Flex wrap with vendor prefixes */
[style*="flex-wrap"],
.flex-wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

/* ========================================
   TABLE CONSISTENCY
======================================== */

/* Consistent table border spacing */
table {
    border-collapse: collapse;
    border-spacing: 0;
    -webkit-border-collapse: collapse;
    -moz-border-collapse: collapse;
}

/* ========================================
   LINK FOCUS CONSISTENCY
======================================== */

/* Remove focus styles from all links */
a:focus,
a:focus-visible,
a:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Firefox: Fix for button focus outline */
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(1, 173, 241, 0.5);
    outline-offset: 2px;
}