/* ======================================= */
/* Policy Pages (Terms, Privacy, Cookies)  */
/* ======================================= */

/* Root variables (ensure these are either here or in another common file that's loaded first) */
:root {
    --primary-pink: #FE019A; /* Your vibrant pink */
    --light-pink: #FFD9EF;   /* Lighter shade for accents */
    --dark-pink: #D90085;    /* Darker for hover/active states */
    --text-dark: #333;
    --text-medium: #555;
    --text-light: #fff;
    --bg-gradient-start: #fce4ec; /* Light pinkish */
    --bg-gradient-mid: #e0f2f7;   /* Light bluish */
    --bg-gradient-end: #f3e5f5;   /* Light purplish */
    --card-bg: #FFFFFF;
    --shadow-color-pink: rgba(254, 1, 154, 0.25); /* Slightly stronger shadow */
    --border-radius-lg: 18px; /* Slightly larger radius for softness */
    --border-radius-md: 12px;
    --border-radius-sm: 8px;
    --section-heading-color: #444; /* A slightly softer dark for subheadings */
}

/* Base Body Styles - These should ideally be in your main style.css */
body {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
    font-family: 'Poppins', sans-serif; /* Make sure Poppins is loaded via header.php */
    margin: 0;
    line-height: 1.7; /* Increased for better readability */
    color: var(--text-dark);
    min-height: 100vh; /* Ensure body takes full height */
    display: flex;
    flex-direction: column;
}

.main-content { /* Assuming you wrap your content in this */
    flex-grow: 1; /* Allows content to push footer down */
}


/* Generic container for content width */
.container {
    max-width: 960px; /* Wider container for policy text */
    margin: 40px auto;
    padding: 0 25px; /* Added horizontal padding */
    box-sizing: border-box; /* Include padding in width */
}

/* Policy Card Styling */
.policy-card {
    background: var(--card-bg);
    padding: 50px; /* Increased padding */
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 40px var(--shadow-color-pink); /* Stronger, more diffused shadow */
    line-height: 1.8; /* Excellent readability */
    font-size: 16px; /* Slightly larger base font size */
    color: var(--text-dark);
    position: relative; /* For decorative elements */
    overflow: hidden; /* Ensures shadows/borders are contained */
}

/* Decorative top border with gradient */
.policy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Thickness of the border */
    background: linear-gradient(90deg, var(--primary-pink), var(--light-pink)); /* Gradient accent */
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}

/* Main Heading */
.policy-card h1 {
    font-size: 2.8em; /* Larger, more impactful */
    color: var(--primary-pink);
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700; /* Bolder */
    letter-spacing: -0.5px; /* Slight tightening for large text */
}

/* Last updated timestamp */
.policy-card .last-updated {
    font-size: 0.95em;
    color: var(--text-medium);
    text-align: center;
    margin-bottom: 30px;
    font-style: italic;
    opacity: 0.9;
}

/* Section Headings (H2) */
.policy-card h2 {
    font-size: 1.9em; /* Prominent but not overpowering */
    color: var(--section-heading-color); /* Softer dark */
    margin-top: 45px; /* More space above */
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--light-pink); /* Thicker, softer underline */
    font-weight: 600; /* Semi-bold */
    letter-spacing: -0.2px;
}

/* Sub-headings (H3) */
.policy-card h3 {
    font-size: 1.3em;
    color: var(--text-dark);
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Paragraphs */
.policy-card p {
    margin-bottom: 18px; /* More spacing between paragraphs */
}

/* Lists */
.policy-card ul {
    list-style: none; /* Remove default bullets */
    margin-left: 0;
    padding-left: 25px; /* Indent for custom bullet */
    margin-bottom: 20px;
}

.policy-card ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}

.policy-card ul li::before {
    content: '•'; /* Custom bullet point */
    color: var(--primary-pink); /* Pink bullet */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0;
}

.policy-card ol {
    margin-left: 25px;
    margin-bottom: 20px;
    list-style-type: decimal; /* Numbered list */
}

.policy-card ol li {
    margin-bottom: 10px;
}


/* Links within policies */
.policy-card a {
    color: var(--primary-pink);
    text-decoration: none;
    font-weight: 600; /* Make them stand out */
    transition: color 0.2s ease-in-out;
}

.policy-card a:hover {
    color: var(--dark-pink);
    text-decoration: underline;
}

/* Small text/disclaimers */
.policy-card em {
    color: var(--text-medium);
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    .container {
        margin: 30px auto;
        padding: 0 20px;
    }
    .policy-card {
        padding: 40px;
    }
    .policy-card h1 {
        font-size: 2.4em;
    }
    .policy-card h2 {
        font-size: 1.7em;
    }
}

@media (max-width: 768px) {
    .container {
        margin: 20px auto;
        padding: 0 15px;
    }
    .policy-card {
        padding: 30px;
        border-radius: var(--border-radius-md); /* Smaller border radius on small screens */
    }
    .policy-card::before {
        height: 6px; /* Thinner border */
    }
    .policy-card h1 {
        font-size: 2em;
    }
    .policy-card h2 {
        font-size: 1.5em;
        margin-top: 35px;
    }
    .policy-card h3 {
        font-size: 1.1em;
    }
    .policy-card p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .policy-card {
        padding: 20px;
    }
    .policy-card h1 {
        font-size: 1.7em;
    }
    .policy-card h2 {
        font-size: 1.3em;
    }
    .policy-card p {
        font-size: 14px;
    }
    .policy-card ul {
        padding-left: 20px;
    }
    .policy-card ul li::before {
        font-size: 1em;
    }
}

/* Footer styles (ensure these are in your main style.css or appropriately placed) */
.footer {
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    text-align: center;
    padding: 25px 20px;
    margin-top: auto; /* Pushes footer to the bottom */
    font-size: 0.9em;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1); /* Subtle shadow at the top */
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--light-pink); /* Lighter pink for footer links */
    text-decoration: none;
    margin: 0 15px;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
    color: var(--primary-pink); /* Primary pink on hover */
    text-decoration: underline;
}

.footer p {
    margin: 0;
    color: rgba(255,255,255,0.7); /* Slightly muted copyright text */
}