/* =========================================================
   DeChatura - Calculator Share Tools
   File: wwwroot/css/calculator-share-tools.css
   ========================================================= */

/* Main share tools container */
.calculator-share-tools,
.share-tools,
#calculatorShareTools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 0;
    font-family: inherit;
}

    /* Optional label */
    .calculator-share-tools .share-label,
    .share-tools .share-label,
    .calculator-share-tools > span:first-child {
        color: #475569;
        font-size: 0.875rem;
        font-weight: 600;
    }

    /* Share buttons and links */
    .calculator-share-tools button,
    .calculator-share-tools a,
    .share-tools button,
    .share-tools a,
    #calculatorShareTools button,
    #calculatorShareTools a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 38px;
        padding: 8px 13px;
        border: 1px solid #dbe3ec;
        border-radius: 8px;
        background: #ffffff;
        color: #334155;
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

        .calculator-share-tools button:hover,
        .calculator-share-tools a:hover,
        .share-tools button:hover,
        .share-tools a:hover,
        #calculatorShareTools button:hover,
        #calculatorShareTools a:hover {
            border-color: #2e8b57;
            background: #f0fdf4;
            color: #1f6f5f;
            text-decoration: none;
        }

        .calculator-share-tools button:focus-visible,
        .calculator-share-tools a:focus-visible,
        .share-tools button:focus-visible,
        .share-tools a:focus-visible,
        #calculatorShareTools button:focus-visible,
        #calculatorShareTools a:focus-visible {
            outline: 3px solid rgba(46, 139, 87, 0.25);
            outline-offset: 2px;
        }

    /* Icons */
    .calculator-share-tools svg,
    .share-tools svg,
    #calculatorShareTools svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
    }

    /* Copy link button */
    .calculator-share-tools .share-copy,
    .share-tools .share-copy,
    #calculatorShareTools .share-copy {
        border-color: #2e8b57;
        background: #2e8b57;
        color: #ffffff;
    }

        .calculator-share-tools .share-copy:hover,
        .share-tools .share-copy:hover,
        #calculatorShareTools .share-copy:hover {
            border-color: #1f6f5f;
            background: #1f6f5f;
            color: #ffffff;
        }

    /* Share feedback / status message */
    .calculator-share-tools .share-status,
    .share-tools .share-status,
    #calculatorShareTools .share-status {
        flex-basis: 100%;
        color: #475569;
        font-size: 0.8125rem;
    }

        .calculator-share-tools .share-status:empty,
        .share-tools .share-status:empty,
        #calculatorShareTools .share-status:empty {
            display: none;
        }

    /* Optional separator */
    .calculator-share-tools .share-divider,
    .share-tools .share-divider {
        width: 1px;
        height: 26px;
        background: #e2e8f0;
    }

/* Compact layouts for mobile */
@media (max-width: 576px) {
    .calculator-share-tools,
    .share-tools,
    #calculatorShareTools {
        gap: 8px;
        padding: 10px 0;
    }

        .calculator-share-tools button,
        .calculator-share-tools a,
        .share-tools button,
        .share-tools a,
        #calculatorShareTools button,
        #calculatorShareTools a {
            min-height: 36px;
            padding: 7px 10px;
            font-size: 0.8125rem;
        }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .calculator-share-tools *,
    .share-tools *,
    #calculatorShareTools * {
        transition: none !important;
    }
}