:root {
    --dark-bg: #121212;
    --dark-card: #1E1E1E; /* Defined, can be used for other elements */
    --primary-red: #FF4136;
    --primary-red-darker: #E63930; /* Added for hover states */
    --text-white: #FFFFFF;
    /* Optional: Modern Font Stack */
    /* --font-main: 'Roboto', Arial, sans-serif; */
}

body {
    font-family: 'Arial', sans-serif; /* Consider: var(--font-main); if using a Google Font */
    background-color: var(--dark-bg);
    color: var(--text-white);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: clamp(2rem, 5vw, 2.5rem); /* Responsive font size */
    color: var(--primary-red);
    margin-bottom: 20px;
    font-weight: 700; /* Bolder heading */
}

.subheadline {
    font-size: clamp(1rem, 3vw, 1.2rem); /* Responsive font size */
    color: var(--text-white);
    margin-bottom: 30px;
    opacity: 0.9; /* Slightly softer subheadline */
}

.video-image-container {
    margin-bottom: 30px;
    position: relative; /* For potential future pseudo-elements or overlays */
}

.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Slightly more rounding */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Enhanced shadow for more depth */
    display: block; /* Prevents extra space below if it's an inline element inside a link */
    margin-left: auto;
    margin-right: auto;
}

.clickable-image { /* This class is on the <img> inside the <a> tag */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The <a> tag wrapping the image might need hover styles if you want visual feedback on the link itself */
.video-image-container > a:hover .clickable-image {
    transform: scale(1.03); /* Slightly more pronounced scale */
    box-shadow: 0 15px 40px rgba(var(--primary-red), 0.3); /* Glow effect on hover */
}

.cta-container {
    display: flex;
    justify-content: center;
    margin-top: 40px; /* More space above CTA */
}

.cta-button {
    display: inline-flex; /* For aligning icon and text */
    align-items: center; /* Vertically align icon and text */
    gap: 10px; /* Space between icon and text */
    background-color: var(--primary-red);
    color: var(--text-white);
    padding: 15px 35px; /* Slightly more padding */
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 1.2rem); /* Responsive font size */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Initial subtle shadow */
    border: none; /* Ensure no default border */
}

.cta-button i { /* Styling for icon if present */
    font-size: 1.1em;
}

.cta-button:hover,
.cta-button:focus { /* Added focus state for accessibility */
    background-color: var(--primary-red-darker); /* Corrected hover color */
    transform: translateY(-5px) scale(1.02); /* Combined transform */
    box-shadow: 0 8px 25px rgba(var(--primary-red), 0.4); /* Enhanced shadow on hover */
    outline: none; /* Remove default focus outline if custom styles are sufficient */
}
.cta-button:active {
    transform: translateY(-2px) scale(0.98); /* Click effect */
    box-shadow: 0 4px 10px rgba(var(--primary-red), 0.3);
}

.pulse-animation {
    animation: pulse 2s infinite ease-in-out; /* Added ease-in-out */
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(var(--primary-red), 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 8px 25px rgba(var(--primary-red), 0.4); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(var(--primary-red), 0.2); }
}

@media (max-width: 768px) {
    .cta-button {
        padding: 12px 25px;
    }
}

/* Add these to your existing styles.css, with other .cool-offer-popup styles */

/* Custom styling for the SweetAlert title element */
.cool-offer-popup .swal2-title-custom-styling { /* Targets the class set in customClass.title */
    color: #FFEB3B !important; /* Bright Yellow for high visibility */
    font-size: clamp(1.6em, 5vw, 2.1em) !important; /* Responsive font size */
    font-weight: 700 !important; /* Bold */
    margin-top: 20px !important; /* Space above title */
    margin-bottom: 10px !important; /* Space below title, before HTML content */
    padding: 0 15px !important; /* Horizontal padding */
    line-height: 1.2 !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.3); /* Subtle shadow for depth */
}

/* Custom styling for the SweetAlert HTML container */
.cool-offer-popup .swal2-html-container-custom-styling {
    margin-top: 0 !important;
    margin-bottom: 20px !important; /* Space below HTML text, before image */
    padding: 0 20px !important; /* Horizontal padding for the text block */
    color: #FFFFFF; /* Default text color for this container */
    font-size: clamp(1rem, 4vw, 1.2rem); /* Set text size to medium */
}

/* Styling for the specific text elements within the HTML */
.popup-offer-text .offer-highlight {
    font-size: clamp(1.05em, 2.5vw, 1.25em) !important;
    color: #FFCA28; /* Amber - distinct from title but still bright */
    margin-bottom: 12px !important;
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
}

.popup-offer-text .offer-highlight strong {
    color: #FFFFFF; /* Makes "Hepatoburn" stand out more */
    font-weight: 700;
}

.popup-offer-text .offer-description {
    font-size: clamp(0.9em, 2vw, 1em) !important;
    color: #e0e0e0; /* Light grey, easy to read against the dark background */
    line-height: 1.6;
    margin: 0; /* Remove default P margin if any */
}

/* Adjust image margin now that text is above it */
.cool-offer-image-swal.swal2-image {
    margin: 0 auto 25px auto !important; /* Top 0, LR auto, Bottom margin before button */
    display: block !important; /* Ensure it behaves as a block for margin auto */
}

/* Ensure overall popup padding accommodates the new title and text */
.cool-offer-popup.swal2-popup {
    width: clamp(250px, 40vw, 400px) !important; /* Ensures a medium popup size */
    max-width: 90vw; /* Prevents overflow on very small screens */
    padding: 20px !important; /* Add padding for consistency */
}

/* Ensure confirm button has enough space from the image */
.cool-offer-confirm-button.swal2-confirm {
    margin-top: 0px !important; /* Let image margin handle space */
}

/* Optional: Add styling to SweetAlert's backdrop (optional aesthetic) */
.swal2-backdrop {
    background: rgba(0, 0, 0, 0.5); /* Slight dark backdrop for emphasis */
    backdrop-filter: blur(5px); /* Optional: Adds a subtle blur effect */
}