/**
 * Theme-specific customizations only
 * Common t02 styles are handled by t02-common.css
 */

/* Custom color scheme for cosmetics theme */
:root {
    --primary-color: #e91e63;
    --secondary-color: #ff4081;
}

/* Footer dark theme - make collapse icons visible on black background */
.footer.background-black .footer-heading-moblie::after,
.footer.background-black .footer-heading-moblie::before {
    background-color: #ffffff !important;
}

/* Ensure footer collapse functionality works on mobile */
@media only screen and (max-width: 991px) {
    /* Make mobile headings clickable with cursor */
    .footer .footer-col-block .footer-heading-moblie {
        cursor: pointer;
        position: relative;
        display: block;
    }

    /* Ensure icons are visible on all footer-col-block elements including newsletter */
    .footer .footer-col-block .footer-heading-moblie::after {
        position: absolute;
        content: "";
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 1px;
        background-color: var(--main);
        transition: 0.25s ease-in-out;
    }

    .footer .footer-col-block .footer-heading-moblie::before {
        position: absolute;
        content: "";
        right: 15px;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 12px;
        background-color: var(--main);
        transition: 0.25s ease-in-out;
    }

    /* White icons for black footer */
    .footer.background-black .footer-col-block .footer-heading-moblie::after,
    .footer.background-black .footer-col-block .footer-heading-moblie::before {
        background-color: #ffffff !important;
    }

    /* Animate icons when opened */
    .footer .footer-col-block.open .footer-heading-moblie::before {
        opacity: 0;
    }

    .footer .footer-col-block.open .footer-heading-moblie::after {
        transform: translate(0%, -50%) rotate(180deg);
    }

    /* Hide content by default - no !important so jQuery slideUp/slideDown can animate */
    .footer .footer-col-block .tf-collapse-content {
        display: none;
    }

    /* ========================================================================
       NEWSLETTER SECTION OVERRIDES
       Override t02-common.css to enable collapse functionality for newsletter
       ======================================================================== */

    /* Newsletter content should collapse on mobile */
    .footer.background-black .footer-newsletter.footer-col-block .tf-collapse-content {
        display: none !important;
    }

    /* Newsletter heading should be clickable */
    .footer .footer-newsletter.footer-col-block .footer-heading-moblie {
        cursor: pointer !important;
        position: relative !important;
        display: block !important;
    }

    /* Newsletter horizontal line (minus sign) - define ALL properties with !important */
    .footer .footer-newsletter.footer-col-block .footer-heading-moblie::after {
        position: absolute !important;
        content: "" !important;
        display: block !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 12px !important;
        height: 1px !important;
        background-color: #ffffff !important;
        transition: 0.25s ease-in-out !important;
    }

    /* Newsletter vertical line (plus sign) - define ALL properties with !important */
    .footer .footer-newsletter.footer-col-block .footer-heading-moblie::before {
        position: absolute !important;
        content: "" !important;
        display: block !important;
        right: 15px !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 1px !important;
        height: 12px !important;
        background-color: #ffffff !important;
        transition: 0.25s ease-in-out !important;
    }

    /* When newsletter is open, hide vertical line (change + to -) */
    .footer .footer-newsletter.footer-col-block.open .footer-heading-moblie::before {
        opacity: 0 !important;
    }

    /* When newsletter is open, rotate horizontal line */
    .footer .footer-newsletter.footer-col-block.open .footer-heading-moblie::after {
        transform: translate(0%, -50%) rotate(180deg) !important;
    }
}