/* استایل‌های دلخواه برای دکمه‌ها */
.custom-btn-cta {
    font-size: 1.1rem;
    padding: 10px 20px;
    margin: 5px;
    text-decoration: none;
    background: white;
    color: black;
    border-radius: 8px;
    border: 2px solid #ddd;       /* بوردر اولیه */
    transition: all 0.3s ease;    /* افکت انتقال نرم */
    cursor: pointer;
}

.custom-btn-cta:hover {
    background: #f0f0f0;          /* تغییر رنگ پس‌زمینه در هاور */
    border-color: #aaa;           /* تغییر رنگ بوردر در هاور */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* سایه برای برجسته شدن */
}

.custom-btn-cta:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 100, 250, 0.5); /* افکت فیدبک در فوکوس */
}


     /* Custom Scrollbar for better UI */
 .custom-scrollbar::-webkit-scrollbar {
     height: 8px;
 }

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Card Column Width & Spacing for Scrolling */
.pricing-cards-wrapper {
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: -1rem;
    margin-left: -1rem;
}

.card-col-width {
    width: calc(33.333% - 2rem);
    min-width: 320px;
    max-width: 400px; /* Keeping a max-width for very wide screens */
}

@media (max-width: 991.98px) {
    .card-col-width {
        width: calc(50% - 2rem);
    }
}

@media (max-width: 767.98px) {
    .card-col-width {
        width: calc(100% - 2rem);
    }
}

/* --- Card Styling --- */
.card {
    border-radius: 1.5rem; /* Matches rounded-5 */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; /* Added border-color to transition */
    background-color: #fff; /* Ensure a clean white background */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* More pronounced shadow for better separation */
}

.card:hover {
    transform: translateY(-10px); /* More significant lift on hover */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Specific style for highlighted card (different plan) */
.pricing-card-highlight {
    border-width: 4px !important; /* Bold border for highlight */
    border-color: #4BAAB3 !important; /* Use the new color for the border */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 0 5px rgba(75, 170, 179, 0.3); /* New color for outer glow */
}
.pricing-card-highlight:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(75, 170, 179, 0.4); /* Stronger glow on hover with new color */
}

/* Header for highlighted plan (different) */
.pricing-header-custom-bg {
    background-color: #4BAAB3 !important; /* New color for card header */
}

/* Custom Primary Button (for both regular and highlighted plan buttons) */
.custom-button-primary {
    background-color: #4BAAB3 !important; /* New color for button background */
    border-color: #4BAAB3 !important; /* New color for button border */
    color: #fff !important; /* Ensure text is white */
}
.custom-button-primary:hover {
    background-color: #3a8a92 !important; /* Slightly darker shade on hover */
    border-color: #3a8a92 !important;
    transform: translateY(-2px); /* Lift effect on hover */
}

/* Section Title Styling */
.section-title {
    color: #333;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: #4BAAB3; /* New color for title underline */
    border-radius: 2px;
}

/* Price Box Styling */
.price-box .final-price span:first-child {
    color: #28a745; /* Green for final price remains */
}

/* Discount Badge */
.badge.bg-warning {
    font-weight: bold;
}

/* Plan Features List */
.plan-features .list-group-item {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee !important;
}
.plan-features .list-group-item:last-child {
    border-bottom: none !important;
}


     /* Section Title Styling (Re-used for consistency) */
 .section-title {
     color: #333;
     position: relative;
     padding-bottom: 15px;
 }
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: #4BAAB3; /* Using the specified color */
    border-radius: 2px;
}

/* --- Custom Accordion Styling (FAQ) --- */
.custom-faq-accordion .accordion-item {
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    border-radius: 16px; /* Increased border-radius for FAQ items */
}

.custom-faq-accordion .accordion-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.custom-faq-accordion .accordion-header {
    border-bottom: none;
}

.custom-faq-accordion .accordion-button {
    padding: 1rem 1.5rem;
    font-size: 1.15rem;
    color: #333;
    text-align: right;
    border-radius: 16px; /* Matches accordion-item rounded corners */
    background-color: #fff;
}

.custom-faq-accordion .accordion-button:not(.collapsed) {
    background-color: #4BAAB3;
    color: #fff;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px 16px 0 0; /* Keep top corners rounded, bottom flat */
}

.custom-faq-accordion .accordion-button.collapsed {
    background-color: #f8f9fa;
    color: #333;
    border-bottom: none;
}

.custom-faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: auto;
    transition: transform 0.3s ease-in-out, background-image 0.3s ease-in-out;
}

.custom-faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(0deg);
}

.custom-faq-accordion .accordion-body {
    padding: 1rem 1.5rem;
    border-top: none;
    color: #555;
    line-height: 1.6;
}