/* Artoval Financial Calculators - Enhanced Styles */
:root {
    --primary-blue: #024684;
    --dark-blue: #013361;
    --light-gray: #f5f7fa;
    --border-gray: #dee2e6;
    --text-dark: #2c3e50;
    --success-green: #1F51FF;
    --info-blue: #17a2b8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-gray);
    color: var(--text-dark);
}

/* ===================================NAVBAR STYLES=================================== */ .navbar {
    background-color: var(--primary-blue) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

/* Matches the header height (logo 50px + 2 × 1rem padding) so nothing sits underneath it. */
body {
    padding-top: 82px;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.4rem;
    color: white !important;
}

    .navbar-brand i {
        margin-right: 8px;
    }

.nav-link {
    color: white !important;
    font-weight: 500;
    transition: opacity 0.3s;
}

    .nav-link:hover {
        opacity: 0.8;
    }

/* ===================================HOME PAGE - 3x3 GRID=================================== */ 
.page-header {
    text-align: center;
    padding: 3rem 0 2rem 0;
    background: white;
    margin-bottom: 2rem;
}

    .page-header h1 {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
    }

    .page-header p {
        color: #6c757d;
        font-size: 1.1rem;
    }

/* Center search without affecting header height */
header .search-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 40vw;
    margin: 0;
    z-index: 10;
}

header .search-box {
    width: 100%;
    height: 42px;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border-gray);
    border-radius: 50px;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: all 0.3s;
}

    header .search-box:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 4px rgba(2, 70, 132, 0.1);
    }

/* Currency selector (header, right side; stays visible when the nav links collapse) */
header .currency-switcher {
    margin-left: auto;
    margin-right: 0.75rem;
}

    header .currency-switcher .form-select {
        width: auto;
        min-width: 96px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        font-weight: 600;
        cursor: pointer;
    }

        header .currency-switcher .form-select:focus {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
        }

/* Bootstrap lets the nav links grow into all free space, which would leave the selector beside the logo.
   Letting them size to content puts the selector on the right, next to Contact Us. */
@media (min-width: 992px) {
    header .navbar-collapse {
        flex-grow: 0;
    }
}

/* Category Grid - 3x3 Layout */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Category Card with Hover Animation */
.category-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    box-shadow: 0 2px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

    .category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(2, 70, 132, 0.05), rgba(2, 70, 132, 0.02)); /* Updated RGBA */
        opacity: 0;
        transition: opacity 0.3s;
    }

    .category-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 15px 35px rgba(2, 70, 132, 0.2); /* Updated RGBA shadow */
        border-color: var(--primary-blue);
    }

        .category-card:hover::before {
            opacity: 1;
        }

.category-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    margin-top: -15px;
    display: block;
    transition: transform 0.4s;
}

.category-card .category-icon {
    transform: scale(1.2) rotate(5deg);
}

.category-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.category-description {
    font-size: 0.9rem;
    color: #6c757d;
    position: relative;
    z-index: 1;
}

.view-calculators-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(10px);
}

.category-card .view-calculators-btn {
    opacity: 1;
    transform: translateY(0);
}

.view-calculators-btn {
    background: var(--dark-blue);
    transform: translateY(-2px);
}

.calculator-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px;
}
/* ==========================================
   Calculator Intro
========================================== */

.calculator-intro {
    background: #fff;
    border-radius: 12px;
    padding: 22px 26px;
    margin-left: 420px;
    margin-bottom: 0px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

    .calculator-intro .calculator-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ececec;
    }

    .calculator-intro .calculator-header-icon {
        font-size: 2rem;
    }

    .calculator-intro .calculator-header h2 {
        margin: 0;
        font-size: 2rem;
        font-weight: 600;
        color: var(--text-dark);
    }

    .calculator-intro .calculator-description {
        margin: 0;
        color: #5f6b7a;
        font-size: .95rem;
        line-height: 1.7;
    }

/* ===================================CATEGORY PAGE LAYOUT=================================== */ 

.calculator-page-layout {
    display: flex;
    min-height: calc(100vh - 80px);
}

/* Left Sidebar - Category List */
.category-sidebar {
    width: 420px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    box-shadow: 2px 0 6px rgba(0,0,0,.04);
    padding: 0;
    flex-shrink: 0;
    position: fixed;
    top: 82px;
    height: calc(100vh - 150px);
    overflow-y: auto;
}

.calculator-grid-container {
    flex: 1;
    margin-left: 420px;
    padding: 2rem;
}

