/* Custom Tailwind Colors */
:root {
    --color-primary-blue: #003A81;
    --color-secondary-blue: #6ac0ec;
    --color-light-blue: #e6f0ff;
    --color-orange: #E58445;
}

.bg-primary-blue { background-color: var(--color-primary-blue); }
.text-primary-blue { color: var(--color-primary-blue); }
.bg-secondary-blue { background-color: var(--color-secondary-blue); }
.text-secondary-blue { color: var(--color-secondary-blue); }
.bg-light-blue { background-color: var(--color-light-blue); }
.text-light-blue { color: var(--color-light-blue); }

.cc--light-funky {
    color-scheme: light;

    --cc-bg: #f9faff;
    --cc-primary-color: #112954;
    --cc-secondary-color: #112954;

    --cc-btn-primary-bg: #3859d0;
    --cc-btn-primary-color: var(--cc-bg);
    --cc-btn-primary-hover-bg: #213657;
    --cc-btn-primary-hover-color: #fff;

    --cc-btn-secondary-bg: #dfe7f9;
    --cc-btn-secondary-color: var(--cc-secondary-color);
    --cc-btn-secondary-hover-bg: #c6d1ea;
    --cc-btn-secondary-hover-color: #000;

    --cc-cookie-category-block-bg: #ebeff9;
    --cc-cookie-category-block-border: #ebeff9;
    --cc-cookie-category-block-hover-bg: #dbe5f9;
    --cc-cookie-category-block-hover-border: #dbe5f9;
    --cc-cookie-category-expanded-block-hover-bg: #ebeff9;
    --cc-cookie-category-expanded-block-bg: #ebeff9;

    --cc-overlay-bg: rgba(219, 232, 255, 0.85)!important;

    --cc-toggle-readonly-bg: #cbd8f1;
    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-off-bg: #8fa8d6;
    --cc-toggle-readonly-knob-bg: var(--cc-bg);

    --cc-separator-border-color: #f1f3f5;

    --cc-footer-border-color: #f1f3f5;
    --cc-footer-bg: var(--cc-bg);

    --cc-btn-border-radius: 1rem .6rem 1.3rem .5rem / .5rem 1rem;
    --cc-modal-border-radius: var(--cc-btn-border-radius);
    --cc-pm-toggle-border-radius: var(--cc-btn-border-radius);
}

.cc--light-funky #cc-main button {
    border-radius: 9999px;
    background: var(--color-primary-blue);
    transition-duration: 300ms !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-weight: 700;
    font-family: Asap, sans-serif;
    font-size: 16px;
}

.cc--light-funky #cc-main button:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background: var(--color-primary-blue);
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

#cc-main .section__toggle, #cc-main .section__toggle-wrapper, #cc-main .toggle__icon, #cc-main .toggle__label,
#cc-main .toggle__icon-circle {
    border-radius: 9999px;
}

#cc-main .pm__section--toggle .pm__section-title,
#cc-main .pm__section--toggle .pm__section-title:hover {
    color: var(--color-primary-blue);
}
#cc-main .pm__section--toggle.is-expanded .pm__section-title {
    border-radius: 9999px !important;
}

#cc-main .pm__close-btn svg,
#cc-main .pm__close-btn:hover svg {
    stroke: #FFFFFF;
}

* {
    scroll-behavior: smooth;
}

/* Global Font */
body {
    font-family: 'Asap', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll due to animations */
}

/* Parallax Section Container - Now handles the background directly */
.parallax-section {
    position: relative;
    min-height: 100vh; /* Changed from height to min-height for better mobile adaptability */
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-size: cover; /* Ensure background covers the section */
    background-position: center; /* Center the background */
    background-attachment: fixed; /* Key for parallax effect */
    padding-top: 4rem; /* Add some top padding to the section itself */
    padding-bottom: 4rem; /* Add some bottom padding to the section itself */
}

/* Ensure sections are not hidden by fixed header when navigating */
section[id] {
    scroll-margin-top: 80px; /* Adjust this value to match your header height */
}

