/* Always show bars without timeout/transition */
#swipebox-top-bar,
#swipebox-bottom-bar {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: none !important;  /* Disable any fade/transition */
}

/* Force bars into visible position (overrides JS translate hiding) */
#swipebox-top-bar {
    transform: translate3d(0, 50px, 0) !important;  /* Moves it down into view */
    min-height: 85px !important;         
}

#swipebox-bottom-bar {
    transform: translate3d(0, -50px, 0) !important;  /* Moves it up into view */
}

/* Ensure arrows and close button are always visible and consistent */
#swipebox-arrows,
#swipebox-close {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Override mobile detection in CSS (if any bars are hidden/removed) */
#swipebox-bottom-bar,
#swipebox-top-bar {
    display: block !important;  /* Prevent removal */
}

/* Optional: Remove media query differences for identical look on all screen sizes */
#swipebox-arrows {
    width: 100% !important;  /* Or set to your preferred fixed width */
    max-width: none !important;
}

#swipebox-close {
    right: 0 !important;  /* Or adjust to your preference */
}

/* If you want to disable touch-specific shadows/indicators entirely */
.swipebox-touch #swipebox-container:before,
.swipebox-touch #swipebox-container:after {
    display: none !important;
}

/* Always ensure top bar is present and visible (from previous customizations) */
#swipebox-top-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
    transform: translate3d(0, 50px, 0) !important; /* Already forcing it down into view */
}

#swipebox-title {
    font-size: 1.5em !important;          /* Base size – adjust as needed: 1.2em, 18px, 1.5em, etc. */
    line-height: 1.4 !important;          /* Improves readability, especially if text wraps */
    padding: 15px 70px 15px 15px !important; /* Right padding prevents overlap with close button */
    margin: 0 !important;
    white-space: normal !important;       /* Allows long titles to wrap instead of overflowing */
}

#swipebox-description {
    font-size: 1.3em !important;          /* Base size – adjust as needed: 1.2em, 18px, 1.5em, etc. */
    line-height: 1.4 !important;          /* Improves readability, especially if text wraps */
    padding: 15px 70px 15px 15px !important; /* Right padding prevents overlap with close button */
    margin-top: 2.5px !important;
    white-space: normal !important;       /* Allows long titles to wrap instead of overflowing */
}
/* iPad-specific (portrait ~768px, landscape ~1024px) - fine-tuned stacking */
@media (min-width: 768px) and (max-width: 1024px) {
    #swipebox-bottom-bar {
        transform: translate3d(0, -40px, 0) !important;  /* Pull it up more than default -50px */
        bottom: 0 !important;                            /* Anchor firmly to bottom edge */
        height: auto !important;                         /* Let it grow if text is bigger */
        min-height: 70px !important;                     /* Ensure space for arrows + text */
        padding-bottom: env(safe-area-inset-bottom, 10px) !important; /* Respect iOS/Android bottom safe area (home indicator) */
    }

}

/* Lower the title text inside the top bar on mobile */
@media only screen and (max-width: 767px) {  /* Adjust breakpoint if your mobile threshold differs; common is 768px or 480px */
    #swipebox-description {
    font-size: 1em !important;          /* Base size – adjust as needed: 1.2em, 18px, 1.5em, etc. */
    line-height: 1.4 !important;          /* Improves readability, especially if text wraps */
    padding: 15px 0px 15px 15px !important; /* Right padding prevents overlap with close button */
    margin-top: 2.5px !important;
    white-space: normal !important;       /* Allows long titles to wrap instead of overflowing */
}
    #swipebox-top-bar {
        padding-top: 20px !important;          /* Push entire bar content down */
        height: auto !important;               /* Allow bar to grow taller if needed */
        min-height: 70px !important;           /* Ensure enough vertical space */
        line-height: 1.4 !important;           /* Better readability for multi-line titles */
    }
    #swipebox-bottom-bar {
        transform: translate3d(0, 0, 0) !important;  /* Pull it up more than default -50px */
        bottom: 0 !important;                            /* Anchor firmly to bottom edge */
        height: auto !important;                         /* Let it grow if text is bigger */
        min-height: 70px !important;                     /* Ensure space for arrows + text */
        padding-bottom: env(safe-area-inset-bottom, 10px) !important; /* Respect iOS/Android bottom safe area (home indicator) */
    }

    #swipebox-title {
        padding: 45px 15px 15px 15px !important; /* Add top/bottom padding + right space for close button */
        margin: 0 !important;
        font-size: 1.1em !important;          /* Slightly larger for readability; optional */
        text-align: center !important;
        white-space: normal !important;       /* Allow wrapping if title is long */
    }

    /* Make sure close button doesn't overlap title text */
    #swipebox-close {
        top: 10px !important;                 /* Move close button down a bit if needed */
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
        background-position: center !important; /* Center icon better */
        z-index: 1001 !important;             /* Ensure it's above title text */
    }

    /* Optional: Add safe-area inset support for iPhones with notch/dynamic island */
    @supports (padding-top: env(safe-area-inset-top)) {
        #swipebox-top-bar {
            padding-top: calc(10px + env(safe-area-inset-top)) !important;
        }
        #swipebox-close {
            top: calc(10px + env(safe-area-inset-top)) !important;
        }
    }
}