.sidebar-sticky {
    position: sticky;
    top: 80px; /* below navbar */
    align-self: flex-start;
}

.category-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    text-decoration: none;
    color: #1f2937;
    transition: all 0.2s ease;
}

    .category-sidebar-item:hover {
        background: var(--light-gray);
        border-left-color: var(--primary-blue);
    }

    .category-sidebar-item.active {
        background: rgba(2, 70, 132, 0.1); /* Updated RGBA active state */
        border-left-color: var(--primary-blue);
        font-weight: 600;
    }

.sidebar-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.category-sidebar-item.active {
    background: #eaf3ff;
    border-left: 4px solid #0d4d8c;
}

/* Right Side - Calculator Grid */

.calculator-grid-title {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

    .calculator-grid-title .category-icon {
        font-size: 2.5rem;
        margin-right: 1rem;
    }

    .calculator-grid-title h2 {
        font-size: 1.8rem;
        font-weight: 600;
    }

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.calculator-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-gray);
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

    .calculator-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-3px);
        border-color: var(--primary-blue);
    }

    .calculator-card h5 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-dark);
    }

    .calculator-card p {
        font-size: 0.9rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }

.calculate-btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    transition: background 0.3s;
    text-decoration: none;
}

    .calculate-btn:hover {
        background: var(--dark-blue);
        color: white;
    }

/* ===================================CALCULATOR INPUT/RESULT LAYOUT=================================== */

.calculator-container {
    display: flex;
    gap: 2rem;
    margin-left: 420px; /* Width of left sidebar
    margin-right: 2rem; */
    padding-top: 2rem;
    max-width: calc(100% - 340px);
}

/* Left Side - Input Form */ .calculator-input-section {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.calculator-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--light-gray);
}

.calculator-header-icon {
    font-size: 2rem;
    margin-right: 1rem;
}

.calculator-header h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.calculator-description {
    color: #6c757d;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s;
}

    .form-control:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(2, 70, 132, 0.1); /* Updated RGBA focus shadow */
    }

.form-select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 1rem;
    background-color: white;
    appearance: auto;
    -webkit-appearance: auto;
    /* -moz-appearance: auto;*/
    background-image: url("data/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
}

.calculate-button {
    width: 100%;
    padding: 1rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

    .calculate-button:hover {
        background: var(--dark-blue);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(2, 70, 132, 0.3); /* Updated RGBA button shadow */
    }

    .calculate-button i {
        margin-right: 0.5rem;
    }

/* Right Side - Results */ .calculator-result-section {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.results-header {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--light-gray);
}

.result-card {
    background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
    color: white;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

    .result-card.success {
        background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
    }

    .result-card.info {
        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    }

.result-label {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.result-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
}

.result-details {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-gray);
}

    .detail-row:last-child {
        border-bottom: none;
    }

.detail-label {
    color: #6c757d;
    font-weight: 500;
}

.detail-value {
    font-weight: 600;
    color: var(--text-dark);
}

.result-summary {
    background: #e7f3ff;
    border-left: 4px solid var(--primary-blue);
    padding: 1rem;
    border-radius: 4px;
}

    .result-summary strong {
        color: var(--primary-blue);
    }

/* Info Alert */ .info-alert {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    padding: 1rem;
    border-radius: 6px;
    color: #004085;
}

    .info-alert i {
        margin-right: 0.5rem;
    }

/* ===================================RESPONSIVE DESIGN=================================== */ @media (max-width: 1200px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .calculator-container {
        flex-direction: column;
    }

    .calculator-page-layout {
        flex-direction: column;
    }

    .category-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .page-header h1 {
        font-size: 2rem;
    }

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

/* ===================================ANIMATIONS=================================== */ @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-card {
    animation: fadeIn 0.5s ease-out;
}

.calculator-card {
    animation: fadeIn 0.4s ease-out;
}

.category-card:nth-child(1) {
    animation-delay: 0.05s;
}

.category-card:nth-child(2) {
    animation-delay: 0.1s;
}

.category-card:nth-child(3) {
    animation-delay: 0.15s;
}

.category-card:nth-child(4) {
    animation-delay: 0.2s;
}

.category-card:nth-child(5) {
    animation-delay: 0.25s;
}

.category-card:nth-child(6) {
    animation-delay: 0.3s;
}

.category-card:nth-child(7) {
    animation-delay: 0.35s;
}

.category-card:nth-child(8) {
    animation-delay: 0.4s;
}

.category-card:nth-child(9) {
    animation-delay: 0.45s;
}


.calculator-page-content {
    flex: 1;
    padding: 20px;
}

.financial-negative {
    color: #dc3545;
    font-weight: 600;
}

.financial-positive {
    color: inherit;
}


.search-suggestions {
    position: absolute;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 4px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.search-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

    .search-item:last-child {
        border-bottom: none;
    }

    .search-item:hover {
        background: #f5f8ff;
    }

.no-result {
    padding: 12px;
    color: #777;
    font-style: italic;
}

/* ==================================================
   CALCULATOR AUTHORIZATION MODAL
   ================================================== */

.calculator-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    padding: 20px;
    box-sizing: border-box;
}


.calculator-auth-modal {
    position: relative;
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    border-radius: 12px;
    padding: 35px;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}


/* ============================================
   CLOSE BUTTON
   ============================================ */

.calculator-auth-close {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}


    .calculator-auth-close:hover {
        color: #111;
    }


/* ============================================
   AUTHORIZATION ICON
   ============================================ */

.calculator-auth-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #eef5ff;
    font-size: 24px;
}


/* ============================================
   HEADING
   ============================================ */

.calculator-auth-modal h3 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}


