/**
 * Pricing Page Styles
 */

.bg-gradient-pro {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%);
}

/* Pro plan button hover effect - white to grey */
.bg-gradient-pro .btn-white {
    transition: all 0.2s ease;
}

.bg-gradient-pro .btn-white:hover {
    background-color: #f3f4f6 !important;
    border-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Pricing card geometric decorations - positioned in upper right */
.pricing-decoration {
    position: absolute;
    pointer-events: none;
}

/* Free Plan - Circles */
.pricing-decoration-free-1 {
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: #FF7DFF;
    border-radius: 50%;
    opacity: 0.2;
}

.pricing-decoration-free-2 {
    top: 10px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #B172FF;
    border-radius: 50%;
    opacity: 0.2;
}

/* Team Plan - Hexagons */
.pricing-decoration-team-1 {
    top: -35px;
    right: -35px;
    width: 110px;
    height: 110px;
    background: #E17AFF;
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    transform: rotate(10deg);
    opacity: 0.2;
}

.pricing-decoration-team-2 {
    top: 15px;
    right: 15px;
    width: 65px;
    height: 65px;
    background: #36D6FF;
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    transform: rotate(-15deg);
    opacity: 0.25;
}

/* Enterprise Plan - Triangles */
.pricing-decoration-enterprise-1 {
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.25);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(15deg);
}

.pricing-decoration-enterprise-2 {
    top: 20px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.35);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(45deg);
}