/* ===================================================================
   PRICING PAGE STYLES
   - Comprehensive stylesheet for TalentzQ pricing page
   - Organized by sections and responsive breakpoints
=================================================================== */

/* ===================================================================
   SECTION: PRICING HERO STYLES
   - Main hero section with title and description
=================================================================== */

section.pricing_hero_section {
    padding: 80px 0 0 0;
}
 .dis-none{
        display: block ;
    }

h1.pricing_hero_title {
    text-align: center;
    color: var(--color-heading);
}

p.pricing_hero_descp.body {
    margin: 12px 0 24px 0;
    text-align: center;
}

/* ===================================================================
   SECTION: PRICING PLAN CARDS
   - Individual pricing plan styling and layout
=================================================================== */

/* Plan Header Styles */
.pricing-title.starter {
    border-radius: 16px 0px 0px 0px;
    border-top: 1px solid var(--Stroke, #DEDDE1);
    border-bottom: 1px solid var(--Stroke, #DEDDE1);
    background: var(--Light-Bg, #F8F7F8);
    padding: 24px;
}

h6.pricing-title.corporate {
    border-radius: 0;
    border-top: 1px solid var(--Stroke, #DEDDE1);
    border-bottom: 1px solid var(--Stroke, #DEDDE1);
    background: var(--Light-Bg, #F8F7F8);
    padding: 24px;
    border-radius: 16px 0px 0px 0px;
    border-left: 1px solid var(--Stroke, #DEDDE1);
}
.pricing-content_mid{
    border-left: 1px solid var(--Stroke, #DEDDE1);
}

select#companySize {
    overflow: hidden !important;
    outline: none !important;
}

h6.pricing-title.enterprise {
    border-radius: 0 12px 0 0;
    border-bottom: 1px solid var(--Stroke, #DEDDE1);
    border-top: 1px solid var(--Stroke, #DEDDE1);
    border-right: 1px solid var(--Stroke, #DEDDE1);
    background: var(--Light-Bg, #F8F7F8);
    padding: 24px;
}

/* Plan Content Styles */
.pricing-content_mid {
    padding: 24px;
}

/* Plan Card Borders */
.col-md-6.pricing-plan.corp_desk {
    border-left: 1px solid var(--Stroke, #DEDDE1);
    border-right: 1px solid var(--Stroke, #DEDDE1);
    border-radius: 16px 0px 0px 0px;
}

.col-md-4.pricing-plan.start_desk {
    border-left: 1px solid var(--Stroke, #DEDDE1);
    border-radius: 16px 0px 0px 0px;
}

/* Price Display */
.pricing-price {
    display: flex;
    align-items: end;
    gap: 12px;
}

.pricing-plan:last-child {
    border-right: none;
}

/* ===================================================================
   SECTION: PRICING COMPONENTS
   - Company size selector, pricing elements, and buttons
=================================================================== */

/* Company Size Selector */
.pricing-size-box {
    padding: 16px;
    border-radius: 12px;
    background: var(--Stroke, #DEDDE1);
    margin: 8px 0 16px 0;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Dropdown Styles */
.pricing-dropdown select {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px;
    font-size: 0.95rem;
}

.dropdown-arrow {
    color: #6c31c2;
}

/* Enterprise Plan Layout */
.last_interprise {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--Stroke, #DEDDE1);
    gap: 145px;
}

.last_interprise_top {
    padding: 24px;
}

p.pricing-per-enterprise.small-body {
    padding: 0 24px 20px 24px;
}

/* Add Button Styling */
.pricing-add-btn {
    margin: 17px 0;
    padding: 4px 16px;
    color: #333;
    border-radius: 8px;
    background: var(--Light-Bg, #F8F7F8);
    margin-bottom: 20px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contact Button Section */
.pricing-contact {
    background: var(--Light-Bg, #F8F7F8);
    padding: 20px 24px;
    border-width: 0px 0px 0px 1px;
    border-style: solid;
    border-color: var(--Stroke, #DEDDE1);
}

.pricing-contact-btn {
    display: block;
    width: 100%;
    border-radius: 16px;
    background: var(--CTA-BG, #340C97);
    padding: 16px 24px;
    color: white;
    text-align: center;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pricing-contact-btn:hover {
    background: var(--Icon-Color, #733BFD);
    color: white;
    text-decoration: none;
}

/* ===================================================================
   SECTION: FEATURES COMPARISON TABLE
   - Table showing feature differences between plans
=================================================================== */

/* Features Table Container */
.pricing-features {
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    border: 1px solid #eee;
}
.pricing-plan.corp_desk{
    border-right: 1px solid var(--Stroke, #DEDDE1);
}

/* Feature Row Styles */
.pricing-feature-row {
    display: flex;
    border-bottom: 1px solid #eee;
}

.pricing-feature-row:last-child {
    border-bottom: none;
}

/* Feature Cells */
.pricing-feature-cell {
    flex: 1;
    padding: 15px;
    text-align: left;
    color: #666;
    border-right: 1px solid #eee;
    padding-left: 24px;
}

.pricing-feature-cell:last-child {
    border-right: none;
}

.pricing-feature-cell.empty {
    border: none !important;
}

/* Feature Titles */
.pricing-feature-title {
    flex: 1;
    padding: 15px;
    text-align: left;
    font-weight: 500;
    color: #333;
    background-color: #f9f9f9;
    border-right: 1px solid #eee;
}

/* Feature Header Row */
.pricing-feature-header {
    background-color: #fff;
    font-weight: 600;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* ===================================================================
   SECTION: PRICING UTILITIES
   - Icons, badges, and utility elements
=================================================================== */

/* Check and Cross Icons */
.check-icon {
    color: #2ecc71;
    font-size: 1.2rem;
}

.cross-icon {
    color: #e74c3c;
    font-size: 1.2rem;
}

.pricing-icon {
    margin-right: 5px;
}

/* User Icon */
.user-icon {
    margin-right: 5px;
    vertical-align: middle;
}

/* Plus Symbol */
.plus-symbol {
    font-size: 1.5rem;
    font-weight: 300;
    color: #555;
}

/* Info Badge */
.pricing-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #f0ad4e;
    color: white;
    font-size: 0.7rem;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    margin-left: 5px;
}

/* Per Candidate Pricing Display */
p.pricing-per-candidate {
    display: flex;
}

/* ===================================================================
   SECTION: PRICING LAYOUT CONTAINERS
   - Layout and positioning for pricing tables
=================================================================== */

/* Main Pricing Starter Container */
.pricing_starter {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0px;
}

/* Let's Talk Section */
.lets-talk {
    text-align: center;
    padding: 20px;
    color: #555;
    margin: 20px 0;
}

/* ===================================================================
   SECTION: ADD-ONS SECTION
   - Additional services and pricing cards
=================================================================== */

section.pricing_addon_section {
    padding: 80px 0;
    background: var(--White, #FFF);
}

h1.pricing_addon_title {
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-heading);
}

/* Add-ons Grid Layout */
.pricing_addon_desktop {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    gap: 32px;
}

/* Individual Add-on Cards */
.pricing_addon_card {
    border-radius: 16px;
    border: 1px solid #ECEAF0;
    background: #FFF;
    box-shadow: 0px 0px 40px 0px rgba(211, 204, 229, 0.20);
    padding: 32px;
}

p.pricing_addon_card_title.big-body {
    padding: 24px 0 12px 0;
}

/* ===================================================================
   RESPONSIVE STYLES
   - Mobile and tablet responsive adjustments
=================================================================== */

/* ===================================================================
   MOBILE STYLES (max-width: 575.98px)
=================================================================== */

@media (max-width: 575.98px) {
    /* Hero Section Mobile */
    section.pricing_hero_section {
        padding: 40px 0 0 0;
    }
    .dis-none{
        display: none;
    }
    p.pricing_hero_descp.body {
        margin: 12px 0 0px 0;
    }

    /* Layout Visibility */
    .desktop_pricing-features {
        display: none;
    }
    
    .mobile_pricing-features {
        display: block;
    }

    /* Plan Layout Mobile */
    .col-md-4 {
        width: 100%;
    }

    .col-md-4.pricing-plan {
        border-left: 1px solid var(--Stroke, #DEDDE1);
        border-right: 1px solid var(--Stroke, #DEDDE1) !important;
        border-radius: 16px 16px 0 0;
        margin-top: 24px;
    }

    /* Plan Titles Mobile */
    .pricing-title.starter {
        border-radius: 16px 16px 0px 0px;
        padding: 20px 24px;
    }
    
    .h6.pricing-title.corporate, 
    h6.pricing-title.corporate, 
    h6.pricing-title.enterprise {
        border-radius: 16px 16px 0px 0px;
        padding: 20px 24px;
    }

    /* Enterprise Plan Mobile */
    .last_interprise {
        gap: 0px;
    }

    /* Container Positioning Mobile */
    .pricing_starter {
        margin-left: 0px;
    }

    /* Add-ons Section Mobile */
    section.pricing_addon_section {
        padding: 40px 0;
    }
    
    h1.pricing_addon_title {
        margin-bottom: 24px;
    }
    
    .pricing_addon_desktop {
        grid-template-columns: 1fr;
        display: grid;
        gap: 16px;
    }
}

/* ===================================================================
   TABLET STYLES (min-width: 768px)
=================================================================== */

@media only screen and (min-width: 768px) {
    /* Layout Visibility */
    .mobile_pricing-features {
        display: none;
    }
    
    /* Add-ons Grid Tablet */
    .pricing_addon_desktop {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 24px;
    }
    
    /* Container Positioning Tablet */
    .pricing_starter {
        margin-left: 0px;
    }
}

/* ===================================================================
   MEDIUM DESKTOP STYLES (992px - 1199.98px)
=================================================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Add-ons Grid Medium Desktop */
    .pricing_addon_desktop {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
    
    /* Container Positioning Medium Desktop */
    .pricing_starter {
        margin-left: 0px;
    }
}

/* ===================================================================
   LARGE DESKTOP STYLES (1200px - 1439.98px)
=================================================================== */

@media (min-width: 1200px) and (max-width: 1439.98px) {
    /* Add-ons Grid Large Desktop */
    .pricing_addon_desktop {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
    
    /* Container Positioning Large Desktop */
    .pricing_starter {
        margin-left: 0px;
    }
}

/* ===================================================================
   EXTRA LARGE DESKTOP STYLES (min-width: 1440px)
=================================================================== */

@media (min-width: 1440px) {
    /* Add-ons Grid Extra Large Desktop */
    .pricing_addon_desktop {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
    
    /* Container Positioning Extra Large Desktop */
    .pricing_starter {
        margin-left: 0px;
    }
}