/* ============================================
   DESCRIPTION
   ============================================ */

.calculator-auth-description {
    margin: 0 0 25px;
    text-align: center;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================
   FORM GROUP
   ============================================ */

.calculator-auth-form-group {
    margin-bottom: 20px;
}


    .calculator-auth-form-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
    }


/* ============================================
   INPUT
   ============================================ */

.calculator-auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d6dce5;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
}


    .calculator-auth-input:focus {
        border-color: #0d5aa7;
        box-shadow: 0 0 0 3px rgba(13, 90, 167, 0.12);
    }


/* ============================================
   OTP INPUT
   ============================================ */

.calculator-otp-input {
    text-align: center;
    font-size: 22px;
    letter-spacing: 6px;
}


/* ============================================
   PRIMARY BUTTON
   ============================================ */

.calculator-auth-button {
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 6px;
    background: #07569a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}


    .calculator-auth-button:hover {
        background: #064a85;
    }


    .calculator-auth-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* ============================================
   SECONDARY BUTTON
   ============================================ */

.calculator-auth-secondary-button {
    width: 100%;
    margin-top: 10px;
    padding: 11px 18px;
    border: 1px solid #d6dce5;
    border-radius: 6px;
    background: #ffffff;
    color: #444;
    font-size: 14px;
    cursor: pointer;
}


    .calculator-auth-secondary-button:hover {
        background: #f5f6f8;
    }


/* ============================================
   ERROR MESSAGE
   ============================================ */

.calculator-auth-error {
    margin-bottom: 15px;
    padding: 10px 12px;
    border-radius: 5px;
    background: #fff0f0;
    border: 1px solid #f2c2c2;
    color: #c62828;
    font-size: 13px;
}


/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 500px) {

    .calculator-auth-overlay {
        padding: 15px;
    }

    .calculator-auth-modal {
        padding: 28px 22px;
    }
}
/* ============================================
   CALCULATOR CARD HEADER
   ============================================ */

.calculator-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

    .calculator-card-header h5 {
        margin: 0;
    }




/* ============================================
   AUTHORIZATION NOTE
   ============================================ */

.calculator-access-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #555;
}
/* =====================================================
   Phase 3 — currency prefix on monetary inputs
   Scoped to .currency-input-group so the global .form-control rule (width:100%) does not
   squeeze/wrap the input inside the Bootstrap input-group. No other field is affected.
   ===================================================== */
.currency-input-group {
    flex-wrap: nowrap;
}

.currency-input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.currency-input-group > .currency-prefix {
    flex: 0 0 auto;
}

/* =====================================================
   Phase 3 — approved mobile typography exception (calculator page heading only)
   The approved P3-13 titles end in "Calculator" (and FCFF uses "(FCFF/FCFE)"); at narrow widths
   the pre-existing collapsed intro layout lets the longest word set the page overflow.
   80% heading size (2rem -> 1.6rem) keeps whole words and keeps overflow at or below the
   Phase 2 reference. Same 500px breakpoint as the existing mobile rules; desktop/tablet unchanged.
   ===================================================== */
@media (max-width: 500px) {
    .calculator-intro .calculator-header h2 {
        font-size: 1.6rem;
    }
}

