/* ============================================================
   MGBT — MODERN GULF BRIDGE TRADING EST.
   Bootstrap 5 Overrides
   ============================================================ */

/* ============================================================
   1. BUTTONS — Override Bootstrap defaults
   ============================================================ */

/* Ensure our custom button styles take precedence */
.btn {
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-weight: var(--font-weight-body-500);
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-padding-x: var(--sp-28);
    --bs-btn-padding-y: var(--sp-12);
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-transition: all var(--transition-fast);
}

.btn-primary {
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-accent-hover);
    --bs-btn-hover-border-color: var(--color-accent-hover);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-active-bg: var(--color-accent-hover);
    --bs-btn-active-border-color: var(--color-accent-hover);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
    --bs-btn-focus-shadow-rgb: 215, 25, 32;
}

.btn-secondary {
    --bs-btn-bg: var(--color-white);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-active-bg: var(--color-accent);
    --bs-btn-active-border-color: var(--color-accent);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-white);
    --bs-btn-disabled-border-color: var(--color-accent);
    --bs-btn-disabled-color: var(--color-accent);
}

.btn-lg {
    --bs-btn-padding-x: var(--sp-36);
    --bs-btn-padding-y: var(--sp-14);
    --bs-btn-font-size: 1.0625rem;
}

.btn-sm {
    --bs-btn-padding-x: var(--sp-20);
    --bs-btn-padding-y: var(--sp-8);
    --bs-btn-font-size: 0.8125rem;
}

/* Remove default Bootstrap focus ring in favour of our custom */
.btn:focus {
    box-shadow: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.35);
}

.btn-secondary:focus-visible {
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.25);
}

/* ============================================================
   2. FORMS — Override Bootstrap defaults
   ============================================================ */

.form-control,
.form-select {
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-sm);
    --bs-body-bg: var(--color-white);
    --bs-body-color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.12);
    --bs-body-bg: var(--color-white);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.form-label {
    font-weight: var(--font-weight-body-500);
    font-size: 0.875rem;
    margin-bottom: var(--sp-4);
    color: var(--color-text-primary);
}

.form-text {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Fix textarea resizing */
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* Form select custom arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234B5563' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right var(--sp-16) center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--sp-40);
}

.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.12);
}

/* ============================================================
   3. NAVIGATION — Override Bootstrap navbar defaults
   ============================================================ */

.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;
}

.navbar-brand {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
}

.navbar-nav .nav-link {
    --bs-nav-link-font-size: 0.9375rem;
    --bs-nav-link-font-weight: var(--font-weight-body-500);
    --bs-nav-link-color: var(--color-text-primary);
    --bs-nav-link-hover-color: var(--color-accent);
    --bs-nav-link-padding-x: var(--sp-16);
    --bs-nav-link-padding-y: var(--sp-8);
}

.navbar-nav .nav-link.active {
    color: var(--color-accent);
}

/* Navbar toggle (hamburger) */
.navbar-toggler {
    --bs-navbar-toggler-border-color: transparent;
    --bs-navbar-toggler-font-size: 1rem;
    padding: var(--sp-8);
    border: none;
    border-radius: var(--radius-sm);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.25);
}

.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
}

/* ============================================================
   4. CARDS — Override Bootstrap card defaults
   ============================================================ */

.card {
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-bg: var(--color-white);
    --bs-card-box-shadow: var(--shadow-sm);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.card-body {
    padding: var(--sp-24);
}

.card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading-600);
    font-size: 1.125rem;
    margin-bottom: var(--sp-12);
    color: var(--color-text-primary);
}

.card-text {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* ============================================================
   5. GRID / CONTAINER — Override Bootstrap container
   ============================================================ */

.container {
    --bs-gutter-x: 2rem;
    max-width: var(--container-max);
    padding-left: var(--sp-24);
    padding-right: var(--sp-24);
}

@media (max-width: 575.98px) {
    .container {
        --bs-gutter-x: 1rem;
        padding-left: var(--sp-16);
        padding-right: var(--sp-16);
    }
}

/* Row with consistent gutter */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* ============================================================
   6. BADGES — Override Bootstrap badge defaults
   ============================================================ */

.badge {
    --bs-badge-font-weight: var(--font-weight-body-500);
    --bs-badge-padding-x: var(--sp-12);
    --bs-badge-padding-y: var(--sp-4);
    --bs-badge-border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bg-accent {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.bg-secondary-light {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text-secondary) !important;
}

/* ============================================================
   7. ALERTS — Override Bootstrap alert defaults
   ============================================================ */

.alert {
    --bs-alert-border-radius: var(--radius-md);
    --bs-alert-padding-x: var(--sp-20);
    --bs-alert-padding-y: var(--sp-16);
    --bs-alert-border: 1px solid transparent;
    font-size: 0.9375rem;
}

.alert-success {
    --bs-alert-bg: #d4edda;
    --bs-alert-border-color: #c3e6cb;
    --bs-alert-color: #155724;
}

.alert-danger {
    --bs-alert-bg: #f8d7da;
    --bs-alert-border-color: #f5c6cb;
    --bs-alert-color: #721c24;
}

/* ============================================================
   8. MODAL — Override Bootstrap modal defaults
   ============================================================ */

.modal-content {
    --bs-modal-bg: var(--color-white);
    --bs-modal-border-radius: var(--radius-lg);
    --bs-modal-border-width: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-20) var(--sp-24);
}

.modal-body {
    padding: var(--sp-24);
}

.modal-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--sp-16) var(--sp-24);
}

