/* Calculator Component - Unique Classes to Prevent Override */

.ce-calc-wrapper {
    max-width: 968px;
    width: 100%;
    margin: 0px auto 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.ce-calc-box {
    max-width: 440px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 20px;
    position: relative;
    padding: 25px;
  box-shadow: 0px 0px 27.9px 12px #07263D4D;
    height: 597px;
    border: 1px solid #CFDEF0;
}

.ce-calc-header {
     padding-bottom:28px;
}

.ce-calc-header p {
 
font-weight: 500;
 
font-size: 20px;
 
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
padding-bottom: 8px;
color: #464860;

}

.ce-calc-header .ce-calc-header-subtitle {
 
font-weight: 450;
 
font-size: 13px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color: #7A8DA4;

}

 
.ce-calc-field {
    width: 100%;
    margin-bottom: 16px;
    position: relative;
}

.ce-calc-field-label {
    font-size: 13px;
    line-height: 100%;
    font-weight: 500;
    color: #464860;
    margin-bottom: 8px;
    display: block;
}

.ce-calc-field select,
.ce-calc-field input {
    -webkit-appearance: none;
    background: #fff;
border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px 16px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475569;
    width: 100%;
    cursor: pointer;
    height: 45px;
    outline: none;
    transition: all 0.2s ease;
}

.ce-calc-field select:hover,
.ce-calc-field input:hover,
.ce-calc-field select:focus,
.ce-calc-field input:focus {
    background: #FFFFFF;
    border-color: #3B82F6;
}

.ce-calc-field select::placeholder,
.ce-calc-field input::placeholder {
    color: #94A3B8;
}

.ce-calc-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

/* Two Column Layout for Academic Level and Deadline */
.ce-calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
   
}

/* Removed: Number of pages now uses standard dropdown style without +/- buttons */

.ce-calc-calendar-icon {
    display: none;
}

.ce-calc-field input.ce-deadline {
    padding-left: 15px;
}

.ce-calc-price-bar {
    margin: 0px 0 17px;
    padding: 13px;
    border: 1px solid #DFEDF8;
    background: #F8FCFF;
    border-radius: 12px;
}

.ce-calc-actual {
 
}

.ce-calc-actual p {

font-weight: 450;
font-style: Book;
font-size: 13px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
color: #7A8DA4;
text-align: center;
}

.ce-calc-discounted {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ce-calc-discounted span {
 
font-weight: 500;
font-style: Medium;
font-size: 33px;
leading-trim: NONE;
line-height: 140%;
letter-spacing: 0%;
color: #3179BE;
text-align: center;
vertical-align: middle;

}

.ce-calc-discounted .dynamicPrice {
 color: #3179BE;
font-weight: 500;
    position: relative;
    top: -2px;

}

.ce-price-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48.06px;
    width: 48.06px;
}

.ce-price-loader svg {
    display: block;
}

.ce-calc-price-note {
 
font-weight: 450;
font-style: Book;
text-align: center;
font-size: 13px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
color: #7A8DA4;
}

.ce-calc-btn {
    margin-top: 0;
}

.ce-calc-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 41px;
    background: #3179BE;
    border-radius: 10px;
    padding: 0px 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.ce-calc-btn a::after {
    content: '';
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 8.5H12.5M12.5 8.5L8.75 4.75M12.5 8.5L8.75 12.25' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.2s ease;
    display: inline-block;
}

.ce-calc-btn a:hover {
    background: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0px 4px 16px rgba(59, 130, 246, 0.25);
}

.ce-calc-btn a:hover::after {
    transform: translateX(4px);
}

.ce-calc-note {
    display: none;
}

.ce-calc-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E8EDF5;
}

.ce-calc-badge {
    display: flex;
    align-items: center;
    gap: 6px;
   
font-weight: 450;
font-style: Book;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
color: #778CA6;

}

.ce-calc-badge svg {
    width: 16px;
    height: 16px;
    color: #10B981;
}

/* Calculator Includes Section */

.ce-calc-includes {
    max-width: 560px;
    width: 100%;
}

.ce-calc-includes-head {
    font-family: 'CircularStd';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #213D56;
    margin-bottom: 20px;
}

.ce-calc-service {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #E7EEF9;
}

.ce-calc-service.first-child {
    border-top: 1px solid #E7EEF9;
}

.ce-calc-service-name p {
    font-family: 'CircularStd';
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 18px;
    color: #546B8E;
}

.ce-calc-service-price {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ce-calc-was {
    font-family: 'CircularStd';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-decoration: line-through;
    color: #9DB9DB;
}

.ce-calc-free {
    font-family: 'CircularStd';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #00B646;
}

/* Addons Section */

.ce-calc-addons {
    margin-top: 32px;
}

.ce-calc-addons-head {
    font-family: 'CircularStd';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #213D56;
    margin-bottom: 16px;
}

.ce-calc-addons-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ce-calc-addon-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ce-calc-addon-item::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #233F8C;
    border-radius: 50%;
    flex-shrink: 0;
}

.ce-calc-addon-item span {
    font-family: 'CircularStd';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #546B8E;
}

