/* ===================================================================
   TibCal Core CSS Framework v1.0
   https://tibcal.com

   Shared stylesheet for all TibCal calculators.

   Structure
   -------------------------------------------------------------------
   1. Variables
   2. Base
   3. Layout
   4. Typography
   5. Forms
   6. Buttons
   7. Results
   8. Tables
   9. Alerts
   10. FAQ
   11. Utilities
   12. Responsive
=================================================================== */


/* ===================================================================
   1. Variables
=================================================================== */

:root{

    --tc-primary:#2563eb;
    --tc-primary-hover:#1d4ed8;

    --tc-success:#16a34a;
    --tc-warning:#f59e0b;
    --tc-danger:#dc2626;
    --tc-info:#0ea5e9;

    --tc-bg:#ffffff;
    --tc-bg-soft:#f8fafc;

    --tc-text:#111827;
    --tc-text-light:#6b7280;

    --tc-border:#e5e7eb;

    --tc-radius:12px;
    --tc-radius-sm:8px;

    --tc-shadow:
        0 4px 12px rgba(0,0,0,.08);

    --tc-transition:
        .25s ease;
}


/* ===================================================================
   2. Base
=================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

.tibcal{

    max-width:900px;

    margin:40px auto;

    color:var(--tc-text);

    line-height:1.6;

}

.tibcal *{

    box-sizing:border-box;

}

.tibcal img{

    max-width:100%;

    display:block;

}

.tibcal button,
.tibcal input,
.tibcal select,
.tibcal textarea{

    font:inherit;

}


/* ===================================================================
   3. Layout
=================================================================== */

.tibcal-card{

    background:var(--tc-bg);

    border:1px solid var(--tc-border);

    border-radius:var(--tc-radius);

    padding:24px;

    box-shadow:var(--tc-shadow);

}

.tibcal-grid{

    display:grid;

    gap:20px;

}

.tibcal-grid-2{

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

}

.tibcal-grid-3{

    grid-template-columns:
        repeat(3,minmax(0,1fr));

}

.tibcal-grid-4{

    grid-template-columns:
        repeat(4,minmax(0,1fr));

}

.tibcal-stack{

    display:flex;

    flex-direction:column;

    gap:20px;

}/* ===================================================================
   4. Calculator Layout
=================================================================== */

.tibcal-header{

    margin-bottom:24px;

}

.tibcal-title{

    margin:0 0 10px;

    font-size:2rem;

    font-weight:700;

    color:var(--tc-text);

    line-height:1.3;

}

.tibcal-description{

    margin:0;

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

    font-size:1rem;

}

/* Body */

