/**
 * Ubitto Landing Pages v2.0 - Full Width & Unique Styles
 * Updated with new color palette
 */

/* ============================================
   FULL WIDTH OVERRIDE
   ============================================ */

.ubitto-page {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Remove BuddyBoss theme padding/margins for landing pages */
.page-template-page-ubitto-home #primary,
.page-template-page-ubitto-home-v2 #primary,
.page-template-page-for-educators #primary,
.page-template-page-for-learners #primary,
.page-template-page-for-institutes #primary,
.page-template-page-for-experience-makers #primary {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-template-page-ubitto-home .site-main,
.page-template-page-ubitto-home-v2 .site-main,
.page-template-page-for-educators .site-main,
.page-template-page-for-learners .site-main,
.page-template-page-for-institutes .site-main,
.page-template-page-for-experience-makers .site-main {
    padding: 0 !important;
}

/* Hide sidebar for landing pages */
.page-template-page-ubitto-home .bb-grid-cell + .bb-grid-cell,
.page-template-page-ubitto-home-v2 .bb-grid-cell + .bb-grid-cell,
.page-template-page-for-educators .bb-grid-cell + .bb-grid-cell,
.page-template-page-for-learners .bb-grid-cell + .bb-grid-cell,
.page-template-page-for-institutes .bb-grid-cell + .bb-grid-cell,
.page-template-page-for-experience-makers .bb-grid-cell + .bb-grid-cell {
    display: none;
}


/* ============================================
   FOR EDUCATORS - Warm Professional Theme
   ============================================ */

.page-template-page-for-educators {
    background: #FFF8F0;
}

.page-template-page-for-educators .ubitto-hero {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 50%, #FFD166 100%) !important;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    padding-bottom: 120px !important;
}

.page-template-page-for-educators .ubitto-card {
    background: white;
    border-left: 4px solid #FF6B6B;
    box-shadow: 0 10px 40px rgba(255, 107, 107, 0.15);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.page-template-page-for-educators .ubitto-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(255, 107, 107, 0.25);
}

.page-template-page-for-educators .ubitto-btn-accent {
    background: linear-gradient(135deg, #FF6B6B, #FFD166);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
}

.page-template-page-for-educators [data-plan-card] {
    border-top: 6px solid #FF6B6B;
}

.page-template-page-for-educators .ubitto-section:nth-child(even) {
    background: linear-gradient(135deg, #FFF8F0 0%, #ffffff 100%);
}


/* ============================================
   FOR LEARNERS - Playful Fun Theme (Updated with new primary)
   ============================================ */

.page-template-page-for-learners {
    background: #F0F9FF;
}

.page-template-page-for-learners .ubitto-hero {
    background: linear-gradient(135deg, #4B9EFF 0%, #06B6D4 50%, #8B5CF6 100%) !important;
    clip-path: ellipse(120% 100% at 50% 0%);
    padding-bottom: 150px !important;
}

.page-template-page-for-learners .ubitto-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(75, 158, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.page-template-page-for-learners .ubitto-card:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 12px 40px rgba(75, 158, 255, 0.2);
}

.page-template-page-for-learners .ubitto-card::before {
    content: '✨';
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 3rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-template-page-for-learners .ubitto-card:hover::before {
    opacity: 1;
}

.page-template-page-for-learners [style*="background: var(--ubitto-primary)"] {
    background: linear-gradient(135deg, #4B9EFF, #8B5CF6) !important;
    box-shadow: 0 4px 15px rgba(75, 158, 255, 0.4);
}

.page-template-page-for-learners .ubitto-section:nth-child(odd) {
    background: white;
    border-radius: 50% 50% 0 0 / 30px 30px 0 0;
    margin-top: -30px;
}


/* ============================================
   FOR INSTITUTES - Corporate Theme (Updated with accent)
   ============================================ */

.page-template-page-for-institutes {
    background: #F8FAFC;
}

.page-template-page-for-institutes .ubitto-hero {
    background: linear-gradient(135deg, #073B4C 0%, #0A5168 50%, #1E293B 100%) !important;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    padding-bottom: 150px !important;
}

.page-template-page-for-institutes .ubitto-card {
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(7, 59, 76, 0.08);
    transition: all 0.3s ease;
}

.page-template-page-for-institutes .ubitto-card:hover {
    border-color: #4B9EFF;
    box-shadow: 0 12px 50px rgba(7, 59, 76, 0.15);
}

.page-template-page-for-institutes .ubitto-grid-3 > div {
    position: relative;
    padding-left: 20px;
}

.page-template-page-for-institutes .ubitto-grid-3 > div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #4B9EFF, #073B4C);
}

.page-template-page-for-institutes .ubitto-section:nth-child(even) {
    background-image:
        linear-gradient(rgba(226, 232, 240, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
    background-size: 50px 50px;
    background-color: #F8FAFC;
}


/* ============================================
   FOR EXPERIENCE MAKERS - Creative Theme (Updated with secondary)
   ============================================ */

.page-template-page-for-experience-makers {
    background: #FFFBEB;
}

.page-template-page-for-experience-makers .ubitto-hero {
    background: linear-gradient(135deg, #FFD166 0%, #F59E0B 50%, #FF8E53 100%) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
    padding-bottom: 120px !important;
    position: relative;
}

.page-template-page-for-experience-makers .ubitto-hero::after {
    content: '✨🎨🌟';
    position: absolute;
    font-size: 4rem;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    50% { transform: translateY(-60%) rotate(5deg); }
}

.page-template-page-for-experience-makers .ubitto-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(255, 209, 102, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.page-template-page-for-experience-makers .ubitto-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #FFD166, #F59E0B, #FF8E53);
}

.page-template-page-for-experience-makers .ubitto-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 209, 102, 0.25);
}

.page-template-page-for-experience-makers [data-plan-card] {
    border: 3px solid transparent;
    background-image: linear-gradient(white, white),
                      linear-gradient(135deg, #FFD166, #FF8E53);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.page-template-page-for-experience-makers .ubitto-section:nth-child(even) {
    background: #FFFBEB;
    position: relative;
}

.page-template-page-for-experience-makers .ubitto-section:nth-child(even)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 209, 102, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 142, 83, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
    pointer-events: none;
}


/* ============================================
   RESPONSIVE - Mobile Optimizations
   ============================================ */

@media (max-width: 768px) {
    .ubitto-page {
        margin-left: -50vw;
        margin-right: -50vw;
    }

    .page-template-page-for-educators .ubitto-hero,
    .page-template-page-for-learners .ubitto-hero,
    .page-template-page-for-institutes .ubitto-hero,
    .page-template-page-for-experience-makers .ubitto-hero {
        clip-path: none;
        padding-bottom: 60px !important;
    }
}