/**
 * Celebratory Popup Styles
 * Matches the elegant, luxury aesthetic of the target reference.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700&display=swap');

/* --- POPUP OVERLAY --- */
.celebratory-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 10, 25, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Allows natural scrolling if taller than screen */
    padding: 20px 20px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.celebratory-popup-overlay.cp-show {
    opacity: 1;
    visibility: visible;
}

/* --- POPUP CONTAINER --- */
.celebratory-popup-container {
    background: #ffffff;
    width: 100%;
    max-width: 850px; /* Reduced width */
    height: auto;
    margin: auto; /* Vertically center if there's space */
    border-radius: 24px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    display: flex;
    flex-direction: row;
    position: relative;
    font-family: 'Outfit', sans-serif;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.celebratory-popup-overlay.cp-show .celebratory-popup-container {
    transform: scale(1) translateY(0);
}

/* Hide scrollbars for container */
.celebratory-popup-container::-webkit-scrollbar {
    display: none;
}
.celebratory-popup-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- CLOSE BUTTON --- */
.celebratory-popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}

.celebratory-popup-close-btn:hover {
    background: #f8fafc;
    color: #0f172a;
    transform: rotate(90deg);
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

/* --- LEFT PANEL: CELEBRATORY VISUAL --- */
.celebratory-popup-left {
    width: 44%;
    /* Deep rich blue gradient matching the screenshot */
    background: radial-gradient(circle at top right, #004ac2 0%, #002366 45%, #000c24 100%);
    position: relative;
    padding: 40px 30px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow: hidden;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

/* City Skyline Silhouette */
.celebratory-popup-left::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,70 L5,70 L5,50 L12,50 L12,80 L18,80 L18,40 L25,40 L25,60 L32,60 L32,30 L40,30 L40,65 L48,65 L48,20 L55,20 L55,55 L62,55 L62,45 L70,45 L70,75 L78,75 L78,35 L85,35 L85,60 L92,60 L92,50 L100,50 L100,100 Z' fill='%23003087' opacity='0.3'/%3E%3Cpath d='M0,100 L0,80 L8,80 L8,60 L15,60 L15,90 L22,90 L22,50 L28,50 L28,70 L35,70 L35,40 L45,40 L45,85 L52,85 L52,30 L58,30 L58,65 L65,65 L65,55 L75,55 L75,85 L82,85 L82,45 L88,45 L88,70 L95,70 L95,60 L100,60 L100,100 Z' fill='%23001a4d' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Glowing Stars / Particles */
.cp-glow-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1.5px 1.5px at 20% 10%, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40% 20%, #ffd700, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 70% 15%, #fff, rgba(0,0,0,0)),
        radial-gradient(2.5px 2.5px at 85% 30%, #ffd700, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 15% 40%, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 30% 60%, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 80% 65%, #ffd700, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 10% 80%, #fff, rgba(0,0,0,0));
    pointer-events: none;
    z-index: 2;
    animation: cpTwinkle 4s ease-in-out infinite alternate;
}

@keyframes cpTwinkle {
    0% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.02); }
}

/* Glowing Globe at the bottom */
.celebratory-popup-left::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 162, 255, 0.4) 0%, rgba(0, 74, 194, 0.1) 60%, transparent 80%);
    box-shadow: 0 -10px 40px rgba(0, 162, 255, 0.3);
    pointer-events: none;
    z-index: 3;
    border-top: 1px solid rgba(0, 162, 255, 0.5);
}

/* Realistic 3D Gold Ribbons */
.cp-ribbon-decor-1 {
    position: absolute;
    top: 120px;
    left: 15px;
    width: 60px;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' fill='none'%3E%3Cpath d='M10,20 Q60,60 20,100 T50,180' stroke='url(%23gold-grad)' stroke-width='12' stroke-linecap='round' filter='drop-shadow(2px 4px 6px rgba(0,0,0,0.5))'/%3E%3Cdefs%3E%3ClinearGradient id='gold-grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fff5a3'/%3E%3Cstop offset='40%25' stop-color='%23dca725'/%3E%3Cstop offset='80%25' stop-color='%23ffd700'/%3E%3Cstop offset='100%25' stop-color='%23a67c00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: top center;
    z-index: 6;
    pointer-events: none;
    animation: cpRibbonFloat1 4s ease-in-out infinite alternate;
}

.cp-ribbon-decor-2 {
    position: absolute;
    top: 100px;
    right: 15px;
    width: 60px;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' fill='none'%3E%3Cpath d='M90,20 Q40,60 80,100 T50,180' stroke='url(%23gold-grad2)' stroke-width='12' stroke-linecap='round' filter='drop-shadow(-2px 4px 6px rgba(0,0,0,0.5))'/%3E%3Cdefs%3E%3ClinearGradient id='gold-grad2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fff5a3'/%3E%3Cstop offset='40%25' stop-color='%23dca725'/%3E%3Cstop offset='80%25' stop-color='%23ffd700'/%3E%3Cstop offset='100%25' stop-color='%23a67c00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: top center;
    z-index: 6;
    pointer-events: none;
    animation: cpRibbonFloat2 3.5s ease-in-out infinite alternate;
}