.modal-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading-600);
    font-size: 1.25rem;
}

/* ============================================================
   9. DROPDOWN — Override Bootstrap dropdown defaults
   ============================================================ */

.dropdown-menu {
    --bs-dropdown-bg: var(--color-white);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-box-shadow: var(--shadow-md);
    --bs-dropdown-link-color: var(--color-text-primary);
    --bs-dropdown-link-hover-color: var(--color-accent);
    --bs-dropdown-link-hover-bg: rgba(215, 25, 32, 0.04);
    --bs-dropdown-padding-y: var(--sp-8);
    padding: var(--sp-8);
    border: 1px solid var(--color-border);
}

.dropdown-item {
    font-size: 0.875rem;
    font-weight: var(--font-weight-body-400);
    padding: var(--sp-8) var(--sp-16);
    border-radius: var(--radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--color-accent);
    background-color: rgba(215, 25, 32, 0.04);
}

/* ============================================================
   10. TABLES — Override Bootstrap table defaults
   ============================================================ */

.table {
    --bs-table-bg: var(--color-white);
    --bs-table-striped-bg: var(--color-bg-alt);
    --bs-table-border-color: var(--color-border);
    --bs-table-color: var(--color-text-primary);
    font-size: 0.9375rem;
}

.table > :not(caption) > * > * {
    padding: var(--sp-12) var(--sp-16);
}

/* ============================================================
   11. LIST GROUP — Override Bootstrap list group defaults
   ============================================================ */

.list-group {
    --bs-list-group-bg: var(--color-white);
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-border-radius: var(--radius-md);
}

.list-group-item {
    --bs-list-group-color: var(--color-text-primary);
    --bs-list-group-action-hover-bg: rgba(215, 25, 32, 0.04);
    --bs-list-group-action-active-color: var(--color-accent);
    --bs-list-group-action-active-bg: rgba(215, 25, 32, 0.08);
    padding: var(--sp-12) var(--sp-20);
    font-size: 0.9375rem;
    border-color: var(--color-border);
}

.list-group-item.active {
    --bs-list-group-active-bg: var(--color-accent);
    --bs-list-group-active-border-color: var(--color-accent);
}

/* ============================================================
   12. PAGINATION — Override Bootstrap pagination defaults
   ============================================================ */

.pagination {
    --bs-pagination-bg: var(--color-white);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-color: var(--color-text-primary);
    --bs-pagination-hover-bg: var(--color-bg-alt);
    --bs-pagination-hover-border-color: var(--color-border);
    --bs-pagination-active-bg: var(--color-accent);
    --bs-pagination-active-border-color: var(--color-accent);
    --bs-pagination-border-radius: var(--radius-sm);
    --bs-pagination-padding-x: var(--sp-16);
    --bs-pagination-padding-y: var(--sp-8);
}

.page-link {
    font-size: 0.875rem;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.25);
}

/* ============================================================
   13. PROGRESS — Override Bootstrap progress defaults
   ============================================================ */

.progress {
    --bs-progress-bg: var(--color-bg-alt);
    --bs-progress-border-radius: var(--radius-sm);
    --bs-progress-height: 8px;
}

.progress-bar {
    --bs-progress-bar-bg: var(--color-accent);
    --bs-progress-bar-transition: width 0.6s ease;
}

/* ============================================================
   14. TOOLTIP — Override Bootstrap tooltip defaults
   ============================================================ */

.tooltip {
    --bs-tooltip-bg: var(--color-text-primary);
    --bs-tooltip-color: var(--color-white);
    --bs-tooltip-border-radius: var(--radius-sm);
    --bs-tooltip-font-size: 0.8125rem;
    --bs-tooltip-padding-x: var(--sp-12);
    --bs-tooltip-padding-y: var(--sp-8);
}

/* ============================================================
   15. POPOVER — Override Bootstrap popover defaults
   ============================================================ */

.popover {
    --bs-popover-bg: var(--color-white);
    --bs-popover-border-color: var(--color-border);
    --bs-popover-border-radius: var(--radius-md);
    --bs-popover-box-shadow: var(--shadow-md);
    --bs-popover-header-bg: var(--color-bg-alt);
    --bs-popover-header-color: var(--color-text-primary);
    --bs-popover-body-color: var(--color-text-secondary);
    --bs-popover-font-size: 0.875rem;
    border: 1px solid var(--color-border);
}