/* Animation Classes */
.animate-fade-in {
    opacity: 0;
    transform: translateY(20px); /* Slight movement for a nicer fade-in */
    transition: opacity 0.75s ease-out, transform 0.75s ease-out; /* Increased duration */
}

.animate-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-light-blue);
}

::-webkit-scrollbar-thumb {
    background: var(--color-secondary-blue);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-blue);
}

/* Slider styling */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--color-light-blue);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary-blue);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary-blue);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* New styling for the absorbency bubbles */
.absorbency-bubble {
    width: 3rem; /* Adjust size as needed */
    height: 3rem;
    background-color: var(--color-secondary-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem; /* text-xl */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.product-card [data-productname^="TENA Fix"] .absorbency-bubble {
    display: none;
}

/* Flip Card Container Styling */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    min-height: 430px;
}
@media(min-width: 425px) {
    min-height: 400px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 1rem;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    padding: 2rem; /* Increased padding for more square appearance */
    box-sizing: border-box; /* Include padding in the element's total width and height */

}

.flip-card-front {
    background-color: var(--color-light-blue);
    color: var(--color-primary-blue);
    z-index: 2;
}

.flip-card-back {
    background-color: var(--color-secondary-blue);
    color: var(--color-primary-blue);
    transform: rotateY(180deg);
}

/* CSS for the blinking triangle */
.blinking-triangle {
    width: 0;
    height: 0;
    border-left: 45px solid transparent; /* Increased size */
    border-right: 45px solid transparent; /* Increased size */
    border-top: 45px solid #FFFFFF; /* Points downwards, changed to primary blue, increased size */
    cursor: pointer;
    animation: blink 1.5s infinite alternate; /* Blink animation */
    margin-top: 2rem; /* Space below text */
    transition: transform 0.2s ease-in-out;
}

.blinking-triangle:hover {
    transform: translateY(5px); /* Slight hover effect */
}

@keyframes blink {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* New styling for the slider labels - now for positioning multiple labels */
.slider-labels-container {
    position: relative;
    width: 100%;
    height: 1.5rem; /* Height for the labels */
    margin-bottom: 0.5rem; /* Space below the labels */
}

.slider-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--color-primary-blue);
    white-space: nowrap;
}

/* New styling for the single dynamic label */
.dynamic-slider-label {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: var(--color-primary-blue);
    margin-bottom: 0.5rem; /* Space between label and slider */
    text-align: center;
}

/* Tooltip styling */
.tooltip-container {
    position: relative;
    display: inline-block;
}
.tooltip-content {
    visibility: hidden;
    background-color: var(--color-primary-blue);
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    width: 250px; /* Adjust width as needed */
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 0.875rem; /* text-sm */
}
.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-primary-blue) transparent transparent transparent;
}

.media-upload-input::-webkit-file-upload-button,
.media-upload-input::file-selector-button {
    display: none;
}

.custom-border-container {
    position: relative;
    padding-left: 2rem;
    padding-right: 2rem;
}

.custom-border-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 100%;
    background-color: transparent;
    border-top: 3px solid var(--color-orange);
    border-bottom: 3px solid var(--color-orange);
    border-left: 3px solid var(--color-orange);
    border-right: none;
}

.custom-border-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 100%;

    background-color: transparent;

    border-top: 3px solid var(--color-orange);
    border-bottom: 3px solid var(--color-orange);
    border-right: 3px solid var(--color-orange);

    border-left: none;
}

input[type=range]::-webkit-slider-thumb {
    webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-image: url('../img/layout/range-thumb.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 2;
}

input[type=range]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-image: url('../img/layout/range-thumb.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 2;
}

input[type="range"]:before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #c4d2e8 !important;
    position: absolute;
    bottom: 34px;
    border-radius: 50%;
    z-index: -1;
}

input[type="range"]:after {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #c4d2e8 !important;
    position: absolute;
    right: 32px;
    bottom: 34px;
    border-radius: 50%;
    z-index: -1;
}