/* ========================================
   JCPenney Portraits Footer - Desktop Design
   Based on Figma: node-id=6037-7385
   ======================================== */

/* Footer Container */
.jcp-new-footer {
    background: #ffffff;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

/* Email Signup Section - Beige Background */
.jcp-footer-signup {
    background: #e4e0d4;
    padding: 40px 0;
}

.jcp-footer-signup-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 160px;
}

.jcp-signup-text {
    flex: 0 0 610px;
    max-width: 610px;
}

.jcp-signup-heading {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #000000;
    margin: 0 0 4px 0;
}

.jcp-signup-subheading {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #2d3137;
    margin: 0;
}

.jcp-signup-button {
    flex: 0 0 161px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jcp-btn-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #CC0000 !important;
    color: #ffffff !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 6px 16px;
    border-radius: 30px;
    height: 36px;
    width: 161px;
    text-align: center;
    transition: background 0.3s ease;
    line-height: normal;
}

.jcp-btn-signup:hover {
    background: #c51920 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Footer Main Content */
.jcp-footer-main {
    background: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}

/* Black Dividers */
.jcp-footer-divider {
    height: 1px;
    background: #BEBEBE;
    width: 100%;
    margin: 0;
}

/* Logo and Info Section */
.jcp-footer-logo-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 160px;
    padding: 30px 0;
}

.jcp-footer-logo {
    flex: 0 0 371px;
    width: 371px;
    box-sizing: border-box;
    padding: 0 12px;
}

.jcp-footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.jcp-footer-shutterfly-info {
    flex: 0 0 611px;
    width: 611px;
    text-align: right;
}

.jcp-shutterfly-heading {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    color: #000000;
    margin: 0 0 0 0;
}

.jcp-shutterfly-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
    margin: 0;
}

.jcp-shutterfly-text a {
    color: #000000;
    text-decoration: underline;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.jcp-shutterfly-text a:hover {
    color: #000000;
    text-decoration: underline;
}

/* Middle Section - Help, Partnered, Stay Connected */
.jcp-footer-middle-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 60px;
    gap: 40px;
}

.jcp-footer-help {
    flex: 0 0 auto;
}

.jcp-help-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
    text-decoration: none;
}

.jcp-help-icon {
    width: 12px;
    height: 12px;
    display: block;
}

.jcp-footer-partnered {
    flex: 1 1 auto;
    text-align: center;
}

.jcp-partnered-link,
.jcp-partnered-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
    text-decoration: none;
}

.jcp-partnered-link:hover {
    text-decoration: underline;
}

.jcp-footer-stay-connected {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.jcp-stay-connected-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    color: #000000;
}

.jcp-footer-social-icons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.jcp-social-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
}

.jcp-social-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Footer Links Section */
.jcp-footer-links-section {
    padding: 24px 0;
}

/* Footer Navigation Links - Three Columns */
.jcp-footer-nav-columns {
    display: flex;
    gap: 138px;
    align-items: flex-start;
    padding:0 20px;
}

.jcp-footer-nav-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 320px;
}

.jcp-footer-link {
    font-family: "Open Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 183.333% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    display: block;
    color: #000000;
}

.jcp-footer-link:hover {
    color: #000000;
    text-decoration: underline;
}

/* Copyright Section */

.jcp-footer-copyright {
    width: 100%;
    max-width: 1220px !important;
    margin: 0 auto;
}

.jcp-footer-copyright p {
    font-family: "Open Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 183.333% */
    color: #000000;
    margin: 0;
}

/* Footer Link with Icon */
.jcp-footer-link.has-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jcp-footer-link-icon {
    display: inline-block;
    vertical-align: middle;
    height: 14px;
    width: auto;
    flex-shrink: 0;
}

/* Bottom Gray Bar */
.jcp-footer-bottom-bar {
    background: #F2F5F7;
    height: 66px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Mobile Styles (820px and below) */
@media (max-width: 820px) {
    /* Email Signup Section */
    .jcp-footer-signup {
        padding: 24px 30px 28px;
    }

    .jcp-footer-signup-content {
        padding: 0;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .jcp-signup-text {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .jcp-signup-button {
        flex: 0 0 auto;
        width: auto;
    }

    .jcp-btn-signup {
        height: 32px;
        width: 145px;
        min-width: 145px;
        font-size: 12px;
        padding: 4px 16px;
    }

    /* Footer Main Content */
    .jcp-footer-main {
        padding: 0 30px;
    }

    /* Logo and Info Section - Column Reverse on Mobile */
    .jcp-footer-logo-section {
        flex-direction: column-reverse;
        gap: 18px;
        padding: 24px 0;
    }

    .jcp-footer-logo {
        flex: 1 1 auto;
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .jcp-footer-shutterfly-info {
        flex: 1 1 auto;
        width: 100%;
        text-align: center;
    }

    .jcp-shutterfly-heading,
    .jcp-shutterfly-text {
        line-height: 18px;
        font-family: "Open Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 22px; /* 183.333% */
        color: #000000 !important;
    }

    .jcp-shutterfly-text > p{
        line-height: 18px;
        font-family: "Open Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 22px; /* 183.333% */
        color: #000000 !important;
    }


    /* Middle Section - MOBILE */
    .jcp-footer-middle-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        padding: 24px 0;
    }

    .jcp-footer-help {
        order: 1;
    }

    .jcp-footer-partnered {
        order: 2;
    }

    .jcp-footer-stay-connected {
        order: 3;
        flex-direction: column;
        gap: 8px;
    }

    /* Footer Links Section - MOBILE */
    .jcp-footer-links-section {
        padding: 24px 0;
    }

    .jcp-footer-nav-columns {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .jcp-footer-nav-column {
        width: 100%;
    }

    /* Copyright Section */
    .jcp-footer-copyright {
        padding: 16px 30px;
        text-align: center;
    }

    .jcp-footer-copyright p {
        line-height: 18px;
    }

    /* Bottom Gray Bar */
    .jcp-footer-bottom-bar {
        height: 76px;
    }
}