/* =====================================================
   "How this calculator works" card — sits below .calculator-container.
   Same left offset and card look as .calculator-intro so the three blocks line up.
   ===================================================== */
.calculator-guide {
    background: #fff;
    border-radius: 12px;
    padding: 22px 26px;
    margin-left: 420px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    color: #3d4754;
    font-size: .95rem;
    line-height: 1.7;
    scroll-margin-top: 90px; /* clears the fixed 72px navbar when jumped to via "More info.." */
}

/* "More info.." link at the end of the definition card, jumps to the guide card */
.calculator-more-info {
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

    .calculator-more-info:hover {
        text-decoration: underline;
    }

    .calculator-guide .calculator-header {
        gap: 14px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ececec;
    }

    .calculator-guide .calculator-header-icon {
        margin-right: 0;
    }

    .calculator-guide h3 {
        font-size: 1.05rem;
        font-weight: 600;
        margin: 1.25rem 0 .6rem;
        color: var(--text-dark);
    }

    .calculator-guide .guide-summary {
        color: #5f6b7a;
        margin-bottom: 0;
    }

    .calculator-guide .guide-formula {
        background: #f1f6ff;
        border: 1px solid #d6e4ff;
        border-radius: 10px;
        padding: 14px 18px;
        text-align: center;
        font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
        font-size: 1.1rem;
        font-weight: 600;
        color: #0d4fb8;
        overflow-x: auto;
    }

    .calculator-guide .guide-formula-note {
        font-size: .85rem;
        color: #6c757d;
        margin-top: .5rem;
    }

    .calculator-guide dl {
        margin: 0;
    }

    .calculator-guide dt {
        font-weight: 600;
        color: var(--text-dark);
    }

    .calculator-guide dd {
        margin: 0 0 .7rem;
        color: #5f6b7a;
    }

    .calculator-guide ol {
        padding-left: 1.2rem;
        margin: 0;
    }

        .calculator-guide ol li {
            margin-bottom: .35rem;
        }

    .calculator-guide .guide-result-row {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
    }

    .calculator-guide .guide-result-pill {
        flex: 1 1 180px;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: .88rem;
        border-left: 4px solid;
        background: #f8f9fa;
    }

        .calculator-guide .guide-result-pill.positive { border-color: #198754; }
        .calculator-guide .guide-result-pill.negative { border-color: #dc3545; }
        .calculator-guide .guide-result-pill.neutral  { border-color: #6c757d; }

    .calculator-guide .guide-example {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 14px 18px;
        margin-top: .4rem;
    }

/* =====================================================
   "Kindly select" placeholder — a prompt, not a choice.
   Greyed out while nothing is selected; the real options keep the normal text colour.
   ===================================================== */
select.kindly-select-placeholder {
    color: #9aa1a9;
}

    select.kindly-select-placeholder option {
        color: var(--text-dark);
    }

    select option.kindly-select-option {
        color: #9aa1a9;
    }

/* =====================================================
   Shared result table — dark-blue header with white bold text,
   the same header used by the amortization and cash-flow tables.
   ===================================================== */
.artoval-result-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

    .artoval-result-table thead th {
        background: var(--primary-blue);
        color: #fff;
        font-weight: 700;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--primary-blue);
        white-space: nowrap;
    }

    .artoval-result-table tbody td,
    .artoval-result-table tfoot td {
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--border-gray);
        color: var(--text-dark);
    }

    .artoval-result-table tbody th {
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--border-gray);
        font-weight: 600;
        color: var(--text-dark);
        background: var(--light-gray);
        text-align: left;
    }

    .artoval-result-table .num {
        text-align: right;
        white-space: nowrap;
    }

.artoval-result-table-wrap {
    overflow-x: auto;
}

/* =====================================================
   Blue output panel — for calculators whose results are a list of ratios with no single
   headline figure (Leverage, Solvency, Profitability, DuPont). Same blue as .result-card,
   so every calculator's output reads in the same colour; rows and order are unchanged.
   ===================================================== */
.result-details.result-details-blue {
    background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
    color: #fff;
}

    .result-details.result-details-blue .detail-row {
        border-bottom-color: rgba(255, 255, 255, 0.25);
        gap: 1rem;
    }

    .result-details.result-details-blue .detail-label {
        color: rgba(255, 255, 255, 0.92);
    }

    .result-details.result-details-blue .detail-value {
        color: #fff;
        text-align: right;
    }

/* =====================================================
   PHONE & TABLET LAYOUT (992px and below)
   Everything here is inside the same breakpoint the site already uses for its stacked
   layout, so screens wider than 992px (desktop) are not affected at all.
   ===================================================== */
@media (max-width: 992px) {

    /* ---------- Header: logo + currency on row 1, full-width search on row 2 ---------- */
    .navbar {
        padding: 0.5rem 0;
    }

        .navbar > .container-fluid {
            flex-wrap: wrap;
            row-gap: 0.5rem;
        }

    .navbar-brand {
        font-size: 1.05rem;
        margin-right: 0.5rem;
        white-space: nowrap;
        min-width: 0;
    }

        .navbar-brand .header-logo {
            height: 32px !important;
        }

    header .currency-switcher {
        margin-right: 0;
    }

        header .currency-switcher .form-select {
            min-width: 0;
            padding: 0.3rem 1.6rem 0.3rem 0.6rem;
            font-size: 0.85rem;
            background-position: right 6px center;
        }

    /* Row 2: search fills the width, leaving room for the menu button beside it. */
    header .search-container {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: 3;
        flex: 1 0 calc(100% - 52px);
        width: auto;
        max-width: none;
    }

    header .search-box {
        height: 38px;
    }

    /* The fixed header is now two rows; keep page content clear of it. */
    body {
        padding-top: 112px;
    }

    /* Menu button (row 2, beside the search) and the menu it opens (below the search) */
    .navbar-toggler {
        order: 3;
        flex: 0 0 auto;
        margin-left: 0.4rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #fff;
        font-size: 1.25rem;
        line-height: 1;
    }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
        }


    /* ---------- Category list: a swipeable row of tabs instead of a full-height list ---------- */
    .category-sidebar {
        display: flex;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: none;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .category-sidebar-item {
        flex: 0 0 auto;
        padding: 10px 14px;
        gap: 6px;
        white-space: nowrap;
        font-size: 0.9rem;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

        .category-sidebar-item.active {
            border-left: none;
            border-bottom: 3px solid #0d4d8c;
        }

    .sidebar-icon {
        font-size: 1.1rem;
        margin-right: 0;
    }

    /* ---------- Content: drop the 420px desktop sidebar gap, use the full width ---------- */
    .calculator-page-content {
        padding: 12px;
        min-width: 0;
    }

    .calculator-intro,
    .calculator-guide,
    .calculator-grid-container {
        margin-left: 0;
    }

    .calculator-intro,
    .calculator-guide {
        padding: 16px;
    }

        .calculator-intro .calculator-header h2 {
            font-size: 1.5rem;
        }

    .calculator-guide {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .calculator-container {
        margin-left: 0;
        max-width: 100%;
        padding-top: 1rem;
        gap: 1rem;
    }

    .calculator-input-section,
    .calculator-result-section {
        padding: 1.25rem;
        min-width: 0;
    }

    .calculator-grid-container {
        padding: 1rem 12px;
    }

    .calculator-grid-title {
        margin-bottom: 1rem;
    }

        .calculator-grid-title h2 {
            font-size: 1.4rem;
        }

    .calculator-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* ---------- Results: large figures and wide tables must not push the page sideways ---------- */
    .result-card {
        padding: 1.25rem;
    }

    .result-value {
        font-size: 1.9rem;
        overflow-wrap: anywhere;
    }

    .detail-row {
        gap: 0.75rem;
    }

    .detail-value {
        text-align: right;
        overflow-wrap: anywhere;
    }

    .calculator-result-section table:not(.artoval-result-table),
    .calculator-guide table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* The menu the ☰ button opens. Bootstrap's own breakpoint (below 992px), so at exactly 992px
   the header keeps Bootstrap's desktop behaviour with Contact Us shown inline. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        order: 4;
        flex-basis: 100%;
    }

        .navbar-collapse .nav-link {
            padding: 0.4rem 0.25rem;
        }
}

/* Narrowest phones (e.g. 320px): keep logo, name and currency on one row. */
@media (max-width: 380px) {
    .navbar > .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    .navbar-brand {
        font-size: 0.84rem;
        margin-right: 0.25rem;
    }

        .navbar-brand .header-logo {
            height: 26px !important;
        }

    header .currency-switcher .form-select {
        padding: 0.25rem 1.4rem 0.25rem 0.45rem;
        font-size: 0.8rem;
        background-position: right 4px center;
    }
}