/**
 * Patreon Custom Styles
 * 
 * This file contains custom styles to override and extend the Patreon Connect plugin styles.
 * All styles here will load after the default Patreon styles, allowing you to customize the appearance.
 */

/* ============================================
   Patreon Page Styles
   ============================================ */

/* Background for Patreon pages */
body:has(.patreon-campaign-banner),
body:has(.patreon-valid-patron-message),
body:has(.patreon-promo-banner),
.single:has(.patreon-campaign-banner),
.single:has(.patreon-valid-patron-message),
.page:has(.patreon-campaign-banner),
.page:has(.patreon-valid-patron-message) {
    background-color: #151519 !important;
    color: #ffffff !important;
}

/* Center content on Patreon pages */
.patreon-campaign-banner,
.patreon-valid-patron-message,
.patreon-promo-banner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 1200px;
    color: #ffffff !important;
}

.patreon-campaign-banner {
    text-align: center !important;
}

.patreon-valid-patron-message {
    text-align: center !important;
}

/* Links on Patreon pages */
.patreon-campaign-banner a,
.patreon-valid-patron-message a,
.patreon-promo-banner a,
body:has(.patreon-campaign-banner) .patreon-campaign-banner a,
body:has(.patreon-valid-patron-message) .patreon-valid-patron-message a {
    color: #ea7514 !important;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

/* Exceptions for links and sale prices */
body:has(.patreon-campaign-banner) a,
body:has(.patreon-promo-banner) a,
.single:has(.patreon-campaign-banner) a,
.single:has(.patreon-valid-patron-message) a,
.page:has(.patreon-campaign-banner) a {
    color: #ea7514 !important;
}

body:has(.patreon-campaign-banner) .patreon-sale-price,
body:has(.patreon-valid-patron-message) .patreon-sale-price,
.single:has(.patreon-campaign-banner) .patreon-sale-price,
.single:has(.patreon-valid-patron-message) .patreon-sale-price,
.page:has(.patreon-campaign-banner) .patreon-sale-price,
.page:has(.patreon-valid-patron-message) .patreon-sale-price {
    color: #ea7514 !important;
}

.patreon-campaign-banner a:hover,
.patreon-valid-patron-message a:hover,
.patreon-promo-banner a:hover,
body:has(.patreon-campaign-banner) .patreon-campaign-banner a:hover,
body:has(.patreon-valid-patron-message) .patreon-valid-patron-message a:hover,
body:has(.patreon-campaign-banner) article a:hover,
body:has(.patreon-valid-patron-message) article a:hover {
    text-decoration: underline !important;
}

/* Sale price styling */
.patreon-sale-price {
    color: #ea7514;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 5px;
}

/* Strikethrough original price */
.patreon-campaign-banner span[style*="line-through"],
.patreon-valid-patron-message span[style*="line-through"] {
    text-decoration: line-through !important;
    color: #999;
    margin-right: 5px;
}

/* ============================================
   Campaign Banner Styles
   ============================================ */

/* Main campaign banner container */
.patreon-campaign-banner {
    /* Add custom padding, margin, or background */
    /* padding: 30px; */
    /* background: #f9f9f9; */
    /* border-radius: 8px; */
}

/* Locked content message */
.patreon-locked-content-message {
    /* Customize the message text styling */
    /* font-size: 18px; */
    /* line-height: 1.6; */
    /* color: #333; */
}

/* Text over the button */
.patreon-text-over-button {
    /* Style the text that appears above the Patreon button */
    /* font-weight: 600; */
    /* margin-bottom: 15px; */
}

/* Text under the button */
.patreon-text-under-button {
    /* Style the text that appears below the Patreon button */
    /* font-size: 14px; */
    /* color: #666; */
    /* margin-top: 15px; */
}

/* ============================================
   Button Styles
   ============================================ */

/* Universal Patreon button wrapper */
.patreon-responsive-button-wrapper {
    /* Customize button container */
    /* border-radius: 6px; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
    /* transition: all 0.3s ease; */
}

.patreon-responsive-button-wrapper:hover {
    /* Hover effects */
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
}

/* Button content */
.patreon-responsive-button {
    /* Customize button text and layout */
    /* font-size: 16px; */
    /* letter-spacing: 0.5px; */
}

/* Patreon logo inside button */
.patreon-responsive-button img.patreon_logo {
    /* Customize logo size and spacing */
    /* width: 24px !important; */
    /* margin-right: 12px; */
}

/* Login button specific styles */
.ptrn-login .patreon-responsive-button-wrapper {
    /* Styles specific to login/connect buttons */
}

/* ============================================
   Valid Patron Footer Styles
   ============================================ */

/* Footer message shown to valid patrons */
.patreon-valid-patron-message {
    /* Style the footer message for patrons who can see the content */
    /* background: #e8f5e9; */
    /* border-left: 4px solid #4caf50; */
    /* padding: 15px; */
    /* margin-top: 20px; */
    /* border-radius: 4px; */
    /* font-size: 14px; */
    /* color: #2e7d32; */
}

/* ============================================
   Admin Bypass Message Styles
   ============================================ */

/* Message shown to admins (when they bypass the lock) */
.patreon-valid-patron-message {
    /* Customize admin message styling */
}

/* ============================================
   Patron Button Wrapper
   ============================================ */

.patreon-patron-button-wrapper {
    /* Container for button and text */
    /* text-align: center; */
    /* margin: 20px 0; */
}

/* ============================================
   Universal Button Container
   ============================================ */

.patreon-universal-button {
    /* Wrapper for universal unlock button */
    /* margin: 20px 0; */
}

/* ============================================
   Login Form Styles
   ============================================ */

/* Patreon login button in WordPress login form */
.ptrn-button {
    /* Customize login button in wp-login.php */
    /* margin: 20px 0 !important; */
}

.ptrn-button img {
    /* Customize login button image */
    /* border-radius: 4px; */
}

/* Patreon message in login form */
.patreon-msg {
    /* Style error/success messages in login form */
    /* border-radius: 6px; */
    /* padding: 12px; */
}

/* ============================================
   Responsive Design
   ============================================ */

/* Mobile styles */
@media (max-width: 768px) {
    .patreon-campaign-banner {
        /* Adjust for mobile */
        /* padding: 20px; */
    }
    
    .patreon-responsive-button-wrapper {
        /* Make button full width on mobile */
        /* width: 100% !important; */
    }
    
    .patreon-locked-content-message {
        /* Adjust font size for mobile */
        /* font-size: 16px; */
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .patreon-campaign-banner {
        /* Tablet adjustments */
    }
}

/* ============================================
   Custom Color Schemes
   ============================================ */

/* Example: Dark theme override */
/*
.patreon-campaign-banner {
    background: #151519;
    color: #fff;
    padding: 30px;
    border-radius: 8px;
}

.patreon-locked-content-message {
    color: #e0e0e0;
}

.patreon-responsive-button-wrapper {
    background-color: #F96854 !important;
}
*/

/* Example: Light theme with borders */
/*
.patreon-campaign-banner {
    border: 2px solid #e0e0e0;
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
}

.patreon-locked-content-message {
    color: #333;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}
*/

/* ============================================
   Typography Customization
   ============================================ */

/* Custom font family for Patreon elements */
/*
.patreon-campaign-banner,
.patreon-locked-content-message,
.patreon-text-over-button,
.patreon-text-under-button {
    font-family: 'Your Custom Font', sans-serif;
}
*/

/* ============================================
   Animation Effects
   ============================================ */

/* Fade in animation */
/*
@keyframes patreonFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.patreon-campaign-banner {
    animation: patreonFadeIn 0.5s ease-out;
}
*/

/* ============================================
   Custom Utility Classes
   ============================================ */

/* Add your own utility classes here */
/*
.patreon-custom-spacing {
    margin: 30px 0;
}

.patreon-custom-border {
    border: 2px solid #F96854;
    border-radius: 8px;
    padding: 20px;
}
*/

/* ============================================
   Promotional Banner Styles
   ============================================ */

.patreon-promo-banner {
    background-color: #151519;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.patreon-promo-banner__content {
    max-width: 1200px;
    margin: 0 auto;
}

.patreon-promo-banner__title {
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.patreon-promo-banner__code {
    color: #ea7514;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.patreon-promo-banner__pricing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.patreon-promo-banner__price-new {
    color: #ea7514;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 56px;
    line-height: 1.2;
}

.patreon-promo-banner__price-old {
    color: #ffffff;
    text-decoration: line-through;
    font-size: 32px;
    line-height: 1.2;
}

.patreon-promo-banner__disclaimer {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.patreon-promo-banner__link {
    margin-top: 10px;
}

.patreon-promo-banner__link-text {
    color: #ffffff;
    text-decoration: underline;
    font-size: 12px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.patreon-promo-banner__link-text:hover {
    color: #ea7514;
}

/* Responsive styles for promotional banner */
@media (max-width: 768px) {
    .patreon-promo-banner {
        padding: 30px 15px;
    }

    .patreon-promo-banner__title {
        font-size: 16px;
    }

    .patreon-promo-banner__code {
        font-size: 36px;
    }

    .patreon-promo-banner__price-new {
        font-size: 42px;
    }

    .patreon-promo-banner__price-old {
        font-size: 24px;
    }

    .patreon-promo-banner__pricing {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================
   Promo Code Popup Styles
   ============================================ */

.patreon-promo-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.patreon-promo-popup--active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.patreon-promo-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.patreon-promo-popup__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 8px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.patreon-promo-popup__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.patreon-promo-popup__close:hover {
    color: #000;
}

.patreon-promo-popup__title {
    color: #151519;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    padding-right: 40px;
}

.patreon-promo-popup__text {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

.patreon-promo-popup__text p {
    margin: 0 0 15px 0;
}

.patreon-promo-popup__text p:last-child {
    margin-bottom: 0;
}

.patreon-promo-popup__text strong {
    color: #ea7514;
    font-weight: bold;
}

.patreon-promo-popup__images {
    margin-top: 20px;
    text-align: center;
}

.patreon-promo-popup__image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Patreon button in popup */
.patreon-promo-popup__button {
    margin-top: 30px;
    text-align: center;
    width: 100%;
}

.patreon-promo-popup__button .patreon-responsive-button-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    animation: patreonButtonBounce 3s ease-in-out infinite;
}

.patreon-promo-popup__button .patreon-responsive-button {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 15px 20px !important;
    font-size: 16px !important;
}

/* Button bounce animation - subtle and sales-stimulating */
@keyframes patreonButtonBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.patreon-promo-popup__button .patreon-responsive-button-wrapper:hover {
    animation: none;
    transform: translateY(-3px);
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(234, 117, 20, 0.3);
}

/* Responsive styles for popup */
@media (max-width: 768px) {
    .patreon-promo-popup__content {
        padding: 30px 20px;
        max-width: 95%;
    }

    .patreon-promo-popup__title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .patreon-promo-popup__text {
        font-size: 14px;
    }

    .patreon-promo-popup__close {
        top: 10px;
        right: 10px;
        font-size: 28px;
    }

    .patreon-promo-popup__button .patreon-responsive-button {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
}