.popover-header {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading-600);
    font-size: 0.9375rem;
    padding: var(--sp-12) var(--sp-16);
}

.popover-body {
    padding: var(--sp-12) var(--sp-16);
}

/* ============================================================
   16. OFF-CANVAS — Override Bootstrap offcanvas defaults
   ============================================================ */

.offcanvas {
    --bs-offcanvas-bg: var(--color-white);
    --bs-offcanvas-border-color: var(--color-border);
    --bs-offcanvas-box-shadow: var(--shadow-lg);
}

.offcanvas-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-20) var(--sp-24);
}

.offcanvas-body {
    padding: var(--sp-24);
}

.offcanvas-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading-600);
}

/* ============================================================
   17. ACCORDION — Override Bootstrap accordion defaults
   ============================================================ */

.accordion {
    --bs-accordion-bg: var(--color-white);
    --bs-accordion-border-color: var(--color-border);
    --bs-accordion-border-radius: var(--radius-md);
    --bs-accordion-btn-bg: var(--color-white);
    --bs-accordion-btn-color: var(--color-text-primary);
    --bs-accordion-btn-focus-border-color: var(--color-accent);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.12);
    --bs-accordion-body-padding-x: var(--sp-24);
    --bs-accordion-body-padding-y: var(--sp-20);
    --bs-accordion-btn-padding-x: var(--sp-24);
    --bs-accordion-btn-padding-y: var(--sp-20);
}

.accordion-button {
    font-family: var(--font-body);
    font-weight: var(--font-weight-body-500);
    font-size: 1.0625rem;
}

.accordion-button:not(.collapsed) {
    color: var(--color-accent);
    background-color: rgba(215, 25, 32, 0.04);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a.5.5 0 0 1 .5.5v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-1 0v-4h-4a.5.5 0 0 1 0-1h4v-4A.5.5 0 0 1 8 3z' fill='%23D71920'/%3E%3C/svg%3E");
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a.5.5 0 0 1 .5.5v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-1 0v-4h-4a.5.5 0 0 1 0-1h4v-4A.5.5 0 0 1 8 3z' fill='%234B5563'/%3E%3C/svg%3E");
}

/* ============================================================
   18. CLOSE BUTTON — Override Bootstrap close button defaults
   ============================================================ */

.btn-close {
    --bs-btn-close-color: var(--color-text-primary);
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.8;
    --bs-btn-close-focus-shadow: 0 0 0 3px rgba(215, 25, 32, 0.25);
    --bs-btn-close-focus-opacity: 1;
    padding: var(--sp-8);
}

/* ============================================================
   19. BREADCRUMB — Override Bootstrap breadcrumb defaults
   ============================================================ */

.breadcrumb {
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-divider-color: var(--color-text-muted);
    --bs-breadcrumb-item-active-color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.breadcrumb-item a {
    color: var(--color-accent);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--color-accent-hover);
}

/* ============================================================
   20. RESPONSIVE UTILITY OVERRIDES
   ============================================================ */

/* Display utilities that maintain our spacing */
.d-flex.gap-2 {
    gap: var(--sp-8) !important;
}

.d-flex.gap-3 {
    gap: var(--sp-16) !important;
}

.d-flex.gap-4 {
    gap: var(--sp-24) !important;
}

/* Text utilities */
.text-accent {
    color: var(--color-accent) !important;
}

.text-muted {
    color: var(--color-text-secondary) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-light {
    background-color: var(--color-bg-alt) !important;
}

/* Border utilities */
.border {
    border-color: var(--color-border) !important;
}

.rounded {
    border-radius: var(--radius-sm) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   21. PRINT STYLES
   ============================================================ */

@media print {
    .site-header,
    .hero-actions .btn,
    .contact-form .btn,
    .footer-legal,
    .navbar-toggler,
    .cta-banner-section .btn {
        display: none !important;
    }

    .site-header {
        position: static;
        background: var(--color-white) !important;
        border-bottom: 1px solid var(--color-border);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hero-section {
        min-height: auto !important;
        padding: var(--sp-40) 0 !important;
    }

    .section-padding {
        padding: var(--sp-32) 0 !important;
    }

    .service-card,
    .portfolio-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid var(--color-border);
    }

    .contact-methods {
        break-inside: avoid;
    }

    .faq-answer {
        max-height: none !important;
        padding: var(--sp-16) !important;
    }

    .faq-question[aria-expanded="false"] .faq-icon {
        display: none;
    }

    .btn-primary,
    .btn-secondary {
        border: 1px solid var(--color-text-primary) !important;
        background: transparent !important;
        color: var(--color-text-primary) !important;
    }
}