/*
 * Calculator Widget Styles
 * Based on original calculator design with widget-specific adaptations
 */

/* Widget Container */
.calculator-widget-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    position: relative;
    z-index: 1;
    min-height: 500px;
}

/* Welcome Section */
.widget-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #E4E6EA;
    margin-bottom: 30px;
}

.widget-welcome-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
    max-width: 608px;
}

.widget-welcome-image {
    flex-shrink: 0;
    margin-left: 20px;
    max-width: 136px;
    height: auto;
}

/* Typography */
.widget-h3 {
}

.widget-h4 {
    font-size: 32px;
    font-weight: 600;
}

.widget-text {
}

.widget-small {
}

/* Calculator Section */
.widget-calculator-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 64px;
    margin-bottom: 64px;
}

.widget-calculator-section p {
    text-align: center;
}

.widget-calculator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FBFBFF;
    padding: 44px;
    border-radius: 24px;
    gap: 64px;
}

.widget-form {
    flex: 1;
    width: 100%;
    max-width: 100%;
}

.widget-chart {
    flex: 1;
    max-width: 527px;
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
}

/* Form Input Groups */
.widget-input-group {
    text-align: left;
    margin-bottom: 23px;
}

.widget-label {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.5px;
    color: #2D2C2C;
}

.widget-input-group p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.widget-input-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.widget-value {
    border: 1px solid #E9EFFF;
    min-width: 74px;
    padding: 7px 8px;
    border-radius: 6px;
    color: #151414;
    text-align: center;
}

/* Range Slider Styling */
.widget-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 5px;
    background: #E9EFFF;
    outline: none;
    align-items: center;
    flex: 1;
    padding-bottom: 8px;
}

.widget-slider::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 6px;
    background: transparent;
}

.widget-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #fff;
    background-color: var(--thumb-color, #ccc);
}

.widget-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #fff;
    background-color: var(--thumb-color, #ccc);
}

/* Chart Visualization */
.widget-bar-container {
    width: 70%;
    display: flex;
    position: relative;
}

.widget-total-bar {
    position: relative;
    width: 124px;
    height: 624px;
    margin-top: 80px;
    margin-bottom: 80px;
    overflow: hidden;
    display: flex;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #D4E0FD;
    background-color: #F4F7FF;
}

