/* ==========================================================
   TOOLS
========================================================== */

:root {
    --tool-max-width: 760px;
    --tool-card-padding: 40px;
    --tool-gap: 24px;
    --tool-section-gap: 32px;
    --tool-radius: 18px;
    --tool-border: #E6EAF0;
    --tool-background: #FFFFFF;
    --tool-text: #0F172A;
    --tool-text-light: #64748B;
    --tool-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 18px 48px rgba(15, 23, 42, .10);
    --tool-transition: 0.2s ease;
    --tool-primary: #1E9E8C;
    --tool-primary-dark: #167D71;
}
/* ==========================================================
   PAGE
========================================================== */

.tool-page {

    max-width: var(--tool-max-width);

    margin: 0 auto;

    padding: 100px 24px;

}
/* ==========================================================
   HEADER
========================================================== */

.tool-header {

    text-align: center;

    margin-bottom: 56px;

}

.tool-breadcrumb {

    display: inline-flex;

    gap: 10px;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    font-size: 0.9rem;

    color: var(--tool-text-light);

}

.tool-breadcrumb a {

    color: inherit;

    text-decoration: none;

}

.tool-breadcrumb a:hover {

    color: var(--primary);

}

.tool-header h1 {

    margin: 0;

    font-size: 3rem;

    line-height: 1.1;

    font-weight: 700;

    color: #fff;

}

.tool-subtitle {

    max-width: 620px;

    margin: 20px auto 0;

    font-size: 1.1rem;

    line-height: 1.8;

    color: var(--tool-text-light);

}
/* ==========================================================
   CARD
========================================================== */

.tool-card {
    backdrop-filter: blur(8px);
    background: var(--tool-background);
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius);
    padding: var(--tool-card-padding);
    box-shadow:
            0 1px 2px rgba(15, 23, 42, .04),
            0 24px 64px rgba(15, 23, 42, .10);
}

/* ==========================================================
   INPUTS
========================================================== */

.tool-section {
    margin-bottom: var(--tool-section-gap);
}

.tool-label {
    display: block;
    margin-bottom: 12px;

    font-size: 0.95rem;
    font-weight: 600;

    color: var(--tool-text);
}

.tool-input-group {
    display: flex;
    align-items: center;

    height: 56px;

    border: 1px solid var(--tool-border);
    border-radius: 14px;

    background: #F8FAFC;

    overflow: hidden;

    transition: border-color var(--tool-transition),
        box-shadow var(--tool-transition);
}

.tool-input-group:focus-within {

    border-color: #4F8EF7;

    box-shadow: 0 0 0 4px rgba(79, 142, 247, .12);

}

.tool-prefix {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 100%;

    font-size: 1.15rem;
    font-weight: 600;

    color: var(--tool-text-light);

    border-right: 1px solid var(--tool-border);

    background: #F1F5F9;
}

.tool-input {

    flex: 1;

    height: 100%;

    padding: 0 18px;

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 1.1rem;
    font-weight: 500;

    color: var(--tool-text);
}

.tool-input::placeholder {

    color: #94A3B8;

}
/* ==========================================================
   GST RATE
========================================================== */

.tool-pills {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.tool-pill {

    min-width: 54px;

    height: 42px;

    padding: 0 18px;
    
    border: 1px solid #E5E7EB;
    
    box-shadow:
        0 2px 8px rgba(15, 23, 42, .03);

    border-radius: 999px;

    background: #fff;

    color: var(--tool-text);

    font-size: .95rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--tool-transition),
        color var(--tool-transition),
        border-color var(--tool-transition),
        transform var(--tool-transition);

}

.tool-pill:hover {

    border-color: #CBD5E1;

    background: #F8FAFC;

    transform: translateY(-1px);
    
        box-shadow:
            0 6px 18px rgba(15, 23, 42, .08);

}

.tool-pill.active {
    background: linear-gradient(135deg, var(--tool-primary), var(--tool-primary-dark));
    
    color: #fff;

    border: none;

    box-shadow:
        0 10px 24px rgba(30, 158, 140, .30);
}

.tool-pill:active {

    transform: scale(.97);

}
/* ==========================================================
   CALCULATION MODE
========================================================== */

.tool-options {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

}

.tool-option {
    background: #F8FAFC;

    border: 1px solid #E5E7EB;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8);
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 60px;

    border-radius: 14px;

    cursor: pointer;

    user-select: none;

    transition:
        border-color var(--tool-transition),
        background var(--tool-transition),
        box-shadow var(--tool-transition);

}

.tool-option input {

    display: none;

}

