/* ========================================
   Custom Petrol Blue Theme Override
   ======================================== */

/* Color Variables */
:root {
    --petrol-primary: #006B7D;
    --petrol-dark: #004D5C;
    --petrol-light: #008FA3;
    --petrol-accent: #00A8C6;
}

/* Main Text Colors */
.black { color: var(--petrol-dark) !important; }
body { color: var(--petrol-dark); }
a { color: var(--petrol-dark); }
.text h6 { color: var(--petrol-dark); }

/* Background Colors */
.bg-dark { background-color: var(--petrol-primary) !important; }
.bg-dark-lighter { background-color: var(--petrol-light) !important; }
.bg-dark.light-content { background-color: var(--petrol-light) !important; }
.bg-dark-lighter.light-content { background-color: var(--petrol-accent) !important; }

/* Page Loader */
.page-loader.dark { background: var(--petrol-primary); }

/* Buttons */
a.btn-mod:hover,
a.btn-mod:focus { background: var(--petrol-dark); }
.btn-mod.btn-border:hover,
.btn-mod.btn-border:focus { background: var(--petrol-dark); }
.btn-mod.btn-border-w:hover,
.btn-mod.btn-border-w:focus { color: var(--petrol-dark); }
.btn-mod.btn-w { color: var(--petrol-dark); }
.btn-mod.btn-w:hover,
.btn-mod.btn-w:focus { color: var(--petrol-dark); }

/* Navigation */
.inner-nav ul li a.active { color: var(--petrol-primary); }
.js-no-transparent-white .inner-nav ul li a.active { color: var(--petrol-dark); }

/* Dividers & Lines */
hr { background-color: var(--petrol-primary); }
.section-more:after { background-color: var(--petrol-dark); }
.text-link:after { background-color: var(--petrol-dark); }
.works-filter a:after { background-color: var(--petrol-dark); }
.ci-link a:after { background-color: var(--petrol-dark); }

/* Headings & Titles */
.section-title { color: var(--petrol-dark); }
.alt-features-title { color: var(--petrol-dark); }
.alt-services-title { color: var(--petrol-dark); }
.work-title { color: var(--petrol-dark); }
.ci-title { color: var(--petrol-dark); }
.blog-item-title a { color: var(--petrol-dark); }

/* Icons & Elements */
.number { border: 3px solid var(--petrol-primary); color: var(--petrol-primary); }
.ci-icon:before { background: var(--petrol-primary); }
.contact-item-icon:before { background: var(--petrol-primary); }
.map-toggle-icon:before { background: var(--petrol-primary); }

/* Footer */
.footer-social-links a:before { background: var(--petrol-primary); }
.footer-social-links a:hover:before { background: var(--petrol-dark); }
.footer a:hover { color: var(--petrol-primary); }

/* Forms */
.form select:focus { color: var(--petrol-dark); }
.form textarea:focus { color: var(--petrol-dark); }
.form input.newsletter-field:focus::-webkit-input-placeholder { color: var(--petrol-dark); }
.form input.newsletter-field:focus:-moz-placeholder { color: var(--petrol-dark); }
.form input.newsletter-field:focus:-ms-input-placeholder { color: var(--petrol-dark); }

/* Works/Portfolio */
.works-filter a.active,
.works-filter a.active:hover { color: var(--petrol-primary); }
.work-item a:hover { color: var(--petrol-primary); }
.work-navigation a:hover { color: var(--petrol-primary); }

/* Blog */
.blog-item-data a:hover { color: var(--petrol-dark); }
a.blog-item-more { border-color: var(--petrol-primary); }
a.blog-item-more:hover { color: var(--petrol-primary); }
.comment-item-data a:hover { color: var(--petrol-primary); }

/* Pricing */
.pricing-item-inner:hover,
.main .pricing-item-inner { border-color: var(--petrol-primary); }

/* Carousel/Owl */
.owl-page span { border: 1px solid var(--petrol-primary); }
.owl-page.active span { background: var(--petrol-primary); border: 1px solid var(--petrol-primary); }
.dark-content .owl-page span { border: 1px solid var(--petrol-primary); }
.dark-content .owl-page.active span { background: var(--petrol-primary); border: 1px solid var(--petrol-primary); }
.dark-content .owl-prev,
.dark-content .owl-next { color: var(--petrol-primary); }