.widget-bar {
    width: 100%;
    height: 0;
    transition: height 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Category-specific bar colors */
.widget-bar.networks-bar,
.widget-bar[data-category="networks"] {
    position: relative;
    z-index: 2;
}

.widget-bar.meetings-bar,
.widget-bar[data-category="meetings"] {
    background: #62A0FF;
    position: relative;
    z-index: 2;
}

.widget-bar.streaming-bar,
.widget-bar[data-category="streaming"] {
    background: #FFCE6A;
    position: relative;
    z-index: 2;
}

.widget-bar.games-bar,
.widget-bar[data-category="games"] {
    background: #48EC86;
    position: relative;
    z-index: 2;
}

.widget-bar.messaging-bar,
.widget-bar[data-category="messaging"] {
    background: #FF5A6F;
    position: relative;
    z-index: 2;
}

.widget-bar.other-bar,
.widget-bar[data-category="other"] {
    background: #D994D3;
    position: relative;
    z-index: 2;
}

/* Data Display and Tooltip */
.widget-data-display {
    position: relative;
    width: 100%;
}

.widget-data-tooltip {
    position: absolute;
    right: -30px;
    top: 10%;
    border-radius: 8px;
    min-width: 216px;
    padding: 28px 16px;
    background-color: #FFFFFF;
    border: 2px solid #BFD1FC;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.widget-data-tooltip::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% - 0.5em - -4px);
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border-left: 2px solid #BFD1FC;
    border-bottom: 2px solid #BFD1FC;
    transform: rotate(45deg);
}

.widget-data-amount {
    font-weight: 500;
    font-size: 128px;
    line-height: 101px;
    letter-spacing: -0.5px;
    vertical-align: bottom;
    max-height: 104px;
}

.widget-data-amount small {
    font-weight: 500;
    font-size: 64px;
    line-height: 64px;
    letter-spacing: -0.5px;
    vertical-align: bottom;
}

.widget-data-unit {
    font-weight: 500;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: center;
    vertical-align: bottom;
    width: 100%;
}

.widget-data-label {
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0px;
}

/* Buttons */
.widget-buttons {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin: 0 auto 20px auto;
    margin-bottom: 32px;
    margin-top: 64px;
    max-width: 657px;
}

.widget-btn {
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 290px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-btn:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

.widget-btn-reset {
    color: #2865F3;
    border: 1px solid #2865F3;
    background-color: #ffffff;
}

.widget-btn-reset::before {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2 4.4125C10.2 4.4125 11.0374 4 8 4C6.9122 4 5.84884 4.32257 4.94437 4.92692C4.0399 5.53126 3.33495 6.39025 2.91866 7.39524C2.50238 8.40023 2.39346 9.5061 2.60568 10.573C2.8179 11.6399 3.34173 12.6199 4.11091 13.3891C4.8801 14.1583 5.86011 14.6821 6.92701 14.8943C7.9939 15.1065 9.09977 14.9976 10.1048 14.5813C11.1098 14.1651 11.9687 13.4601 12.5731 12.5556C13.1774 11.6512 13.5 10.5878 13.5 9.5' stroke='%232865F3' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M8.5 1L11.5 4L8.5 7' stroke='%232865F3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

.widget-btn-primary {
    background: #2865F3;
    color: #FFFFFF;
    border: 1px solid #2865F3;
    min-width: 310px;
}

.widget-btn-primary::after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.85106 3L13 8M13 8L7.85106 13M13 8H2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    margin-left: 8px;
    width: 16px;
    height: 16px;
}

/* Results Section */
.widget-results {
    display: none;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 20px;
    margin-top: 20px;
    border-left: 4px solid #2865F3;
}

.widget-results-content {
    text-align: center;
}

.widget-results-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin: 0 0 15px 0;
}

.widget-usage-breakdown {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    font-size: 16px;
    font-weight: 600;
}

.widget-weekly,
.widget-monthly {
    background: white;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.widget-disclaimer {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin: 10px 0 0 0;
}

@media (max-width: 1200px) {
    .widget-data-amount {
        font-size: 80px;
        line-height: 75px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .calculator-widget-container {
        padding: 15px;
        border-radius: 0;
        box-shadow: none;
    }
    
    .widget-welcome {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .widget-welcome-image {
        display: none;
    }
    
    .widget-h3 {
    }
    
    .widget-h4 {
        font-size: 24px;;
    }
    
    .widget-text {
    }
    
    .widget-calculator {
        flex-direction: column;
        padding: 23px;
        gap: 48px;
    }
    
    .widget-chart {
        width: 100%;
        max-width: 100%;
    }
    
    .widget-total-bar {
        height: 468px;
        width: 93px;
        margin-top: 45px;
        margin-bottom: 20px;
    }
    
    .widget-data-tooltip {
        right: 0px;
        padding: 20px;
        min-width: 0;
    }

    .widget-data-tooltip::before {
        top: 40%;
        right: calc(100% - 0.5em);
    }
    
    .widget-data-amount {
        font-size: 52px;
        line-height: 46px;
    }
    
    .widget-data-amount small {
        font-size: 32px;
        line-height: 32px;
        padding-right: 12px;
    }

    .widget-data-unit {
        font-size: 18px;
        line-height: 21px;
    }

    .widget-data-label {
        font-size: 16px;
        line-height: 20px;
    }
    
    .widget-buttons {
        flex-direction: column;
        gap: 17px;
        font-size: 18px;
        align-items: center;
    }
    
    .widget-btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    
    .widget-usage-breakdown {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .widget-input-container {
        gap: 10px;
    }
    
    .widget-value {
        min-width: 60px;
        padding: 5px 6px;
        font-size: 12px;
    }
    
    .widget-data-tooltip {
        padding: 16px 10px;
        font-size: 12px;
    }
}

/* Widget-specific overrides for different sidebar widths */
.widget-area .calculator-widget-container {
    margin-bottom: 20px;
}

.sidebar .calculator-widget-container {
    font-size: 14px;
}

.sidebar {
    font-size: 18px;
}

.sidebar .widget-calculator {
    flex-direction: column;
    gap: 30px;
    padding: 20px;
}

.sidebar .widget-total-bar {
    height: 200px;
}

.sidebar .widget-data-tooltip {
    padding: 15px 10px;
    min-width: 0;
    right: -100px;
}

.sidebar .widget-buttons {
    flex-direction: column;
    gap: 10px;
}

.sidebar .widget-btn {
    min-width: 0;
    width: 100%;
}

/* Print Styles */
@media print {
    .calculator-widget-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .widget-buttons {
        display: none;
    }
    
    .widget-results {
        display: block !important;
    }
}