.tool-option span {

    font-size: .95rem;

    font-weight: 600;

    color: var(--tool-text);

}

.tool-option:hover {

    transform: translateY(-1px);

}

.tool-option.tool-option-active {

    background: #fff;

    border-color: #1E9E8C;

    box-shadow:
        0 8px 20px rgba(30, 158, 140, .18);

}

.tool-option.tool-option-active span {

    color: #1E9E8C;

}
/* ==========================================================
   SUMMARY
========================================================== */

.tool-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 12px 0;
    white-space: nowrap;
}

.tool-summary-group {
    display: flex;
    align-items: baseline;
    /*color: #1E9E8C;*/
    color: var(--tool-text);
    gap: 10px;
}

.tool-summary-label {
    font-size: .90rem;
    font-weight: 600;
    color: var(--tool-text-light);
    white-space: nowrap;
}

.tool-summary-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--tool-text);
    transition: color .2s ease;
    white-space: nowrap;
}

.tool-summary-value span {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: inherit;
}

.tool-total .tool-summary-value span {
    font-size: 2.25rem;
}

.tool-summary-group i {
    font-size: .8rem;
    color: var(--tool-text-light);
    opacity: .45;
    transition: opacity .2s ease,
        color .2s ease,
        transform .2s ease;

    cursor: pointer;
}

.tool-summary-group:hover {
    color: #1E9E8C;
}

.tool-summary-group:hover i {
    opacity: 1;
    color: #1E9E8C;
    transform: translateY(-1px);
}

.tool-summary-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: #94A3B8;
    opacity: .55;
    margin: 0 2px;
}

/* ==========================================================
   DIVIDER
========================================================== */
.tool-divider {

    height: 1px;

    margin: var(--tool-section-gap) 0;

    background: var(--tool-border);

}

/* ==========================================================
   ACTIONS
========================================================== */

.tool-actions {

    display: flex;

    justify-content: flex-end;

    margin-top: 36px;

}

.tool-copy-btn {

    background: linear-gradient(135deg, #1E9E8C, #167D71);
    color: #fff;
    padding: 15px 35px;
    border-radius: 25px;
    cursor: pointer;
    border: 0;
    box-shadow:
        0 8px 20px rgba(30, 158, 140, .28);

}

.tool-copy-btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(30, 158, 140, .36);

}

.tool-copy-btn:active {

    transform: scale(.98);

}

.tool-copy-btn:focus-visible {

    outline: none;

    border-color: #0F766E;

    box-shadow: 0 0 0 4px rgba(15, 118, 110, .12);

}

/* ==========================================================
   CONTENT
========================================================== */

.tool-content {

    margin-top: 90px;

}

.tool-content-section {

    position: relative;

    margin-bottom: 56px;

    padding: 48px 52px;

    overflow: hidden;

    background: rgba(255, 255, 255, .045);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 24px;

    backdrop-filter: blur(12px);

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 28px 70px rgba(15, 23, 42, .12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.tool-content-section::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at top right,
            rgba(30, 158, 140, .10),
            transparent 45%);

    pointer-events: none;

}

.tool-content-section:hover {

    transform: translateY(-3px);

    border-color: rgba(30, 158, 140, .18);

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 36px 90px rgba(15, 23, 42, .16);

}

.tool-content-section h2 {

    position: relative;

    margin: 0 0 24px;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.15;

    color: #fff;

}

.tool-content-section p, .tool-faq p {

    position: relative;

    margin: 0 0 20px;

    max-width: 72ch;

    font-size: 1.06rem;

    line-height: 1.95;

    color: var(--tool-text-light);

}

.tool-content-section p:last-child {

    margin-bottom: 0;

}

/* ==========================================================
   TABLES
========================================================== */

.tool-rate-table {

    margin: 32px 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    background: rgba(255, 255, 255, .03);

}

.tool-rate-table table {

    width: 100%;

    border-collapse: collapse;

}

.tool-rate-table thead {

    background: rgba(30, 158, 140, .12);

}

.tool-rate-table th {

    padding: 18px 24px;

    text-align: left;

    font-size: .95rem;

    font-weight: 600;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}

.tool-rate-table td {

    padding: 18px 24px;

    font-size: .98rem;

    line-height: 1.7;

    color: var(--tool-text-light);

    border-bottom: 1px solid rgba(255, 255, 255, .06);

}

.tool-rate-table tbody tr:last-child td {

    border-bottom: none;

}

.tool-rate-table tbody tr {

    transition: background .2s ease;

}

