html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 1300px;
}

.logo {
    width: 100%;
    max-width: 300px;
    height: auto;
}

@media (max-width: 767px) {
    .logo {
        max-width: 200px;
    }

    /* Tablet header layout - also stack vertically */
    header .row {
        flex-direction: column;
        align-items: center;
    }

    header .row > div[class*='col'] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center !important;
        margin-bottom: 0.75rem;
    }

    header .navbar-brand {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Keep nav buttons a natural width, centered - not full screen */
    header .btn-group {
        display: inline-flex;
        justify-content: center;
        width: auto;
    }
}

@media (max-width: 576px) {
    .logo {
        max-width: 200px;
    }

    /* Container padding for mobile */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Mobile header layout - logo on top, centered */
    header .row {
        flex-direction: column;
        align-items: center;
    }

    header .row > div[class*='col'] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center !important;
        margin-bottom: 0.75rem;
    }

    /* Center the logo on mobile */
    header .navbar-brand {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Center navigation buttons, keep natural width */
    header .btn-group {
        display: inline-flex;
        justify-content: center;
        width: auto;
    }

    /* Make header buttons more compact on mobile */
    header .btn-group .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
        flex: 0 0 auto;
    }

    header .btn-group .btn i {
        font-size: 1rem;
    }

    /* Adjust right column buttons */
    header .btn-lg {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    header .btn-md {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

    header .btn-sm {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }

    /* Reduce margin on mobile */
    header .container-fluid {
        margin-top: 10px !important;
    }

    /* Reduce spacing between header elements */
    header .row > div[class*='col']:last-child {
        margin-bottom: 0.5rem;
    }

    /* Make Market/Services action buttons more compact */
    .text-center > .row > .col {
        margin-bottom: 0.5rem;
    }

    .text-center .col > a.btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        margin: 0.15rem;
        white-space: nowrap;
    }

    /* Reduce massive spacing between filter rows on mobile */
    .text-center .row.g-5 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
        row-gap: 0 !important;
        column-gap: 0 !important;
        margin-bottom: 0.5rem;
    }

    /* Reduce padding on columns to minimize spacing */
    .text-center .row.g-5 > .col {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* On mobile, make the filter section more compact */
    .text-center {
        padding: 0;
    }

    .text-center > .row {
        margin-bottom: 0.5rem;
    }

    /* Market & Services page filter fixes */
    .input-group {
        margin-bottom: 0.5rem;
    }

    .input-group .btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
        white-space: nowrap;
    }

    .input-group .btn i {
        display: inline;
        margin-right: 0.2rem;
    }

    .input-group .form-select {
        font-size: 0.85rem;
    }

    .input-group .form-control {
        font-size: 0.85rem;
    }

    /* Keep search icon attached to the input field */
    .input-group-text {
        padding: 0.375rem 0.5rem;
    }

    /* Make specific filter groups wrap nicely */
    .input-group.mb-3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem !important;
    }

    .input-group.mb-3 .btn {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .input-group.mb-3 .form-select {
        margin-bottom: 0;
        flex: 1 1 auto;
        min-width: 140px;
        border-radius: 0.375rem;
    }

    /* Adjust button group spacing on mobile (excludes header nav) */
    .text-center .btn-group {
        display: flex;
        flex-wrap: nowrap;
    }

    .text-center .btn-group .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Profile page improvements */
    .card {
        margin-bottom: 1rem;
    }

    .card .btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* Reduce spacing between all rows with g-5 on mobile */
    .row.g-5 {
        row-gap: 0.75rem !important;
        column-gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Additional spacing control for filter rows */
    .text-center .row.g-5 + .row.g-5 {
        margin-top: 0 !important;
    }

    /* Make text more readable on mobile */
    h3.card-title {
        font-size: 1.5rem;
    }

    h5.card-title {
        font-size: 1.1rem;
    }

    h6.card-subtitle {
        font-size: 0.9rem;
    }

    /* Adjust badge sizes on mobile */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Footer improvements for mobile */
    footer.footer {
        font-size: 0.8rem;
        line-height: 1.8;
        padding: 1rem 0.5rem;
    }

    footer.footer a {
        display: inline-block;
        margin: 0.2rem 0;
    }

    /* Card image improvements for mobile */
    .card-img-top {
        max-height: 300px;
        object-fit: contain;
    }

    /* Masonry grid adjustments */
    #masonry.row {
        margin-top: 1rem !important;
    }

    .card-columns {
        width: 100%;
    }

    /* Card body text improvements */
    .card-body {
        padding: 0.75rem;
    }

    .card-title a {
        word-break: break-word;
    }

    .card-subtitle {
        word-break: break-word;
    }

    /* Make email links break properly */
    a[href^="mailto:"] {
        word-break: break-all;
        font-size: 0.85rem;
    }

    /* Improve button spacing in profile cards */
    .d-flex.justify-content-center {
        padding: 0.5rem;
    }

    .d-flex.justify-content-center .btn {
        width: 100px !important;
        font-size: 0.8rem;
    }
}

/* Medium mobile devices (iPhone Plus, small tablets) */
@media (max-width: 767px) and (min-width: 577px) {
    /* Adjust filter buttons for medium mobile screens */
    .input-group .btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    .input-group .form-select {
        font-size: 0.9rem;
    }

    /* Slightly larger text for medium screens */
    .text-center .col > a.btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.85rem;
    }

    /* Container padding for medium mobile */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Landscape phones */
@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce header margin in landscape */
    header .container-fluid {
        margin-top: 5px !important;
    }

    /* Make buttons more compact in landscape */
    .text-center .col > a.btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.7rem;
    }
}

.greentext {
    color: #95B417;
}

.orangetext {
    color: #ff9900;
}

.accordion .accordion-header {
    border: solid #F5CBA7;
}

.accordion .accordion-collapse {
    
}

.accordion-button:not(.collapsed) {
    background-color: #ff9900;
    color: #fff;
}

.getrate:hover {
    cursor: pointer;
}

.btn-warning {
    background: #ff9900;
}

.btn-outline-warning {
    border-color: #ff9900;
    color: #ff9900; 
}

hr {
    border: none;
    height: 3px;
    color: #ff9900;
    background-color: #ff9900;
}

/*
    
    #ff9900 - orange 
    #F5CBA7 - orange light, for borders
    #95B417 - green

*/
    /* load more classes */
    .blockload {
    display: none;
}

#load {
    font-size: 18px;
    cursor: pointer;
}