.tibcal-body{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* Inputs */

.tibcal-inputs{

    display:grid;

    gap:20px;

}

/* Button Area */

.tibcal-actions{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/* Results */

.tibcal-results{

    display:grid;

    gap:16px;

}/* ===================================================================
   5. Forms
=================================================================== */

/* ---------- Field ---------- */

.tibcal-field{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* ---------- Label ---------- */

.tibcal-label{

    font-size:.95rem;

    font-weight:600;

    color:var(--tc-text);

}

/* ---------- Help Text ---------- */

.tibcal-help{

    margin:0;

    font-size:.85rem;

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

}

/* ---------- Input ---------- */

.tibcal-input,
.tibcal-select,
.tibcal-textarea{

    width:100%;

    padding:12px 16px;

    border:1px solid var(--tc-border);

    border-radius:var(--tc-radius-sm);

    background:#fff;

    color:var(--tc-text);

    transition:var(--tc-transition);

    outline:none;

}

/* ---------- Focus ---------- */

.tibcal-input:focus,
.tibcal-select:focus,
.tibcal-textarea:focus{

    border-color:var(--tc-primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ---------- Placeholder ---------- */

.tibcal-input::placeholder,
.tibcal-textarea::placeholder{

    color:#9ca3af;

}

/* ---------- Disabled ---------- */

.tibcal-input:disabled,
.tibcal-select:disabled,
.tibcal-textarea:disabled{

    background:#f3f4f6;

    cursor:not-allowed;

}

/* ---------- Input Group ---------- */

.tibcal-input-group{

    display:flex;

    align-items:center;

    border:1px solid var(--tc-border);

    border-radius:var(--tc-radius-sm);

    overflow:hidden;

    background:#fff;

}

.tibcal-input-group .tibcal-input{

    border:none;

    box-shadow:none;

}

.tibcal-input-group .tibcal-input:focus{

    box-shadow:none;

}

/* ---------- Prefix ---------- */

.tibcal-prefix{

    padding:12px 14px;

    background:#f8fafc;

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

    font-weight:600;

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

}

/* ---------- Suffix ---------- */

.tibcal-suffix{

    padding:12px 14px;

    background:#f8fafc;

    border-left:1px solid var(--tc-border);

    font-weight:600;

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

}/* ===================================================================
   6. Buttons
=================================================================== */

/* ---------- Base Button ---------- */

.tibcal-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:48px;

    padding:12px 20px;

    border:none;

    border-radius:var(--tc-radius-sm);

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:var(--tc-transition);

    text-decoration:none;

    white-space:nowrap;

}

/* ---------- Primary ---------- */

.tibcal-btn-primary{

    background:var(--tc-primary);

    color:#fff;

}

.tibcal-btn-primary:hover{

    background:var(--tc-primary-hover);

}

/* ---------- Secondary ---------- */

.tibcal-btn-secondary{

    background:#f3f4f6;

    color:var(--tc-text);

    border:1px solid var(--tc-border);

}

.tibcal-btn-secondary:hover{

    background:#e5e7eb;

}

/* ---------- Success ---------- */

.tibcal-btn-success{

    background:var(--tc-success);

    color:#fff;

}

/* ---------- Danger ---------- */

.tibcal-btn-danger{

    background:var(--tc-danger);

    color:#fff;

}

/* ---------- Full Width ---------- */

.tibcal-btn-block{

    width:100%;

}

/* ---------- Disabled ---------- */

.tibcal-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/* ---------- Loading ---------- */

.tibcal-btn-loading{

    pointer-events:none;

    opacity:.75;

}/* ===================================================================
   7. Results
=================================================================== */

/* ---------- Results Container ---------- */

.tibcal-results{

    display:grid;

    gap:20px;

}

/* ---------- Primary Result ---------- */

.tibcal-result-primary{

    text-align:center;

    background:var(--tc-bg-soft);

    border:2px solid var(--tc-primary);

    border-radius:var(--tc-radius);

    padding:28px;

}

/* Result Label */

.tibcal-result-label{

    margin:0;

    font-size:.95rem;

    font-weight:600;

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

}

/* Result Value */

.tibcal-result-value{

    margin-top:10px;

    font-size:2rem;

    font-weight:700;

    color:var(--tc-primary);

    line-height:1.2;

}

/* ---------- Result Grid ---------- */

.tibcal-result-grid{

    display:grid;

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

    gap:16px;

}

/* ---------- Result Card ---------- */

.tibcal-result-card{

    background:#fff;

    border:1px solid var(--tc-border);

    border-radius:var(--tc-radius-sm);

    padding:18px;

}

/* Card Title */

.tibcal-result-title{

    margin:0;

    font-size:.9rem;

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

}

/* Card Number */

.tibcal-result-number{

    margin-top:8px;

    font-size:1.35rem;

    font-weight:700;

    color:var(--tc-text);

}

/* ---------- Result Note ---------- */

.tibcal-result-note{

    background:#f8fafc;

    border-left:4px solid var(--tc-info);

    padding:16px;

    border-radius:var(--tc-radius-sm);

    color:var(--tc-text);

    font-size:.95rem;

}/* ===================================================================
   8. Tables
=================================================================== */

/* ---------- Table Wrapper ---------- */

.tibcal-table-wrapper{

    width:100%;

    overflow-x:auto;

    border:1px solid var(--tc-border);

    border-radius:var(--tc-radius);

    background:#fff;

}

/* ---------- Table ---------- */

.tibcal-table{

    width:100%;

    border-collapse:collapse;

    min-width:600px;

}

/* ---------- Header ---------- */

.tibcal-table thead{

    background:var(--tc-primary);

    color:#fff;

}

.tibcal-table th{

    padding:14px 16px;

    text-align:left;

    font-size:.95rem;

    font-weight:600;

    white-space:nowrap;

}

/* ---------- Cells ---------- */

.tibcal-table td{

    padding:14px 16px;

    border-top:1px solid var(--tc-border);

    color:var(--tc-text);

    vertical-align:middle;

}

/* ---------- Zebra Rows ---------- */

.tibcal-table tbody tr:nth-child(even){

    background:var(--tc-bg-soft);

}

/* ---------- Hover ---------- */

.tibcal-table tbody tr:hover{

    background:#eef4ff;

}

/* ---------- Alignment ---------- */

.tibcal-table-right{

    text-align:right;

}

.tibcal-table-center{

    text-align:center;

}

/* ---------- Footer ---------- */

.tibcal-table tfoot{

    background:#f8fafc;

    font-weight:700;

}

.tibcal-table tfoot td{

    border-top:2px solid var(--tc-border);

}/* ===================================================================
   9. Content Components
=================================================================== */

/* ---------- Section ---------- */

.tibcal-section{

    margin:48px 0;

}

/* ---------- Section Title ---------- */

.tibcal-section-title{

    margin:0 0 20px;

    font-size:1.75rem;

    font-weight:700;

    line-height:1.3;

    color:var(--tc-text);

}

/* ---------- Section Body ---------- */

.tibcal-section-body{

    color:var(--tc-text);

}

.tibcal-section-body p{

    margin:0 0 18px;

}

.tibcal-section-body p:last-child{

    margin-bottom:0;

}

/* ---------- Lists ---------- */

.tibcal-list{

    margin:0;

    padding-left:20px;

}

.tibcal-list li{

    margin-bottom:10px;

}

.tibcal-list li:last-child{

    margin-bottom:0;

}/* ===================================================================
   10. FAQ
=================================================================== */

/* FAQ Container */

.tibcal-faq{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/* FAQ Item */

.tibcal-faq-item{

    border:1px solid var(--tc-border);

    border-radius:var(--tc-radius);

    background:#fff;

    overflow:hidden;

}

/* Question */

.tibcal-faq-question{

    list-style:none;

    cursor:pointer;

    padding:18px 20px;

    font-weight:600;

    color:var(--tc-text);

    user-select:none;

}

/* Remove default marker */

.tibcal-faq-question::-webkit-details-marker{

    display:none;

}

.tibcal-faq-question::after{

    content:"+";

    float:right;

    font-size:1.25rem;

    font-weight:700;

}

/* Open State */

.tibcal-faq-item[open] .tibcal-faq-question::after{

    content:"−";

}

/* Answer */

.tibcal-faq-answer{

    padding:0 20px 20px;

    color:var(--tc-text);

}

.tibcal-faq-answer p{

    margin:0;

}/* ===================================================================
   11. Alerts & Messages
=================================================================== */

/* ---------- Base Alert ---------- */

.tibcal-alert{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:16px 18px;

    margin:20px 0;

    border:1px solid transparent;

    border-radius:var(--tc-radius-sm);

    line-height:1.6;

}

/* ---------- Alert Icon ---------- */

.tibcal-alert-icon{

    flex-shrink:0;

    font-size:1.2rem;

    line-height:1;

}

/* ---------- Alert Content ---------- */

.tibcal-alert-content{

    flex:1;

}

.tibcal-alert-title{

    margin:0 0 6px;

    font-size:1rem;

    font-weight:700;

}

.tibcal-alert-text{

    margin:0;

}

/* ==========================================================
   Info
========================================================== */

.tibcal-alert-info{

    background:#eff6ff;

    border-color:#bfdbfe;

    color:#1e40af;

}

/* ==========================================================
   Success
========================================================== */

.tibcal-alert-success{

    background:#f0fdf4;

    border-color:#bbf7d0;

    color:#166534;

}

/* ==========================================================
   Warning
========================================================== */

.tibcal-alert-warning{

    background:#fffbeb;

    border-color:#fde68a;

    color:#92400e;

}

/* ==========================================================
   Error
========================================================== */

.tibcal-alert-error{

    background:#fef2f2;

    border-color:#fecaca;

    color:#991b1b;

}/* ===================================================================
   12. Responsive Design
=================================================================== */

/* ==========================================================
   Large Tablets & Small Laptops (≤ 992px)
========================================================== */

@media (max-width: 992px){

    .tibcal{

        max-width:100%;

        margin:30px auto;

    }

    .tibcal-card{

        padding:20px;

    }

}

/* ==========================================================
   Tablets (≤ 768px)
========================================================== */

@media (max-width:768px){

    /* Layout */

    .tibcal-grid-2,
    .tibcal-grid-3,
    .tibcal-grid-4{

        grid-template-columns:1fr;

    }

    /* Buttons */

    .tibcal-actions{

        flex-direction:column;

    }

    .tibcal-btn{

        width:100%;

    }

    /* Results */

    .tibcal-result-grid{

        grid-template-columns:1fr;

    }

    /* Typography */

    .tibcal-title{

        font-size:1.6rem;

    }

    .tibcal-section-title{

        font-size:1.5rem;

    }

}

/* ==========================================================
   Mobile Phones (≤ 576px)
========================================================== */

@media (max-width:576px){

    .tibcal{

        margin:20px auto;

    }

    .tibcal-card{

        padding:16px;

        border-radius:10px;

    }

    /* Inputs */

    .tibcal-input,
    .tibcal-select,
    .tibcal-textarea{

        padding:12px;

        font-size:16px;

    }

    /* Input Group */

    .tibcal-prefix,
    .tibcal-suffix{

        padding:12px;

    }

    /* Primary Result */

    .tibcal-result-primary{

        padding:20px;

    }

    .tibcal-result-value{

        font-size:1.75rem;

    }

    /* Result Cards */

    .tibcal-result-card{

        padding:16px;

    }

    /* FAQ */

    .tibcal-faq-question{

        padding:16px;

    }

    .tibcal-faq-answer{

        padding:0 16px 16px;

    }

    /* Tables */

    .tibcal-table{

        min-width:520px;

    }

}