.tool-rate-table tbody tr:hover {

    background: rgba(255, 255, 255, .04);

}

.tool-rate-table td:first-child {

    width: 120px;

    font-size: 1.05rem;

    font-weight: 700;

    color: #fff;

}

/* ==========================================================
   FAQ
========================================================== */

.tool-faq {

    margin-top: 36px;

    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 2%;

}

.tool-faq-item {

    overflow: hidden;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 10px;
    border-radius: 16px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}

.tool-faq-item:hover {
    background: rgba(255, 255, 255, .025);
    transform: translateY(-1px);

    border-color: rgba(30, 158, 140, .15);

    box-shadow:
        0 12px 32px rgba(15, 23, 42, .10);

}

.tool-faq-item.active {

    background: rgba(255, 255, 255, .03);

    border-color: rgba(30, 158, 140, .18);

    box-shadow:
        0 16px 42px rgba(15, 23, 42, .12);

}

.tool-faq-question {

    width: 100%;

    padding: 22px 26px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    background: transparent;

    border: 0;

    cursor: pointer;

    text-align: left;

    color: #fff;

    font-size: 1.05rem;

    font-weight: 600;

}

.tool-faq-question span {

    flex: 1;

    line-height: 1.6;

}

.tool-faq-question i {

    flex-shrink: 0;

    color: var(--tool-text-light);

    transition:
        transform .25s ease,
        color .25s ease;

}

.tool-faq-item.active .tool-faq-question i {

    color: #1E9E8C;

    transform: rotate(180deg);

}

.tool-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height .3s ease;

}

.tool-faq-answer p {

    padding: 0 26px 24px;

    margin: 0;

    line-height: 1.9;

    color: var(--tool-text-light);

}

.tool-faq-item.active .tool-faq-answer {

    max-height: 300px;

}

/* ==========================================================
   CTA
========================================================== */

.tool-cta {

    margin-top: 36px;

}

.tool-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 30px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    color: #fff;

    background: linear-gradient(135deg, #1E9E8C, #167D71);

    box-shadow:
        0 10px 24px rgba(30, 158, 140, .28);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.tool-cta-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 34px rgba(30, 158, 140, .36);

}

.tool-cta-button i {

    transition: transform .2s ease;

}

.tool-cta-button:hover i {

    transform: translateX(3px);

}

/* ==========================================================
   TOOL GRID
========================================================== */

.tool-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 32px;

}

.tool-grid-item {

    padding: 28px;

    background: rgba(255, 255, 255, .03);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}

.tool-grid-item:hover {

    transform: translateY(-2px);

    border-color: rgba(30, 158, 140, .18);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, .10);

}

.tool-grid-item h3 {

    margin: 0 0 12px;

    font-size: 1.2rem;

    color: #fff;

}

.tool-grid-item p {

    margin: 0 0 18px;

    font-size: .95rem;

}

.tool-coming-soon {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(30, 158, 140, .12);

    color: #74E2D3;

    font-size: .8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .04em;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 768px) {
    .page{
        padding: 0px;
    }

    .tool-page {
        padding: 48px 20px;
    }

    .tool-header {
        margin-bottom: 40px;
    }

    .tool-header h1 {
        font-size: 2.2rem;
    }

    .tool-header p {
        font-size: 1rem;
    }

    .tool-card {
        padding: 28px 22px;
    }

    .tool-section-title {
        font-size: 1rem;
    }

    .tool-pills {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tool-pill {
        width: 100%;
        justify-content: center;
    }

    .tool-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .tool-option span{
        font-size: 12px;
    }

    .tool-summary {
        gap: 18px;
        display: flow;
    }

    .tool-summary-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .tool-summary-group {
        justify-content: space-between;
        width: 100%;
    }

    .tool-summary-operator {
        display: none;
    }

    .tool-summary-divider {
        margin: 4px 0;
    }
    
    .tool-content, .tool-faq{
        margin-top: 0px;
        padding: 20px;
    }

    .tool-content-section {
        padding: 32px 24px;
    }

    .tool-content-section h2 {
        font-size: 1.5rem;
    }

    .tool-content-section h3 {
        font-size: 1.15rem;
    }

    .tool-rate-table {
        font-size: 0.95rem;
    }

    .tool-rate-table th,
    .tool-rate-table td {
        padding: 14px 16px;
    }

    .tool-faq-question {
        padding: 18px 20px;
    }

    .tool-faq-answer p {
        padding: 0 20px 20px;
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }

    .tool-card-link {
        padding: 22px;
    }

    .tool-cta-button{
        font-size: 12px;
    }

}