/* Tabs & Accordions */
.tpl-minimal-tabs li a.active { color: var(--petrol-primary); }
.tpl-minimal-tabs li a.active:hover { border: 1px solid var(--petrol-dark) !important; color: var(--petrol-primary) !important; }
.tpl-alt-tabs li a.active { color: var(--petrol-primary); }
.tpl-alt-tabs li a.active:hover { color: var(--petrol-primary) !important; }
.accordion { border-bottom: 1px solid var(--petrol-primary); }
.accordion dt a { color: var(--petrol-dark); border-top: 1px solid var(--petrol-primary); }
.accordion dd { color: var(--petrol-dark); }
.toggle { border-bottom: 1px solid var(--petrol-primary); }
.toggle dt a { color: var(--petrol-dark); border-top: 1px solid var(--petrol-primary); }
.toggle dd { color: var(--petrol-dark); }

/* Tooltips */
.tooltip-inner { color: var(--petrol-dark); }

/* Icon Examples */
.icon-example-name { color: var(--petrol-dark); }

/* Search */
.search-button:hover { color: var(--petrol-primary); }
.search-field:focus { color: var(--petrol-primary); }

/* Contact Items */
.contact-item a:hover { color: var(--petrol-dark); }

/* Light Content Overrides */
.light-content .ci-icon { color: var(--petrol-primary) !important; }
.light-content .footer-social-links a { color: var(--petrol-dark); }
.light-content .footer-social-links a:hover { color: var(--petrol-dark); }

/* Selection */
::-moz-selection { color: #fff; background: var(--petrol-primary); }
::-webkit-selection { color: #fff; background: var(--petrol-primary); }
::selection { color: #fff; background: var(--petrol-primary); }

/* Focus Visible */
a:focus.focus-visible,
button:focus.focus-visible,
div:focus.focus-visible {
    -moz-outline: 2px dotted var(--petrol-accent) !important;
    outline: 2px dotted var(--petrol-accent) !important;
}

/* Navigation Bar */
.main-nav.dark {
    background-color: var(--petrol-primary) !important;
}
/* Override transparent state - always show petrol blue background */
.main-nav.dark.transparent {
    background-color: var(--petrol-primary) !important;
}
.main-nav.dark.js-transparent {
    background-color: var(--petrol-primary) !important;
}
.main-nav.dark:not(.js-transparent):not(.transparent) {
    background-color: var(--petrol-primary) !important;
}
.main-nav.dark.stick-fixed:not(.js-transparent) {
    background-color: var(--petrol-primary) !important;
}
.main-nav.dark .mobile-nav {
    color: #fff !important;
}

/* Logo Text Styling */
.logo.logo-text {
    font-size: 32px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: -1px;
    font-family: var(--font-global);
    display: inline-block;
    line-height: 1;
    padding: 10px 0;
}
.logo.logo-text:hover {
    color: var(--petrol-accent) !important;
    text-decoration: none !important;
}
/* When navbar is transparent/at top */
.main-nav.transparent .logo.logo-text,
.main-nav.js-transparent .logo.logo-text {
    color: #fff !important;
}
/* When navbar is scrolled/sticky */
.main-nav:not(.transparent):not(.js-transparent) .logo.logo-text {
    color: #fff !important;
}

/* ========================================
   Web Development Feature Selector
   ======================================== */

/* Ensure parent containers don't prevent sticky */
.page-section {
    overflow: visible !important;
}

.container.relative {
    overflow: visible !important;
}

/* Feature Item Styling */
.feature-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    position: relative;
}

.feature-item:hover {
    border-color: #1a7a8a;
    background: #f8fafb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 122, 138, 0.1);
}

.feature-checkbox {
    margin-right: 15px;
    margin-top: 3px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #1a7a8a;
    flex-shrink: 0;
}

.feature-label {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.feature-hours {
    font-size: 14px;
    color: #1a7a8a;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 10px;
}

.feature-checkbox:checked + .feature-label {
    color: #1a7a8a;
}

.feature-item:has(.feature-checkbox:checked) {
    border-color: #1a7a8a;
    background: #f0f8f9;
}

/* Price Summary Box */
.price-summary-box {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    padding: 30px;
    background: #fff;
    border: 2px solid #1a7a8a;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 122, 138, 0.15);
    align-self: flex-start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    z-index: 10;
}

.summary-stats {
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a7a8a;
}

.selected-features {
    max-height: 300px;
    overflow-y: auto;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 20px;
}

.selected-features::-webkit-scrollbar {
    width: 6px;
}

.selected-features::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.selected-features::-webkit-scrollbar-thumb {
    background: #1a7a8a;
    border-radius: 3px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .price-summary-box {
        position: relative;
        top: 0;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .feature-item {
        padding: 12px 15px;
    }

    .feature-label {
        font-size: 14px;
    }

    .feature-hours {
        font-size: 12px;
    }

    .price-summary-box {
        padding: 20px;
    }
}