/* Dropdown Icon */
.ce-calc-field select {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0262 13.3332C9.92136 13.3338 9.8174 13.3128 9.72032 13.2713C9.62324 13.2299 9.53494 13.1688 9.46049 13.0916L4.67965 8.09418C4.52961 7.93734 4.44531 7.72462 4.44531 7.50282C4.44531 7.28101 4.52961 7.06829 4.67965 6.91145C4.82969 6.75462 5.03319 6.6665 5.24538 6.6665C5.45757 6.6665 5.66107 6.75462 5.81111 6.91145L10.0262 11.3259L14.2413 6.91978C14.3938 6.78333 14.5898 6.71203 14.7904 6.72013C14.9909 6.72822 15.1811 6.81512 15.323 6.96346C15.465 7.11179 15.5481 7.31064 15.5558 7.52026C15.5636 7.72989 15.4954 7.93484 15.3648 8.09418L10.584 13.0916C10.4356 13.2455 10.2353 13.3322 10.0262 13.3332Z' fill='%2364748B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* Dropdown Chevron for Custom Inputs */
.ce-calc-field input.ce-dropdown-chevron {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0262 13.3332C9.92136 13.3338 9.8174 13.3128 9.72032 13.2713C9.62324 13.2299 9.53494 13.1688 9.46049 13.0916L4.67965 8.09418C4.52961 7.93734 4.44531 7.72462 4.44531 7.50282C4.44531 7.28101 4.52961 7.06829 4.67965 6.91145C4.82969 6.75462 5.03319 6.6665 5.24538 6.6665C5.45757 6.6665 5.66107 6.75462 5.81111 6.91145L10.0262 11.3259L14.2413 6.91978C14.3938 6.78333 14.5898 6.71203 14.7904 6.72013C14.9909 6.72822 15.1811 6.81512 15.323 6.96346C15.465 7.11179 15.5481 7.31064 15.5558 7.52026C15.5636 7.72989 15.4954 7.93484 15.3648 8.09418L10.584 13.0916C10.4356 13.2455 10.2353 13.3322 10.0262 13.3332Z' fill='%2364748B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* Dropdown Menu Styling */
.ce-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0px 4px 16px rgba(15, 23, 42, 0.1);
    list-style: none;
    padding: 8px 0;
}

.ce-dropdown-menu li {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ce-dropdown-menu li:hover {
    background: #F1F5F9;
}

.ce-dropdown-menu li.selected {
    background: #EFF6FF;
    color: #3B82F6;
    font-weight: 500;
}

/* Input Wrapper for Dropdown */
.ce-input-wrapper {
    position: relative;
    width: 100%;
}

/* Grouped Dropdown Styles */
.ce-dropdown-group-header {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
    background: transparent !important;
    cursor: default !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
 
    margin-bottom: 4px !important;
}

.ce-dropdown-group-header:hover {
    background: transparent !important;
}

.ce-group-icon {
    font-size: 14px;
    display: inline-block;
}

.ce-dropdown-group-item {
    padding: 10px 16px 10px 32px !important;
    font-size: 14px;
    line-height: 20px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ce-dropdown-group-item:hover {
    background: #F1F5F9 !important;
}

.ce-dropdown-group-item.selected {
    background: #EFF6FF !important;
    color: #3B82F6 !important;
    font-weight: 500 !important;
}

/* Active/Open State - Arrow Up */
.ce-input-wrapper.active .ce-dropdown-chevron,
.ce-dropdown-menu:not([style*="display: none"]) ~ .ce-input-wrapper .ce-dropdown-chevron {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0262 6.66683C9.92136 6.66622 9.8174 6.68718 9.72032 6.72865C9.62324 6.77012 9.53494 6.83124 9.46049 6.90837L4.67965 11.9058C4.52961 12.0627 4.44531 12.2754 4.44531 12.4972C4.44531 12.719 4.52961 12.9317 4.67965 13.0886C4.82969 13.2454 5.03319 13.3335 5.24538 13.3335C5.45757 13.3335 5.66107 13.2454 5.81111 13.0886L10.0262 8.67411L14.2413 13.0802C14.3938 13.2167 14.5898 13.288 14.7904 13.2799C14.9909 13.2718 15.1811 13.1849 15.323 13.0365C15.465 12.8882 15.5481 12.6894 15.5558 12.4797C15.5636 12.2701 15.4954 12.0652 15.3648 11.9058L10.584 6.90837C10.4356 6.75454 10.2353 6.66778 10.0262 6.66683Z' fill='%2364748B'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;


}

/* No icon for specific inputs */
.ce-no-icon {
    background-image: none !important;
    padding-right: 16px !important;
}

/* Responsive Styles */

@media (max-width: 992px) {
    .ce-calc-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .ce-calc-box,
    .ce-calc-includes {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .ce-calc-header {
        padding: 0;
    }

    .ce-calc-header p {
        font-size: 20px;
        line-height: 28px;
    }

    .ce-calc-form {
        padding:0;
    }

    .ce-calc-box {
        max-width: 100%;
        padding: 20px 15px 20px;
        border-radius: 20px;
        height: auto;
    }

    .ce-calc-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ce-calc-badges {
 
        gap: 12px;
    }
}