@keyframes cpRibbonFloat1 {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(8px) rotate(2deg); }
}
@keyframes cpRibbonFloat2 {
    0% { transform: translateY(0) rotate(2deg); }
    100% { transform: translateY(8px) rotate(-2deg); }
}

.celebratory-popup-left-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Eyebrow: CELEBRATING */
.celebratory-popup-left .cp-eyebrow {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    color: #ffffff;
}

/* 3D Gold Text Effect */
.cp-number-container {
    position: relative;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.cp-big-number {
    font-family: rubik;
    font-size: 104px;
    font-weight: 500;
    line-height: 1; /* Reduced from 100% to remove top space */
    margin: 0px 0 0 0;
    padding: 0;
    /* Core gold text */
    background: linear-gradient(to bottom, #fff8b0 0%, #f7c936 25%, #d1950c 50%, #fce16d 75%, #b47a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Use drop-shadow for the heavy 3D effect instead of text-shadow since background-clip is used */
    filter: 
        drop-shadow(0px 2px 0px #9a6500)
        drop-shadow(0px 4px 0px #7a4f00)
        drop-shadow(0px 6px 0px #5c3c00)
        drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.7))
        drop-shadow(0px 0px 30px rgba(255, 215, 0, 0.4));
}

/* Suffix: - YEARS - */
.cp-number-suffix {
    font-size: 18px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 600;
    color: #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.cp-number-suffix::before,
.cp-number-suffix::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, #ffd700);
}
.cp-number-suffix::after {
    background: linear-gradient(to left, transparent, #ffd700);
}

.cp-left-headline {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 5px 0 10px 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.cp-left-subhead {
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;
    color: #e2e8f0;
    letter-spacing: 0.2px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    max-width: 300px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Stats section - Modern layout */
.cp-stats-list {
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-stat-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 6px 16px 6px 10px;
    backdrop-filter: blur(4px);
    width: 100%;
    margin: 0 auto;
    transition: background 0.3s ease;
}

.cp-stat-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cp-stat-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-stat-icon-wrapper i {
    font-size: 16px;
    color: #ffffff;
}

.cp-stat-vertical-line {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 15px;
}

.cp-stat-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.cp-stat-val {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.cp-stat-lbl {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    line-height: 1.2;
}

/* --- RIGHT PANEL: OFFER / FORM --- */
.celebratory-popup-right {
    width: 56%;
    padding: 40px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

/* Transition classes */
.cp-right-panel-state {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-right-panel-state.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Offer View Styles */
.cp-right-eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #0062ff; /* Brighter blue matching screenshot */
    margin-bottom: 8px;
}

.cp-right-headline {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.cp-right-headline .highlight {
    color: #0062ff;
}

.cp-right-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    margin-bottom: 18px;
    font-style: italic;
}

.cp-subline-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #a4c8ff;
    border: 2px solid #0062ff;
    display: inline-block;
}

/* Offer cards grid */
.cp-cards-container {
    margin-bottom: 25px;
}

.cp-offer-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}
.cp-offer-card:last-child {
    margin-bottom: 0;
}

.cp-offer-card:hover {
    border-color: #0062ff;
    background: #f8fbff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 98, 255, 0.1);
}

.cp-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0px 0;
}

.cp-card-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    font-weight: 400;
    margin: 0;
}

.cp-card-desc strong {
    color: #0062ff;
    font-weight: 600;
}

/* CTA Button */
.cp-cta-button {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(90deg, #005ce6 0%, #0073ff 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 115, 255, 0.3);
    transition: all 0.3s ease;
    height: auto;
}

.cp-cta-button:hover {
    background: linear-gradient(90deg, #004dc2 0%, #0066e6 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 115, 255, 0.4);
}

.cp-fine-print {
    font-size: 11px;
    line-height: 1.5;
    color: #47515e;
    text-align: center;
    margin-top: 16px;
    font-weight: 400;
}

/* --- STATE 2: FORM STATE --- */
.cp-form-title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.cp-form-subtitle {
    font-size: 14px;
    color: #475569;
    font-weight: 400;
    margin: 0 0 16px 0;
}

.cp-form-footer-note {
    font-size: 10px;
    color: #47515e;
    text-align: right;
    margin-top: 2px;
    font-weight: 400;
}

/* Form Element overrides */
.celebratory-popup-form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.celebratory-popup-form-wrapper input[type="text"],
.celebratory-popup-form-wrapper input[type="email"],
.celebratory-popup-form-wrapper input[type="tel"],
.celebratory-popup-form-wrapper select,
.celebratory-popup-form-wrapper textarea {
    width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 9px 15px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box;
    transition: all 0.25s ease !important;
    height: auto;
}

.celebratory-popup-form-wrapper input[type="text"]:focus,
.celebratory-popup-form-wrapper input[type="email"]:focus,
.celebratory-popup-form-wrapper input[type="tel"]:focus,
.celebratory-popup-form-wrapper select:focus,
.celebratory-popup-form-wrapper textarea:focus {
    border-color: #0062ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 98, 255, 0.1) !important;
}

.celebratory-popup-form-wrapper textarea {
    height: 56px !important;
}

.celebratory-popup-form-wrapper span.wpcf7-list-item {
    display: flex;
    align-items: center;
    margin: 0 0 1px 0 !important;
}

.celebratory-popup-form-wrapper span.wpcf7-list-item-label {
    font-size: 13px !important;
    color: #475569 !important;
    font-weight: 400 !important;
    margin-left: 8px !important;
}

.celebratory-popup-form-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}

.celebratory-popup-form-wrapper input[type="submit"] {
    width: 100% !important;
    padding: 14px 20px !important;
    background: linear-gradient(90deg, #005ce6 0%, #0073ff 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 15px rgba(0, 115, 255, 0.25) !important;
    transition: all 0.3s ease !important;
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    padding: 0px 20px !important;
}

.celebratory-popup-form-wrapper input[type="submit"]:hover {
    background: linear-gradient(90deg, #004dc2 0%, #0066e6 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 115, 255, 0.35) !important;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 991px) {
    .celebratory-popup-container {
        max-width: 800px;
    }
    .cp-big-number {
        font-size: 90px;
    }
    .cp-left-headline {
        font-size: 26px;
    }
    .cp-right-headline {
        font-size: 22px;
    }
    .celebratory-popup-left {
        padding: 40px 25px;
    }
    .celebratory-popup-right {
        padding: 40px 30px;
    }
    .cp-ribbon-decor-1 { top: 90px; width: 45px; }
    .cp-ribbon-decor-2 { top: 100px; width: 45px; }
}

@media (max-width: 767px) {
    .celebratory-popup-overlay {
        padding: 20px 10px;
        align-items: flex-start; /* Allow overlay scroll on mobile */
    }
    
    .celebratory-popup-container {
        flex-direction: column;
        width: 100%;
        max-height: none; /* Let it grow naturally on mobile */
        overflow-y: visible;
        border-radius: 16px;
    }
    
    .celebratory-popup-left {
        width: 100%;
        padding: 40px 20px 25px 20px;
        border-bottom-left-radius: 0;
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
    }
    
    .cp-big-number {
        font-size: 72px;
    }
    
    .cp-left-headline {
        font-size: 22px;
    }
    
    .cp-left-subhead {
        margin-bottom: 5px;
    }
    
    .cp-stats-list {
        display: none; /* Hide stats on mobile to save space */
    }
    
    .celebratory-popup-right {
        width: 100%;
        padding: 30px 20px 35px 20px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    
    .cp-right-headline {
        font-size: 20px;
    }
    
    .cp-offer-card {
        padding: 12px 15px;
    }
    
    .cp-card-title {
        font-size: 14px;
    }
    
    .cp-card-desc {
        font-size: 12px;
    }
    
    .celebratory-popup-close-btn {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    .cp-ribbon-decor-1 { top: 70px; left: 10px; width: 40px; }
    .cp-ribbon-decor-2 { top: 75px; right: 10px; width: 40px; }
}
.aleacelebratory-popup .cf7-row{
    display:flex;
    flex-wrap:wrap;
    margin:0 -8px 12px;
}

.aleacelebratory-popup .cf7-col-12{
    width:100%;
    padding:0 8px;
}

.aleacelebratory-popup .cf7-col-4{
    width:28%;
    padding:0 8px;
}

.aleacelebratory-popup .cf7-col-8{
    width:72%;
    padding:0 8px;
}

.aleacelebratory-popup .cf7-input,
.aleacelebratory-popup .cf7-textarea,
.aleacelebratory-popup .wpcf7-countrytext,
.aleacelebratory-popup .wpcf7-countrycode{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:15px 18px;
    font-size:16px;
    box-sizing:border-box;
}

.aleacelebratory-popup .select2-container--default .select2-selection--single {
    height: 40px;
background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
.aleacelebratory-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: auto;
}
.aleacelebratory-popup .cf7-btn{
    background:#0066cc;
    color:#fff;
    border:none;
    padding:15px 35px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}

.aleacelebratory-popup .cf7-btn:hover{
    background:#0052a3;
}

.aleacelebratory-popup .wpcf7-list-item{
    display:block;
    margin:0 0 12px;
}

.aleacelebratory-popup .wpcf7-list-item label{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

@media (max-width:767px){

.aleacelebratory-popup .cf7-col-4,
.aleacelebratory-popup .cf7-col-8{
    width:100%;
}

.aleacelebratory-popup .cf7-col-4{
    margin-bottom:15px;
}

.aleacelebratory-popup .cf7-btn{
    width:100%;
}

}