/* GuideTheDriver Global Utilities CSS */

/* Page Loading Overlay */
#gtd-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#gtd-loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.gtd-loading-content {
    text-align: center;
    padding: 2rem;
}

/* Dark mode support */
[data-bs-theme="dark"] #gtd-loading-overlay {
    background: rgba(30, 30, 45, 0.95);
}

[data-bs-theme="dark"] #gtd-loading-overlay .text-gray-700 {
    color: #b5b5c3 !important;
}

/* Inline loading spinner for elements */
.gtd-inline-loader {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-inline-loader .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Card loading state */
.gtd-card-loading {
    position: relative;
    pointer-events: none;
}

.gtd-card-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.gtd-card-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid #e4e6ef;
    border-top-color: #009ef7;
    border-radius: 50%;
    z-index: 11;
    animation: gtd-spin 0.8s linear infinite;
}

@keyframes gtd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton loading */
.gtd-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: gtd-skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

.gtd-skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.gtd-skeleton-text:last-child {
    width: 80%;
}

.gtd-skeleton-circle {
    border-radius: 50%;
}

@keyframes gtd-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

[data-bs-theme="dark"] .gtd-skeleton {
    background: linear-gradient(90deg, #2b2b40 25%, #1e1e2d 50%, #2b2b40 75%);
    background-size: 200% 100%;
}

/* Fade in animation for loaded content */
.gtd-fade-in {
    animation: gtd-fade-in 0.3s ease-out;
}

@keyframes gtd-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Back to Top Button */
#gtd-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--bs-primary, #009ef7);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 158, 247, 0.4);
}

#gtd-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#gtd-back-to-top:hover {
    background: var(--bs-primary-active, #0095e8);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 158, 247, 0.5);
}

#gtd-back-to-top i {
    font-size: 1.2rem;
}

/* Image Lightbox */
.gtd-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gtd-lightbox.show {
    opacity: 1;
    visibility: visible;
}

.gtd-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.gtd-lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}

.gtd-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: transform 0.2s ease;
}

.gtd-lightbox-close:hover {
    transform: scale(1.2);
}

.gtd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 20px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 4px;
}

.gtd-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-lightbox-nav.prev {
    left: -60px;
}

.gtd-lightbox-nav.next {
    right: -60px;
}

.gtd-lightbox-counter {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .gtd-lightbox-nav {
        padding: 15px 10px;
        font-size: 1.5rem;
    }

    .gtd-lightbox-nav.prev {
        left: 10px;
    }

    .gtd-lightbox-nav.next {
        right: 10px;
    }

    #gtd-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* Lazy Loading Images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-src]) {
    opacity: 1;
}

/* Keyboard Shortcuts Modal */
.gtd-shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.gtd-shortcuts-modal.show {
    opacity: 1;
    visibility: visible;
}

.gtd-shortcuts-content {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.gtd-shortcuts-modal.show .gtd-shortcuts-content {
    transform: scale(1);
}

.gtd-shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eee;
}

.gtd-shortcuts-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e1e2d;
}

.gtd-shortcuts-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #7e8299;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.gtd-shortcuts-close:hover {
    color: #1e1e2d;
}

.gtd-shortcuts-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(80vh - 150px);
}

.gtd-shortcuts-body table {
    width: 100%;
    border-collapse: collapse;
}

.gtd-shortcuts-body tr:not(:last-child) td {
    padding-bottom: 0.75rem;
}

.gtd-shortcuts-body td:first-child {
    width: 100px;
}

.gtd-shortcuts-body td:last-child {
    color: #5e6278;
}

.gtd-shortcuts-body kbd {
    background: #f5f8fa;
    border: 1px solid #e4e6ef;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: monospace;
    font-size: 0.85rem;
    color: #3f4254;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gtd-shortcuts-footer {
    padding: 1rem 1.5rem;
    background: #f9f9f9;
    text-align: center;
    color: #7e8299;
}

.gtd-shortcuts-footer kbd {
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.75rem;
}

[data-bs-theme="dark"] .gtd-shortcuts-content {
    background: #1e1e2d;
}

[data-bs-theme="dark"] .gtd-shortcuts-header {
    border-bottom-color: #2b2b40;
}

[data-bs-theme="dark"] .gtd-shortcuts-header h3 {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-shortcuts-body kbd {
    background: #2b2b40;
    border-color: #3f4254;
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-shortcuts-body td:last-child {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .gtd-shortcuts-footer {
    background: #151521;
}

/* Password Strength Indicator */
.gtd-password-strength {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-password-strength-bar {
    flex: 1;
    height: 4px;
    background: #e4e6ef;
    border-radius: 2px;
    overflow: hidden;
}

.gtd-password-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

.gtd-password-strength-text {
    font-weight: 500;
    min-width: 60px;
}

[data-bs-theme="dark"] .gtd-password-strength-bar {
    background: #3f4254;
}

/* Character Counter */
.gtd-char-counter {
    transition: color 0.2s ease;
}

.gtd-char-counter.text-danger {
    font-weight: 500;
}

/* Form Validation States */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #50cd89 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2350cd89' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #f1416c !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f1416c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f1416c' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* Password toggle button styling */
.form-control[type="password"] + .btn,
.form-control[type="text"][data-has-toggle="true"] + .btn {
    background: transparent;
    border: none;
}

.form-control[type="password"] + .btn:hover i,
.form-control[type="text"][data-has-toggle="true"] + .btn:hover i {
    color: #009ef7 !important;
}

/* Input group with icon - adjust for password toggle */
.position-relative .form-control-solid {
    padding-right: 2.5rem;
}

/* Print Styles */
@media print {
    /* Hide non-essential elements */
    #kt_app_sidebar,
    #kt_app_header,
    #kt_app_toolbar,
    #kt_app_footer,
    #gtd-back-to-top,
    .gtd-lightbox,
    .gtd-shortcuts-modal,
    #cookieConsentBanner,
    .btn,
    .no-print {
        display: none !important;
    }

    /* Full width content */
    .app-wrapper,
    .app-main,
    .app-content,
    .app-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reset backgrounds */
    body,
    .app-root,
    .app-page,
    .card {
        background: white !important;
        color: black !important;
    }

    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: "";
    }

    /* Page breaks */
    .card {
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Vehicle details print styling */
    .vehicle-gallery {
        page-break-inside: avoid;
    }

    .vehicle-specs {
        page-break-inside: avoid;
    }

    /* Table styling for print */
    table {
        border-collapse: collapse !important;
    }

    table td,
    table th {
        background-color: white !important;
    }
}

/* Mobile Responsiveness */
@media (max-width: 767.98px) {
    /* Better touch targets */
    .btn {
        min-height: 44px;
    }

    /* Improved card spacing */
    .card {
        margin-bottom: 1rem;
    }

    /* Better filter form on mobile */
    .col-xl-3 .card-body .mb-5 {
        margin-bottom: 1rem !important;
    }

    /* Stack filter buttons */
    .col-xl-3 .d-flex.gap-2 {
        flex-direction: column;
    }

    .col-xl-3 .d-flex.gap-2 .btn {
        width: 100%;
    }

    /* Full-width active filter tags */
    .badge.d-flex {
        width: auto;
    }

    /* Improve lightbox on mobile */
    .gtd-lightbox-content {
        max-width: 95vw;
    }

    .gtd-lightbox-nav {
        padding: 10px 8px;
        font-size: 1.2rem;
    }

    .gtd-lightbox-nav.prev {
        left: 5px;
    }

    .gtd-lightbox-nav.next {
        right: 5px;
    }

    /* Sticky mobile actions */
    .gtd-sticky-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    [data-bs-theme="dark"] .gtd-sticky-actions {
        background: #1e1e2d;
    }

    /* Add bottom padding to prevent sticky actions from covering content */
    body.has-sticky-actions {
        padding-bottom: 80px;
    }
}

/* Tablet improvements */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Two column vehicle cards on tablet */
    .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Touch-friendly improvements */
@media (hover: none) {
    /* Remove hover effects on touch devices */
    .hover-elevate-up:hover {
        transform: none;
    }

    /* Better touch feedback */
    .btn:active {
        transform: scale(0.98);
    }

    /* Larger clickable areas for close buttons */
    .gtd-lightbox-close,
    .gtd-shortcuts-close {
        padding: 10px 15px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .gtd-fade-in {
        animation: none;
    }

    #gtd-back-to-top {
        transition: opacity 0.01ms;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor !important;
    }

    .form-control,
    .form-select {
        border-width: 2px !important;
    }

    .badge {
        border: 1px solid currentColor;
    }
}

/* Image Zoom */
[data-zoom] {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.gtd-zoom-lens {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #009ef7;
    background: rgba(0, 158, 247, 0.1);
    display: none;
    pointer-events: none;
    z-index: 10;
}

.gtd-zoom-result {
    position: absolute;
    top: 0;
    left: calc(100% + 15px);
    width: 300px;
    height: 300px;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 100;
}

[data-bs-theme="dark"] .gtd-zoom-result {
    border-color: #3f4254;
    background-color: #1e1e2d;
}

@media (max-width: 991.98px) {
    /* Hide zoom on smaller screens */
    .gtd-zoom-lens,
    .gtd-zoom-result {
        display: none !important;
    }

    [data-zoom] {
        cursor: pointer;
    }
}

/* Newsletter section styling */
.newsletter-input:focus {
    border-color: white !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}

/* Improved image hover effects */
.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 0.4s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.05);
}

/* Card hover lift effect */
.card-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .card-hover-lift:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Badge hover effect */
.badge-hover {
    transition: all 0.2s ease;
}

.badge-hover:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Smooth image load transition */
.img-smooth-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.img-smooth-load.loaded {
    opacity: 1;
}

/* Focus visible styles for accessibility */
:focus-visible {
    outline: 2px solid #009ef7;
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #009ef7;
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: #009ef7;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* Loading shimmer effect */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

[data-bs-theme="dark"] .shimmer {
    background: linear-gradient(90deg, #2b2b40 25%, #1e1e2d 50%, #2b2b40 75%);
    background-size: 200% 100%;
}

/* Autocomplete Dropdown */
.gtd-autocomplete-wrapper {
    width: 100%;
}

.gtd-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;
}

.gtd-autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-autocomplete-item:hover,
.gtd-autocomplete-item.active {
    background: #f5f8fa;
}

.gtd-autocomplete-item:not(:last-child) {
    border-bottom: 1px solid #f1f1f2;
}

[data-bs-theme="dark"] .gtd-autocomplete-dropdown {
    background: #1e1e2d;
    border-color: #3f4254;
}

[data-bs-theme="dark"] .gtd-autocomplete-item:hover,
[data-bs-theme="dark"] .gtd-autocomplete-item.active {
    background: #2b2b40;
}

[data-bs-theme="dark"] .gtd-autocomplete-item:not(:last-child) {
    border-bottom-color: #3f4254;
}

/* Sticky Header */
.gtd-header-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gtd-header-hidden {
    transform: translateY(-100%);
}

[data-bs-theme="dark"] .gtd-header-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Quick View Modal */
#gtd-quick-view-modal .modal-content {
    border: none;
    border-radius: 1rem;
}

#gtd-quick-view-modal .modal-body {
    padding: 0 1.5rem 1.5rem;
}

.gtd-quick-view-gallery {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-quick-view-gallery .main-image {
    flex: 1;
    max-height: 300px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.gtd-quick-view-gallery .thumbnails {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 80px;
}

.gtd-quick-view-gallery .thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.gtd-quick-view-gallery .thumbnail:hover,
.gtd-quick-view-gallery .thumbnail.active {
    opacity: 1;
}

.gtd-quick-view-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.gtd-quick-view-specs .spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.gtd-quick-view-specs .spec-item i {
    width: 20px;
    color: #7e8299;
}

@media (max-width: 575.98px) {
    .gtd-quick-view-gallery {
        flex-direction: column;
    }

    .gtd-quick-view-gallery .thumbnails {
        flex-direction: row;
        width: 100%;
    }

    .gtd-quick-view-gallery .thumbnail {
        width: 60px;
        height: 45px;
    }

    .gtd-quick-view-specs {
        grid-template-columns: 1fr;
    }
}

/* Quick View Button */
.btn-quick-view {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 5;
}

.card:hover .btn-quick-view {
    opacity: 1;
    transform: scale(1);
}

.btn-quick-view:hover {
    background: #009ef7;
    color: white;
}

[data-bs-theme="dark"] .btn-quick-view {
    background: rgba(30, 30, 45, 0.9);
    color: #a1a5b7;
}

[data-bs-theme="dark"] .btn-quick-view:hover {
    background: #009ef7;
    color: white;
}

/* Notification Badge Pulse */
.badge-pulse {
    position: relative;
}

.badge-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 158, 247, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 158, 247, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 158, 247, 0);
    }
}

/* Empty State */
.gtd-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.gtd-empty-state-icon {
    font-size: 4rem;
    color: #e4e6ef;
    margin-bottom: 1.5rem;
}

.gtd-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3f4254;
    margin-bottom: 0.5rem;
}

.gtd-empty-state-description {
    color: #7e8299;
    margin-bottom: 1.5rem;
}

[data-bs-theme="dark"] .gtd-empty-state-icon {
    color: #3f4254;
}

[data-bs-theme="dark"] .gtd-empty-state-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-empty-state-description {
    color: #a1a5b7;
}

/* Page Loading Progress Bar */
#gtd-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#gtd-progress-bar.active {
    opacity: 1;
}

.gtd-progress-bar-inner {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #009ef7, #50cd89);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 158, 247, 0.5);
}

/* Network Error Alert */
.gtd-network-error {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    min-width: 300px;
    max-width: 90vw;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

/* Offline State */
.gtd-offline::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #ffc700;
    z-index: 99998;
}

.gtd-offline .btn[type="submit"],
.gtd-offline form[method="post"] .btn {
    opacity: 0.5;
    pointer-events: none;
}

/* Offline Indicator Badge */
.gtd-offline-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #ffc700;
    color: #1e1e2d;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(255, 199, 0, 0.4);
    z-index: 1000;
    display: none;
}

.gtd-offline .gtd-offline-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-offline-indicator i {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Toast Improvements */
.toast-container {
    z-index: 10001 !important;
}

/* Scroll Progress Indicator */
.gtd-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: #009ef7;
    z-index: 99997;
    width: 0;
    transition: width 0.1s linear;
}

/* Reading Time Indicator */
.gtd-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #7e8299;
    font-size: 0.85rem;
}

.gtd-reading-time i {
    font-size: 0.75rem;
}

/* Tooltip Improvements */
.gtd-tooltip {
    position: relative;
}

.gtd-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #1e1e2d;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.gtd-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

[data-bs-theme="dark"] .gtd-tooltip::after {
    background: #f5f8fa;
    color: #1e1e2d;
}

/* Connection Status Dot */
.gtd-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.gtd-status-dot.online {
    background: #50cd89;
    box-shadow: 0 0 0 2px rgba(80, 205, 137, 0.3);
}

.gtd-status-dot.offline {
    background: #f1416c;
    box-shadow: 0 0 0 2px rgba(241, 65, 108, 0.3);
}

.gtd-status-dot.connecting {
    background: #ffc700;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Data Attribute Styling */
[data-loading="true"] {
    position: relative;
    pointer-events: none;
}

[data-loading="true"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

[data-bs-theme="dark"] [data-loading="true"]::after {
    background: rgba(30, 30, 45, 0.7);
}

/* Visually Hidden (for screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Announcement Region for Screen Readers */
.gtd-announcer {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* PWA Install Banner */
.gtd-pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 1rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gtd-pwa-install-banner.show {
    transform: translateY(0);
}

.gtd-pwa-install-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gtd-pwa-install-content i {
    font-size: 2rem;
    color: #009ef7;
}

.gtd-pwa-install-text {
    display: flex;
    flex-direction: column;
}

.gtd-pwa-install-text strong {
    font-size: 1rem;
    color: #1e1e2d;
}

.gtd-pwa-install-text span {
    font-size: 0.85rem;
    color: #7e8299;
}

.gtd-pwa-install-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .gtd-pwa-install-banner {
    background: #1e1e2d;
}

[data-bs-theme="dark"] .gtd-pwa-install-text strong {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-pwa-install-text span {
    color: #a1a5b7;
}

@media (max-width: 575.98px) {
    .gtd-pwa-install-banner {
        flex-direction: column;
        text-align: center;
    }

    .gtd-pwa-install-content {
        flex-direction: column;
    }

    .gtd-pwa-install-actions {
        width: 100%;
    }

    .gtd-pwa-install-actions .btn {
        flex: 1;
    }
}

/* Native Share Button Enhancement */
[data-share] {
    cursor: pointer;
}

[data-share]:hover {
    opacity: 0.8;
}

/* Installed PWA Detection */
@media (display-mode: standalone) {
    /* Hide install prompts when running as PWA */
    .gtd-pwa-install-banner,
    .pwa-install-prompt {
        display: none !important;
    }

    /* Adjust for standalone mode */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* iOS Safari Specific */
@supports (-webkit-touch-callout: none) {
    /* iOS specific styles */
    .gtd-pwa-install-banner {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Prefers Color Scheme - System Theme Support */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        /* Allow system preference when no explicit theme set */
    }
}

/* Selection Color */
::selection {
    background: rgba(0, 158, 247, 0.3);
    color: inherit;
}

::-moz-selection {
    background: rgba(0, 158, 247, 0.3);
    color: inherit;
}

/* Scroll Snap for Galleries */
.gtd-scroll-snap {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gtd-scroll-snap > * {
    scroll-snap-align: start;
}

/* Hide scrollbar but allow scroll */
.gtd-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.gtd-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Text Truncation Utilities */
.gtd-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect Ratio Utilities */
.gtd-aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.gtd-aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.gtd-aspect-1-1 {
    aspect-ratio: 1 / 1;
}

/* Object Fit Utilities */
.gtd-object-cover {
    object-fit: cover;
}

.gtd-object-contain {
    object-fit: contain;
}

/* Custom Toast Notifications */
.gtd-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.gtd-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gtd-toast.show {
    transform: translateX(0);
}

.gtd-toast.hide {
    transform: translateX(120%);
}

.gtd-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.gtd-toast-success .gtd-toast-icon {
    background: rgba(80, 205, 137, 0.15);
    color: #50cd89;
}

.gtd-toast-error .gtd-toast-icon {
    background: rgba(241, 65, 108, 0.15);
    color: #f1416c;
}

.gtd-toast-warning .gtd-toast-icon {
    background: rgba(255, 199, 0, 0.15);
    color: #ffc700;
}

.gtd-toast-info .gtd-toast-icon {
    background: rgba(0, 158, 247, 0.15);
    color: #009ef7;
}

.gtd-toast-content {
    flex: 1;
    min-width: 0;
}

.gtd-toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e1e2d;
    margin-bottom: 2px;
}

.gtd-toast-message {
    font-size: 0.85rem;
    color: #5e6278;
    word-wrap: break-word;
}

.gtd-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #7e8299;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.gtd-toast-close:hover {
    color: #1e1e2d;
}

.gtd-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: gtd-toast-progress linear forwards;
}

.gtd-toast-success .gtd-toast-progress {
    background: #50cd89;
}

.gtd-toast-error .gtd-toast-progress {
    background: #f1416c;
}

.gtd-toast-warning .gtd-toast-progress {
    background: #ffc700;
}

.gtd-toast-info .gtd-toast-progress {
    background: #009ef7;
}

@keyframes gtd-toast-progress {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}

[data-bs-theme="dark"] .gtd-toast {
    background: #1e1e2d;
}

[data-bs-theme="dark"] .gtd-toast-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-toast-message {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .gtd-toast-close:hover {
    color: #f5f8fa;
}

@media (max-width: 575.98px) {
    .gtd-toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

/* Search History */
.gtd-search-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f1f2;
    font-size: 0.8rem;
    color: #7e8299;
    font-weight: 500;
}

.gtd-search-history-clear {
    background: none;
    border: none;
    color: #009ef7;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

.gtd-search-history-clear:hover {
    color: #0095e8;
    text-decoration: underline;
}

.gtd-search-history-item {
    display: flex;
    align-items: center;
}

.gtd-search-history-item span {
    flex: 1;
}

.gtd-search-history-remove {
    background: none;
    border: none;
    color: #b5b5c3;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.gtd-search-history-item:hover .gtd-search-history-remove {
    opacity: 1;
}

.gtd-search-history-remove:hover {
    color: #f1416c;
}

[data-bs-theme="dark"] .gtd-search-history-header {
    border-bottom-color: #3f4254;
}

/* Vehicle Comparison Panel */
.gtd-compare-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    background: white;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 700px;
}

.gtd-compare-panel.show {
    transform: translateX(-50%) translateY(0);
}

.gtd-compare-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f1f2;
    font-weight: 600;
    color: #1e1e2d;
}

.gtd-compare-panel-items {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

.gtd-compare-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 8px;
    text-align: center;
}

.gtd-compare-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.gtd-compare-item-placeholder {
    width: 80px;
    height: 60px;
    background: #e4e6ef;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7e8299;
    margin-bottom: 0.5rem;
}

.gtd-compare-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gtd-compare-item-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: #3f4254;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.gtd-compare-item-price {
    font-size: 0.7rem;
    color: #50cd89;
    font-weight: 600;
}

.gtd-compare-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gtd-compare-item:hover .gtd-compare-remove {
    opacity: 1;
}

.gtd-compare-remove:hover {
    background: #f1416c;
}

.gtd-compare-panel-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f1f2;
}

[data-bs-theme="dark"] .gtd-compare-panel {
    background: #1e1e2d;
}

[data-bs-theme="dark"] .gtd-compare-panel-header {
    color: #f5f8fa;
    border-bottom-color: #3f4254;
}

[data-bs-theme="dark"] .gtd-compare-item {
    background: #2b2b40;
}

[data-bs-theme="dark"] .gtd-compare-item-placeholder {
    background: #3f4254;
}

[data-bs-theme="dark"] .gtd-compare-item-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-compare-panel-footer {
    border-top-color: #3f4254;
}

@media (max-width: 575.98px) {
    .gtd-compare-panel {
        max-width: none;
        left: 0;
        right: 0;
        transform: translateX(0) translateY(100%);
        border-radius: 12px 12px 0 0;
    }

    .gtd-compare-panel.show {
        transform: translateX(0) translateY(0);
    }

    .gtd-compare-item {
        min-width: 100px;
    }

    .gtd-compare-item img {
        width: 60px;
        height: 45px;
    }

    .gtd-compare-item-placeholder {
        width: 60px;
        height: 45px;
    }
}

/* Compare Button Styles */
[data-compare] {
    transition: all 0.2s ease;
}

[data-compare].active {
    background: #009ef7 !important;
    color: white !important;
    border-color: #009ef7 !important;
}

/* Favorite Button Styles */
[data-favorite] {
    transition: all 0.2s ease;
}

[data-favorite].active i {
    color: #f1416c !important;
}

[data-favorite]:hover i {
    transform: scale(1.1);
}

/* Favorite Heart Animation */
@keyframes heart-beat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

[data-favorite].active i {
    animation: heart-beat 0.4s ease;
}

/* Favorites Count Badge */
.gtd-favorites-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #f1416c;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Gradient Text Utility */
.gtd-text-gradient {
    background: linear-gradient(135deg, #009ef7, #50cd89);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.gtd-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .gtd-glass {
    background: rgba(30, 30, 45, 0.8);
}

/* Animated Border Gradient */
.gtd-border-gradient {
    position: relative;
    border: none !important;
}

.gtd-border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #009ef7, #50cd89);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Animated Underline for Links */
.gtd-animated-underline {
    position: relative;
    text-decoration: none;
}

.gtd-animated-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #009ef7;
    transition: width 0.3s ease;
}

.gtd-animated-underline:hover::after {
    width: 100%;
}

/* Floating Label Input */
.gtd-floating-label {
    position: relative;
}

.gtd-floating-label input,
.gtd-floating-label textarea {
    padding-top: 1.5rem;
}

.gtd-floating-label label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
    color: #7e8299;
    font-size: 1rem;
}

.gtd-floating-label input:focus ~ label,
.gtd-floating-label input:not(:placeholder-shown) ~ label,
.gtd-floating-label textarea:focus ~ label,
.gtd-floating-label textarea:not(:placeholder-shown) ~ label {
    top: 0.75rem;
    transform: translateY(0);
    font-size: 0.75rem;
    color: #009ef7;
}

/* Ripple Effect */
.gtd-ripple {
    position: relative;
    overflow: hidden;
}

.gtd-ripple::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gtd-ripple:active::after {
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    to {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

/* Loading Dots Animation */
.gtd-loading-dots {
    display: inline-flex;
    gap: 4px;
}

.gtd-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: loading-dots 1.4s infinite both;
}

.gtd-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.gtd-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading-dots {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Typing Indicator */
.gtd-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f5f8fa;
    border-radius: 16px;
}

.gtd-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7e8299;
    animation: typing 1.4s infinite both;
}

.gtd-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.gtd-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typing {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

[data-bs-theme="dark"] .gtd-typing {
    background: #2b2b40;
}

/* Number Counter Animation */
.gtd-counter {
    display: inline-block;
}

/* Image Placeholder */
.gtd-image-placeholder {
    background: linear-gradient(135deg, #f5f8fa 0%, #e4e6ef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b5b5c3;
}

[data-bs-theme="dark"] .gtd-image-placeholder {
    background: linear-gradient(135deg, #2b2b40 0%, #1e1e2d 100%);
    color: #5e6278;
}

/* Rating Stars Component */
.gtd-rating-stars {
    line-height: 1;
}

.gtd-rating-star {
    transition: transform 0.15s ease;
}

.gtd-rating-star:hover {
    transform: scale(1.2);
}

.gtd-rating-star i {
    transition: color 0.15s ease;
}

/* Animated Counter */
[data-counter] {
    font-variant-numeric: tabular-nums;
}

/* Table of Contents */
.gtd-toc-list {
    border-left: 2px solid #e4e6ef;
    padding-left: 0;
}

.gtd-toc-item {
    margin-bottom: 0.5rem;
}

.gtd-toc-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #5e6278;
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: all 0.2s ease;
}

.gtd-toc-link:hover {
    color: #009ef7;
    background: rgba(0, 158, 247, 0.05);
}

.gtd-toc-link.active {
    color: #009ef7;
    border-left-color: #009ef7;
    background: rgba(0, 158, 247, 0.08);
    font-weight: 500;
}

[data-bs-theme="dark"] .gtd-toc-list {
    border-left-color: #3f4254;
}

[data-bs-theme="dark"] .gtd-toc-link {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .gtd-toc-link:hover {
    background: rgba(0, 158, 247, 0.1);
}

[data-bs-theme="dark"] .gtd-toc-link.active {
    background: rgba(0, 158, 247, 0.15);
}

/* Comparison Table Enhancements */
.gtd-compare-highlight {
    background: rgba(80, 205, 137, 0.1) !important;
}

.gtd-compare-best::after {
    content: '\f521';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffc700;
    margin-left: 0.5rem;
}

/* Sticky Column for Comparison Table */
.gtd-sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: white;
}

[data-bs-theme="dark"] .gtd-sticky-col {
    background: #1e1e2d;
}

/* Card Dashed Border */
.card-dashed {
    border-style: dashed !important;
    border-width: 2px !important;
}

/* Vehicle Badges */
.gtd-vehicle-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

.gtd-vehicle-badge-new {
    background: linear-gradient(135deg, #009ef7, #50cd89);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.gtd-vehicle-badge-featured {
    background: linear-gradient(135deg, #ffc700, #f1416c);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.gtd-vehicle-badge-price-drop {
    background: #50cd89;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Price Tag Animation */
.gtd-price-highlight {
    animation: price-pulse 2s ease-in-out infinite;
}

@keyframes price-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Stat Card */
.gtd-stat-card {
    text-align: center;
    padding: 1.5rem;
}

.gtd-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.gtd-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e1e2d;
    line-height: 1.2;
}

.gtd-stat-label {
    font-size: 0.9rem;
    color: #7e8299;
    margin-top: 0.25rem;
}

[data-bs-theme="dark"] .gtd-stat-value {
    color: #f5f8fa;
}

/* Testimonial Card */
.gtd-testimonial {
    position: relative;
    padding: 1.5rem;
}

.gtd-testimonial-quote {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 3rem;
    color: rgba(0, 158, 247, 0.1);
    font-family: Georgia, serif;
    line-height: 1;
}

.gtd-testimonial-content {
    font-style: italic;
    color: #5e6278;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.gtd-testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.gtd-testimonial-name {
    font-weight: 600;
    color: #1e1e2d;
}

.gtd-testimonial-role {
    font-size: 0.85rem;
    color: #7e8299;
}

[data-bs-theme="dark"] .gtd-testimonial-content {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .gtd-testimonial-name {
    color: #f5f8fa;
}

/* Feature List */
.gtd-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.gtd-feature-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #50cd89;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

/* Timeline */
.gtd-timeline {
    position: relative;
    padding-left: 30px;
}

.gtd-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e4e6ef;
}

.gtd-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.gtd-timeline-item:last-child {
    padding-bottom: 0;
}

.gtd-timeline-dot {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #009ef7;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #009ef7;
}

.gtd-timeline-content {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
}

.gtd-timeline-date {
    font-size: 0.8rem;
    color: #7e8299;
    margin-bottom: 0.5rem;
}

.gtd-timeline-title {
    font-weight: 600;
    color: #1e1e2d;
    margin-bottom: 0.25rem;
}

.gtd-timeline-text {
    color: #5e6278;
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .gtd-timeline::before {
    background: #3f4254;
}

[data-bs-theme="dark"] .gtd-timeline-dot {
    border-color: #1e1e2d;
}

[data-bs-theme="dark"] .gtd-timeline-content {
    background: #2b2b40;
}

[data-bs-theme="dark"] .gtd-timeline-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-timeline-text {
    color: #a1a5b7;
}

/* Callout Box */
.gtd-callout {
    padding: 1rem 1.25rem;
    border-left: 4px solid;
    border-radius: 0 8px 8px 0;
    margin-bottom: 1rem;
}

.gtd-callout-info {
    background: rgba(0, 158, 247, 0.08);
    border-color: #009ef7;
}

.gtd-callout-success {
    background: rgba(80, 205, 137, 0.08);
    border-color: #50cd89;
}

.gtd-callout-warning {
    background: rgba(255, 199, 0, 0.08);
    border-color: #ffc700;
}

.gtd-callout-danger {
    background: rgba(241, 65, 108, 0.08);
    border-color: #f1416c;
}

.gtd-callout-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-callout-info .gtd-callout-title { color: #009ef7; }
.gtd-callout-success .gtd-callout-title { color: #50cd89; }
.gtd-callout-warning .gtd-callout-title { color: #ffc700; }
.gtd-callout-danger .gtd-callout-title { color: #f1416c; }

/* Hover Card Effect */
.gtd-hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gtd-hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .gtd-hover-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Notification Badge */
.gtd-notification-badge {
    position: relative;
}

.gtd-notification-badge::after {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    background: #f1416c;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-notification-badge[data-count="0"]::after {
    display: none;
}

/* Animated Gradient Background */
.gtd-gradient-bg {
    background: linear-gradient(-45deg, #009ef7, #50cd89, #009ef7, #7239ea);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Blob Shape */
.gtd-blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: blob-morph 8s ease-in-out infinite;
}

@keyframes blob-morph {
    0%, 100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    50% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    }
}

/* Skeleton Loading */
.gtd-skeleton {
    background: linear-gradient(90deg, #f5f5f5 25%, #e8e8e8 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

.gtd-skeleton-text {
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-circle {
    border-radius: 50%;
}

.gtd-skeleton-rect {
    border-radius: 8px;
}

.gtd-skeleton-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

[data-bs-theme="dark"] .gtd-skeleton {
    background: linear-gradient(90deg, #2b2b40 25%, #3f4254 50%, #2b2b40 75%);
    background-size: 200% 100%;
}

[data-bs-theme="dark"] .gtd-skeleton-card {
    background: #1e1e2d;
}

/* Blur-up Lazy Loading */
.gtd-blur-loading {
    filter: blur(10px);
    transform: scale(1.02);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.gtd-blur-loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Empty State Component */
.gtd-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 400px;
    margin: 0 auto;
}

.gtd-empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.1), rgba(80, 205, 137, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #009ef7;
}

.gtd-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e1e2d;
    margin-bottom: 0.5rem;
}

.gtd-empty-state-description {
    color: #7e8299;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.gtd-empty-state-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

[data-bs-theme="dark"] .gtd-empty-state-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-empty-state-description {
    color: #a1a5b7;
}

/* Scroll Progress Indicator */
.gtd-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #009ef7, #50cd89);
    z-index: 10000;
    width: 0;
    transition: width 0.1s ease-out;
}

/* Card Hover Effects */
.hover-elevate-up {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-elevate-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .hover-elevate-up:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Quick View Button */
.btn-quick-view {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    color: #1e1e2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card:hover .btn-quick-view,
.hover-elevate-up:hover .btn-quick-view {
    opacity: 1;
    transform: scale(1);
}

.btn-quick-view:hover {
    background: #009ef7;
    color: white;
}

/* Chip/Tag Styles */
.gtd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: #f5f8fa;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #5e6278;
    transition: all 0.2s ease;
}

.gtd-chip-dismissible {
    padding-right: 0.5rem;
}

.gtd-chip-dismiss {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    color: inherit;
    transition: all 0.2s ease;
}

.gtd-chip-dismiss:hover {
    background: #f1416c;
    color: white;
}

.gtd-chip-primary {
    background: rgba(0, 158, 247, 0.1);
    color: #009ef7;
}

.gtd-chip-success {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-chip-warning {
    background: rgba(255, 199, 0, 0.1);
    color: #ffc700;
}

.gtd-chip-danger {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

[data-bs-theme="dark"] .gtd-chip {
    background: #2b2b40;
    color: #a1a5b7;
}

/* Image Overlay on Hover */
.gtd-image-overlay {
    position: relative;
    overflow: hidden;
}

.gtd-image-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-image-overlay:hover::after {
    opacity: 1;
}

.gtd-image-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: white;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.gtd-image-overlay:hover .gtd-image-overlay-content {
    transform: translateY(0);
    opacity: 1;
}

/* Pull to Refresh Indicator */
.gtd-pull-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.gtd-pull-indicator.visible {
    transform: translateX(-50%) translateY(0);
}

.gtd-pull-indicator i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Text Selection Highlight */
::selection {
    background: rgba(0, 158, 247, 0.2);
    color: inherit;
}

/* Focus Visible Styles for Accessibility */
:focus-visible {
    outline: 2px solid #009ef7;
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #009ef7;
    outline-offset: 2px;
}

/* Skip to Content Link */
.gtd-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #009ef7;
    color: white;
    padding: 0.5rem 1rem;
    z-index: 100000;
    transition: top 0.3s ease;
}

.gtd-skip-link:focus {
    top: 0;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .gtd-skeleton,
    .gtd-blur-loading,
    .gtd-blur-loaded,
    .hover-elevate-up,
    .gtd-hover-card,
    .btn-quick-view,
    .gtd-chip,
    .gtd-image-overlay::after,
    .gtd-image-overlay-content,
    .gtd-pull-indicator,
    [data-favorite] i,
    [data-compare] {
        transition: none !important;
        animation: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .gtd-skeleton {
        background: #ccc;
    }

    .gtd-empty-state-icon {
        border: 2px solid currentColor;
    }

    .btn-quick-view {
        border: 2px solid currentColor;
    }

    .gtd-chip {
        border: 1px solid currentColor;
    }
}

/* Countdown Timer */
.gtd-countdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.gtd-countdown-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e1e2d;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gtd-countdown-label {
    font-size: 0.7rem;
    color: #7e8299;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.gtd-countdown-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7e8299;
    margin: 0 0.25rem;
}

.gtd-countdown-expired {
    color: #f1416c;
    font-weight: 600;
}

.gtd-countdown-compact {
    font-size: 1rem;
    font-weight: 600;
    color: #1e1e2d;
}

[data-bs-theme="dark"] .gtd-countdown-value {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gtd-countdown-compact {
    color: #f5f8fa;
}

/* Countdown Card Variant */
.gtd-countdown-card {
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.1), rgba(80, 205, 137, 0.1));
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.gtd-countdown-card .gtd-countdown-item {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .gtd-countdown-card .gtd-countdown-item {
    background: #2b2b40;
}

/* Line Clamp Utilities */
.gtd-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Copy Button Feedback */
[data-copy] {
    cursor: pointer;
    transition: color 0.2s ease;
}

[data-copy]:hover {
    color: #009ef7;
}

/* Vehicle Card Specific */
.gtd-vehicle-card {
    overflow: hidden;
}

.gtd-vehicle-card .card-body {
    display: flex;
    flex-direction: column;
}

.gtd-vehicle-card a:hover {
    text-decoration: none;
}

/* Badge Pulse Animation */
.gtd-badge-pulse {
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(80, 205, 137, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(80, 205, 137, 0);
    }
}

/* Price Change Indicators */
.gtd-price-up {
    color: #f1416c;
}

.gtd-price-up::before {
    content: '\f062';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 0.25rem;
}

.gtd-price-down {
    color: #50cd89;
}

.gtd-price-down::before {
    content: '\f063';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 0.25rem;
}

/* Input Masks Visual Feedback */
input[data-mask]:focus {
    border-color: #009ef7;
}

input[data-mask].is-valid {
    border-color: #50cd89;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2350cd89' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* Monospace for Registration/VIN */
.gtd-mono {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* UK Registration Plate Style */
.gtd-registration-plate {
    display: inline-block;
    background: #f7d117;
    color: #000;
    font-family: 'Charles Wright', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Scroll Margin for Anchor Links */
[id] {
    scroll-margin-top: 100px;
}

/* Sticky Sidebar */
.gtd-sticky-sidebar {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Back to Top Enhancement */
.gtd-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Notification Dot */
.gtd-notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #f1416c;
    border-radius: 50%;
    border: 2px solid white;
}

[data-bs-theme="dark"] .gtd-notification-dot {
    border-color: #1e1e2d;
}

/* Loading State for Buttons */
.gtd-btn-loading {
    position: relative;
    pointer-events: none;
}

.gtd-btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-btn-loading .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* Success Checkmark Animation */
.gtd-success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.gtd-success-checkmark svg {
    width: 100%;
    height: 100%;
}

.gtd-success-checkmark .circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #50cd89;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.gtd-success-checkmark .check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: #50cd89;
    fill: none;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   LIGHTBOX / IMAGE GALLERY
   ============================================ */

.gtd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gtd-lightbox.show {
    opacity: 1;
    visibility: visible;
}

.gtd-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.gtd-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gtd-lightbox-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 200px;
}

.gtd-lightbox-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.gtd-lightbox-loader {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-lightbox-prev,
.gtd-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-lightbox-prev {
    left: -60px;
}

.gtd-lightbox-next {
    right: -60px;
}

.gtd-lightbox-prev:hover,
.gtd-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-lightbox-caption {
    color: white;
    text-align: center;
    padding: 1rem 0 0.5rem;
    max-width: 80vw;
    font-size: 0.9rem;
}

.gtd-lightbox-counter {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

/* Mobile lightbox adjustments */
@media (max-width: 768px) {
    .gtd-lightbox-prev,
    .gtd-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .gtd-lightbox-prev {
        left: 10px;
    }

    .gtd-lightbox-next {
        right: 10px;
    }

    .gtd-lightbox-close {
        top: 10px;
        right: 10px;
    }

    .gtd-lightbox-image {
        max-width: 100vw;
        max-height: 70vh;
    }
}

/* Thumbnail grid for image galleries */
.gtd-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
}

.gtd-thumbnail {
    aspect-ratio: 1;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.gtd-thumbnail:hover {
    border-color: var(--bs-primary);
    transform: scale(1.05);
}

.gtd-thumbnail.active {
    border-color: var(--bs-primary);
}

.gtd-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide non-essential elements */
    .gtd-back-to-top,
    .gtd-compare-panel,
    .gtd-progress-bar,
    .gtd-toast-container,
    .gtd-quick-view-modal,
    .gtd-lightbox,
    .gtd-pwa-install-prompt,
    .gtd-offline-indicator,
    .btn-quick-view,
    [data-compare],
    [data-favorite],
    .navbar,
    .sidebar,
    .footer,
    .btn-print,
    .no-print {
        display: none !important;
    }

    /* Reset backgrounds for print */
    body {
        background: white !important;
        color: black !important;
    }

    /* Ensure content is visible */
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    /* Page setup */
    @page {
        margin: 1.5cm;
        size: A4;
    }

    /* Avoid page breaks inside elements */
    .card,
    tr,
    .gtd-vehicle-card,
    .gtd-stat-card,
    figure,
    blockquote {
        page-break-inside: avoid;
    }

    /* Headers should not be orphaned */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    /* Links - show URL */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Don't show URL for internal links */
    a[href^="#"]:after,
    a[href^="/"]:after,
    a.no-print-url:after,
    nav a:after,
    .btn:after {
        content: "";
    }

    /* Make images fit */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Table styling for print */
    table {
        border-collapse: collapse !important;
    }

    th, td {
        border: 1px solid #ddd !important;
        padding: 0.5rem !important;
    }

    thead {
        display: table-header-group;
    }

    /* Comparison table specific */
    .gtd-compare-table th,
    .gtd-compare-table td {
        padding: 0.75rem !important;
    }

    /* Price display */
    .gtd-price-display {
        font-size: 1.25rem !important;
    }

    /* Registration plate */
    .gtd-registration-plate {
        background: #f7d117 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Badge colors */
    .badge {
        border: 1px solid currentColor !important;
    }

    /* Vehicle details specific */
    .gtd-vehicle-details {
        max-width: 100% !important;
    }

    /* Force backgrounds to print for important elements */
    .badge-light-success,
    .badge-light-warning,
    .badge-light-danger,
    .badge-light-info {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Print-specific visible class */
.print-only {
    display: none !important;
}

@media print {
    .print-only {
        display: block !important;
    }
}

/* Print header/footer (visible only in print) */
.gtd-print-header,
.gtd-print-footer {
    display: none;
}

@media print {
    .gtd-print-header {
        display: block;
        text-align: center;
        padding-bottom: 1rem;
        border-bottom: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .gtd-print-footer {
        display: block;
        text-align: center;
        padding-top: 1rem;
        border-top: 1px solid #ddd;
        margin-top: 1rem;
        font-size: 0.8rem;
        color: #666;
    }
}

/* ============================================
   BREADCRUMB STYLES
   ============================================ */

.gtd-breadcrumb {
    padding: 0.75rem 0;
    background: transparent;
}

.gtd-breadcrumb .breadcrumb {
    margin-bottom: 0;
}

.gtd-breadcrumb .breadcrumb-item a {
    color: var(--bs-gray-600);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gtd-breadcrumb .breadcrumb-item a:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumb .breadcrumb-item.active {
    color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-breadcrumb .breadcrumb-item a {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-breadcrumb .breadcrumb-item a:hover {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-breadcrumb .breadcrumb-item.active {
    color: var(--bs-gray-200);
}

/* Breadcrumb with background */
.gtd-breadcrumb-card {
    background: var(--bs-gray-100);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-breadcrumb-card {
    background: var(--bs-gray-800);
}

/* ============================================
   FORM VALIDATION STYLES
   ============================================ */

/* Enhanced validation feedback */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #50cd89;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2350cd89' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #f1416c;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f1416c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f1416c' stroke='none'/%3e%3c/svg%3e");
}

.valid-feedback {
    color: #50cd89;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.invalid-feedback {
    color: #f1416c;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Shake animation for invalid fields */
@keyframes gtd-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    animation: gtd-shake 0.5s ease-in-out;
}

/* Required field indicator */
.gtd-required::after {
    content: " *";
    color: #f1416c;
}

/* Form field hints */
.gtd-field-hint {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Password strength indicator */
.gtd-password-strength {
    display: flex;
    gap: 4px;
    margin-top: 0.5rem;
}

.gtd-password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--bs-gray-300);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.gtd-password-strength.weak .gtd-password-strength-bar:nth-child(1) {
    background: #f1416c;
}

.gtd-password-strength.fair .gtd-password-strength-bar:nth-child(-n+2) {
    background: #ffc700;
}

.gtd-password-strength.good .gtd-password-strength-bar:nth-child(-n+3) {
    background: #7239ea;
}

.gtd-password-strength.strong .gtd-password-strength-bar {
    background: #50cd89;
}

/* Character counter */
.gtd-char-counter {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-align: right;
    margin-top: 0.25rem;
}

.gtd-char-counter.warning {
    color: #ffc700;
}

.gtd-char-counter.danger {
    color: #f1416c;
}

/* ============================================
   ADDITIONAL UTILITY CLASSES
   ============================================ */

/* Aspect ratio utilities */
.gtd-ratio-1x1 { aspect-ratio: 1 / 1; }
.gtd-ratio-4x3 { aspect-ratio: 4 / 3; }
.gtd-ratio-16x9 { aspect-ratio: 16 / 9; }
.gtd-ratio-21x9 { aspect-ratio: 21 / 9; }

/* Object fit utilities */
.gtd-object-cover { object-fit: cover; }
.gtd-object-contain { object-fit: contain; }
.gtd-object-fill { object-fit: fill; }

/* Overflow utilities */
.gtd-overflow-hidden { overflow: hidden; }
.gtd-overflow-auto { overflow: auto; }
.gtd-overflow-x-auto { overflow-x: auto; overflow-y: hidden; }
.gtd-overflow-y-auto { overflow-y: auto; overflow-x: hidden; }

/* Z-index utilities */
.gtd-z-0 { z-index: 0; }
.gtd-z-10 { z-index: 10; }
.gtd-z-20 { z-index: 20; }
.gtd-z-30 { z-index: 30; }
.gtd-z-40 { z-index: 40; }
.gtd-z-50 { z-index: 50; }
.gtd-z-auto { z-index: auto; }

/* Cursor utilities */
.gtd-cursor-pointer { cursor: pointer; }
.gtd-cursor-default { cursor: default; }
.gtd-cursor-move { cursor: move; }
.gtd-cursor-not-allowed { cursor: not-allowed; }
.gtd-cursor-zoom-in { cursor: zoom-in; }
.gtd-cursor-zoom-out { cursor: zoom-out; }

/* User select utilities */
.gtd-select-none { user-select: none; }
.gtd-select-all { user-select: all; }
.gtd-select-auto { user-select: auto; }

/* Pointer events */
.gtd-pointer-events-none { pointer-events: none; }
.gtd-pointer-events-auto { pointer-events: auto; }

/* Whitespace utilities */
.gtd-whitespace-nowrap { white-space: nowrap; }
.gtd-whitespace-pre { white-space: pre; }
.gtd-whitespace-pre-wrap { white-space: pre-wrap; }
.gtd-whitespace-normal { white-space: normal; }

/* Word break utilities */
.gtd-break-normal { word-break: normal; overflow-wrap: normal; }
.gtd-break-words { overflow-wrap: break-word; }
.gtd-break-all { word-break: break-all; }

/* Text transform utilities */
.gtd-uppercase { text-transform: uppercase; }
.gtd-lowercase { text-transform: lowercase; }
.gtd-capitalize { text-transform: capitalize; }
.gtd-normal-case { text-transform: none; }

/* Font variants */
.gtd-tabular-nums { font-variant-numeric: tabular-nums; }
.gtd-ordinal { font-variant-numeric: ordinal; }
.gtd-slashed-zero { font-variant-numeric: slashed-zero; }

/* Transition utilities */
.gtd-transition-none { transition: none; }
.gtd-transition-all { transition: all 0.2s ease; }
.gtd-transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.gtd-transition-opacity { transition: opacity 0.2s ease; }
.gtd-transition-transform { transition: transform 0.2s ease; }

/* Scale utilities */
.gtd-scale-90 { transform: scale(0.9); }
.gtd-scale-95 { transform: scale(0.95); }
.gtd-scale-100 { transform: scale(1); }
.gtd-scale-105 { transform: scale(1.05); }
.gtd-scale-110 { transform: scale(1.1); }

/* Rotate utilities */
.gtd-rotate-0 { transform: rotate(0deg); }
.gtd-rotate-45 { transform: rotate(45deg); }
.gtd-rotate-90 { transform: rotate(90deg); }
.gtd-rotate-180 { transform: rotate(180deg); }
.gtd-rotate-270 { transform: rotate(270deg); }

/* Opacity utilities */
.gtd-opacity-0 { opacity: 0; }
.gtd-opacity-25 { opacity: 0.25; }
.gtd-opacity-50 { opacity: 0.5; }
.gtd-opacity-75 { opacity: 0.75; }
.gtd-opacity-100 { opacity: 1; }

/* Hover opacity */
.gtd-hover-opacity-100:hover { opacity: 1; }
.gtd-hover-opacity-75:hover { opacity: 0.75; }
.gtd-hover-opacity-50:hover { opacity: 0.5; }

/* Focus ring */
.gtd-focus-ring:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.gtd-focus-ring:focus:not(:focus-visible) {
    outline: none;
}

/* Accessible hidden (screen reader only) */
.gtd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gtd-sr-only-focusable:focus,
.gtd-sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   TABS COMPONENT
   ============================================ */

.gtd-tabs {
    display: flex;
    flex-direction: column;
}

.gtd-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--bs-gray-200);
    gap: 0;
}

.gtd-tabs-nav [data-tab] {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--bs-gray-600);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.gtd-tabs-nav [data-tab]:hover {
    color: var(--bs-gray-800);
}

.gtd-tabs-nav [data-tab].active {
    color: var(--bs-primary);
}

.gtd-tabs-nav [data-tab].active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--bs-primary);
}

.gtd-tabs-content {
    padding: 1.5rem 0;
}

.gtd-tabs-content [data-tab-panel] {
    display: none;
}

.gtd-tabs-content [data-tab-panel].active {
    display: block;
    animation: gtd-tab-fade-in 0.3s ease;
}

@keyframes gtd-tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pill style tabs */
.gtd-tabs-pills .gtd-tabs-nav {
    border-bottom: none;
    gap: 0.5rem;
    background: var(--bs-gray-100);
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.gtd-tabs-pills .gtd-tabs-nav [data-tab] {
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
}

.gtd-tabs-pills .gtd-tabs-nav [data-tab].active {
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gtd-tabs-pills .gtd-tabs-nav [data-tab].active::after {
    display: none;
}

[data-bs-theme="dark"] .gtd-tabs-nav {
    border-bottom-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-tabs-pills .gtd-tabs-nav {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tabs-pills .gtd-tabs-nav [data-tab].active {
    background: var(--bs-gray-700);
}

/* ============================================
   ACCORDION COMPONENT
   ============================================ */

.gtd-accordion {
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-accordion [data-accordion-item] {
    border-bottom: 1px solid var(--bs-gray-200);
}

.gtd-accordion [data-accordion-item]:last-child {
    border-bottom: none;
}

.gtd-accordion [data-accordion-header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    font-weight: 500;
    color: var(--bs-gray-800);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.gtd-accordion [data-accordion-header]:hover {
    background: var(--bs-gray-50);
}

.gtd-accordion [data-accordion-header]::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    transition: transform 0.3s ease;
}

.gtd-accordion [data-accordion-item].open [data-accordion-header]::after {
    transform: rotate(180deg);
}

.gtd-accordion [data-accordion-content] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gtd-accordion [data-accordion-item].open [data-accordion-content] {
    /* max-height set by JS */
}

.gtd-accordion-body {
    padding: 0 1.25rem 1.25rem;
}

[data-bs-theme="dark"] .gtd-accordion {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-accordion [data-accordion-item] {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-accordion [data-accordion-header] {
    color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-accordion [data-accordion-header]:hover {
    background: var(--bs-gray-800);
}

/* ============================================
   AVATAR COMPONENT
   ============================================ */

.gtd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bs-gray-300);
    color: white;
    font-weight: 600;
    position: relative;
    flex-shrink: 0;
}

.gtd-avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
}

.gtd-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.gtd-avatar-md {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.gtd-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 1.125rem;
}

.gtd-avatar-xl {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
}

.gtd-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-avatar-initials {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gtd-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: 2px solid white;
}

.gtd-avatar-status-online {
    background: #50cd89;
}

.gtd-avatar-status-offline {
    background: var(--bs-gray-400);
}

.gtd-avatar-status-busy {
    background: #f1416c;
}

.gtd-avatar-status-away {
    background: #ffc700;
}

[data-bs-theme="dark"] .gtd-avatar-status {
    border-color: var(--bs-gray-900);
}

/* Avatar group */
.gtd-avatar-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.gtd-avatar-group .gtd-avatar {
    margin-left: -10px;
    border: 2px solid white;
    transition: transform 0.2s ease, z-index 0.2s ease;
}

.gtd-avatar-group .gtd-avatar:last-child {
    margin-left: 0;
}

.gtd-avatar-group .gtd-avatar:hover {
    transform: translateY(-3px);
    z-index: 10;
}

[data-bs-theme="dark"] .gtd-avatar-group .gtd-avatar {
    border-color: var(--bs-gray-900);
}

/* ============================================
   SCROLL SPY
   ============================================ */

.gtd-scroll-spy {
    position: sticky;
    top: 100px;
}

.gtd-scroll-spy a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-gray-600);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.gtd-scroll-spy a:hover {
    color: var(--bs-gray-800);
}

.gtd-scroll-spy a.active {
    color: var(--bs-primary);
    border-left-color: var(--bs-primary);
    font-weight: 500;
}

[data-bs-theme="dark"] .gtd-scroll-spy a {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-scroll-spy a:hover {
    color: var(--bs-gray-200);
}

/* ============================================
   AUTO-SAVE INDICATOR
   ============================================ */

.gtd-autosave-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0.5rem 1rem;
    background: var(--bs-gray-800);
    color: white;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

.gtd-autosave-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

[data-bs-theme="dark"] .gtd-autosave-indicator {
    background: var(--bs-gray-700);
}

/* ============================================
   FILE PREVIEW / DROP ZONE
   ============================================ */

.gtd-drop-zone {
    border: 2px dashed var(--bs-gray-300);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.gtd-drop-zone:hover,
.gtd-drop-zone-active {
    border-color: var(--bs-primary);
    background: rgba(0, 158, 247, 0.05);
}

.gtd-drop-zone-icon {
    font-size: 2.5rem;
    color: var(--bs-gray-400);
    margin-bottom: 1rem;
}

.gtd-drop-zone-text {
    color: var(--bs-gray-600);
}

.gtd-drop-zone-hint {
    font-size: 0.85rem;
    color: var(--bs-gray-500);
    margin-top: 0.5rem;
}

[data-bs-theme="dark"] .gtd-drop-zone {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-drop-zone:hover,
[data-bs-theme="dark"] .gtd-drop-zone-active {
    background: rgba(0, 158, 247, 0.1);
}

/* File previews */
.gtd-file-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.gtd-file-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    position: relative;
}

.gtd-file-preview-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.gtd-file-preview-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 0.375rem;
    font-size: 2rem;
    color: var(--bs-gray-500);
}

.gtd-file-preview-info {
    text-align: center;
    margin-top: 0.5rem;
    width: 100%;
}

.gtd-file-preview-name {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-file-preview-size {
    display: block;
    font-size: 0.7rem;
    color: var(--bs-gray-500);
}

.gtd-file-preview-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1416c;
    color: white;
    font-size: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.gtd-file-preview-remove:hover {
    transform: scale(1.1);
}

[data-bs-theme="dark"] .gtd-file-preview {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-file-preview-icon {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-file-preview-name {
    color: var(--bs-gray-300);
}

/* ============================================
   PROGRESS STEPPER
   ============================================ */

.gtd-stepper {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gtd-stepper-item {
    flex: 1;
    position: relative;
    text-align: center;
}

.gtd-stepper-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--bs-gray-300);
}

.gtd-stepper-item.completed::after {
    background: #50cd89;
}

.gtd-stepper-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-gray-200);
    color: var(--bs-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.gtd-stepper-item.active .gtd-stepper-marker {
    background: var(--bs-primary);
    color: white;
}

.gtd-stepper-item.completed .gtd-stepper-marker {
    background: #50cd89;
    color: white;
}

.gtd-stepper-item.completed .gtd-stepper-marker::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.gtd-stepper-title {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-gray-600);
}

.gtd-stepper-item.active .gtd-stepper-title {
    color: var(--bs-primary);
}

.gtd-stepper-item.completed .gtd-stepper-title {
    color: #50cd89;
}

.gtd-stepper-desc {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Vertical stepper */
.gtd-stepper-vertical {
    flex-direction: column;
}

.gtd-stepper-vertical .gtd-stepper-item {
    display: flex;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 2rem;
}

.gtd-stepper-vertical .gtd-stepper-item:not(:last-child)::after {
    top: 32px;
    left: 15px;
    right: auto;
    bottom: 0;
    width: 2px;
    height: auto;
}

.gtd-stepper-vertical .gtd-stepper-content {
    margin-left: 1rem;
}

.gtd-stepper-vertical .gtd-stepper-title {
    margin-top: 0;
}

[data-bs-theme="dark"] .gtd-stepper-item:not(:last-child)::after {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-stepper-marker {
    background: var(--bs-gray-700);
    color: var(--bs-gray-400);
}

/* ============================================
   BADGE UTILITIES
   ============================================ */

.gtd-badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-badge-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.gtd-badge-pulse {
    position: relative;
}

.gtd-badge-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: gtd-pulse 1.5s ease-out infinite;
}

@keyframes gtd-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Notification badge */
.gtd-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f1416c;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

[data-bs-theme="dark"] .gtd-notification-badge {
    border-color: var(--bs-gray-900);
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.gtd-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding: 1.25rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gtd-cookie-banner.show {
    transform: translateY(0);
}

.gtd-cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.gtd-cookie-banner-text {
    flex: 1;
}

.gtd-cookie-banner-text h5 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.gtd-cookie-banner-text p {
    font-size: 0.875rem;
    line-height: 1.5;
}

.gtd-cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .gtd-cookie-banner {
    background: var(--bs-gray-900);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .gtd-cookie-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .gtd-cookie-banner-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .gtd-cookie-banner-actions .btn {
        flex: 1;
        min-width: 100px;
    }
}

/* ============================================
   KEYBOARD SHORTCUTS
   ============================================ */

.gtd-shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-shortcut-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gtd-shortcut-keys {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 100px;
}

.gtd-shortcut-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gtd-shortcut-desc {
    color: var(--bs-gray-600);
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .gtd-shortcut-keys kbd {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-shortcut-desc {
    color: var(--bs-gray-400);
}

/* ============================================
   INFINITE SCROLL
   ============================================ */

.gtd-infinite-scroll-sentinel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
}

.gtd-infinite-scroll-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.gtd-infinite-scroll-end {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */

.gtd-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bs-gray-200);
    z-index: 1050;
}

.gtd-reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary), #00b2ff);
    width: 0;
    transition: width 0.1s linear;
}

[data-bs-theme="dark"] .gtd-reading-progress {
    background: var(--bs-gray-700);
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */

.gtd-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gtd-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .gtd-card-hover:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Lift effect */
.gtd-lift {
    transition: transform 0.3s ease;
}

.gtd-lift:hover {
    transform: translateY(-8px);
}

/* Scale effect */
.gtd-scale-hover {
    transition: transform 0.2s ease;
}

.gtd-scale-hover:hover {
    transform: scale(1.02);
}

/* Glow effect */
.gtd-glow-hover {
    transition: box-shadow 0.2s ease;
}

.gtd-glow-hover:hover {
    box-shadow: 0 0 20px rgba(0, 158, 247, 0.3);
}

/* ============================================
   GLASSMORPHISM
   ============================================ */

.gtd-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] .gtd-glass {
    background: rgba(30, 30, 45, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   GRADIENT TEXT
   ============================================ */

.gtd-gradient-text {
    background: linear-gradient(135deg, var(--bs-primary), #7239ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gtd-gradient-text-warm {
    background: linear-gradient(135deg, #f1416c, #ffc700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gtd-gradient-text-cool {
    background: linear-gradient(135deg, #009ef7, #50cd89);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   DIVIDERS
   ============================================ */

.gtd-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--bs-gray-500);
    font-size: 0.85rem;
}

.gtd-divider::before,
.gtd-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--bs-gray-300);
}

.gtd-divider::before {
    margin-right: 1rem;
}

.gtd-divider::after {
    margin-left: 1rem;
}

[data-bs-theme="dark"] .gtd-divider::before,
[data-bs-theme="dark"] .gtd-divider::after {
    border-color: var(--bs-gray-700);
}

/* Vertical divider */
.gtd-divider-vertical {
    display: inline-block;
    width: 1px;
    height: 1.5em;
    background: var(--bs-gray-300);
    margin: 0 1rem;
    vertical-align: middle;
}

[data-bs-theme="dark"] .gtd-divider-vertical {
    background: var(--bs-gray-700);
}

/* ============================================
   FLOATING LABELS
   ============================================ */

.gtd-floating-label {
    position: relative;
}

.gtd-floating-label input,
.gtd-floating-label textarea,
.gtd-floating-label select {
    padding-top: 1.25rem;
}

.gtd-floating-label label {
    position: absolute;
    top: 0;
    left: 0.75rem;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    transition: all 0.2s ease;
    pointer-events: none;
    padding-top: 0.25rem;
}

.gtd-floating-label input:placeholder-shown + label,
.gtd-floating-label textarea:placeholder-shown + label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.gtd-floating-label input:focus + label,
.gtd-floating-label textarea:focus + label,
.gtd-floating-label input:not(:placeholder-shown) + label,
.gtd-floating-label textarea:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(0);
    font-size: 0.75rem;
    color: var(--bs-primary);
}

/* ============================================
   FEATURE LIST
   ============================================ */

.gtd-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.gtd-feature-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #50cd89;
    flex-shrink: 0;
    margin-top: 0.2em;
}

.gtd-feature-list.gtd-feature-list-x li::before {
    content: '\f00d';
    color: #f1416c;
}

/* ============================================
   DATA TABLE SORTING
   ============================================ */

.gtd-sortable {
    user-select: none;
    white-space: nowrap;
}

.gtd-sortable:hover {
    background: rgba(0, 158, 247, 0.05);
}

.gtd-sortable i {
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.gtd-sortable:hover i {
    opacity: 1;
}

.gtd-paginated-hidden {
    display: none !important;
}

[data-datatable] tbody tr {
    transition: background-color 0.15s ease;
}

[data-datatable] tbody tr:hover {
    background: rgba(0, 158, 247, 0.04);
}

/* Table search input */
[data-table-search] {
    min-width: 200px;
}

/* No results message */
.gtd-no-results {
    display: none;
    text-align: center;
    padding: 2rem;
    color: var(--bs-gray-500);
}

.gtd-no-results i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* ============================================
   RANGE SLIDER
   ============================================ */

.gtd-range-slider {
    position: relative;
    padding: 1.5rem 0;
}

.gtd-range-track {
    position: relative;
    height: 6px;
    background: var(--bs-gray-200);
    border-radius: 3px;
}

.gtd-range-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary), #7239ea);
    border-radius: 3px;
    transition: left 0.1s ease, width 0.1s ease;
}

.gtd-range-inputs {
    position: relative;
    height: 0;
}

.gtd-range-inputs input[type="range"] {
    position: absolute;
    width: 100%;
    top: -18px;
    height: 6px;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
}

.gtd-range-inputs input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gtd-range-inputs input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.gtd-range-inputs input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.gtd-range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-range-track {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-range-inputs input[type="range"]::-webkit-slider-thumb {
    background: var(--bs-gray-200);
}

/* ============================================
   BADGE ANIMATIONS
   ============================================ */

.gtd-badge-pulse {
    animation: gtd-badge-pulse 0.4s ease;
}

@keyframes gtd-badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

.gtd-badge-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    background: #f1416c;
    color: #fff;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dot-style badge (no number) */
.gtd-badge-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #f1416c;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: gtd-pulse-dot 2s infinite;
}

@keyframes gtd-pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(241, 65, 108, 0.5);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(241, 65, 108, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(241, 65, 108, 0);
    }
}

/* ============================================
   COLLAPSIBLE SIDEBAR
   ============================================ */

[data-sidebar] {
    transition: width 0.3s ease, min-width 0.3s ease;
}

[data-sidebar].sidebar-collapsed {
    width: 70px !important;
    min-width: 70px !important;
}

[data-sidebar].sidebar-collapsed .sidebar-text,
[data-sidebar].sidebar-collapsed .menu-title {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

[data-sidebar].sidebar-collapsed .menu-link {
    justify-content: center;
}

[data-sidebar].sidebar-collapsed .menu-link i,
[data-sidebar].sidebar-collapsed .menu-link .menu-icon {
    margin-right: 0;
}

/* Hover expand for collapsed sidebar */
[data-sidebar].sidebar-hover-expanded {
    width: 265px !important;
    min-width: 265px !important;
    z-index: 100;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
}

[data-sidebar].sidebar-hover-expanded .sidebar-text,
[data-sidebar].sidebar-hover-expanded .menu-title {
    opacity: 1;
    visibility: visible;
}

/* Sidebar toggle button */
[data-sidebar-toggle] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bs-gray-100);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-sidebar-toggle]:hover {
    background: var(--bs-gray-200);
}

[data-bs-theme="dark"] [data-sidebar-toggle] {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] [data-sidebar-toggle]:hover {
    background: var(--bs-gray-700);
}

/* ============================================
   STICKY FOOTER
   ============================================ */

.gtd-footer-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* ============================================
   NUMBER TWEEN INDICATOR
   ============================================ */

.gtd-tween-up::after {
    content: '\f062';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #50cd89;
    margin-left: 0.5rem;
    font-size: 0.8em;
}

.gtd-tween-down::after {
    content: '\f063';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #f1416c;
    margin-left: 0.5rem;
    font-size: 0.8em;
}

/* ============================================
   TOAST NOTIFICATIONS (Custom Fallback)
   ============================================ */

.gtd-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
}

.gtd-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.gtd-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.gtd-toast.hide {
    transform: translateX(120%);
    opacity: 0;
}

.gtd-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
}

.gtd-toast-success .gtd-toast-icon {
    background: rgba(80, 205, 137, 0.15);
    color: #50cd89;
}

.gtd-toast-error .gtd-toast-icon {
    background: rgba(241, 65, 108, 0.15);
    color: #f1416c;
}

.gtd-toast-warning .gtd-toast-icon {
    background: rgba(255, 199, 0, 0.15);
    color: #ffc700;
}

.gtd-toast-info .gtd-toast-icon {
    background: rgba(0, 158, 247, 0.15);
    color: #009ef7;
}

.gtd-toast-content {
    flex: 1;
    min-width: 0;
}

.gtd-toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    color: var(--bs-gray-900);
}

.gtd-toast-message {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    line-height: 1.4;
}

.gtd-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-500);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.gtd-toast-close:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
}

.gtd-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--bs-primary);
    width: 100%;
    animation: gtd-toast-progress linear forwards;
    transform-origin: left;
}

@keyframes gtd-toast-progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.gtd-toast-success .gtd-toast-progress {
    background: #50cd89;
}

.gtd-toast-error .gtd-toast-progress {
    background: #f1416c;
}

.gtd-toast-warning .gtd-toast-progress {
    background: #ffc700;
}

[data-bs-theme="dark"] .gtd-toast {
    background: var(--bs-gray-900);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-toast-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-toast-message {
    color: var(--bs-gray-400);
}

/* ============================================
   SELECTION HIGHLIGHT
   ============================================ */

.gtd-selection-highlight::selection,
.gtd-selection-highlight *::selection {
    background: rgba(0, 158, 247, 0.3);
    color: inherit;
}

/* ============================================
   FOCUS VISIBLE STYLES
   ============================================ */

.gtd-focus-visible:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
.gtd-focus-visible:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   SCROLL MARGIN FOR ANCHORS
   ============================================ */

[id] {
    scroll-margin-top: 100px;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .gtd-toast {
        transition: none;
    }

    .gtd-toast-progress {
        animation: none;
    }
}

/* ============================================
   FILTER CHIPS
   ============================================ */

.gtd-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.gtd-chip:hover {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
}

.gtd-chip.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-chip.active:hover {
    background: #0095e8;
    border-color: #0095e8;
}

.gtd-chip i {
    font-size: 0.75rem;
}

.gtd-chip .gtd-chip-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.gtd-chip.active .gtd-chip-count {
    background: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .gtd-chip {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-chip:hover {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

/* Quick filter presets */
.gtd-chip-preset {
    font-size: 0.8rem;
    padding: 0.25rem 0.625rem;
}

/* ============================================
   IMAGE CAROUSEL
   ============================================ */

.gtd-carousel {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.gtd-carousel-slides {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}

.gtd-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gtd-carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.gtd-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Navigation arrows */
.gtd-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gtd-carousel:hover .gtd-carousel-nav {
    opacity: 1;
}

.gtd-carousel-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gtd-carousel-nav.prev {
    left: 0.75rem;
}

.gtd-carousel-nav.next {
    right: 0.75rem;
}

/* Indicators/dots */
.gtd-carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 2;
}

.gtd-carousel-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.gtd-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.gtd-carousel-dot.active {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

/* Image count badge */
.gtd-carousel-count {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 2;
}

.gtd-carousel-count i {
    margin-right: 0.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.gtd-empty-state {
    padding: 3rem;
    text-align: center;
}

.gtd-empty-icon {
    margin-bottom: 1rem;
}

.gtd-empty-icon i {
    font-size: 4rem;
    color: var(--bs-gray-300);
}

.gtd-empty-title {
    font-weight: 600;
    color: var(--bs-gray-700);
    margin-bottom: 0.5rem;
}

.gtd-empty-description {
    color: var(--bs-gray-500);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Animated empty state icon */
.gtd-empty-icon-animated {
    animation: gtd-empty-bounce 2s ease-in-out infinite;
}

@keyframes gtd-empty-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

[data-bs-theme="dark"] .gtd-empty-icon i {
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-empty-title {
    color: var(--bs-gray-300);
}

/* ============================================
   VEHICLE CARD ENHANCEMENTS
   ============================================ */

.gtd-vehicle-card {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.gtd-vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Featured badge */
.gtd-featured-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: linear-gradient(135deg, #ffc700 0%, #ff9900 100%);
    color: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(255, 199, 0, 0.3);
}

/* Price tag */
.gtd-price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.gtd-price-tag small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--bs-gray-500);
}

/* Specs row */
.gtd-specs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-spec-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.gtd-spec-item i {
    color: var(--bs-gray-400);
    width: 1rem;
    text-align: center;
}

/* Favorite button on card */
.gtd-card-favorite {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
}

.gtd-card-favorite:hover {
    background: #fff;
    transform: scale(1.1);
}

.gtd-card-favorite i {
    color: var(--bs-gray-500);
    transition: all 0.2s ease;
}

.gtd-card-favorite.active i {
    color: #f1416c;
}

.gtd-card-favorite:hover i {
    color: #f1416c;
}

/* Sold overlay */
.gtd-sold-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.gtd-sold-badge {
    background: #f1416c;
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: rotate(-15deg);
}

/* ============================================
   CONTACT DEALER FORM
   ============================================ */

#gtd-contact-modal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#gtd-contact-modal .modal-header {
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] #gtd-contact-modal .modal-header {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-800);
}

/* ============================================
   PRICE COMPARISON
   ============================================ */

.gtd-price-comparison {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.gtd-price-current {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.gtd-price-original {
    font-size: 1rem;
    color: var(--bs-gray-500);
    text-decoration: line-through;
}

.gtd-price-discount {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #50cd89;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

/* ============================================
   MILEAGE INDICATOR
   ============================================ */

.gtd-mileage-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-mileage-bar {
    flex: 1;
    height: 4px;
    background: var(--bs-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.gtd-mileage-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.gtd-mileage-low .gtd-mileage-fill {
    background: #50cd89;
    width: 25%;
}

.gtd-mileage-medium .gtd-mileage-fill {
    background: #ffc700;
    width: 50%;
}

.gtd-mileage-high .gtd-mileage-fill {
    background: #f1416c;
    width: 75%;
}

.gtd-mileage-label {
    font-size: 0.75rem;
    font-weight: 500;
}

.gtd-mileage-low .gtd-mileage-label {
    color: #50cd89;
}

.gtd-mileage-medium .gtd-mileage-label {
    color: #ffc700;
}

.gtd-mileage-high .gtd-mileage-label {
    color: #f1416c;
}

/* ============================================
   VEHICLE HISTORY TIMELINE
   ============================================ */

.gtd-history-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.gtd-history-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-gray-200);
}

.gtd-history-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.gtd-history-item:last-child {
    padding-bottom: 0;
}

.gtd-history-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    transform: translateX(-4px);
}

.gtd-history-date {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.25rem;
}

.gtd-history-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-history-description {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-history-timeline::before {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-history-item::before {
    background: var(--bs-gray-900);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

.gtd-reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.gtd-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In variants */
.gtd-reveal-fadeIn {
    transform: none;
}

.gtd-reveal-fadeInUp {
    /* Default - handled by base classes */
}

.gtd-reveal-fadeInDown.gtd-reveal-hidden {
    transform: translateY(-30px);
}

.gtd-reveal-fadeInLeft.gtd-reveal-hidden {
    transform: translateX(-30px);
}

.gtd-reveal-fadeInRight.gtd-reveal-hidden {
    transform: translateX(30px);
}

/* Scale variants */
.gtd-reveal-scaleUp.gtd-reveal-hidden {
    transform: scale(0.9);
}

.gtd-reveal-scaleDown.gtd-reveal-hidden {
    transform: scale(1.1);
}

/* Flip variants */
.gtd-reveal-flipX.gtd-reveal-hidden {
    transform: rotateX(90deg);
    transform-origin: center;
}

.gtd-reveal-flipY.gtd-reveal-hidden {
    transform: rotateY(90deg);
    transform-origin: center;
}

/* Stagger support for children */
[data-reveal-stagger] > * {
    transition-delay: calc(var(--reveal-index, 0) * 0.1s);
}

/* ============================================
   QUICK VIEW MODAL
   ============================================ */

#gtd-quick-view-modal .modal-content {
    border-radius: 16px;
    overflow: hidden;
}

.gtd-quick-view-gallery {
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-gray-100);
}

.gtd-quick-view-gallery .gtd-carousel-slides {
    aspect-ratio: 4/3;
}

.gtd-quick-view-title {
    font-weight: 700;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-quick-view-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-quick-view-gallery {
    background: var(--bs-gray-800);
}

/* ============================================
   TIME AGO
   ============================================ */

[data-time-ago] {
    cursor: help;
}

/* ============================================
   TRUNCATE
   ============================================ */

.gtd-truncated {
    display: inline;
}

/* ============================================
   LOCATION/MAP STYLES
   ============================================ */

.gtd-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-location-badge i {
    color: var(--bs-primary);
}

.gtd-distance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    background: var(--bs-gray-100);
    border-radius: 4px;
}

.gtd-distance-badge i {
    color: var(--bs-gray-400);
}

.gtd-map-embed {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 8px;
    background: var(--bs-gray-100);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide on specific breakpoints */
@media (max-width: 575.98px) {
    .gtd-hide-xs {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .gtd-hide-sm {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .gtd-hide-md {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .gtd-hide-lg {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .gtd-hide-xl {
        display: none !important;
    }
}

/* Mobile-first show classes */
@media (max-width: 767.98px) {
    .gtd-show-mobile {
        display: block !important;
    }
    .gtd-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .gtd-show-mobile {
        display: none !important;
    }
    .gtd-hide-desktop {
        display: none !important;
    }
}

/* Touch device utilities */
@media (hover: none) and (pointer: coarse) {
    .gtd-touch-only {
        display: block !important;
    }
    .gtd-no-touch {
        display: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .gtd-touch-only {
        display: none !important;
    }
    .gtd-no-touch {
        display: block !important;
    }
}

/* ============================================
   LISTING COUNT INDICATOR
   ============================================ */

.gtd-listing-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-listing-count strong {
    color: var(--bs-gray-900);
    font-weight: 600;
}

[data-bs-theme="dark"] .gtd-listing-count strong {
    color: var(--bs-gray-100);
}

/* ============================================
   SORT DROPDOWN
   ============================================ */

.gtd-sort-dropdown {
    min-width: 180px;
}

.gtd-sort-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gtd-sort-dropdown .dropdown-item.active {
    background: var(--bs-primary);
    color: #fff;
}

.gtd-sort-dropdown .dropdown-item i {
    opacity: 0;
}

.gtd-sort-dropdown .dropdown-item.active i {
    opacity: 1;
}

/* ============================================
   VIEW TOGGLE (Grid/List)
   ============================================ */

.gtd-view-toggle {
    display: inline-flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--bs-gray-200);
}

.gtd-view-toggle button {
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: none;
    color: var(--bs-gray-500);
    transition: all 0.15s ease;
}

.gtd-view-toggle button:hover {
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
}

.gtd-view-toggle button.active {
    background: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .gtd-view-toggle {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-view-toggle button {
    background: var(--bs-gray-800);
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-view-toggle button:hover {
    background: var(--bs-gray-700);
    color: var(--bs-gray-200);
}

/* ============================================
   LIST VIEW CARD
   ============================================ */

.gtd-vehicle-card-list {
    display: flex;
    flex-direction: row;
}

.gtd-vehicle-card-list .gtd-card-image {
    width: 280px;
    min-width: 280px;
    height: auto;
    aspect-ratio: 4/3;
}

.gtd-vehicle-card-list .gtd-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
}

@media (max-width: 767.98px) {
    .gtd-vehicle-card-list {
        flex-direction: column;
    }

    .gtd-vehicle-card-list .gtd-card-image {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================
   COMPARE BUTTON STICKY BAR
   ============================================ */

.gtd-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--bs-gray-200);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.gtd-compare-bar.show {
    transform: translateY(0);
}

.gtd-compare-bar-items {
    display: flex;
    gap: 0.75rem;
}

.gtd-compare-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: 8px;
}

.gtd-compare-bar-item img {
    width: 50px;
    height: 35px;
    object-fit: cover;
    border-radius: 4px;
}

.gtd-compare-bar-item .remove {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-300);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--bs-gray-600);
}

.gtd-compare-bar-item .remove:hover {
    background: #f1416c;
    color: #fff;
}

[data-bs-theme="dark"] .gtd-compare-bar {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-compare-bar-item {
    background: var(--bs-gray-800);
}

/* ============================================
   NO RESULTS STATE
   ============================================ */

.gtd-no-results {
    text-align: center;
    padding: 4rem 2rem;
}

.gtd-no-results-icon {
    font-size: 5rem;
    color: var(--bs-gray-300);
    margin-bottom: 1.5rem;
}

.gtd-no-results-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    margin-bottom: 0.5rem;
}

.gtd-no-results-text {
    color: var(--bs-gray-500);
    margin-bottom: 1.5rem;
}

.gtd-no-results-suggestions {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 8px;
}

.gtd-no-results-suggestions h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.gtd-no-results-suggestions ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-no-results-suggestions li {
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .gtd-no-results-icon {
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-no-results-title {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-no-results-suggestions {
    background: var(--bs-gray-800);
}

/* ============================================
   RECENTLY VIEWED
   ============================================ */

.gtd-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gtd-recent-item {
    transition: background-color 0.15s ease;
}

.gtd-recent-item:hover {
    background: var(--bs-gray-100);
}

.gtd-recent-thumb {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .gtd-recent-item:hover {
    background: var(--bs-gray-800);
}

/* ============================================
   FINANCE CALCULATOR
   ============================================ */

.gtd-finance-calc .form-range {
    height: 8px;
}

.gtd-finance-calc .form-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: var(--bs-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.gtd-finance-calc .form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--bs-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.gtd-finance-result {
    border-left: 4px solid var(--bs-primary);
}

/* ============================================
   VEHICLE CONDITION BADGES
   ============================================ */

[data-condition] .badge {
    font-weight: 600;
}

.badge-sm {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.badge-lg {
    font-size: 0.95rem;
    padding: 0.5rem 0.875rem;
}

/* ============================================
   SAVED SEARCHES
   ============================================ */

.gtd-saved-search:last-child {
    border-bottom: none !important;
}

.gtd-saved-search:hover {
    background: var(--bs-gray-50);
}

[data-bs-theme="dark"] .gtd-saved-search:hover {
    background: var(--bs-gray-800);
}

/* ============================================
   DEALER RATING
   ============================================ */

.gtd-dealer-rating .gtd-stars {
    letter-spacing: 2px;
}

.gtd-dealer-rating .gtd-stars i {
    margin-right: 1px;
}

/* ============================================
   SPECS GRID
   ============================================ */

.gtd-specs-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 2), 1fr);
    gap: 1rem;
}

.gtd-specs-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: var(--bs-gray-50);
    border-radius: 8px;
}

.gtd-specs-label {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.gtd-specs-value {
    font-weight: 600;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-specs-item {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-specs-value {
    color: var(--bs-gray-100);
}

@media (max-width: 575.98px) {
    .gtd-specs-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRICE ALERT BADGE
   ============================================ */

.gtd-price-alert-active {
    position: relative;
}

.gtd-price-alert-active::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #50cd89;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* ============================================
   VEHICLE STATUS INDICATORS
   ============================================ */

.gtd-status-available {
    color: #50cd89;
}

.gtd-status-reserved {
    color: #ffc700;
}

.gtd-status-sold {
    color: #f1416c;
}

.gtd-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.gtd-status-badge.available {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-status-badge.reserved {
    background: rgba(255, 199, 0, 0.1);
    color: #d4a600;
}

.gtd-status-badge.sold {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

.gtd-status-badge i {
    font-size: 0.65rem;
}

/* ============================================
   SELLER TYPE BADGES
   ============================================ */

.gtd-seller-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.gtd-seller-dealer {
    background: linear-gradient(135deg, #7239ea 0%, #9b59b6 100%);
    color: #fff;
}

.gtd-seller-private {
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
}

.gtd-seller-trade {
    background: linear-gradient(135deg, #009ef7 0%, #0077b6 100%);
    color: #fff;
}

/* ============================================
   WARRANTY BADGE
   ============================================ */

.gtd-warranty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #50cd89 0%, #3eb489 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(80, 205, 137, 0.3);
}

.gtd-warranty-badge i {
    font-size: 0.9rem;
}

/* ============================================
   MOT EXPIRY INDICATOR
   ============================================ */

.gtd-mot-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.gtd-mot-status.valid {
    color: #50cd89;
}

.gtd-mot-status.expiring {
    color: #ffc700;
}

.gtd-mot-status.expired {
    color: #f1416c;
}

/* ============================================
   SERVICE HISTORY INDICATOR
   ============================================ */

.gtd-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
}

.gtd-service-full {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-service-partial {
    background: rgba(255, 199, 0, 0.1);
    color: #d4a600;
}

.gtd-service-none {
    background: rgba(115, 128, 142, 0.1);
    color: #73808e;
}

/* ============================================
   OWNERS COUNT
   ============================================ */

.gtd-owners-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--bs-gray-600);
}

.gtd-owners-count.low {
    color: #50cd89;
}

.gtd-owners-count.medium {
    color: #ffc700;
}

.gtd-owners-count.high {
    color: #f1416c;
}

/* ============================================
   MONTHLY PAYMENT HIGHLIGHT
   ============================================ */

.gtd-monthly-payment {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.gtd-monthly-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.gtd-monthly-label {
    font-size: 0.7rem;
    color: var(--bs-gray-500);
    text-transform: uppercase;
}

/* ============================================
   PRINT STYLES FOR VEHICLE DETAILS
   ============================================ */

/* ============================================
   IMAGE ZOOM ON HOVER
   ============================================ */

.gtd-image-zoom {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.gtd-image-zoom img {
    transition: transform 0.3s ease;
}

.gtd-image-zoom:hover img {
    transform: scale(1.1);
}

.gtd-zoom-lens {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 0 0 4px rgba(0, 158, 247, 0.2);
    z-index: 10;
}

.gtd-image-zoom:hover .gtd-zoom-lens {
    opacity: 1;
}

.gtd-zoom-result {
    position: absolute;
    top: 0;
    right: -320px;
    width: 300px;
    height: 300px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.5rem;
    background-repeat: no-repeat;
    box-shadow: var(--gtd-shadow-lg);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.gtd-image-zoom:hover .gtd-zoom-result {
    opacity: 1;
}

[data-bs-theme="dark"] .gtd-zoom-result {
    border-color: var(--bs-gray-700);
}

/* ============================================
   SOCIAL SHARE BUTTONS
   ============================================ */

.gtd-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.gtd-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #fff;
}

.gtd-share-btn.with-label {
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    gap: 0.5rem;
}

.gtd-share-btn-facebook { background-color: #1877f2; }
.gtd-share-btn-twitter { background-color: #000; }
.gtd-share-btn-whatsapp { background-color: #25d366; }
.gtd-share-btn-linkedin { background-color: #0077b5; }
.gtd-share-btn-email { background-color: #6c757d; }
.gtd-share-btn-copy { background-color: var(--bs-primary); }

.gtd-share-btn-facebook:hover { background-color: #1466d5; }
.gtd-share-btn-twitter:hover { background-color: #333; }
.gtd-share-btn-whatsapp:hover { background-color: #1fb855; }
.gtd-share-btn-linkedin:hover { background-color: #006699; }
.gtd-share-btn-email:hover { background-color: #5a6268; }
.gtd-share-btn-copy:hover { background-color: var(--bs-primary-dark, #0086d1); }

.gtd-share-copied {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-success);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: var(--gtd-shadow-lg);
    z-index: 9999;
    animation: gtd-slide-up 0.3s ease;
}

@keyframes gtd-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   SEARCH SUGGESTIONS DROPDOWN
   ============================================ */

.gtd-search-wrapper {
    position: relative;
}

.gtd-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-300);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: var(--gtd-shadow-lg);
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
}

[data-bs-theme="dark"] .gtd-suggestions-dropdown {
    border-color: var(--bs-gray-700);
}

.gtd-suggestions-section {
    padding: 0.5rem 0;
}

.gtd-suggestions-section:not(:last-child) {
    border-bottom: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-suggestions-section:not(:last-child) {
    border-bottom-color: var(--bs-gray-700);
}

.gtd-suggestions-header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gtd-suggestion-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-suggestion-item:hover,
.gtd-suggestion-item.active {
    background-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-suggestion-item:hover,
[data-bs-theme="dark"] .gtd-suggestion-item.active {
    background-color: var(--bs-gray-800);
}

.gtd-suggestion-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    margin-right: 0.75rem;
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-suggestion-icon {
    background: var(--bs-gray-800);
}

.gtd-suggestion-content {
    flex: 1;
    min-width: 0;
}

.gtd-suggestion-title {
    font-weight: 500;
    color: var(--bs-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bs-theme="dark"] .gtd-suggestion-title {
    color: var(--bs-gray-100);
}

.gtd-suggestion-subtitle {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
}

.gtd-suggestion-highlight {
    background: rgba(0, 158, 247, 0.15);
    color: var(--bs-primary);
    padding: 0 2px;
    border-radius: 2px;
}

.gtd-suggestion-price {
    font-weight: 600;
    color: var(--bs-primary);
    margin-left: 0.75rem;
}

.gtd-suggestions-footer {
    padding: 0.75rem 1rem;
    text-align: center;
    border-top: 1px solid var(--bs-gray-200);
    background: var(--bs-gray-50);
}

[data-bs-theme="dark"] .gtd-suggestions-footer {
    border-top-color: var(--bs-gray-700);
    background: var(--bs-gray-900);
}

/* ============================================
   NOTIFICATIONS DROPDOWN
   ============================================ */

.gtd-notification-bell {
    position: relative;
    cursor: pointer;
}

.gtd-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--bs-danger);
    border-radius: 9px;
    animation: gtd-pulse 2s infinite;
}

@keyframes gtd-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.gtd-notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.5rem;
    box-shadow: var(--gtd-shadow-lg);
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.gtd-notification-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-bs-theme="dark"] .gtd-notification-dropdown {
    border-color: var(--bs-gray-700);
}

.gtd-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-notification-header {
    border-bottom-color: var(--bs-gray-700);
}

.gtd-notification-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-notification-title {
    color: var(--bs-gray-100);
}

.gtd-notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.gtd-notification-item {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-gray-100);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-notification-item:hover {
    background-color: var(--bs-gray-50);
}

[data-bs-theme="dark"] .gtd-notification-item {
    border-bottom-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-notification-item:hover {
    background-color: var(--bs-gray-800);
}

.gtd-notification-item.unread {
    background-color: rgba(0, 158, 247, 0.05);
}

.gtd-notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bs-primary);
}

.gtd-notification-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.gtd-notification-icon.price-drop {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-notification-icon.new-listing {
    background: rgba(0, 158, 247, 0.1);
    color: #009ef7;
}

.gtd-notification-icon.saved-search {
    background: rgba(114, 57, 234, 0.1);
    color: #7239ea;
}

.gtd-notification-content {
    flex: 1;
    min-width: 0;
}

.gtd-notification-text {
    font-size: 0.9rem;
    color: var(--bs-gray-700);
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .gtd-notification-text {
    color: var(--bs-gray-300);
}

.gtd-notification-time {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-notification-empty {
    padding: 2rem;
    text-align: center;
    color: var(--bs-gray-500);
}

.gtd-notification-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.gtd-notification-footer {
    padding: 0.75rem 1rem;
    text-align: center;
    border-top: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-notification-footer {
    border-top-color: var(--bs-gray-700);
}

/* ============================================
   COMPARISON TABLE
   ============================================ */

.gtd-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.gtd-comparison-table th,
.gtd-comparison-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--bs-gray-200);
    vertical-align: middle;
}

[data-bs-theme="dark"] .gtd-comparison-table th,
[data-bs-theme="dark"] .gtd-comparison-table td {
    border-bottom-color: var(--bs-gray-700);
}

.gtd-comparison-table th {
    font-weight: 600;
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    left: 0;
    z-index: 1;
}

[data-bs-theme="dark"] .gtd-comparison-table th {
    background: var(--bs-gray-800);
    color: var(--bs-gray-400);
}

.gtd-comparison-table thead th {
    position: sticky;
    top: 0;
    background: var(--bs-body-bg);
    z-index: 2;
}

.gtd-comparison-header-cell {
    text-align: center;
    min-width: 200px;
}

.gtd-comparison-vehicle-image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.gtd-comparison-vehicle-title {
    font-weight: 600;
    color: var(--bs-gray-900);
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .gtd-comparison-vehicle-title {
    color: var(--bs-gray-100);
}

.gtd-comparison-vehicle-price {
    font-weight: 700;
    color: var(--bs-primary);
    font-size: 1.125rem;
}

.gtd-comparison-value {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gtd-comparison-value.best {
    color: var(--bs-success);
    font-weight: 600;
}

.gtd-comparison-value.worst {
    color: var(--bs-danger);
}

.gtd-comparison-check {
    color: var(--bs-success);
}

.gtd-comparison-cross {
    color: var(--bs-gray-400);
}

.gtd-comparison-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bs-gray-200);
    color: var(--bs-gray-600);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.gtd-comparison-remove:hover {
    background: var(--bs-danger);
    color: #fff;
}

.gtd-comparison-wrapper {
    overflow-x: auto;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-comparison-wrapper {
    border-color: var(--bs-gray-700);
}

/* ============================================
   ACCESSIBILITY - SKIP LINK
   ============================================ */

.gtd-skip-link {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background: var(--bs-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 10000;
    transition: top 0.3s ease;
}

.gtd-skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Screen reader only */
.gtd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Live region for announcements */
.gtd-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible enhancement */
.gtd-focus-visible:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .gtd-skip-link,
    .gtd-notification-dropdown,
    .gtd-suggestion-item,
    .gtd-share-btn,
    .gtd-zoom-lens,
    .gtd-zoom-result {
        transition: none;
    }

    .gtd-notification-badge {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gtd-suggestion-item:hover,
    .gtd-notification-item:hover {
        outline: 2px solid currentColor;
    }

    .gtd-comparison-value.best {
        text-decoration: underline;
    }
}

/* ============================================
   VEHICLE HISTORY TIMELINE
   ============================================ */

.gtd-timeline {
    position: relative;
    padding-left: 2rem;
}

.gtd-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-timeline::before {
    background: var(--bs-gray-700);
}

.gtd-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.gtd-timeline-item:last-child {
    padding-bottom: 0;
}

.gtd-timeline-marker {
    position: absolute;
    left: -2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    z-index: 1;
}

.gtd-timeline-item.latest .gtd-timeline-marker {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}

.gtd-timeline-content {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-left: 1rem;
}

[data-bs-theme="dark"] .gtd-timeline-content {
    border-color: var(--bs-gray-700);
}

.gtd-timeline-item.latest .gtd-timeline-content {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0, 158, 247, 0.1);
}

.gtd-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.gtd-timeline-title {
    font-weight: 600;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-timeline-title {
    color: var(--bs-gray-100);
}

.gtd-timeline-date {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
}

.gtd-timeline-description {
    font-size: 0.9rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .gtd-timeline-description {
    color: var(--bs-gray-400);
}

.gtd-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--bs-gray-500);
}

.gtd-timeline-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-timeline-doc {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    color: var(--bs-gray-700);
    text-decoration: none;
    transition: all 0.15s ease;
}

.gtd-timeline-doc:hover {
    background: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .gtd-timeline-doc {
    background: var(--bs-gray-800);
    color: var(--bs-gray-300);
}

/* ============================================
   VIN DECODER
   ============================================ */

.gtd-vin-result {
    background: var(--bs-gray-50);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

[data-bs-theme="dark"] .gtd-vin-result {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

.gtd-vin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.gtd-vin-item {
    display: flex;
    flex-direction: column;
}

.gtd-vin-label {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.gtd-vin-value {
    font-weight: 600;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-vin-value {
    color: var(--bs-gray-100);
}

/* ============================================
   MOT REMINDER STATUS
   ============================================ */

.gtd-mot-status {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
}

.gtd-mot-status.valid {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-mot-status.upcoming {
    background: rgba(0, 158, 247, 0.1);
    color: #009ef7;
}

.gtd-mot-status.warning {
    background: rgba(255, 199, 0, 0.1);
    color: #d4a600;
}

.gtd-mot-status.urgent {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

.gtd-mot-status.expired {
    background: rgba(241, 65, 108, 0.15);
    color: #f1416c;
    font-weight: 600;
}

.gtd-mot-info {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.gtd-mot-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

.gtd-mot-date {
    font-size: 0.9rem;
}

.gtd-mot-days {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

/* ============================================
   VIDEO PLAYER
   ============================================ */

.gtd-video-thumbnail {
    position: relative;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.gtd-video-thumbnail:hover img {
    transform: scale(1.05);
}

.gtd-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.gtd-video-thumbnail:hover .gtd-video-play-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.gtd-video-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    padding-left: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gtd-video-thumbnail:hover .gtd-video-play-btn {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 158, 247, 0.4);
}

.gtd-video-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-video-player iframe,
.gtd-video-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   SIMILAR VEHICLES
   ============================================ */

.gtd-similar-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--bs-gray-500);
}

.gtd-similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.gtd-similar-card {
    display: block;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gtd-similar-card:hover {
    border-color: var(--bs-primary);
    box-shadow: var(--gtd-shadow-md);
    transform: translateY(-2px);
}

[data-bs-theme="dark"] .gtd-similar-card {
    border-color: var(--bs-gray-700);
}

.gtd-similar-image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.gtd-similar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gtd-similar-card:hover .gtd-similar-image img {
    transform: scale(1.05);
}

.gtd-similar-body {
    padding: 1rem;
}

.gtd-similar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-gray-900);
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .gtd-similar-title {
    color: var(--bs-gray-100);
}

.gtd-similar-variant {
    font-size: 0.85rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.5rem;
}

.gtd-similar-specs {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.5rem;
}

.gtd-similar-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-primary);
}

/* ============================================
   DEALER MAP
   ============================================ */

.gtd-map-static {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-map-static iframe {
    width: 100%;
    height: 300px;
    border: none;
}

.gtd-map-link {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: var(--bs-primary);
    text-decoration: none;
    box-shadow: var(--gtd-shadow-sm);
    transition: all 0.15s ease;
}

.gtd-map-link:hover {
    background: var(--bs-primary);
    color: #fff;
}

.gtd-map-interactive {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* ============================================
   AUCTION TIMER
   ============================================ */

.gtd-auction-timer {
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    padding: 1rem;
}

[data-bs-theme="dark"] .gtd-auction-timer {
    background: var(--bs-gray-800);
}

.gtd-auction-timer.warning {
    background: rgba(255, 199, 0, 0.1);
}

.gtd-auction-timer.urgent {
    background: rgba(241, 65, 108, 0.1);
    animation: gtd-timer-pulse 1s infinite;
}

@keyframes gtd-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.gtd-auction-label {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.5rem;
}

.gtd-auction-countdown {
    display: flex;
    gap: 0.75rem;
}

.gtd-timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 0.5rem;
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
}

[data-bs-theme="dark"] .gtd-timer-unit {
    background: var(--bs-gray-900);
}

.gtd-timer-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .gtd-timer-value {
    color: var(--bs-gray-100);
}

.gtd-auction-timer.urgent .gtd-timer-value {
    color: #f1416c;
}

.gtd-timer-label {
    font-size: 0.7rem;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.gtd-auction-ended {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--bs-gray-200);
    border-radius: 0.5rem;
    font-weight: 600;
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-auction-ended {
    background: var(--bs-gray-700);
    color: var(--bs-gray-400);
}

/* ============================================
   ENQUIRY FORM
   ============================================ */

.gtd-enquiry-success {
    text-align: center;
    padding: 2rem;
}

.gtd-enquiry-success h4 {
    color: var(--bs-gray-900);
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .gtd-enquiry-success h4 {
    color: var(--bs-gray-100);
}

/* ============================================
   PRICE HISTORY CHART
   ============================================ */

.gtd-price-history {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
}

[data-bs-theme="dark"] .gtd-price-history {
    border-color: var(--bs-gray-700);
}

.gtd-price-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtd-price-history-title {
    font-weight: 600;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-price-history-title {
    color: var(--bs-gray-100);
}

.gtd-price-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.gtd-price-change.price-down {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-price-change.price-up {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

.gtd-price-chart {
    width: 100%;
    height: auto;
}

.gtd-price-point {
    fill: var(--bs-primary);
    cursor: pointer;
    transition: r 0.15s ease;
}

.gtd-price-point:hover {
    r: 6;
}

.gtd-price-tooltip {
    position: absolute;
    background: var(--bs-gray-900);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 10;
    white-space: nowrap;
}

.gtd-price-tooltip strong {
    display: block;
    font-size: 0.9rem;
}

.gtd-price-tooltip span {
    opacity: 0.8;
}

/* ============================================
   RUNNING COSTS CALCULATOR
   ============================================ */

.gtd-running-costs {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

[data-bs-theme="dark"] .gtd-running-costs {
    border-color: var(--bs-gray-700);
}

.gtd-costs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.gtd-costs-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-gray-900);
    margin: 0;
}

[data-bs-theme="dark"] .gtd-costs-title {
    color: var(--bs-gray-100);
}

.gtd-costs-summary {
    text-align: right;
}

.gtd-costs-total {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.gtd-costs-period {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
}

.gtd-costs-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-cost-item {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: 0.75rem;
}

.gtd-cost-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-cost-label {
    color: var(--bs-gray-400);
}

.gtd-cost-label i {
    width: 16px;
    text-align: center;
}

.gtd-cost-bar-container {
    height: 8px;
    background: var(--bs-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

[data-bs-theme="dark"] .gtd-cost-bar-container {
    background: var(--bs-gray-700);
}

.gtd-cost-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary), #50a5f1);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gtd-cost-value {
    font-weight: 600;
    text-align: right;
    color: var(--bs-gray-900);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .gtd-cost-value {
    color: var(--bs-gray-100);
}

.gtd-costs-footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-costs-footer {
    border-top-color: var(--bs-gray-700);
}

.gtd-costs-stat {
    text-align: center;
}

.gtd-costs-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-costs-stat-value {
    color: var(--bs-gray-100);
}

.gtd-costs-stat-label {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-costs-disclaimer {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-align: center;
}

/* ============================================
   TEST DRIVE BOOKING
   ============================================ */

.gtd-test-drive {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

[data-bs-theme="dark"] .gtd-test-drive {
    border-color: var(--bs-gray-700);
}

.gtd-test-drive-header {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-gray-900);
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-test-drive-header {
    color: var(--bs-gray-100);
}

.gtd-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.gtd-date-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-bs-theme="dark"] .gtd-date-btn {
    border-color: var(--bs-gray-700);
}

.gtd-date-btn:hover {
    border-color: var(--bs-primary);
}

.gtd-date-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-date-day {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.gtd-date-num {
    font-size: 1.25rem;
    font-weight: 600;
}

.gtd-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.gtd-time-btn {
    padding: 0.5rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .gtd-time-btn {
    border-color: var(--bs-gray-700);
}

.gtd-time-btn:hover {
    border-color: var(--bs-primary);
}

.gtd-time-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-test-drive-success {
    text-align: center;
    padding: 2rem 1rem;
}

.gtd-test-drive-success h4 {
    color: var(--bs-gray-900);
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .gtd-test-drive-success h4 {
    color: var(--bs-gray-100);
}

/* ============================================
   PART EXCHANGE
   ============================================ */

.gtd-part-exchange {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

[data-bs-theme="dark"] .gtd-part-exchange {
    border-color: var(--bs-gray-700);
}

.gtd-part-exchange-header {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-gray-900);
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-part-exchange-header {
    color: var(--bs-gray-100);
}

.gtd-valuation-result {
    padding: 1rem;
}

.gtd-valuation-estimate {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.1) 0%, rgba(80, 205, 137, 0.1) 100%);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-valuation-label {
    display: block;
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.5rem;
}

.gtd-valuation-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-success);
}

.gtd-valuation-calculation {
    background: var(--bs-gray-50);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .gtd-valuation-calculation {
    background: var(--bs-gray-800);
}

.gtd-calc-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-calc-row {
    color: var(--bs-gray-300);
}

.gtd-calc-row:not(:last-child) {
    border-bottom: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-calc-row:not(:last-child) {
    border-bottom-color: var(--bs-gray-700);
}

.gtd-calc-total {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-calc-total {
    color: var(--bs-gray-100);
}

.gtd-valuation-disclaimer {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-align: center;
    margin: 0;
}

/* ============================================
   VEHICLE REPORT
   ============================================ */

.gtd-vehicle-report {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}

[data-bs-theme="dark"] .gtd-vehicle-report {
    border-color: var(--bs-gray-700);
}

.gtd-vehicle-report.all-clear {
    border-color: rgba(80, 205, 137, 0.3);
}

.gtd-report-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bs-gray-50);
    border-bottom: 1px solid var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-report-header {
    background: var(--bs-gray-800);
    border-bottom-color: var(--bs-gray-700);
}

.gtd-report-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.gtd-report-badge.clear {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-report-badge.warning {
    background: rgba(255, 199, 0, 0.1);
    color: #ffc700;
}

.gtd-report-summary {
    flex: 1;
}

.gtd-report-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-gray-900);
    margin: 0;
}

[data-bs-theme="dark"] .gtd-report-title {
    color: var(--bs-gray-100);
}

.gtd-report-subtitle {
    font-size: 0.85rem;
    color: var(--bs-gray-500);
    margin: 0;
}

.gtd-report-date {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-report-checks {
    padding: 0.5rem 0;
}

.gtd-report-check {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-report-check {
    border-bottom-color: var(--bs-gray-800);
}

.gtd-report-check:last-child {
    border-bottom: none;
}

.gtd-check-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-check-icon {
    background: var(--bs-gray-800);
    color: var(--bs-gray-400);
}

.gtd-check-info {
    flex: 1;
}

.gtd-check-label {
    display: block;
    font-weight: 500;
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-check-label {
    color: var(--bs-gray-100);
}

.gtd-check-message {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
}

.gtd-check-status {
    font-size: 1.25rem;
}

.gtd-report-check.passed .gtd-check-status {
    color: #50cd89;
}

.gtd-report-check.failed .gtd-check-status {
    color: #f1416c;
}

.gtd-report-check.failed .gtd-check-icon {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

.gtd-report-footer {
    padding: 0.75rem 1.25rem;
    background: var(--bs-gray-50);
    border-top: 1px solid var(--bs-gray-200);
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-align: center;
}

[data-bs-theme="dark"] .gtd-report-footer {
    background: var(--bs-gray-800);
    border-top-color: var(--bs-gray-700);
}

/* ============================================
   QR CODE
   ============================================ */

.gtd-qr-code {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
}

.gtd-qr-code img {
    display: block;
}

.gtd-qr-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

/* ============================================
   WATCHLIST
   ============================================ */

.gtd-watchlist {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-watchlist {
    border-color: var(--bs-gray-700);
}

.gtd-watchlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
    font-weight: 500;
}

[data-bs-theme="dark"] .gtd-watchlist-header {
    border-bottom-color: var(--bs-gray-700);
}

.gtd-watchlist-items {
    max-height: 300px;
    overflow-y: auto;
}

.gtd-watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-watchlist-item {
    border-bottom-color: var(--bs-gray-800);
}

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

.gtd-watchlist-link {
    color: var(--bs-gray-700);
    text-decoration: none;
}

.gtd-watchlist-link:hover {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-watchlist-link {
    color: var(--bs-gray-300);
}

.gtd-watchlist-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--bs-gray-400);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.gtd-watchlist-remove:hover {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gtd-date-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .gtd-time-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtd-cost-item {
        grid-template-columns: 100px 1fr 70px;
    }

    .gtd-report-header {
        flex-wrap: wrap;
    }

    .gtd-report-date {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .gtd-finance-calc,
    .gtd-price-alert-modal,
    .gtd-contact-modal,
    .gtd-compare-bar,
    .gtd-cookie-banner,
    .gtd-back-to-top,
    .gtd-share-buttons,
    .gtd-notification-bell,
    .gtd-suggestions-dropdown,
    .gtd-skip-link,
    .gtd-video-thumbnail,
    .gtd-video-player,
    .gtd-auction-timer,
    .gtd-map-static,
    .gtd-map-interactive {
        display: none !important;
    }

    .gtd-specs-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtd-vehicle-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .gtd-comparison-table {
        font-size: 10pt;
    }

    .gtd-comparison-table th,
    .gtd-comparison-table td {
        padding: 0.5rem;
    }

    .gtd-timeline {
        padding-left: 1rem;
    }

    .gtd-timeline::before {
        left: 5px;
    }

    .gtd-timeline-marker {
        left: -1rem;
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
    }

    .gtd-similar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   ULEZ COMPLIANCE
   ============================================ */

.gtd-ulez-badge {
    border-radius: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--bs-border-color);
}

.gtd-ulez-compliant {
    background: rgba(80, 205, 137, 0.1);
    border-color: rgba(80, 205, 137, 0.3);
}

.gtd-ulez-non-compliant {
    background: rgba(241, 65, 108, 0.1);
    border-color: rgba(241, 65, 108, 0.3);
}

.gtd-ulez-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.gtd-ulez-compliant .gtd-ulez-header i:first-child {
    color: #50cd89;
    font-size: 1.25rem;
}

.gtd-ulez-non-compliant .gtd-ulez-header i:first-child {
    color: #f1416c;
    font-size: 1.25rem;
}

.gtd-ulez-status {
    font-weight: 600;
    font-size: 1rem;
}

.gtd-ulez-compliant .gtd-ulez-status {
    color: #50cd89;
}

.gtd-ulez-non-compliant .gtd-ulez-status {
    color: #f1416c;
}

.gtd-ulez-uncertain {
    color: var(--bs-warning);
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

.gtd-ulez-reason {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.75rem;
}

.gtd-ulez-charge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(241, 65, 108, 0.15);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.gtd-ulez-charge-label {
    font-size: 0.875rem;
}

.gtd-ulez-charge-amount {
    font-weight: 700;
    color: #f1416c;
}

.gtd-ulez-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-primary);
    text-decoration: none;
}

.gtd-ulez-link:hover {
    text-decoration: underline;
}

[data-bs-theme="dark"] .gtd-ulez-reason {
    color: var(--bs-gray-400);
}

/* ============================================
   CO2 EMISSIONS BADGE
   ============================================ */

.gtd-co2-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.gtd-co2-rating {
    width: 48px;
    height: 48px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gtd-co2-band {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.gtd-co2-details {
    flex: 1;
}

.gtd-co2-value {
    font-weight: 600;
    font-size: 1rem;
}

.gtd-co2-description {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-co2-tax {
    text-align: right;
}

.gtd-co2-tax-label {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-co2-tax-amount {
    font-weight: 700;
    font-size: 1rem;
}

.gtd-co2-scale {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.gtd-co2-scale-segment {
    height: 100%;
}

.gtd-co2-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    background: var(--bs-dark);
    border-radius: 2px;
    transform: translateX(-50%);
}

[data-bs-theme="dark"] .gtd-co2-description,
[data-bs-theme="dark"] .gtd-co2-tax-label {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-co2-marker {
    background: var(--bs-light);
}

/* ============================================
   DEPRECIATION CALCULATOR
   ============================================ */

.gtd-depreciation {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-depreciation-header h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-depreciation-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-depreciation-stat {
    text-align: center;
}

.gtd-depreciation-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.25rem;
}

.gtd-depreciation-value {
    font-weight: 700;
    font-size: 1.125rem;
}

.gtd-depreciation-chart {
    margin-bottom: 1.25rem;
}

.gtd-depreciation-svg {
    width: 100%;
    height: auto;
}

.gtd-depreciation-svg .gtd-chart-label {
    font-size: 10px;
    fill: var(--bs-gray-600);
}

.gtd-depreciation-projections h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.gtd-depreciation-table {
    width: 100%;
    font-size: 0.875rem;
}

.gtd-depreciation-table th {
    font-weight: 500;
    color: var(--bs-gray-600);
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: left;
}

.gtd-depreciation-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-depreciation-note {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-depreciation-note i {
    margin-right: 0.25rem;
}

[data-bs-theme="dark"] .gtd-depreciation-label,
[data-bs-theme="dark"] .gtd-depreciation-note {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-depreciation-svg .gtd-chart-label {
    fill: var(--bs-gray-400);
}

/* ============================================
   LEASE CALCULATOR
   ============================================ */

.gtd-lease-calculator {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-lease-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.gtd-lease-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-lease-vehicle {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-lease-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-lease-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.375rem;
}

.gtd-lease-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.gtd-lease-monthly {
    text-align: center;
    padding: 1rem;
    background: var(--bs-primary);
    border-radius: 0.5rem;
    color: #fff;
}

.gtd-lease-monthly-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.gtd-lease-monthly-amount {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.gtd-lease-monthly-note {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.gtd-lease-deposit-display {
    text-align: center;
}

.gtd-lease-deposit-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-lease-deposit-amount {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.gtd-lease-breakdown {
    margin-bottom: 1rem;
}

.gtd-lease-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

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

.gtd-lease-total {
    font-weight: 600;
    padding-top: 0.75rem;
    border-top: 2px solid var(--bs-border-color);
    margin-top: 0.5rem;
}

.gtd-lease-note {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-lease-note i {
    margin-right: 0.25rem;
}

[data-bs-theme="dark"] .gtd-lease-vehicle,
[data-bs-theme="dark"] .gtd-lease-field label,
[data-bs-theme="dark"] .gtd-lease-deposit-label,
[data-bs-theme="dark"] .gtd-lease-note {
    color: var(--bs-gray-400);
}

/* ============================================
   WARRANTY DISPLAY
   ============================================ */

.gtd-warranty {
    border-radius: 0.5rem;
    padding: 1.25rem;
    border: 2px solid var(--bs-border-color);
}

.gtd-warranty-active {
    background: rgba(80, 205, 137, 0.08);
    border-color: rgba(80, 205, 137, 0.3);
}

.gtd-warranty-expiring {
    background: rgba(255, 199, 0, 0.08);
    border-color: rgba(255, 199, 0, 0.3);
}

.gtd-warranty-expired {
    background: rgba(241, 65, 108, 0.08);
    border-color: rgba(241, 65, 108, 0.3);
}

.gtd-warranty-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gtd-warranty-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.gtd-warranty-active .gtd-warranty-icon {
    background: rgba(80, 205, 137, 0.2);
    color: #50cd89;
}

.gtd-warranty-expiring .gtd-warranty-icon {
    background: rgba(255, 199, 0, 0.2);
    color: #ffc700;
}

.gtd-warranty-expired .gtd-warranty-icon {
    background: rgba(241, 65, 108, 0.2);
    color: #f1416c;
}

.gtd-warranty-title h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-warranty-status {
    font-size: 0.875rem;
    font-weight: 500;
}

.gtd-warranty-active .gtd-warranty-status {
    color: #50cd89;
}

.gtd-warranty-expiring .gtd-warranty-status {
    color: #ffc700;
}

.gtd-warranty-expired .gtd-warranty-status {
    color: #f1416c;
}

.gtd-warranty-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-warranty-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.gtd-warranty-item i {
    width: 20px;
    color: var(--bs-gray-500);
}

.gtd-warranty-remaining {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-left: auto;
}

.gtd-warranty-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 199, 0, 0.15);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #ffc700;
}

[data-bs-theme="dark"] .gtd-warranty-remaining {
    color: var(--bs-gray-400);
}

/* ============================================
   SELLER VERIFICATION BADGE
   ============================================ */

.gtd-seller-badge {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-seller-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid;
}

.gtd-seller-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.gtd-seller-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-seller-level {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.gtd-seller-level i {
    font-size: 0.75rem;
}

.gtd-seller-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-seller-stat {
    text-align: center;
}

.gtd-seller-stat-value {
    font-weight: 700;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.gtd-seller-stat-label {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-seller-verifications h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.gtd-verification-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-verification-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-gray-500);
}

.gtd-verification-item i {
    width: 20px;
}

.gtd-verification-item.verified {
    color: #50cd89;
}

.gtd-verification-item.verified i {
    color: #50cd89;
}

.gtd-seller-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    margin-bottom: 1rem;
}

.gtd-seller-trust-score {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-trust-bar {
    height: 8px;
    background: var(--bs-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.gtd-trust-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gtd-trust-label {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-seller-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}

[data-bs-theme="dark"] .gtd-seller-stat-label,
[data-bs-theme="dark"] .gtd-seller-member,
[data-bs-theme="dark"] .gtd-trust-label {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-trust-bar {
    background: var(--bs-gray-700);
}

/* ============================================
   RESPONSIVE - NEW COMPONENTS
   ============================================ */

@media (max-width: 767.98px) {
    .gtd-co2-badge {
        flex-wrap: wrap;
    }

    .gtd-co2-tax {
        text-align: left;
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .gtd-depreciation-summary {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .gtd-depreciation-stat {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .gtd-lease-form {
        grid-template-columns: 1fr;
    }

    .gtd-lease-summary {
        grid-template-columns: 1fr;
    }

    .gtd-seller-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   INSURANCE ESTIMATE CALCULATOR
   ============================================ */

.gtd-insurance-estimate {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-insurance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtd-insurance-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-insurance-vehicle {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-insurance-group {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.gtd-insurance-group-label {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    margin-right: auto;
}

.gtd-insurance-group-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.gtd-insurance-group-max {
    font-size: 0.875rem;
    color: var(--bs-gray-500);
}

.gtd-insurance-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gtd-insurance-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.375rem;
}

.gtd-insurance-summary {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gtd-insurance-annual {
    padding: 1rem;
    background: var(--bs-primary);
    border-radius: 0.5rem;
    color: #fff;
    text-align: center;
}

.gtd-insurance-monthly {
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    text-align: center;
}

.gtd-insurance-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.gtd-insurance-monthly .gtd-insurance-label {
    color: var(--bs-gray-600);
}

.gtd-insurance-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

.gtd-insurance-factors {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gtd-factor {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.gtd-factor-positive {
    background: rgba(80, 205, 137, 0.15);
    color: #50cd89;
}

.gtd-factor-negative {
    background: rgba(241, 65, 108, 0.15);
    color: #f1416c;
}

.gtd-insurance-note {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-top: 1rem;
}

[data-bs-theme="dark"] .gtd-insurance-group {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-insurance-monthly {
    background: var(--bs-gray-800);
}

/* ============================================
   FUEL COST CALCULATOR
   ============================================ */

.gtd-fuel-calculator {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-fuel-header h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-fuel-vehicle-stats {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.gtd-fuel-stat {
    text-align: center;
}

.gtd-fuel-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.gtd-fuel-stat-label {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-fuel-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.gtd-fuel-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.375rem;
}

.gtd-fuel-quick-distances {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.gtd-fuel-quick-label {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-fuel-result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-primary);
    border-radius: 0.5rem;
    color: #fff;
    margin-bottom: 1.25rem;
}

.gtd-fuel-result-item {
    text-align: center;
}

.gtd-fuel-result-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.gtd-fuel-result-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

.gtd-fuel-annual h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.gtd-fuel-annual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gtd-annual-item {
    padding: 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    text-align: center;
}

.gtd-annual-miles {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-annual-cost {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

[data-bs-theme="dark"] .gtd-fuel-vehicle-stats,
[data-bs-theme="dark"] .gtd-annual-item {
    background: var(--bs-gray-800);
}

/* ============================================
   NUMBER PLATE DECODER
   ============================================ */

.gtd-plate-decoder {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-plate-display {
    text-align: center;
    margin-bottom: 1rem;
}

.gtd-plate-badge {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #ffcc00;
    color: #000;
    font-family: 'Charles Wright', 'Arial Black', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 0.25rem;
    border: 2px solid #000;
}

.gtd-plate-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gtd-plate-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gtd-plate-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.gtd-plate-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-plate-value {
    display: block;
    font-weight: 600;
}

.gtd-plate-subvalue {
    display: block;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-plate-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-plate-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #f1416c;
    font-size: 0.875rem;
}

.gtd-plate-invalid .gtd-plate-badge {
    background: var(--bs-gray-300);
    border-color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-plate-note {
    background: var(--bs-gray-800);
}

/* ============================================
   SERVICE INTERVAL TRACKER
   ============================================ */

.gtd-service-tracker {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtd-service-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-service-mileage {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    font-weight: 500;
}

.gtd-service-last {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(80, 205, 137, 0.1);
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: #50cd89;
}

.gtd-service-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gtd-service-item {
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.gtd-service-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gtd-service-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.gtd-service-status {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-service-ok .gtd-service-status {
    color: #50cd89;
}

.gtd-service-due-soon .gtd-service-status {
    color: #ffc700;
}

.gtd-service-overdue .gtd-service-status {
    color: #f1416c;
}

.gtd-service-progress {
    height: 6px;
    background: var(--bs-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.gtd-service-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.gtd-service-ok .gtd-service-progress-bar {
    background: #50cd89;
}

.gtd-service-due-soon .gtd-service-progress-bar {
    background: #ffc700;
}

.gtd-service-overdue .gtd-service-progress-bar {
    background: #f1416c;
}

.gtd-service-item-details {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-service-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.gtd-service-alert-success {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
}

.gtd-service-alert-warning {
    background: rgba(255, 199, 0, 0.1);
    color: #ffc700;
}

.gtd-service-alert-danger {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
}

[data-bs-theme="dark"] .gtd-service-progress {
    background: var(--bs-gray-700);
}

/* ============================================
   CARBON FOOTPRINT CALCULATOR
   ============================================ */

.gtd-carbon-footprint {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-body-bg);
}

.gtd-carbon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtd-carbon-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gtd-carbon-miles {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-carbon-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.gtd-carbon-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.gtd-carbon-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.gtd-carbon-stat-unit {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-carbon-comparison {
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
}

.gtd-carbon-bar {
    height: 12px;
    background: linear-gradient(90deg, #50cd89 0%, #ffc700 50%, #f1416c 100%);
    border-radius: 6px;
    position: relative;
    margin-bottom: 0.5rem;
}

.gtd-carbon-bar-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--bs-dark);
    border: 2px solid #fff;
    border-radius: 50%;
}

.gtd-carbon-bar-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 20px;
    background: var(--bs-dark);
}

.gtd-carbon-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.5rem;
}

.gtd-carbon-vs-average {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.gtd-carbon-vs-average.positive {
    color: #50cd89;
}

.gtd-carbon-vs-average.negative {
    color: #f1416c;
}

.gtd-carbon-tips h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.gtd-carbon-tips ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-carbon-tips li {
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .gtd-carbon-comparison {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-carbon-bar-fill,
[data-bs-theme="dark"] .gtd-carbon-bar-marker {
    background: var(--bs-light);
}

/* ============================================
   LIVE CHAT WIDGET
   ============================================ */

.gtd-chat-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
}

.gtd-chat-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.gtd-chat-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.gtd-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: #f1416c;
    color: #fff;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.gtd-chat-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 360px;
    max-height: 500px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.gtd-chat-open .gtd-chat-window {
    display: flex;
}

.gtd-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bs-primary);
    color: #fff;
}

.gtd-chat-dealer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.gtd-chat-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-chat-dealer-name {
    display: block;
    font-weight: 600;
}

.gtd-chat-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    opacity: 0.9;
}

.gtd-chat-status-dot {
    width: 8px;
    height: 8px;
    background: #50cd89;
    border-radius: 50%;
}

.gtd-chat-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.gtd-chat-close:hover {
    opacity: 1;
}

.gtd-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 280px;
}

.gtd-chat-message {
    max-width: 80%;
}

.gtd-chat-message-received {
    align-self: flex-start;
}

.gtd-chat-message-sent {
    align-self: flex-end;
}

.gtd-chat-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
}

.gtd-chat-message-received .gtd-chat-bubble {
    background: var(--bs-gray-100);
    border-bottom-left-radius: 0.25rem;
}

.gtd-chat-message-sent .gtd-chat-bubble {
    background: var(--bs-primary);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.gtd-chat-bubble p {
    margin: 0;
    font-size: 0.875rem;
}

.gtd-chat-context {
    margin-top: 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8;
}

.gtd-chat-time {
    display: block;
    font-size: 0.625rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
    padding: 0 0.25rem;
}

.gtd-chat-message-sent .gtd-chat-time {
    text-align: right;
}

.gtd-chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.75rem 1rem;
    background: var(--bs-gray-100);
    border-radius: 1rem;
    width: fit-content;
}

.gtd-chat-typing span {
    width: 8px;
    height: 8px;
    background: var(--bs-gray-400);
    border-radius: 50%;
    animation: gtd-typing-bounce 1.4s infinite ease-in-out;
}

.gtd-chat-typing span:nth-child(1) { animation-delay: 0s; }
.gtd-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.gtd-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes gtd-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.gtd-chat-quick-replies {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.gtd-chat-quick-reply {
    padding: 0.375rem 0.75rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}

.gtd-chat-quick-reply:hover {
    background: var(--bs-gray-200);
}

.gtd-chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-chat-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1.5rem;
    font-size: 0.875rem;
    outline: none;
}

.gtd-chat-input:focus {
    border-color: var(--bs-primary);
}

.gtd-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.gtd-chat-send:hover {
    background: var(--bs-primary-dark, #0b5ed7);
}

[data-bs-theme="dark"] .gtd-chat-message-received .gtd-chat-bubble,
[data-bs-theme="dark"] .gtd-chat-typing,
[data-bs-theme="dark"] .gtd-chat-quick-reply {
    background: var(--bs-gray-800);
}

/* ============================================
   RESPONSIVE - NEW COMPONENTS BATCH 2
   ============================================ */

@media (max-width: 767.98px) {
    .gtd-insurance-form {
        grid-template-columns: 1fr;
    }

    .gtd-insurance-summary {
        grid-template-columns: 1fr;
    }

    .gtd-fuel-form {
        grid-template-columns: 1fr;
    }

    .gtd-fuel-result-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .gtd-fuel-annual-grid {
        grid-template-columns: 1fr;
    }

    .gtd-carbon-stats {
        grid-template-columns: 1fr;
    }

    .gtd-chat-widget {
        bottom: 1rem;
        right: 1rem;
    }

    .gtd-chat-window {
        width: calc(100vw - 2rem);
        max-width: 360px;
        right: 0;
    }
}

/* ==========================================================================
   EV Range Calculator (GTD.evRange)
   ========================================================================== */

.gtd-ev-range {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-ev-range {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-ev-range-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-ev-range-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-ev-range-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-ev-range-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-ev-battery-section {
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-ev-battery-section {
    background: #252533;
}

.gtd-ev-battery-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gtd-ev-battery-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color, #181c32);
}

.gtd-ev-battery-value {
    font-size: 1rem;
    font-weight: 700;
    color: #22c55e;
}

.gtd-ev-battery-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #ef4444 0%, #f59e0b 25%, #22c55e 50%, #22c55e 100%);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.gtd-ev-battery-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid #22c55e;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.gtd-ev-battery-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid #22c55e;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.gtd-ev-conditions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gtd-ev-condition-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.375rem;
}

.gtd-ev-condition-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #181c32);
    font-size: 0.875rem;
}

[data-bs-theme="dark"] .gtd-ev-condition-group select {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-ev-result {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    color: #fff;
}

.gtd-ev-result-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.gtd-ev-result-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.gtd-ev-result-unit {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

.gtd-ev-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.gtd-ev-breakdown-item {
    text-align: center;
}

.gtd-ev-breakdown-value {
    font-size: 1.125rem;
    font-weight: 600;
}

.gtd-ev-breakdown-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ==========================================================================
   Tyre Size Finder (GTD.tyreFinder)
   ========================================================================== */

.gtd-tyre-finder {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-tyre-finder {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-tyre-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-tyre-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-tyre-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-tyre-current {
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-tyre-current {
    background: #252533;
}

.gtd-tyre-size {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    text-align: center;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', monospace;
}

.gtd-tyre-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gtd-tyre-spec {
    text-align: center;
    padding: 0.5rem;
    background: var(--bs-body-bg, #fff);
    border-radius: 0.375rem;
}

[data-bs-theme="dark"] .gtd-tyre-spec {
    background: #1e1e2d;
}

.gtd-tyre-spec-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-tyre-spec-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-tyre-alternatives {
    margin-top: 1.25rem;
}

.gtd-tyre-alternatives-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin-bottom: 0.75rem;
}

.gtd-tyre-alt-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-tyre-alt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-tyre-alt-item {
    background: #252533;
}

.gtd-tyre-alt-size {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--bs-body-color, #181c32);
}

.gtd-tyre-alt-diff {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: #dcfce7;
    color: #16a34a;
}

[data-bs-theme="dark"] .gtd-tyre-alt-diff {
    background: rgba(34, 197, 94, 0.15);
}

.gtd-tyre-alt-diff.gtd-tyre-larger {
    background: #fef3c7;
    color: #d97706;
}

[data-bs-theme="dark"] .gtd-tyre-alt-diff.gtd-tyre-larger {
    background: rgba(245, 158, 11, 0.15);
}

.gtd-tyre-alt-diff.gtd-tyre-smaller {
    background: #dbeafe;
    color: #2563eb;
}

[data-bs-theme="dark"] .gtd-tyre-alt-diff.gtd-tyre-smaller {
    background: rgba(59, 130, 246, 0.15);
}

/* ==========================================================================
   Finance Comparison (GTD.financeComparison)
   ========================================================================== */

.gtd-finance-compare {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-finance-compare {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-finance-compare-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-finance-compare-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-finance-compare-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-finance-compare-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-finance-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .gtd-finance-inputs {
    border-bottom-color: #363645;
}

.gtd-finance-input-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.375rem;
}

.gtd-finance-input-group input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #181c32);
    font-size: 0.875rem;
}

[data-bs-theme="dark"] .gtd-finance-input-group input {
    background: #252533;
    border-color: #363645;
}

.gtd-finance-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.gtd-finance-option {
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.75rem;
    padding: 1.25rem;
    position: relative;
}

[data-bs-theme="dark"] .gtd-finance-option {
    background: #252533;
}

.gtd-finance-option.gtd-finance-hp {
    border: 2px solid #3b82f6;
}

.gtd-finance-option.gtd-finance-pcp {
    border: 2px solid #8b5cf6;
}

.gtd-finance-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gtd-finance-option-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color, #181c32);
}

.gtd-finance-option.gtd-finance-hp .gtd-finance-option-title {
    color: #3b82f6;
}

.gtd-finance-option.gtd-finance-pcp .gtd-finance-option-title {
    color: #8b5cf6;
}

.gtd-finance-option-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}

.gtd-finance-option.gtd-finance-hp .gtd-finance-option-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.gtd-finance-option.gtd-finance-pcp .gtd-finance-option-badge {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.gtd-finance-monthly {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .gtd-finance-monthly {
    border-bottom-color: #363645;
}

.gtd-finance-monthly-label {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.25rem;
}

.gtd-finance-monthly-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-body-color, #181c32);
}

.gtd-finance-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-finance-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.gtd-finance-detail-label {
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-finance-detail-value {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-finance-total-row {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .gtd-finance-total-row {
    border-top-color: #363645;
}

.gtd-finance-total-row .gtd-finance-detail-label,
.gtd-finance-total-row .gtd-finance-detail-value {
    font-weight: 700;
}

.gtd-finance-recommendation {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #dcfce7;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #16a34a;
    text-align: center;
}

[data-bs-theme="dark"] .gtd-finance-recommendation {
    background: rgba(34, 197, 94, 0.15);
}

/* ==========================================================================
   Congestion Charge Checker (GTD.congestionCharge)
   ========================================================================== */

.gtd-congestion {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-congestion {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-congestion-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-congestion-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-congestion-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-congestion-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-congestion-zones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-congestion-zone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    border-left: 4px solid transparent;
}

[data-bs-theme="dark"] .gtd-congestion-zone {
    background: #252533;
}

.gtd-congestion-zone.gtd-zone-exempt {
    border-left-color: #22c55e;
}

.gtd-congestion-zone.gtd-zone-charge {
    border-left-color: #ef4444;
}

.gtd-congestion-zone-info {
    flex: 1;
}

.gtd-congestion-zone-name {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin-bottom: 0.25rem;
}

.gtd-congestion-zone-hours {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-congestion-zone-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.gtd-congestion-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    text-transform: uppercase;
}

.gtd-congestion-badge.gtd-badge-exempt {
    background: #dcfce7;
    color: #16a34a;
}

[data-bs-theme="dark"] .gtd-congestion-badge.gtd-badge-exempt {
    background: rgba(34, 197, 94, 0.15);
}

.gtd-congestion-badge.gtd-badge-charge {
    background: #fee2e2;
    color: #dc2626;
}

[data-bs-theme="dark"] .gtd-congestion-badge.gtd-badge-charge {
    background: rgba(239, 68, 68, 0.15);
}

.gtd-congestion-charge-amount {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

.gtd-congestion-summary {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.gtd-congestion-summary.gtd-summary-good {
    background: #dcfce7;
    color: #16a34a;
}

[data-bs-theme="dark"] .gtd-congestion-summary.gtd-summary-good {
    background: rgba(34, 197, 94, 0.15);
}

.gtd-congestion-summary.gtd-summary-warning {
    background: #fef3c7;
    color: #d97706;
}

[data-bs-theme="dark"] .gtd-congestion-summary.gtd-summary-warning {
    background: rgba(245, 158, 11, 0.15);
}

.gtd-congestion-summary-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-congestion-summary-text {
    font-size: 0.875rem;
}

/* ==========================================================================
   Recall Notice (GTD.recallNotice)
   ========================================================================== */

.gtd-recall {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-recall {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-recall-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-recall-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-recall-icon.gtd-recall-clear {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.gtd-recall-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-recall-count {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-recall-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-recall-item {
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    border-left: 4px solid #ef4444;
}

[data-bs-theme="dark"] .gtd-recall-item {
    background: #252533;
}

.gtd-recall-item.gtd-recall-completed {
    border-left-color: #22c55e;
}

.gtd-recall-item.gtd-recall-critical {
    border-left-color: #ef4444;
}

.gtd-recall-item.gtd-recall-major {
    border-left-color: #f59e0b;
}

.gtd-recall-item.gtd-recall-minor {
    border-left-color: #3b82f6;
}

.gtd-recall-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.gtd-recall-item-title {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
    flex: 1;
}

.gtd-recall-severity {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}

.gtd-recall-severity.gtd-severity-critical {
    background: #fee2e2;
    color: #dc2626;
}

[data-bs-theme="dark"] .gtd-recall-severity.gtd-severity-critical {
    background: rgba(239, 68, 68, 0.15);
}

.gtd-recall-severity.gtd-severity-major {
    background: #fef3c7;
    color: #d97706;
}

[data-bs-theme="dark"] .gtd-recall-severity.gtd-severity-major {
    background: rgba(245, 158, 11, 0.15);
}

.gtd-recall-severity.gtd-severity-minor {
    background: #dbeafe;
    color: #2563eb;
}

[data-bs-theme="dark"] .gtd-recall-severity.gtd-severity-minor {
    background: rgba(59, 130, 246, 0.15);
}

.gtd-recall-severity.gtd-severity-completed {
    background: #dcfce7;
    color: #16a34a;
}

[data-bs-theme="dark"] .gtd-recall-severity.gtd-severity-completed {
    background: rgba(34, 197, 94, 0.15);
}

.gtd-recall-description {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.75rem;
}

.gtd-recall-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, #a1a5b7);
}

.gtd-recall-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-recall-clear-message {
    text-align: center;
    padding: 2rem;
    color: #22c55e;
}

.gtd-recall-clear-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.gtd-recall-clear-text {
    font-size: 1rem;
    font-weight: 500;
}

/* ==========================================================================
   Dealer Hours (GTD.dealerHours)
   ========================================================================== */

.gtd-dealer-hours {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-dealer-hours {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-dealer-hours-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.gtd-dealer-hours-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-dealer-hours-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-dealer-hours-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-dealer-hours-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.gtd-dealer-hours-status.gtd-status-open {
    background: #dcfce7;
    color: #16a34a;
}

[data-bs-theme="dark"] .gtd-dealer-hours-status.gtd-status-open {
    background: rgba(34, 197, 94, 0.15);
}

.gtd-dealer-hours-status.gtd-status-closed {
    background: #fee2e2;
    color: #dc2626;
}

[data-bs-theme="dark"] .gtd-dealer-hours-status.gtd-status-closed {
    background: rgba(239, 68, 68, 0.15);
}

.gtd-dealer-hours-status.gtd-status-closing-soon {
    background: #fef3c7;
    color: #d97706;
}

[data-bs-theme="dark"] .gtd-dealer-hours-status.gtd-status-closing-soon {
    background: rgba(245, 158, 11, 0.15);
}

.gtd-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: gtd-pulse 2s ease-in-out infinite;
}

.gtd-status-open .gtd-status-indicator {
    background: #22c55e;
}

.gtd-status-closed .gtd-status-indicator {
    background: #ef4444;
    animation: none;
}

.gtd-status-closing-soon .gtd-status-indicator {
    background: #f59e0b;
}

@keyframes gtd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.gtd-hours-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-hours-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.gtd-hours-day.gtd-hours-today {
    background: var(--bs-tertiary-bg, #f9f9f9);
    font-weight: 600;
}

[data-bs-theme="dark"] .gtd-hours-day.gtd-hours-today {
    background: #252533;
}

.gtd-hours-day-name {
    color: var(--bs-body-color, #181c32);
}

.gtd-hours-day-times {
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-hours-day.gtd-hours-today .gtd-hours-day-times {
    color: var(--bs-body-color, #181c32);
}

.gtd-hours-closed {
    color: #dc2626;
}

.gtd-hours-next-open {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
}

[data-bs-theme="dark"] .gtd-hours-next-open {
    background: #252533;
}

.gtd-hours-next-open strong {
    color: var(--bs-body-color, #181c32);
}

/* ==========================================================================
   Responsive - New Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-ev-conditions {
        grid-template-columns: 1fr;
    }

    .gtd-ev-breakdown {
        grid-template-columns: 1fr 1fr;
    }

    .gtd-tyre-specs {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .gtd-finance-inputs {
        grid-template-columns: 1fr;
    }

    .gtd-finance-comparison-grid {
        grid-template-columns: 1fr;
    }

    .gtd-congestion-zone {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .gtd-congestion-zone-status {
        align-items: flex-start;
    }

    .gtd-recall-item-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .gtd-recall-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .gtd-dealer-hours-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .gtd-dealer-hours-status {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   VED Tax Band Display (GTD.vedTax)
   ========================================================================== */

.gtd-ved-tax {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-ved-tax {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-ved-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-ved-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-ved-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-ved-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-ved-band-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .gtd-ved-band-display {
    background: #252533;
}

.gtd-ved-band-letter {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 0.5rem;
}

.gtd-ved-band-info {
    flex: 1;
}

.gtd-ved-co2 {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.25rem;
}

.gtd-ved-annual {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.gtd-ved-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color, #181c32);
}

.gtd-ved-period {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-ved-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-ved-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .gtd-ved-row {
    border-bottom-color: #363645;
}

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

.gtd-ved-row span:first-child {
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-ved-row span:last-child {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-ved-premium {
    color: #d97706 !important;
}

.gtd-ved-premium span {
    color: #d97706 !important;
}

.gtd-ved-exempt {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #dcfce7;
    border-radius: 0.5rem;
    color: #16a34a;
    text-align: center;
    font-weight: 500;
}

[data-bs-theme="dark"] .gtd-ved-exempt {
    background: rgba(34, 197, 94, 0.15);
}

/* ==========================================================================
   Specs Comparison (GTD.specsCompare)
   ========================================================================== */

.gtd-specs-compare {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-specs-compare {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-specs-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-specs-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-specs-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-specs-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.gtd-vehicle-header {
    padding: 1rem 0.5rem;
    text-align: center;
    background: var(--bs-tertiary-bg, #f9f9f9);
}

[data-bs-theme="dark"] .gtd-vehicle-header {
    background: #252533;
}

.gtd-vehicle-name {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-vehicle-variant {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-spec-header-label {
    width: 80px;
}

.gtd-spec-row td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .gtd-spec-row td {
    border-bottom-color: #363645;
}

.gtd-spec-value {
    text-align: center;
    font-weight: 500;
    color: var(--bs-body-color, #181c32);
}

.gtd-spec-label {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-spec-winner {
    color: #22c55e !important;
    font-weight: 600 !important;
}

.gtd-spec-loser {
    color: var(--bs-tertiary-color, #a1a5b7) !important;
}

.gtd-specs-legend {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    justify-content: center;
}

[data-bs-theme="dark"] .gtd-specs-legend {
    border-top-color: #363645;
}

.gtd-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.gtd-legend-winner {
    background: #22c55e;
}

/* ==========================================================================
   Ownership Cost Calculator (GTD.ownershipCost)
   ========================================================================== */

.gtd-ownership {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-ownership {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-ownership-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-ownership-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-ownership-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-ownership-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-ownership-summary {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-radius: 0.75rem;
    padding: 1.25rem;
    color: #fff;
    margin-bottom: 1.25rem;
}

.gtd-ownership-total {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.gtd-ownership-total-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.gtd-ownership-total-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.gtd-ownership-metrics {
    display: flex;
    justify-content: space-around;
}

.gtd-ownership-metric {
    text-align: center;
}

.gtd-metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    display: block;
}

.gtd-metric-label {
    font-size: 0.75rem;
    opacity: 0.9;
}

.gtd-ownership-breakdown {
    margin-bottom: 1rem;
}

.gtd-breakdown-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin-bottom: 0.75rem;
}

.gtd-breakdown-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-breakdown-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    position: relative;
    padding-left: 0;
}

.gtd-breakdown-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    opacity: 0.3;
}

.gtd-breakdown-label {
    color: var(--bs-secondary-color, #7e8299);
    padding-left: 0.5rem;
}

.gtd-breakdown-value {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-ownership-residual {
    padding: 0.75rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    text-align: center;
}

[data-bs-theme="dark"] .gtd-ownership-residual {
    background: #252533;
}

.gtd-ownership-residual strong {
    color: var(--bs-body-color, #181c32);
}

/* ==========================================================================
   Euro NCAP Safety Rating (GTD.safetyRating)
   ========================================================================== */

.gtd-safety {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-safety {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-safety-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-safety-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-safety-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-safety-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-safety-stars {
    text-align: center;
    padding: 1.25rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-safety-stars {
    background: #252533;
}

.gtd-safety-stars-display {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.gtd-safety-excellent .gtd-safety-stars-display {
    color: #22c55e;
}

.gtd-safety-good .gtd-safety-stars-display {
    color: #84cc16;
}

.gtd-safety-average .gtd-safety-stars-display {
    color: #f59e0b;
}

.gtd-safety-poor .gtd-safety-stars-display {
    color: #ef4444;
}

.gtd-safety-stars-display i {
    margin: 0 0.125rem;
}

.gtd-safety-stars-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-safety-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-safety-category-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.gtd-safety-category-label {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-safety-category-score {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-safety-bar {
    height: 8px;
    background: var(--bs-tertiary-bg, #e9ecef);
    border-radius: 4px;
    overflow: hidden;
}

[data-bs-theme="dark"] .gtd-safety-bar {
    background: #363645;
}

.gtd-safety-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gtd-safety-footer {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

[data-bs-theme="dark"] .gtd-safety-footer {
    border-top-color: #363645;
}

.gtd-safety-link {
    font-size: 0.8125rem;
    color: #0ea5e9;
    text-decoration: none;
}

.gtd-safety-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Emissions Label (GTD.emissionsLabel)
   ========================================================================== */

.gtd-emissions-label {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-emissions-label {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-emissions-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-emissions-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-emissions-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-emissions-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-emissions-display {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.gtd-emissions-scale {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gtd-emissions-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 50px;
    border-radius: 2px;
    position: relative;
}

.gtd-emissions-band.gtd-emissions-active {
    transform: scaleX(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.gtd-emissions-indicator {
    position: absolute;
    right: -12px;
    font-size: 1rem;
    color: var(--bs-body-color, #181c32);
}

.gtd-emissions-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gtd-emissions-co2 {
    margin-bottom: 0.5rem;
}

.gtd-emissions-co2-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-body-color, #181c32);
}

.gtd-emissions-co2-unit {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    display: block;
}

.gtd-emissions-economy-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-emissions-economy-unit {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
    margin-left: 0.25rem;
}

.gtd-emissions-cost {
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

[data-bs-theme="dark"] .gtd-emissions-cost {
    background: #252533;
}

.gtd-emissions-cost-header {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.25rem;
}

.gtd-emissions-cost-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color, #181c32);
}

.gtd-emissions-cost-note {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, #a1a5b7);
    margin-top: 0.25rem;
}

/* ==========================================================================
   Mileage Tracker (GTD.mileageTracker)
   ========================================================================== */

.gtd-mileage {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-mileage {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-mileage-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-mileage-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-mileage-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-mileage-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-mileage-empty {
    text-align: center;
    padding: 2rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-mileage-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-mileage-stat {
    text-align: center;
    padding: 0.75rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-mileage-stat {
    background: #252533;
}

.gtd-mileage-stat i {
    font-size: 1rem;
    color: var(--bs-secondary-color, #7e8299);
    margin-bottom: 0.25rem;
    display: block;
}

.gtd-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-body-color, #181c32);
    display: block;
}

.gtd-stat-label {
    font-size: 0.6875rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-stat-highlight {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.gtd-stat-highlight i,
.gtd-stat-highlight .gtd-stat-value,
.gtd-stat-highlight .gtd-stat-label {
    color: #fff !important;
}

.gtd-mileage-cost {
    padding: 0.75rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    text-align: center;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .gtd-mileage-cost {
    background: #252533;
}

.gtd-mileage-cost strong {
    color: var(--bs-body-color, #181c32);
}

.gtd-mileage-service {
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-mileage-service {
    background: #252533;
}

.gtd-service-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.gtd-service-header span:first-child {
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-service-header span:last-child {
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-service-bar {
    height: 8px;
    background: var(--bs-body-bg, #e9ecef);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .gtd-service-bar {
    background: #1e1e2d;
}

.gtd-service-progress {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.gtd-service-eta {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, #a1a5b7);
    text-align: center;
}

/* ==========================================================================
   Responsive - Batch 5 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-ved-band-display {
        flex-direction: column;
        text-align: center;
    }

    .gtd-ved-band-letter {
        margin: 0 auto;
    }

    .gtd-specs-table {
        font-size: 0.8125rem;
    }

    .gtd-vehicle-header {
        padding: 0.75rem 0.25rem;
    }

    .gtd-spec-row td {
        padding: 0.5rem 0.25rem;
    }

    .gtd-ownership-metrics {
        flex-direction: column;
        gap: 0.75rem;
    }

    .gtd-emissions-display {
        flex-direction: column;
        gap: 1rem;
    }

    .gtd-emissions-scale {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .gtd-emissions-band {
        min-width: 35px;
        font-size: 0.625rem;
    }

    .gtd-emissions-indicator {
        display: none;
    }

    .gtd-emissions-details {
        text-align: center;
    }

    .gtd-mileage-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Payment Plan Calculator (GTD.paymentPlan)
   ========================================================================== */

.gtd-payment-plan {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-payment-plan {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-payment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-payment-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-payment-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-payment-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-payment-tabs {
    display: flex;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-payment-tabs {
    background: #252533;
}

.gtd-payment-tab {
    flex: 1;
    padding: 0.5rem;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #7e8299);
    cursor: pointer;
    transition: all 0.2s;
}

.gtd-payment-tab:hover {
    color: var(--bs-body-color, #181c32);
}

.gtd-payment-tab.active {
    background: #fff;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .gtd-payment-tab.active {
    background: #1e1e2d;
}

.gtd-payment-result {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 0.75rem;
    color: #fff;
    margin-bottom: 1.25rem;
}

.gtd-payment-amount {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
}

.gtd-payment-currency {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.gtd-payment-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.gtd-payment-period {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin-top: 0.5rem;
}

.gtd-payment-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-payment-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: 0.375rem 0;
}

.gtd-payment-row span:first-child {
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-payment-row span:last-child {
    font-weight: 500;
    color: var(--bs-body-color, #181c32);
}

.gtd-payment-total {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

[data-bs-theme="dark"] .gtd-payment-total {
    border-top-color: #363645;
}

.gtd-payment-total span {
    font-weight: 600 !important;
}

.gtd-payment-disclaimer {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, #a1a5b7);
    text-align: center;
}

/* ==========================================================================
   Vehicle Badges (GTD.vehicleBadges)
   ========================================================================== */

.gtd-vehicle-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: color-mix(in srgb, var(--badge-color) 15%, transparent);
    color: var(--badge-color);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.gtd-badge i {
    font-size: 0.875rem;
}

.gtd-badges-small .gtd-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
}

.gtd-badges-small .gtd-badge i {
    font-size: 0.75rem;
}

.gtd-badges-large .gtd-badge {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.gtd-badges-icon-only .gtd-badge {
    padding: 0.5rem;
    border-radius: 50%;
}

/* ==========================================================================
   Trade-In Estimator (GTD.tradeIn)
   ========================================================================== */

.gtd-trade-in {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-trade-in {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-trade-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-trade-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-trade-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-trade-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-trade-estimate {
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-trade-estimate {
    background: #252533;
}

.gtd-trade-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gtd-trade-min,
.gtd-trade-max {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-trade-separator {
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-trade-mid {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-trade-mid strong {
    color: #10b981;
    font-size: 1rem;
}

.gtd-trade-factors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-trade-factor {
    text-align: center;
    padding: 0.75rem;
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .gtd-trade-factor {
    background: #252533;
}

.gtd-factor-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #7e8299);
    display: block;
    margin-bottom: 0.25rem;
}

.gtd-factor-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-condition-excellent { color: #22c55e !important; }
.gtd-condition-good { color: #84cc16 !important; }
.gtd-condition-fair { color: #f59e0b !important; }
.gtd-condition-poor { color: #ef4444 !important; }

.gtd-mileage-below { color: #22c55e !important; }
.gtd-mileage-average { color: #f59e0b !important; }
.gtd-mileage-above { color: #ef4444 !important; }

.gtd-trade-cta {
    margin-bottom: 1rem;
}

.gtd-trade-disclaimer {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, #a1a5b7);
    text-align: center;
}

/* ==========================================================================
   Features Checklist (GTD.featuresChecklist)
   ========================================================================== */

.gtd-features {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-features {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-features-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-features-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-features-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-features-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-features-categories {
    display: grid;
    gap: 1rem;
}

.gtd-features-grid .gtd-features-categories {
    grid-template-columns: repeat(2, 1fr);
}

.gtd-features-category {
    background: var(--bs-tertiary-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 1rem;
}

[data-bs-theme="dark"] .gtd-features-category {
    background: #252533;
}

.gtd-features-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
}

.gtd-features-category-header i {
    color: #6366f1;
}

.gtd-features-count {
    margin-left: auto;
    background: #6366f1;
    color: #fff;
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
}

.gtd-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gtd-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color, #181c32);
}

.gtd-feature-item i {
    color: #22c55e;
    font-size: 0.75rem;
}

/* ==========================================================================
   Quick Enquiry Form (GTD.quickEnquiry)
   ========================================================================== */

.gtd-quick-enquiry {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

[data-bs-theme="dark"] .gtd-quick-enquiry {
    background: #1e1e2d;
    border-color: #363645;
}

.gtd-enquiry-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gtd-enquiry-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-enquiry-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #181c32);
    margin: 0;
}

.gtd-enquiry-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

.gtd-enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-enquiry-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.gtd-enquiry-consent {
    margin: 0.5rem 0;
}

.gtd-enquiry-consent .form-check-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #7e8299);
}

.gtd-enquiry-alternative {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #7e8299);
}

[data-bs-theme="dark"] .gtd-enquiry-alternative {
    border-top-color: #363645;
}

.gtd-enquiry-phone {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s;
}

.gtd-enquiry-phone:hover {
    transform: scale(1.1);
    color: #fff;
}

.gtd-enquiry-success {
    text-align: center;
    padding: 2rem;
}

.gtd-enquiry-success h5 {
    color: var(--bs-body-color, #181c32);
    margin-bottom: 0.5rem;
}

.gtd-enquiry-success p {
    color: var(--bs-secondary-color, #7e8299);
    margin: 0;
}

/* ==========================================================================
   Print Listing (GTD.printListing)
   ========================================================================== */

.gtd-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media print {
    .gtd-print-btn,
    .gtd-quick-enquiry,
    .gtd-trade-cta,
    .no-print {
        display: none !important;
    }
}

/* ==========================================================================
   Responsive - Batch 6 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-payment-value {
        font-size: 2.5rem;
    }

    .gtd-trade-factors {
        grid-template-columns: 1fr;
    }

    .gtd-features-grid .gtd-features-categories {
        grid-template-columns: 1fr;
    }

    .gtd-enquiry-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Appointment Booker
   ========================================================================== */

.gtd-appointment-booker {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-appointment-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
}

.gtd-appointment-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.gtd-appointment-header p {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.gtd-appointment-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-appointment-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bs-body-bg, #fff);
}

.gtd-appointment-type:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.gtd-appointment-type.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.gtd-appointment-type i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.gtd-appointment-type span {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-appointment-type small {
    font-size: 0.7rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-appointment-content {
    padding: 1.25rem;
}

.gtd-date-picker {
    margin-bottom: 1.25rem;
}

.gtd-date-picker label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-date-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.gtd-date-option {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 2px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bs-body-bg, #fff);
    min-width: 70px;
}

.gtd-date-option:hover {
    border-color: #3b82f6;
}

.gtd-date-option.active {
    border-color: #3b82f6;
    background: #3b82f6;
    color: #fff;
}

.gtd-date-day {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.gtd-date-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.gtd-date-month {
    font-size: 0.7rem;
}

.gtd-time-picker {
    margin-bottom: 1.25rem;
}

.gtd-time-picker label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.gtd-time-slot {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-time-slot:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.gtd-time-slot.active {
    border-color: #3b82f6;
    background: #3b82f6;
    color: #fff;
}

.gtd-time-slot.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.gtd-appointment-contact {
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
    padding-top: 1.25rem;
}

.gtd-appointment-contact label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-appointment-contact input,
.gtd-appointment-contact textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-appointment-contact input:focus,
.gtd-appointment-contact textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.gtd-appointment-submit {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gtd-appointment-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* ==========================================================================
   Distance Calculator
   ========================================================================== */

.gtd-distance-calculator {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    padding: 1.25rem;
}

.gtd-distance-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gtd-distance-header i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.gtd-distance-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-distance-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-distance-input-group input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-distance-input-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.gtd-distance-input-group button {
    padding: 0.625rem 1rem;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gtd-distance-input-group button:hover {
    background: #1d4ed8;
}

.gtd-distance-geolocation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.gtd-distance-geolocation:hover {
    background: rgba(59, 130, 246, 0.2);
}

.gtd-distance-result {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

[data-bs-theme="dark"] .gtd-distance-result {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-distance-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #3b82f6;
    line-height: 1;
}

.gtd-distance-value small {
    font-size: 1rem;
    font-weight: 500;
}

.gtd-distance-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-distance-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.gtd-distance-directions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.625rem 1.25rem;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gtd-distance-directions:hover {
    background: #16a34a;
    color: #fff;
}

/* ==========================================================================
   Budget Planner
   ========================================================================== */

.gtd-budget-planner {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-budget-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
}

.gtd-budget-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.gtd-budget-header p {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.gtd-budget-content {
    padding: 1.5rem;
}

.gtd-budget-slider-group {
    margin-bottom: 1.5rem;
}

.gtd-budget-slider-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-budget-slider-group label span {
    font-weight: 700;
    color: #8b5cf6;
}

.gtd-budget-slider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #8b5cf6 0%, #e9d5ff 100%);
    border-radius: 4px;
    outline: none;
}

.gtd-budget-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #8b5cf6;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.gtd-budget-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #8b5cf6;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.gtd-budget-breakdown {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[data-bs-theme="dark"] .gtd-budget-breakdown {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-budget-breakdown h6 {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-budget-breakdown-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-budget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.gtd-budget-item span:first-child {
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-budget-item span:last-child {
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
    font-variant-numeric: tabular-nums;
}

.gtd-budget-item.total {
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
    margin-top: 0.5rem;
}

.gtd-budget-item.total span:last-child {
    color: #8b5cf6;
    font-size: 1rem;
}

.gtd-budget-result {
    text-align: center;
    padding: 1.25rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.gtd-budget-result.affordable {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid #22c55e;
}

.gtd-budget-result.tight {
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid #f59e0b;
}

.gtd-budget-result.unaffordable {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid #ef4444;
}

.gtd-budget-result-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.gtd-budget-result.affordable .gtd-budget-result-icon {
    color: #22c55e;
}

.gtd-budget-result.tight .gtd-budget-result-icon {
    color: #f59e0b;
}

.gtd-budget-result.unaffordable .gtd-budget-result-icon {
    color: #ef4444;
}

.gtd-budget-result h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-budget-result p {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-budget-max-affordable {
    font-size: 1.5rem;
    font-weight: 700;
}

.gtd-budget-result.affordable .gtd-budget-max-affordable {
    color: #22c55e;
}

.gtd-budget-result.tight .gtd-budget-max-affordable {
    color: #f59e0b;
}

.gtd-budget-result.unaffordable .gtd-budget-max-affordable {
    color: #ef4444;
}

/* ==========================================================================
   Vehicle History Timeline
   ========================================================================== */

.gtd-vehicle-history {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-history-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-history-header i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.gtd-history-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-history-timeline {
    padding: 1.5rem;
    position: relative;
}

.gtd-history-timeline::before {
    content: '';
    position: absolute;
    left: 2.5rem;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    background: var(--bs-border-color, #e1e3ea);
}

.gtd-history-event {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.gtd-history-event:last-child {
    padding-bottom: 0;
}

.gtd-history-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.gtd-history-content {
    flex: 1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    padding: 1rem;
}

[data-bs-theme="dark"] .gtd-history-content {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-history-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-text-muted, #99a1b7);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.gtd-history-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
    margin-bottom: 0.25rem;
}

.gtd-history-description {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
    margin: 0;
}

.gtd-history-mileage {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #3b82f6;
}

.gtd-history-empty {
    text-align: center;
    padding: 2rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-history-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.gtd-history-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* ==========================================================================
   Dealer Reviews Widget
   ========================================================================== */

.gtd-dealer-reviews {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-reviews-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-reviews-title i {
    font-size: 1.25rem;
    color: #f59e0b;
}

.gtd-reviews-title h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-reviews-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.375rem;
}

.gtd-reviews-badge-rating {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f59e0b;
}

.gtd-reviews-badge-count {
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-reviews-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-reviews-overall {
    text-align: center;
}

.gtd-reviews-overall-rating {
    font-size: 3.5rem;
    font-weight: 700;
    color: #f59e0b;
    line-height: 1;
}

.gtd-reviews-stars {
    display: flex;
    gap: 0.125rem;
    justify-content: center;
    margin: 0.5rem 0;
}

.gtd-reviews-stars i {
    font-size: 1rem;
    color: #e5e7eb;
}

.gtd-reviews-stars i.filled {
    color: #f59e0b;
}

.gtd-reviews-stars i.half {
    color: #f59e0b;
}

.gtd-reviews-total {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-reviews-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-reviews-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-reviews-bar-label {
    flex: 0 0 auto;
    width: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-reviews-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bs-border-color, #e1e3ea);
    border-radius: 4px;
    overflow: hidden;
}

.gtd-reviews-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gtd-reviews-bar-count {
    flex: 0 0 auto;
    width: 2rem;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
    text-align: right;
}

.gtd-reviews-list {
    padding: 1.5rem;
}

.gtd-reviews-list h5 {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-review-item {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.gtd-review-item:last-child {
    margin-bottom: 0;
}

[data-bs-theme="dark"] .gtd-review-item {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.gtd-review-author {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-review-date {
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-review-rating {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.gtd-review-rating i {
    font-size: 0.75rem;
    color: #f59e0b;
}

.gtd-review-text {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
    margin: 0;
    line-height: 1.5;
}

.gtd-reviews-cta {
    display: block;
    text-align: center;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
    color: #3b82f6;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.gtd-reviews-cta:hover {
    background: rgba(59, 130, 246, 0.05);
    color: #1d4ed8;
}

/* ==========================================================================
   Promotional Banner
   ========================================================================== */

.gtd-promo-banner {
    position: relative;
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-promo-banner.info {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.gtd-promo-banner.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.gtd-promo-banner.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gtd-promo-banner.offer {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.gtd-promo-banner.urgent {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.gtd-promo-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: #fff;
}

.gtd-promo-icon {
    font-size: 1.75rem;
    flex: 0 0 auto;
}

.gtd-promo-text {
    flex: 1;
}

.gtd-promo-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.125rem;
}

.gtd-promo-message {
    font-size: 0.85rem;
    opacity: 0.9;
}

.gtd-promo-countdown {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.375rem;
}

.gtd-promo-countdown i {
    font-size: 0.75rem;
}

.gtd-promo-action {
    flex: 0 0 auto;
}

.gtd-promo-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gtd-promo-button:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.gtd-promo-dismiss {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.gtd-promo-dismiss:hover {
    opacity: 1;
}

/* ==========================================================================
   Responsive - Batch 7 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-appointment-types {
        grid-template-columns: 1fr;
    }

    .gtd-time-slots {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtd-distance-input-group {
        flex-direction: column;
    }

    .gtd-distance-input-group button {
        width: 100%;
    }

    .gtd-reviews-summary {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gtd-promo-content {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .gtd-promo-action {
        width: 100%;
    }

    .gtd-promo-button {
        width: 100%;
        justify-content: center;
    }

    .gtd-promo-dismiss {
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ==========================================================================
   Value Tracker
   ========================================================================== */

.gtd-value-tracker {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-value-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-value-header i {
    font-size: 1.5rem;
    color: #22c55e;
}

.gtd-value-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-value-content {
    padding: 1.5rem;
}

.gtd-value-current {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-value-main {
    display: flex;
    flex-direction: column;
}

.gtd-value-label {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
    margin-bottom: 0.25rem;
}

.gtd-value-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
}

.gtd-value-equity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.gtd-value-equity.positive {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.gtd-value-equity.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.gtd-value-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gtd-value-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gtd-value-stat .gtd-stat-label {
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-value-stat .gtd-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-value-stat .gtd-stat-value.depreciation {
    color: #ef4444;
}

.gtd-value-stat .gtd-stat-value.warning {
    color: #f59e0b;
}

.gtd-value-stat .gtd-stat-value.success {
    color: #22c55e;
}

.gtd-value-projection {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .gtd-value-projection {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-value-projection h5 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-projection-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    gap: 0.5rem;
}

.gtd-projection-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.gtd-bar-value {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text-muted, #99a1b7);
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.gtd-bar-fill {
    width: 100%;
    height: var(--height);
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border-radius: 0.25rem 0.25rem 0 0;
    margin-top: auto;
    transition: height 0.5s ease;
}

.gtd-bar-label {
    font-size: 0.7rem;
    color: var(--bs-text-muted, #99a1b7);
    margin-top: 0.5rem;
}

.gtd-value-tips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #f59e0b;
}

/* ==========================================================================
   Insurance Quote
   ========================================================================== */

.gtd-insurance-quote {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-insurance-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
}

.gtd-insurance-header i {
    font-size: 2rem;
}

.gtd-insurance-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.gtd-insurance-header p {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.gtd-insurance-form {
    padding: 1.5rem;
}

.gtd-insurance-vehicle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-insurance-vehicle {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-insurance-reg {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-insurance-value {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-insurance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gtd-insurance-field {
    margin-bottom: 1rem;
}

.gtd-insurance-field label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-insurance-field input,
.gtd-insurance-field select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.9rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-insurance-field input:focus,
.gtd-insurance-field select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.gtd-cover-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gtd-cover-option {
    cursor: pointer;
}

.gtd-cover-option input {
    display: none;
}

.gtd-cover-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border: 2px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.gtd-cover-option input:checked + .gtd-cover-box {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.gtd-cover-box i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.gtd-cover-box span {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

.gtd-insurance-submit {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.gtd-insurance-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.gtd-insurance-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0 0;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
}

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

.gtd-warranty-info {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-warranty-info.expired {
    opacity: 0.8;
}

.gtd-warranty-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-warranty-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--warranty-color, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.gtd-warranty-title h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-warranty-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.gtd-warranty-status.active {
    color: #22c55e;
}

.gtd-warranty-status.expired {
    color: #ef4444;
}

.gtd-warranty-content {
    padding: 1.5rem;
}

.gtd-warranty-period {
    margin-bottom: 1.5rem;
}

.gtd-warranty-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gtd-warranty-date {
    text-align: center;
}

.gtd-date-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
    margin-bottom: 0.25rem;
}

.gtd-date-value {
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-warranty-arrow {
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-warranty-remaining {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #22c55e;
}

.gtd-warranty-mileage {
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

[data-bs-theme="dark"] .gtd-warranty-mileage {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-mileage-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.gtd-mileage-bar {
    height: 8px;
    background: var(--bs-border-color, #e1e3ea);
    border-radius: 4px;
    overflow: hidden;
}

.gtd-mileage-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gtd-mileage-remaining {
    display: block;
    font-size: 0.75rem;
    color: #22c55e;
    margin-top: 0.5rem;
}

.gtd-mileage-exceeded {
    display: block;
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.5rem;
}

.gtd-warranty-coverage,
.gtd-warranty-exclusions {
    margin-bottom: 1rem;
}

.gtd-warranty-coverage h5,
.gtd-warranty-exclusions h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.gtd-warranty-coverage h5 {
    color: #22c55e;
}

.gtd-warranty-exclusions h5 {
    color: #ef4444;
}

.gtd-coverage-list,
.gtd-exclusions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.gtd-coverage-list li,
.gtd-exclusions-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.gtd-coverage-list li i {
    color: #22c55e;
}

.gtd-exclusions-list li i {
    color: #ef4444;
}

.gtd-warranty-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-warranty-transferable {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #22c55e;
}

.gtd-warranty-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: #fff;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ==========================================================================
   Service Booker
   ========================================================================== */

.gtd-service-booker {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-service-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.gtd-service-header i {
    font-size: 1.75rem;
}

.gtd-service-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.gtd-service-header p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.gtd-service-alerts {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(239, 68, 68, 0.05);
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-service-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.gtd-service-alert.mot {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.gtd-service-alert.service {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.gtd-service-form {
    padding: 1.5rem;
}

.gtd-service-types {
    margin-bottom: 1.5rem;
}

.gtd-service-types > label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-service-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gtd-service-option {
    cursor: pointer;
}

.gtd-service-option input {
    display: none;
}

.gtd-service-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    text-align: center;
}

.gtd-service-option input:checked + .gtd-service-box {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.gtd-service-box i {
    font-size: 1.5rem;
    color: #f59e0b;
}

.gtd-service-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-service-meta {
    font-size: 0.7rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gtd-service-field {
    margin-bottom: 1rem;
}

.gtd-service-field label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-service-field input,
.gtd-service-field select,
.gtd-service-field textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.9rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
    font-family: inherit;
}

.gtd-service-summary {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .gtd-service-summary {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.gtd-summary-row.total {
    font-weight: 600;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-summary-total {
    color: #f59e0b;
}

.gtd-service-submit {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.gtd-service-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* ==========================================================================
   Drive Score
   ========================================================================== */

.gtd-drive-score {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-drive-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-drive-header i {
    font-size: 1.5rem;
    color: #22c55e;
}

.gtd-drive-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-drive-main {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-score-circle {
    position: relative;
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
}

.gtd-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gtd-score-bg {
    fill: none;
    stroke: var(--bs-border-color, #e1e3ea);
    stroke-width: 8;
}

.gtd-score-fill {
    fill: none;
    stroke: var(--score-color, #22c55e);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
}

.gtd-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gtd-score-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--score-color, #22c55e);
    line-height: 1;
}

.gtd-score-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
    margin-top: 0.25rem;
}

.gtd-drive-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.gtd-drive-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-drive-stat i {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    color: #22c55e;
    font-size: 0.85rem;
}

.gtd-drive-stat .gtd-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-drive-stat .gtd-stat-label {
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
    margin-left: auto;
}

.gtd-drive-metrics {
    padding: 1.5rem;
}

.gtd-metric-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.gtd-metric-row:last-child {
    margin-bottom: 0;
}

.gtd-metric-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 140px;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-metric-label i {
    width: 1.25rem;
    text-align: center;
}

.gtd-metric-bar {
    flex: 1;
    height: 8px;
    background: var(--bs-border-color, #e1e3ea);
    border-radius: 4px;
    overflow: hidden;
}

.gtd-metric-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.gtd-metric-value {
    flex: 0 0 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

.gtd-drive-tips {
    padding: 1rem 1.5rem;
    background: rgba(245, 158, 11, 0.05);
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-drive-tips h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f59e0b;
}

.gtd-drive-tips ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-drive-tips li {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   Alert Subscribe
   ========================================================================== */

.gtd-alert-subscribe {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-alert-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
}

.gtd-alert-header i {
    font-size: 1.75rem;
}

.gtd-alert-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.gtd-alert-header p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.gtd-alert-form {
    padding: 1.5rem;
}

.gtd-alert-vehicle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

[data-bs-theme="dark"] .gtd-alert-vehicle {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-alert-vehicle-name {
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-alert-vehicle-price {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-alert-types {
    margin-bottom: 1.25rem;
}

.gtd-alert-types > label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-alert-option {
    display: block;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.gtd-alert-option input {
    display: none;
}

.gtd-alert-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.gtd-alert-option input:checked + .gtd-alert-box {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.gtd-alert-box i {
    font-size: 1.25rem;
    color: #8b5cf6;
    flex: 0 0 auto;
}

.gtd-alert-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-alert-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-alert-field {
    margin-bottom: 1rem;
}

.gtd-alert-field label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-alert-field input,
.gtd-alert-field select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.9rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-alert-submit {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.gtd-alert-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.gtd-alert-submit.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.gtd-alert-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 0 0;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
}

/* ==========================================================================
   Responsive - Batch 8 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-value-current {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .gtd-value-stats {
        grid-template-columns: 1fr;
    }

    .gtd-projection-chart {
        height: 120px;
    }

    .gtd-bar-value {
        display: none;
    }

    .gtd-insurance-row {
        grid-template-columns: 1fr;
    }

    .gtd-cover-options {
        grid-template-columns: 1fr;
    }

    .gtd-coverage-list,
    .gtd-exclusions-list {
        grid-template-columns: 1fr;
    }

    .gtd-service-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtd-service-row {
        grid-template-columns: 1fr;
    }

    .gtd-drive-main {
        flex-direction: column;
        text-align: center;
    }

    .gtd-drive-stats {
        flex-direction: row;
        justify-content: center;
    }

    .gtd-drive-stat .gtd-stat-label {
        display: none;
    }

    .gtd-metric-label {
        flex: 0 0 100px;
    }
}

/* ==========================================================================
   Search Filters
   ========================================================================== */

.gtd-search-filters {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    padding: 1.5rem;
}

.gtd-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-filters-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-filters-clear {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-filters-clear:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.gtd-filter-section {
    margin-bottom: 1.25rem;
}

.gtd-filter-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-range-inputs input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-range-sep {
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-filter-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-filter-chip {
    cursor: pointer;
}

.gtd-filter-chip input {
    display: none;
}

.gtd-filter-chip span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 2rem;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.gtd-filter-chip input:checked + span {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.gtd-colour-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--colour);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.gtd-filter-section.collapsible .gtd-filter-expandable {
    display: none;
    padding-top: 1rem;
}

.gtd-filter-section.collapsible.expanded .gtd-filter-expandable {
    display: block;
}

.gtd-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: #3b82f6;
    cursor: pointer;
}

.gtd-filter-section.expanded .gtd-filter-toggle i {
    transform: rotate(180deg);
}

.gtd-filters-apply {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

.gtd-filters-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* ==========================================================================
   Sort Options
   ========================================================================== */

.gtd-sort-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gtd-sort-count {
    font-size: 0.9rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-sort-dropdown {
    position: relative;
}

.gtd-sort-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: var(--bs-body-color, #1e1e2d);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-sort-trigger:hover {
    border-color: #3b82f6;
}

.gtd-sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 200px;
    margin-top: 0.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
}

.gtd-sort-menu.show {
    display: block;
}

.gtd-sort-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--bs-body-color, #1e1e2d);
    cursor: pointer;
    transition: background 0.2s ease;
}

.gtd-sort-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.gtd-sort-item.active {
    color: #3b82f6;
}

.gtd-sort-item i:first-child {
    width: 1rem;
    text-align: center;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-sort-item.active i:first-child {
    color: #3b82f6;
}

.gtd-sort-item i:last-child {
    margin-left: auto;
    color: #22c55e;
}

/* ==========================================================================
   Compare Vehicles
   ========================================================================== */

.gtd-compare-vehicles {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-compare-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-compare-clear {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
    cursor: pointer;
}

.gtd-compare-table {
    overflow-x: auto;
}

.gtd-compare-row {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

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

.gtd-compare-row.header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-bs-theme="dark"] .gtd-compare-row.header {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-compare-label {
    flex: 0 0 120px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-text-muted, #99a1b7);
    background: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .gtd-compare-label {
    background: rgba(255, 255, 255, 0.02);
}

.gtd-compare-vehicle {
    flex: 1;
    min-width: 150px;
    padding: 1rem;
    text-align: center;
    position: relative;
}

.gtd-compare-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    color: #ef4444;
    font-size: 0.7rem;
    cursor: pointer;
}

.gtd-compare-vehicle img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.gtd-compare-vehicle h5 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.gtd-compare-vehicle span {
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-compare-value {
    flex: 1;
    min-width: 150px;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-compare-empty {
    padding: 3rem;
    text-align: center;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-compare-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.gtd-compare-empty h4 {
    margin: 0 0 0.5rem 0;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-compare-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 1.25rem;
    height: 1.25rem;
    background: #ef4444;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Saved Searches
   ========================================================================== */

.gtd-saved-searches {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-saved-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-saved-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-save-search-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.gtd-saved-empty {
    padding: 2rem;
    text-align: center;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-saved-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.gtd-saved-list {
    padding: 0.5rem;
}

.gtd-saved-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.gtd-saved-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.gtd-saved-info {
    flex: 1;
}

.gtd-saved-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-saved-criteria {
    display: block;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-saved-date {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
    margin-top: 0.25rem;
}

.gtd-saved-actions {
    display: flex;
    gap: 0.5rem;
}

.gtd-saved-run,
.gtd-saved-delete {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-saved-run {
    color: #3b82f6;
}

.gtd-saved-run:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.gtd-saved-delete {
    color: #ef4444;
}

.gtd-saved-delete:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* ==========================================================================
   Dealer Map
   ========================================================================== */

.gtd-dealer-map {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-map-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-map-locate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-map-locate:hover {
    background: rgba(59, 130, 246, 0.2);
}

.gtd-map-container {
    height: 300px;
    background: #f1f5f9;
}

.gtd-map-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-map-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.gtd-map-placeholder span {
    font-size: 0.8rem;
}

.gtd-dealer-list {
    max-height: 300px;
    overflow-y: auto;
}

.gtd-dealer-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
    transition: background 0.2s ease;
}

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

.gtd-dealer-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.gtd-dealer-marker {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: #3b82f6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.gtd-dealer-info {
    flex: 1;
}

.gtd-dealer-info h5 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-dealer-info p {
    margin: 0.25rem 0 0 0;
    font-size: 0.8rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-dealer-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-dealer-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-dealer-view {
    padding: 0.375rem 0.75rem;
    background: #3b82f6;
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
}

.gtd-no-dealers {
    padding: 2rem;
    text-align: center;
    color: var(--bs-text-muted, #99a1b7);
}

/* ==========================================================================
   Payment Breakdown
   ========================================================================== */

.gtd-payment-breakdown {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e1e3ea);
    border-radius: 0.625rem;
    overflow: hidden;
}

.gtd-payment-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-payment-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color, #1e1e2d);
}

.gtd-payment-content {
    padding: 1.5rem;
}

.gtd-payment-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-payment-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.gtd-payment-section h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-text-muted, #99a1b7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gtd-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.9rem;
}

.gtd-payment-row span:first-child {
    color: var(--bs-text-muted, #99a1b7);
}

.gtd-payment-value {
    font-weight: 600;
    color: var(--bs-body-color, #1e1e2d);
    font-variant-numeric: tabular-nums;
}

.gtd-payment-value.subtract {
    color: #22c55e;
}

.gtd-payment-row.main .gtd-payment-value {
    font-size: 1.25rem;
}

.gtd-payment-row.subtotal {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color, #e1e3ea);
}

.gtd-payment-section.total {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    margin: 0 -1.5rem -1.5rem;
    padding: 1.5rem;
    border-bottom: none;
}

[data-bs-theme="dark"] .gtd-payment-section.total {
    background: linear-gradient(135deg, #1e1e2d 0%, #252536 100%);
}

.gtd-payment-section.total .gtd-payment-row:first-child {
    margin-bottom: 0.5rem;
}

.gtd-payment-value.highlight {
    font-size: 1.5rem;
    color: #3b82f6;
}

.gtd-payment-footer {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--bs-border-color, #e1e3ea);
}

.gtd-payment-footer p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--bs-text-muted, #99a1b7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Responsive - Batch 9 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-sort-options {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .gtd-sort-dropdown {
        width: 100%;
    }

    .gtd-sort-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .gtd-sort-menu {
        width: 100%;
        left: 0;
        right: auto;
    }

    .gtd-compare-label {
        flex: 0 0 80px;
        font-size: 0.75rem;
    }

    .gtd-compare-vehicle {
        min-width: 120px;
    }

    .gtd-dealer-item {
        flex-wrap: wrap;
    }

    .gtd-dealer-view {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
}

/* ==========================================================================
   Vehicle Gallery - Batch 10
   ========================================================================== */

.gtd-gallery-container {
    position: relative;
}

.gtd-gallery-main {
    position: relative;
    background: var(--bs-gray-100, #f5f8fa);
    border-radius: 0.625rem;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.gtd-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.gtd-gallery-main img:hover {
    transform: scale(1.02);
}

.gtd-gallery-main .gtd-gallery-prev,
.gtd-gallery-main .gtd-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gtd-gallery-main .gtd-gallery-prev {
    left: 1rem;
}

.gtd-gallery-main .gtd-gallery-next {
    right: 1rem;
}

.gtd-gallery-main .gtd-gallery-prev:hover,
.gtd-gallery-main .gtd-gallery-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gtd-gallery-counter {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.gtd-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.gtd-gallery-thumb {
    flex: 0 0 80px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: all 0.2s ease;
}

.gtd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-gallery-thumb:hover {
    border-color: var(--bs-gray-400);
}

.gtd-gallery-thumb.active {
    border-color: var(--bs-primary, #009ef7);
}

.gtd-gallery-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.gtd-gallery-fullscreen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gtd-gallery-fullscreen .gtd-gallery-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gtd-gallery-fullscreen .gtd-gallery-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-gallery-fullscreen .gtd-gallery-prev,
.gtd-gallery-fullscreen .gtd-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gtd-gallery-fullscreen .gtd-gallery-prev {
    left: 2rem;
}

.gtd-gallery-fullscreen .gtd-gallery-next {
    right: 2rem;
}

.gtd-gallery-fullscreen .gtd-gallery-prev:hover,
.gtd-gallery-fullscreen .gtd-gallery-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-gallery-fullscreen .gtd-gallery-counter {
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
}

[data-bs-theme="dark"] .gtd-gallery-main {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-gallery-main .gtd-gallery-prev,
[data-bs-theme="dark"] .gtd-gallery-main .gtd-gallery-next {
    background: rgba(30, 30, 45, 0.9);
    color: #fff;
}

[data-bs-theme="dark"] .gtd-gallery-thumb.active {
    border-color: var(--bs-primary, #009ef7);
}

/* ==========================================================================
   Quick Filters - Batch 10
   ========================================================================== */

.gtd-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.gtd-quick-filters-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.gtd-quick-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    margin-right: 0.25rem;
}

.gtd-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: var(--bs-gray-100, #f5f8fa);
    border: 1px solid var(--bs-gray-200, #e1e3ea);
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-quick-filter:hover {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
}

.gtd-quick-filter.active {
    background: var(--bs-primary, #009ef7);
    border-color: var(--bs-primary, #009ef7);
    color: #fff;
}

.gtd-quick-filter i {
    font-size: 0.75rem;
}

.gtd-quick-filter-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    min-width: 1.25rem;
    text-align: center;
}

.gtd-quick-filter.active .gtd-quick-filter-count {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-quick-filters-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px dashed var(--bs-gray-300);
    border-radius: 2rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-quick-filters-clear:hover {
    background: var(--bs-danger-light, #fff5f8);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

[data-bs-theme="dark"] .gtd-quick-filter {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-quick-filter:hover {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-quick-filters-clear {
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-400);
}

/* ==========================================================================
   Location Search - Batch 10
   ========================================================================== */

[data-location-search] {
    position: relative;
}

.gtd-location-input {
    padding-left: 2.5rem;
}

[data-location-search]::before {
    content: '\f3c5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    z-index: 5;
}

.gtd-location-geo {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--bs-primary, #009ef7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.gtd-location-geo:hover {
    background: var(--bs-primary-light, #f1faff);
}

.gtd-location-geo.loading i {
    animation: spin 1s linear infinite;
}

.gtd-location-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    margin-top: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    max-height: 300px;
    overflow-y: auto;
}

.gtd-location-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-location-item:hover {
    background: var(--bs-gray-100);
}

.gtd-location-item i {
    color: var(--bs-primary, #009ef7);
    font-size: 1rem;
}

.gtd-location-item div {
    display: flex;
    flex-direction: column;
}

.gtd-location-label {
    font-weight: 500;
    color: var(--bs-gray-900);
}

.gtd-location-desc {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-location-dropdown {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-location-item:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-location-label {
    color: var(--bs-gray-100);
}

/* ==========================================================================
   Dealer Profile - Batch 10
   ========================================================================== */

.gtd-dealer-card {
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gtd-dealer-card.compact {
    padding: 1rem;
}

.gtd-dealer-header {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.gtd-dealer-card.compact .gtd-dealer-header {
    padding: 0;
    border: none;
}

.gtd-dealer-logo {
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    object-fit: contain;
    background: var(--bs-gray-100);
    padding: 0.5rem;
}

.gtd-dealer-card.compact .gtd-dealer-logo {
    width: 48px;
    height: 48px;
}

.gtd-dealer-info {
    flex: 1;
}

.gtd-dealer-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-dealer-card.compact .gtd-dealer-name {
    font-size: 1rem;
}

.gtd-dealer-name .gtd-verified {
    color: var(--bs-success, #50cd89);
}

.gtd-dealer-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-dealer-rating .gtd-stars {
    color: #ffc107;
    font-size: 0.75rem;
}

.gtd-dealer-rating .gtd-rating-text {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.gtd-dealer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-dealer-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-dealer-body {
    padding: 1.25rem;
}

.gtd-dealer-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.gtd-dealer-status.open {
    color: var(--bs-success);
    background: var(--bs-success-light, #e8fff3);
}

.gtd-dealer-status.closed {
    color: var(--bs-danger);
    background: var(--bs-danger-light, #fff5f8);
}

.gtd-response-time {
    margin-left: auto;
    color: var(--bs-gray-600);
    font-weight: 400;
}

.gtd-dealer-desc {
    margin-bottom: 1rem;
    color: var(--bs-gray-700);
    font-size: 0.875rem;
}

.gtd-dealer-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--bs-success-light, #e8fff3);
    color: var(--bs-success, #50cd89);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.gtd-dealer-contact {
    margin-bottom: 1rem;
}

.gtd-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.gtd-contact-item i {
    color: var(--bs-gray-500);
    width: 1rem;
}

.gtd-contact-item a {
    color: var(--bs-primary, #009ef7);
    text-decoration: none;
}

.gtd-dealer-hours {
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
}

.gtd-dealer-hours strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gtd-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    color: var(--bs-gray-700);
}

.gtd-dealer-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1.25rem;
    border-top: 1px solid var(--bs-gray-200);
}

.gtd-dealer-card.compact .gtd-dealer-actions {
    padding: 0;
    border: none;
    margin-top: 0.75rem;
}

[data-bs-theme="dark"] .gtd-dealer-card {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-dealer-header,
[data-bs-theme="dark"] .gtd-dealer-actions {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-dealer-logo {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-dealer-desc,
[data-bs-theme="dark"] .gtd-hours-row {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-dealer-status,
[data-bs-theme="dark"] .gtd-dealer-hours {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Review Form - Batch 10
   ========================================================================== */

.gtd-review-form {
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.gtd-review-form h4 {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.gtd-review-rating-section {
    margin-bottom: 1.5rem;
}

.gtd-review-rating-section label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.gtd-review-stars {
    display: flex;
    gap: 0.25rem;
}

.gtd-review-star {
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-300);
    transition: all 0.15s ease;
}

.gtd-review-star i {
    font-size: 2rem;
}

.gtd-review-star.hover,
.gtd-review-star.active {
    color: #ffc107;
    transform: scale(1.1);
}

.gtd-rating-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-primary, #009ef7);
}

.gtd-category-ratings {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
}

.gtd-category-rating label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}

.gtd-category-options {
    display: flex;
    gap: 0.5rem;
}

.gtd-category-option {
    display: flex;
    cursor: pointer;
}

.gtd-category-option input {
    display: none;
}

.gtd-category-option span {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.gtd-category-option:hover span {
    border-color: var(--bs-primary);
}

.gtd-category-option input:checked + span {
    background: var(--bs-primary, #009ef7);
    border-color: var(--bs-primary, #009ef7);
    color: #fff;
}

.gtd-recommend-options {
    display: flex;
    gap: 1rem;
}

.gtd-recommend-option {
    flex: 1;
    cursor: pointer;
}

.gtd-recommend-option input {
    display: none;
}

.gtd-recommend-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bs-gray-100);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.gtd-recommend-option:hover span {
    background: var(--bs-gray-200);
}

.gtd-recommend-option input:checked + span {
    background: var(--bs-success-light, #e8fff3);
    border-color: var(--bs-success, #50cd89);
    color: var(--bs-success, #50cd89);
}

.gtd-recommend-option input[value="no"]:checked + span {
    background: var(--bs-danger-light, #fff5f8);
    border-color: var(--bs-danger, #f1416c);
    color: var(--bs-danger, #f1416c);
}

.gtd-review-success {
    text-align: center;
    padding: 3rem 2rem;
}

.gtd-review-success i {
    font-size: 4rem;
    color: var(--bs-success, #50cd89);
    margin-bottom: 1rem;
}

.gtd-review-success h4 {
    margin-bottom: 0.5rem;
}

.gtd-review-success p {
    color: var(--bs-gray-600);
    margin: 0;
}

[data-bs-theme="dark"] .gtd-review-form {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-category-ratings {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-category-option span {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-recommend-option span {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Vehicle Stats - Batch 10
   ========================================================================== */

.gtd-vehicle-stats.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.gtd-stats-group {
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.gtd-stats-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.gtd-stats-title i {
    color: var(--bs-primary, #009ef7);
}

.gtd-stats-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gtd-stat-label {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.gtd-stat-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-900);
}

.gtd-vehicle-stats.list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gtd-stats-section {
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gtd-stats-section .gtd-stats-title {
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-200);
    border-radius: 0;
    background: var(--bs-gray-100);
}

.gtd-stats-table {
    width: 100%;
    margin: 0;
}

.gtd-stats-table th,
.gtd-stats-table td {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--bs-gray-100);
}

.gtd-stats-table th {
    font-weight: 500;
    color: var(--bs-gray-600);
    text-align: left;
    width: 40%;
}

.gtd-stats-table td {
    font-weight: 500;
    color: var(--bs-gray-900);
}

.gtd-stats-table tr:last-child th,
.gtd-stats-table tr:last-child td {
    border-bottom: none;
}

.gtd-vehicle-stats.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-700);
}

.gtd-stat-badge i {
    color: var(--bs-gray-500);
    font-size: 0.75rem;
}

[data-bs-theme="dark"] .gtd-stats-group,
[data-bs-theme="dark"] .gtd-stats-section {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-stats-title {
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-stats-section .gtd-stats-title {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-stat-value,
[data-bs-theme="dark"] .gtd-stats-table td {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-stats-table th,
[data-bs-theme="dark"] .gtd-stats-table td {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-stat-badge {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Responsive - Batch 10 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-gallery-main {
        aspect-ratio: 4/3;
    }

    .gtd-gallery-main .gtd-gallery-prev,
    .gtd-gallery-main .gtd-gallery-next {
        width: 32px;
        height: 32px;
    }

    .gtd-gallery-thumb {
        flex: 0 0 60px;
        height: 45px;
    }

    .gtd-gallery-fullscreen .gtd-gallery-prev,
    .gtd-gallery-fullscreen .gtd-gallery-next {
        width: 40px;
        height: 40px;
    }

    .gtd-quick-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .gtd-quick-filters-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .gtd-quick-filter {
        white-space: nowrap;
    }

    .gtd-dealer-header {
        flex-direction: column;
        text-align: center;
    }

    .gtd-dealer-logo {
        margin: 0 auto;
    }

    .gtd-dealer-meta {
        justify-content: center;
    }

    .gtd-dealer-actions {
        flex-direction: column;
    }

    .gtd-review-star {
        width: 40px;
        height: 40px;
    }

    .gtd-review-star i {
        font-size: 1.5rem;
    }

    .gtd-category-option span {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .gtd-recommend-options {
        flex-direction: column;
    }

    .gtd-vehicle-stats.grid {
        grid-template-columns: 1fr;
    }

    .gtd-stats-table th {
        width: 50%;
    }
}

/* ==========================================================================
   Vehicle Alerts - Batch 11
   ========================================================================== */

.gtd-vehicle-alerts {
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.gtd-vehicle-alerts h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.gtd-vehicle-alerts h4 i {
    color: var(--bs-primary, #009ef7);
}

.gtd-alert-email {
    margin-bottom: 1.5rem;
}

.gtd-alert-types {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gtd-alert-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-alert-type:hover {
    background: var(--bs-gray-200);
}

.gtd-alert-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-alert-info i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-light, #f1faff);
    color: var(--bs-primary, #009ef7);
    border-radius: 0.375rem;
}

.gtd-alert-label {
    display: block;
    font-weight: 500;
    color: var(--bs-gray-900);
}

.gtd-alert-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-alert-toggle {
    width: 44px;
    height: 24px;
    appearance: none;
    background: var(--bs-gray-300);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gtd-alert-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.gtd-alert-toggle:checked {
    background: var(--bs-primary, #009ef7);
}

.gtd-alert-toggle:checked::after {
    transform: translateX(20px);
}

.gtd-alert-frequency {
    margin-bottom: 1.5rem;
}

[data-bs-theme="dark"] .gtd-vehicle-alerts {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-alert-type {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-alert-type:hover {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-alert-label {
    color: var(--bs-gray-100);
}

/* ==========================================================================
   Stock Counter - Batch 11
   ========================================================================== */

.gtd-stock-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
}

.gtd-stock-counter.hero {
    flex-direction: column;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--bs-primary-light, #f1faff) 0%, #fff 100%);
}

.gtd-stock-counter.hero .gtd-stock-count {
    font-size: 3rem;
    line-height: 1;
}

.gtd-stock-counter.hero .gtd-stock-label {
    font-size: 1rem;
}

.gtd-stock-icon {
    color: var(--bs-primary, #009ef7);
    font-size: 1.25rem;
}

.gtd-stock-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    font-variant-numeric: tabular-nums;
}

.gtd-stock-label {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-stock-live {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--bs-success, #50cd89);
    font-weight: 500;
}

.gtd-live-dot {
    width: 8px;
    height: 8px;
    background: var(--bs-success, #50cd89);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

[data-bs-theme="dark"] .gtd-stock-counter {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-stock-counter.hero {
    background: linear-gradient(135deg, var(--bs-gray-800) 0%, var(--bs-gray-900) 100%);
}

[data-bs-theme="dark"] .gtd-stock-count {
    color: var(--bs-gray-100);
}

/* ==========================================================================
   Feature Highlights - Batch 11
   ========================================================================== */

.gtd-feature-highlights.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.gtd-feature-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
}

.gtd-feature-card i {
    color: var(--bs-success, #50cd89);
    font-size: 0.875rem;
}

.gtd-feature-card span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-700);
}

.gtd-feature-highlights.list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-gray-100);
}

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

.gtd-feature-item i {
    color: var(--bs-success, #50cd89);
    width: 1.25rem;
}

.gtd-feature-item span {
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

.gtd-feature-highlights.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-success-light, #e8fff3);
    color: var(--bs-success, #50cd89);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.gtd-feature-more {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
}

[data-bs-theme="dark"] .gtd-feature-card {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-feature-card span,
[data-bs-theme="dark"] .gtd-feature-item span {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-feature-item {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-feature-more {
    background: var(--bs-gray-700);
    color: var(--bs-gray-400);
}

/* ==========================================================================
   Price Drop - Batch 11
   ========================================================================== */

.gtd-price-drop.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--bs-success, #50cd89);
    color: #fff;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.gtd-price-drop.inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-price-drop .gtd-price-was {
    text-decoration: line-through;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

.gtd-price-drop.inline .gtd-price-save {
    color: var(--bs-success, #50cd89);
    font-weight: 600;
    font-size: 0.875rem;
}

.gtd-price-drop.detailed {
    background: var(--bs-success-light, #e8fff3);
    border: 1px solid var(--bs-success, #50cd89);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-price-drop-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bs-success, #50cd89);
    color: #fff;
    font-weight: 600;
}

.gtd-price-drop-body {
    padding: 1rem;
}

.gtd-price-comparison {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gtd-price-comparison .gtd-price-was {
    font-size: 1.125rem;
}

.gtd-price-comparison .gtd-price-now {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-success, #50cd89);
}

.gtd-price-comparison i {
    color: var(--bs-gray-400);
}

.gtd-price-savings {
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

.gtd-price-savings strong {
    color: var(--bs-success, #50cd89);
}

.gtd-price-when {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-price-drop.detailed {
    background: rgba(80, 205, 137, 0.1);
}

[data-bs-theme="dark"] .gtd-price-savings {
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Compare Button - Batch 11
   ========================================================================== */

[data-compare-button] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-compare-button]:hover {
    background: var(--bs-primary-light, #f1faff);
    border-color: var(--bs-primary, #009ef7);
    color: var(--bs-primary, #009ef7);
}

[data-compare-button].added {
    background: var(--bs-success-light, #e8fff3);
    border-color: var(--bs-success, #50cd89);
    color: var(--bs-success, #50cd89);
}

.gtd-compare-floating-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--bs-gray-900);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 1040;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.gtd-compare-floating-bar .gtd-compare-count {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}

.gtd-compare-floating-bar .gtd-compare-clear {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bs-gray-400);
    cursor: pointer;
    transition: color 0.15s ease;
}

.gtd-compare-floating-bar .gtd-compare-clear:hover {
    color: #fff;
}

[data-bs-theme="dark"] [data-compare-button] {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Search Results Header - Batch 11
   ========================================================================== */

.gtd-search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.gtd-results-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gtd-results-query {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-results-count {
    font-size: 0.8125rem;
    color: var(--bs-gray-500);
}

.gtd-results-count strong {
    color: var(--bs-gray-900);
}

.gtd-results-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gtd-results-sort-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-results-sort-wrapper label {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    white-space: nowrap;
}

.gtd-results-sort {
    min-width: 160px;
}

.gtd-view-toggles {
    display: flex;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    padding: 0.25rem;
}

.gtd-view-toggle {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: var(--bs-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-view-toggle:hover {
    color: var(--bs-gray-700);
}

.gtd-view-toggle.active {
    background: #fff;
    color: var(--bs-primary, #009ef7);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .gtd-search-results-header {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-results-count strong {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-view-toggles {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-view-toggle.active {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Responsive - Batch 11 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-alert-type {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .gtd-alert-toggle {
        align-self: flex-end;
    }

    .gtd-stock-counter {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .gtd-stock-live {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .gtd-feature-highlights.grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtd-price-comparison {
        flex-wrap: wrap;
    }

    .gtd-compare-floating-bar {
        left: 1rem;
        right: 1rem;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .gtd-search-results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .gtd-results-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .gtd-results-sort-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .gtd-results-sort {
        min-width: 100%;
    }

    .gtd-view-toggles {
        align-self: flex-end;
    }
}

/* ==========================================================================
   Pagination - Batch 12
   ========================================================================== */

.gtd-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.gtd-pagination-info {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.gtd-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-page-btn {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-page-btn:hover:not(:disabled) {
    background: var(--bs-gray-100);
    border-color: var(--bs-gray-300);
}

.gtd-page-btn.active {
    background: var(--bs-primary, #009ef7);
    border-color: var(--bs-primary, #009ef7);
    color: #fff;
}

.gtd-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-page-ellipsis {
    padding: 0 0.5rem;
    color: var(--bs-gray-500);
}

.gtd-pagination-perpage-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-pagination-perpage-wrapper label {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.gtd-pagination-perpage {
    width: auto;
    min-width: 70px;
}

[data-bs-theme="dark"] .gtd-page-btn {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-page-btn:hover:not(:disabled) {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Loading Overlay - Batch 12
   ========================================================================== */

.gtd-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gtd-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.gtd-loading-overlay-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gtd-loading-overlay-section.active {
    opacity: 1;
    visibility: visible;
}

.gtd-blur-content > *:not(.gtd-loading-overlay-section) {
    filter: blur(2px);
}

.gtd-loading-content {
    text-align: center;
}

.gtd-spinner {
    width: 48px;
    height: 48px;
    position: relative;
    margin: 0 auto 1rem;
}

.gtd-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--bs-primary, #009ef7);
    border-radius: 50%;
    animation: spinnerRotate 1.2s ease-in-out infinite;
}

.gtd-spinner-ring:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    animation-delay: 0.15s;
    border-top-color: var(--bs-primary, #009ef7);
    opacity: 0.7;
}

.gtd-spinner-ring:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    animation-delay: 0.3s;
    border-top-color: var(--bs-primary, #009ef7);
    opacity: 0.4;
}

@keyframes spinnerRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gtd-loading-message {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-loading-overlay,
[data-bs-theme="dark"] .gtd-loading-overlay-section {
    background: rgba(30, 30, 45, 0.9);
}

/* ==========================================================================
   Empty State - Batch 12
   ========================================================================== */

.gtd-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.gtd-empty-state.compact {
    padding: 2rem 1rem;
}

.gtd-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--bs-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-empty-icon i {
    font-size: 2rem;
    color: var(--bs-gray-400);
}

.gtd-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--bs-gray-900);
}

.gtd-empty-description {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    margin: 0 0 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.gtd-empty-action {
    min-width: 150px;
}

[data-bs-theme="dark"] .gtd-empty-icon {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-empty-title {
    color: var(--bs-gray-100);
}

/* ==========================================================================
   Vehicle Card - Batch 12
   ========================================================================== */

.gtd-vehicle-card {
    display: block;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.gtd-vehicle-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.gtd-vehicle-card.featured {
    border-color: var(--bs-primary, #009ef7);
}

.gtd-card-image {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--bs-gray-100);
}

.gtd-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-card-gallery {
    position: relative;
    height: 100%;
}

.gtd-card-gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-card-gallery-img.active {
    opacity: 1;
}

.gtd-card-gallery-prev,
.gtd-card-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 0.75rem;
}

.gtd-vehicle-card:hover .gtd-card-gallery-prev,
.gtd-vehicle-card:hover .gtd-card-gallery-next {
    opacity: 1;
}

.gtd-card-gallery-prev { left: 0.5rem; }
.gtd-card-gallery-next { right: 0.5rem; }

.gtd-card-gallery-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.25rem;
}

.gtd-card-gallery-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gtd-card-gallery-dot.active {
    background: #fff;
}

.gtd-card-badges {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.gtd-card-badges .gtd-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-badge.featured {
    background: var(--bs-primary, #009ef7);
    color: #fff;
}

.gtd-badge.price-drop {
    background: var(--bs-success, #50cd89);
    color: #fff;
}

.gtd-card-favorite {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-card-favorite i {
    font-size: 0.875rem;
    color: var(--bs-gray-500);
    transition: color 0.2s ease;
}

.gtd-card-favorite.active i,
.gtd-card-favorite:hover i {
    color: var(--bs-danger, #f1416c);
}

.gtd-card-favorite.active i {
    font-weight: 900;
}

.gtd-card-body {
    padding: 1rem;
}

.gtd-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--bs-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-card-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gtd-card-price-current {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-gray-900);
}

.gtd-card-price-original {
    font-size: 0.8125rem;
    text-decoration: line-through;
    color: var(--bs-gray-500);
}

.gtd-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gtd-card-specs span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.gtd-card-specs i {
    color: var(--bs-gray-400);
    font-size: 0.6875rem;
}

.gtd-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-gray-100);
}

.gtd-card-location {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-card-compare {
    padding: 0.375rem 0.75rem;
    background: var(--bs-gray-100);
    border: none;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.15s ease;
}

.gtd-card-compare:hover {
    background: var(--bs-primary-light, #f1faff);
    color: var(--bs-primary, #009ef7);
}

/* List layout */
.gtd-vehicle-card.list {
    display: flex;
    flex-direction: row;
}

.gtd-vehicle-card.list .gtd-card-image {
    width: 280px;
    flex-shrink: 0;
    aspect-ratio: 4/3;
}

.gtd-vehicle-card.list .gtd-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.gtd-vehicle-card.list .gtd-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.gtd-vehicle-card.list .gtd-card-title {
    font-size: 1.125rem;
    white-space: normal;
}

.gtd-vehicle-card.list .gtd-card-description {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.75rem;
    flex: 1;
}

.gtd-vehicle-card.list .gtd-card-footer {
    margin-top: auto;
}

.gtd-card-dealer .gtd-dealer-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    display: block;
}

[data-bs-theme="dark"] .gtd-vehicle-card {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-card-title,
[data-bs-theme="dark"] .gtd-card-price-current {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-card-footer {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-card-compare {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Filter Sidebar - Batch 12
   ========================================================================== */

[data-filter-sidebar] {
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
}

.gtd-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.gtd-filter-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.gtd-filter-close {
    display: none;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-600);
}

.gtd-filter-section {
    border-bottom: 1px solid var(--bs-gray-100);
}

.gtd-filter-section:last-child {
    border-bottom: none;
}

.gtd-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-filter-section-header:hover {
    background: var(--bs-gray-50);
}

.gtd-filter-section-header h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-gray-800);
}

.gtd-filter-section-header i {
    transition: transform 0.2s ease;
}

.gtd-filter-section.collapsed .gtd-filter-section-header i {
    transform: rotate(-90deg);
}

.gtd-filter-section-body {
    padding: 0 1.25rem 1rem;
}

.gtd-filter-section.collapsed .gtd-filter-section-body {
    display: none;
}

.gtd-filter-range {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.gtd-filter-range input {
    flex: 1;
}

.gtd-filter-range span {
    color: var(--bs-gray-500);
}

.gtd-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-filter-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
    cursor: pointer;
}

.gtd-filter-checkbox input {
    width: 18px;
    height: 18px;
}

.gtd-filter-checkbox .gtd-filter-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-filter-actions {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-gray-200);
    display: flex;
    gap: 0.5rem;
}

.gtd-filter-clear {
    flex: 1;
}

.gtd-filter-apply {
    flex: 1;
}

.gtd-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    background: var(--bs-primary, #009ef7);
    color: #fff;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
}

[data-bs-theme="dark"] [data-filter-sidebar] {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-filter-header,
[data-bs-theme="dark"] .gtd-filter-actions {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-filter-section {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-filter-section-header h5 {
    color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-filter-checkbox label {
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Mobile Sort Sheet - Batch 12
   ========================================================================== */

.gtd-mobile-sort-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gtd-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-mobile-sort-sheet.open .gtd-sheet-backdrop {
    opacity: 1;
}

.gtd-sheet-content {
    position: relative;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gtd-mobile-sort-sheet.open .gtd-sheet-content {
    transform: translateY(0);
}

.gtd-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid var(--bs-gray-200);
    position: sticky;
    top: 0;
    background: #fff;
}

.gtd-sheet-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.gtd-sheet-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-sheet-body {
    padding: 0.5rem 0;
}

.gtd-sort-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 0.75rem;
}

.gtd-sort-option:hover {
    background: var(--bs-gray-100);
}

.gtd-sort-option.active {
    background: var(--bs-primary-light, #f1faff);
    color: var(--bs-primary, #009ef7);
}

.gtd-sort-option i:first-child {
    width: 24px;
    color: var(--bs-gray-500);
}

.gtd-sort-option.active i:first-child {
    color: var(--bs-primary, #009ef7);
}

.gtd-sort-label {
    flex: 1;
    font-size: 0.9375rem;
}

.gtd-sort-check {
    color: var(--bs-primary, #009ef7);
}

[data-bs-theme="dark"] .gtd-sheet-content,
[data-bs-theme="dark"] .gtd-sheet-header {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-sheet-header {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-sort-option:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Responsive - Batch 12 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-pagination {
        flex-direction: column;
        align-items: center;
    }

    .gtd-pagination-controls {
        order: -1;
    }

    .gtd-page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }

    .gtd-vehicle-card.list {
        flex-direction: column;
    }

    .gtd-vehicle-card.list .gtd-card-image {
        width: 100%;
        aspect-ratio: 16/10;
    }

    [data-filter-sidebar] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [data-filter-sidebar].open {
        transform: translateX(0);
    }

    .gtd-filter-close {
        display: flex;
    }

    body.filter-sidebar-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   Batch 13: Navigation & UI Components
   ========================================================================== */

/* Breadcrumbs */
.gtd-breadcrumbs {
    padding: 0.75rem 0;
}

.gtd-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gtd-breadcrumb-item {
    display: flex;
    align-items: center;
}

.gtd-breadcrumb-separator {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--bs-gray-500);
    font-size: 0.625rem;
}

.gtd-breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--bs-gray-600);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.gtd-breadcrumb-link:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumb-link i {
    font-size: 0.75rem;
}

.gtd-breadcrumb-current {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--bs-gray-900);
    font-size: 0.875rem;
    font-weight: 600;
}

.gtd-breadcrumb-current i {
    font-size: 0.75rem;
}

/* Mobile Menu */
.gtd-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1060;
    visibility: hidden;
}

.gtd-mobile-menu.open {
    visibility: visible;
}

.gtd-mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-mobile-menu.open .gtd-mobile-menu-backdrop {
    opacity: 1;
}

.gtd-mobile-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
}

.gtd-mobile-menu.open .gtd-mobile-menu-panel {
    transform: translateX(0);
}

.gtd-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-mobile-menu-logo img {
    height: 32px;
    width: auto;
}

.gtd-mobile-menu-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--bs-gray-600);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.gtd-mobile-menu-close:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

.gtd-mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.gtd-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gtd-mobile-nav-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-mobile-nav-item:last-child {
    border-bottom: none;
}

.gtd-mobile-nav-link,
.gtd-mobile-submenu-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: none;
    border: none;
    color: var(--bs-gray-700);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-mobile-nav-link:hover,
.gtd-mobile-submenu-trigger:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

.gtd-mobile-nav-item.active .gtd-mobile-nav-link {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-mobile-nav-link i,
.gtd-mobile-submenu-trigger i:first-child {
    width: 24px;
    text-align: center;
    font-size: 1rem;
    color: var(--bs-gray-500);
}

.gtd-submenu-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.gtd-mobile-submenu-trigger.open .gtd-submenu-arrow {
    transform: rotate(180deg);
}

.gtd-mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bs-gray-50);
}

.gtd-mobile-submenu.open {
    max-height: 500px;
}

.gtd-mobile-submenu a {
    display: block;
    padding: 0.75rem 1rem 0.75rem 3.25rem;
    color: var(--bs-gray-600);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.gtd-mobile-submenu a:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

.gtd-mobile-menu-footer {
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

body.gtd-menu-open {
    overflow: hidden;
}

/* Notifications */
.gtd-notifications {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    pointer-events: none;
}

.gtd-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-left: 4px solid var(--bs-primary);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.gtd-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.gtd-notification.hide {
    transform: translateX(100%);
    opacity: 0;
}

.gtd-notification-success {
    border-left-color: var(--bs-success);
}

.gtd-notification-error {
    border-left-color: var(--bs-danger);
}

.gtd-notification-warning {
    border-left-color: var(--bs-warning);
}

.gtd-notification-info {
    border-left-color: var(--bs-info);
}

.gtd-notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.gtd-notification-success .gtd-notification-icon {
    color: var(--bs-success);
}

.gtd-notification-error .gtd-notification-icon {
    color: var(--bs-danger);
}

.gtd-notification-warning .gtd-notification-icon {
    color: var(--bs-warning);
}

.gtd-notification-info .gtd-notification-icon {
    color: var(--bs-info);
}

.gtd-notification-content {
    flex: 1;
    min-width: 0;
}

.gtd-notification-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-gray-900);
    margin-bottom: 0.25rem;
}

.gtd-notification-message {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    line-height: 1.4;
}

.gtd-notification-action {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    color: var(--bs-gray-700);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-notification-action:hover {
    background: var(--bs-gray-100);
}

.gtd-notification-dismiss {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--bs-gray-400);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.gtd-notification-dismiss:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
}

/* Tooltip */
.gtd-tooltip {
    position: absolute;
    z-index: 1080;
    padding: 0.5rem 0.75rem;
    background: var(--bs-gray-900);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 0.375rem;
    white-space: nowrap;
    max-width: 250px;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.15s ease;
    pointer-events: none;
}

.gtd-tooltip.show {
    opacity: 1;
    transform: scale(1);
}

.gtd-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.gtd-tooltip-top::before {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--bs-gray-900);
}

.gtd-tooltip-bottom::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--bs-gray-900);
}

.gtd-tooltip-left::before {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--bs-gray-900);
}

.gtd-tooltip-right::before {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--bs-gray-900);
}

/* Tab Navigation */
[data-tab-nav] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}

[data-tab-nav] [data-tab] {
    position: relative;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    color: var(--bs-gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

[data-tab-nav] [data-tab]:hover {
    color: var(--bs-gray-900);
}

[data-tab-nav] [data-tab].active {
    color: var(--bs-primary);
}

[data-tab-nav] [data-tab].active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--bs-primary);
}

[data-tab-nav] [data-tab] i {
    margin-right: 0.5rem;
}

[data-tab-panel] {
    display: none;
}

[data-tab-panel].active {
    display: block;
    animation: gtd-tab-fade-in 0.2s ease;
}

@keyframes gtd-tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Variants */
[data-tab-nav].gtd-tabs-pills {
    border-bottom: none;
    gap: 0.5rem;
}

[data-tab-nav].gtd-tabs-pills [data-tab] {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    background: var(--bs-gray-100);
}

[data-tab-nav].gtd-tabs-pills [data-tab]:hover {
    background: var(--bs-gray-200);
}

[data-tab-nav].gtd-tabs-pills [data-tab].active {
    background: var(--bs-primary);
    color: #fff;
}

[data-tab-nav].gtd-tabs-pills [data-tab].active::after {
    display: none;
}

[data-tab-nav].gtd-tabs-boxed {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
    background: var(--bs-gray-50);
}

[data-tab-nav].gtd-tabs-boxed [data-tab] {
    border-radius: 0.375rem;
}

[data-tab-nav].gtd-tabs-boxed [data-tab].active {
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-tab-nav].gtd-tabs-boxed [data-tab].active::after {
    display: none;
}

/* Accordion */
[data-accordion] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-accordion-item {
    border-bottom: 1px solid var(--bs-border-color);
}

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

.gtd-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    color: var(--bs-gray-800);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-accordion-header:hover {
    background: var(--bs-gray-50);
}

.gtd-accordion-item.open .gtd-accordion-header {
    background: var(--bs-gray-50);
}

.gtd-accordion-header i:last-child {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    transition: transform 0.3s ease;
}

.gtd-accordion-item.open .gtd-accordion-header i:last-child {
    transform: rotate(180deg);
}

.gtd-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gtd-accordion-body {
    padding: 1rem 1.25rem;
    color: var(--bs-gray-600);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Accordion Variants */
[data-accordion].gtd-accordion-flush {
    border: none;
    border-radius: 0;
}

[data-accordion].gtd-accordion-flush .gtd-accordion-item {
    border-bottom: 1px solid var(--bs-border-color);
}

[data-accordion].gtd-accordion-flush .gtd-accordion-header {
    padding-left: 0;
    padding-right: 0;
}

[data-accordion].gtd-accordion-flush .gtd-accordion-body {
    padding-left: 0;
    padding-right: 0;
}

[data-accordion].gtd-accordion-spaced {
    background: transparent;
    border: none;
}

[data-accordion].gtd-accordion-spaced .gtd-accordion-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

[data-accordion].gtd-accordion-spaced .gtd-accordion-item:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Dark Mode - Batch 13 Components
   ========================================================================== */

[data-bs-theme="dark"] .gtd-breadcrumb-separator {
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-breadcrumb-link {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-breadcrumb-link:hover {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-breadcrumb-current {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-mobile-menu-panel {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-mobile-menu-close:hover {
    background: var(--bs-gray-800);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-mobile-nav-link,
[data-bs-theme="dark"] .gtd-mobile-submenu-trigger {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-mobile-nav-link:hover,
[data-bs-theme="dark"] .gtd-mobile-submenu-trigger:hover {
    background: var(--bs-gray-800);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-mobile-submenu {
    background: var(--bs-gray-950);
}

[data-bs-theme="dark"] .gtd-mobile-submenu a {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-mobile-submenu a:hover {
    background: var(--bs-gray-800);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-notification {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-notification-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-notification-message {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-notification-action {
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-notification-action:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-notification-dismiss {
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-notification-dismiss:hover {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-tooltip {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-tooltip-top::before {
    border-top-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-tooltip-bottom::before {
    border-bottom-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-tooltip-left::before {
    border-left-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-tooltip-right::before {
    border-right-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] [data-tab-nav] {
    border-bottom-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] [data-tab-nav] [data-tab] {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] [data-tab-nav] [data-tab]:hover {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] [data-tab-nav].gtd-tabs-pills [data-tab] {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] [data-tab-nav].gtd-tabs-pills [data-tab]:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] [data-tab-nav].gtd-tabs-boxed {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] [data-tab-nav].gtd-tabs-boxed [data-tab].active {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] [data-accordion] {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-accordion-item {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-accordion-header {
    color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-accordion-header:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-accordion-item.open .gtd-accordion-header {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-accordion-body {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] [data-accordion].gtd-accordion-spaced .gtd-accordion-item {
    border-color: var(--bs-gray-700);
}

/* ==========================================================================
   Responsive - Batch 13 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-breadcrumbs {
        padding: 0.5rem 0;
    }

    .gtd-breadcrumb-link,
    .gtd-breadcrumb-current {
        font-size: 0.8125rem;
    }

    .gtd-breadcrumb-separator {
        padding: 0 0.375rem;
    }

    .gtd-notifications {
        top: auto;
        bottom: 1rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
        width: auto;
    }

    .gtd-notification {
        transform: translateY(100%);
    }

    .gtd-notification.show {
        transform: translateY(0);
    }

    .gtd-notification.hide {
        transform: translateY(100%);
    }

    [data-tab-nav] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    [data-tab-nav]::-webkit-scrollbar {
        display: none;
    }

    [data-tab-nav] [data-tab] {
        padding: 0.75rem 1rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .gtd-accordion-header {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .gtd-accordion-body {
        padding: 0.875rem 1rem;
    }
}

/* ==========================================================================
   Batch 14: Core UI Components
   ========================================================================== */

/* Dropdown */
[data-gtd-dropdown] {
    position: relative;
    display: inline-block;
}

[data-dropdown-trigger] {
    cursor: pointer;
}

[data-dropdown-menu] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 180px;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
}

[data-gtd-dropdown].open [data-dropdown-menu] {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

[data-gtd-dropdown].dropup [data-dropdown-menu] {
    top: auto;
    bottom: 100%;
    transform: translateY(8px);
}

[data-gtd-dropdown].dropup.open [data-dropdown-menu] {
    transform: translateY(-4px);
}

[data-dropdown-item] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--bs-gray-700);
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.1s ease;
}

[data-dropdown-item]:hover,
[data-dropdown-item]:focus {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
    outline: none;
}

[data-dropdown-item][disabled] {
    color: var(--bs-gray-400);
    cursor: not-allowed;
}

[data-dropdown-item][disabled]:hover {
    background: none;
}

[data-dropdown-item] i {
    width: 16px;
    text-align: center;
    color: var(--bs-gray-500);
}

.gtd-dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-dropdown-header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Modal */
.gtd-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gtd-modal.show {
    display: flex;
}

.gtd-modal.visible {
    opacity: 1;
}

.gtd-modal-dialog {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 2rem);
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.2s ease;
}

.gtd-modal.visible .gtd-modal-dialog {
    transform: scale(1) translateY(0);
}

.gtd-modal-sm { max-width: 360px; }
.gtd-modal-md { max-width: 500px; }
.gtd-modal-lg { max-width: 800px; }
.gtd-modal-xl { max-width: 1140px; }
.gtd-modal-fullscreen { max-width: none; margin: 0; height: 100%; }

.gtd-modal-content {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border-radius: 0.75rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.gtd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.gtd-modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--bs-gray-500);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.gtd-modal-close-btn:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

.gtd-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}

.gtd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

body.gtd-modal-open {
    overflow: hidden;
}

/* Progress Bar */
.gtd-progress {
    width: 100%;
    height: 8px;
    background: var(--bs-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.gtd-progress-sm { height: 4px; }
.gtd-progress-md { height: 8px; }
.gtd-progress-lg { height: 12px; }
.gtd-progress-xl { height: 20px; }

.gtd-progress-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
}

.gtd-progress-primary { background: var(--bs-primary); }
.gtd-progress-success { background: var(--bs-success); }
.gtd-progress-warning { background: var(--bs-warning); }
.gtd-progress-danger { background: var(--bs-danger); }
.gtd-progress-info { background: var(--bs-info); }

.gtd-progress-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.gtd-progress-xl .gtd-progress-label {
    font-size: 0.75rem;
}

.gtd-progress-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.gtd-progress-animated {
    animation: gtd-progress-stripes 1s linear infinite;
}

@keyframes gtd-progress-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

/* Badge */
.gtd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 0.25rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.gtd-badge-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
}

.gtd-badge-lg {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.gtd-badge-pill {
    border-radius: 2rem;
}

.gtd-badge i {
    font-size: 0.625em;
}

.gtd-badge-primary { background: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); }
.gtd-badge-secondary { background: var(--bs-gray-200); color: var(--bs-gray-700); }
.gtd-badge-success { background: rgba(var(--bs-success-rgb), 0.1); color: var(--bs-success); }
.gtd-badge-danger { background: rgba(var(--bs-danger-rgb), 0.1); color: var(--bs-danger); }
.gtd-badge-warning { background: rgba(var(--bs-warning-rgb), 0.15); color: #856404; }
.gtd-badge-info { background: rgba(var(--bs-info-rgb), 0.1); color: var(--bs-info); }

.gtd-badge-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 0.125rem;
    margin-right: -0.25rem;
    background: none;
    border: none;
    color: inherit;
    font-size: 0.625rem;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.gtd-badge-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.gtd-badge.removing {
    transform: scale(0.8);
    opacity: 0;
}

/* Avatar */
.gtd-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gtd-avatar-xs { width: 24px; height: 24px; font-size: 0.625rem; }
.gtd-avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.gtd-avatar-md { width: 40px; height: 40px; font-size: 0.875rem; }
.gtd-avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.gtd-avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }
.gtd-avatar-xxl { width: 120px; height: 120px; font-size: 2rem; }

.gtd-avatar-circle { border-radius: 50%; }
.gtd-avatar-square { border-radius: 0.5rem; }

.gtd-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.gtd-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    border-radius: inherit;
    text-transform: uppercase;
}

.gtd-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
}

.gtd-avatar-status-online { background: var(--bs-success); }
.gtd-avatar-status-offline { background: var(--bs-gray-400); }
.gtd-avatar-status-busy { background: var(--bs-danger); }
.gtd-avatar-status-away { background: var(--bs-warning); }

.gtd-avatar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9px;
    border: 2px solid var(--bs-body-bg);
}

.gtd-avatar-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.gtd-avatar-group .gtd-avatar {
    margin-left: -12px;
    border: 2px solid var(--bs-body-bg);
}

.gtd-avatar-group .gtd-avatar:last-child {
    margin-left: 0;
}

.gtd-avatar-overflow .gtd-avatar-initials {
    background: var(--bs-gray-300);
    color: var(--bs-gray-700);
}

/* Skeleton */
.gtd-skeleton {
    background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-100) 50%, var(--bs-gray-200) 75%);
    background-size: 200% 100%;
    animation: gtd-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
}

@keyframes gtd-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gtd-skeleton-text {
    height: 14px;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-title {
    height: 20px;
    width: 70%;
    margin-bottom: 0.75rem;
}

.gtd-skeleton-short {
    width: 40%;
}

.gtd-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gtd-skeleton-avatar-lg {
    width: 80px;
    height: 80px;
}

.gtd-skeleton-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 0.375rem;
}

.gtd-skeleton-badge {
    width: 60px;
    height: 24px;
    border-radius: 0.25rem;
}

.gtd-skeleton-price {
    width: 100px;
    height: 28px;
    margin-top: 0.75rem;
}

.gtd-skeleton-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-skeleton-card .gtd-skeleton-body {
    padding: 1rem;
}

.gtd-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-skeleton-list-item .gtd-skeleton-content {
    flex: 1;
}

.gtd-skeleton-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
}

.gtd-skeleton-vehicle {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-skeleton-vehicle .gtd-skeleton-body {
    padding: 1rem;
}

.gtd-skeleton-vehicle .gtd-skeleton-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-skeleton-vehicle-img {
    aspect-ratio: 16/10;
}

.gtd-skeleton-fade-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gtd-skeleton-fade-in {
    animation: gtd-skeleton-fade-in 0.3s ease;
}

@keyframes gtd-skeleton-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Dark Mode - Batch 14 Components
   ========================================================================== */

[data-bs-theme="dark"] [data-dropdown-menu] {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] [data-dropdown-item] {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] [data-dropdown-item]:hover,
[data-bs-theme="dark"] [data-dropdown-item]:focus {
    background: var(--bs-gray-700);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-dropdown-divider {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-modal-content {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-modal-header {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-modal-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-modal-close-btn:hover {
    background: var(--bs-gray-800);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-modal-footer {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-progress {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-badge-secondary {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-badge-warning {
    background: rgba(var(--bs-warning-rgb), 0.2);
    color: var(--bs-warning);
}

[data-bs-theme="dark"] .gtd-avatar-status {
    border-color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-avatar-badge {
    border-color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-avatar-group .gtd-avatar {
    border-color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-avatar-overflow .gtd-avatar-initials {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-skeleton {
    background: linear-gradient(90deg, var(--bs-gray-800) 25%, var(--bs-gray-700) 50%, var(--bs-gray-800) 75%);
    background-size: 200% 100%;
}

[data-bs-theme="dark"] .gtd-skeleton-card {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-skeleton-list-item {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-skeleton-vehicle {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

/* ==========================================================================
   Responsive - Batch 14 Components
   ========================================================================== */

@media (max-width: 768px) {
    [data-dropdown-menu] {
        min-width: 160px;
    }

    .gtd-modal {
        padding: 0.5rem;
    }

    .gtd-modal-dialog {
        max-height: calc(100vh - 1rem);
    }

    .gtd-modal-lg,
    .gtd-modal-xl {
        max-width: calc(100vw - 1rem);
    }

    .gtd-modal-header {
        padding: 0.875rem 1rem;
    }

    .gtd-modal-body {
        padding: 1rem;
    }

    .gtd-modal-footer {
        padding: 0.875rem 1rem;
        flex-wrap: wrap;
    }

    .gtd-avatar-group .gtd-avatar {
        margin-left: -8px;
    }
}

/* ==========================================================================
   Batch 15: Interactive Components
   ========================================================================== */

/* Chip Input */
[data-chip-input] {
    cursor: text;
}

.gtd-chip-input-wrapper {
    width: 100%;
}

.gtd-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    min-height: 42px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-chip-list:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-200);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-700);
    animation: gtd-chip-in 0.15s ease;
}

@keyframes gtd-chip-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.gtd-chip.removing {
    animation: gtd-chip-out 0.15s ease forwards;
}

@keyframes gtd-chip-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.8); opacity: 0; }
}

.gtd-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    background: none;
    border: none;
    color: var(--bs-gray-500);
    font-size: 0.625rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.gtd-chip-remove:hover {
    background: var(--bs-gray-400);
    color: #fff;
}

.gtd-chip-input-field {
    flex: 1;
    min-width: 100px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-chip-input-field::placeholder {
    color: var(--bs-gray-400);
}

/* Rating */
.gtd-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.gtd-rating-sm .gtd-star { font-size: 0.875rem; }
.gtd-rating-md .gtd-star { font-size: 1.125rem; }
.gtd-rating-lg .gtd-star { font-size: 1.5rem; }

.gtd-star {
    padding: 0.125rem;
    background: none;
    border: none;
    color: var(--bs-gray-300);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-star:hover {
    transform: scale(1.1);
}

.gtd-star.active {
    color: #ffc107;
}

.gtd-rating-readonly .gtd-star {
    cursor: default;
}

.gtd-rating-readonly .gtd-star:hover {
    transform: none;
}

.gtd-rating-value {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-600);
}

/* Timeline */
.gtd-timeline {
    position: relative;
    padding-left: 32px;
}

.gtd-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 11px;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}

.gtd-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.gtd-timeline-item:last-child {
    padding-bottom: 0;
}

.gtd-timeline-marker {
    position: absolute;
    left: -32px;
    top: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    z-index: 1;
}

.gtd-timeline-dot {
    width: 8px;
    height: 8px;
    background: var(--bs-gray-400);
    border-radius: 50%;
}

.gtd-timeline-item.active .gtd-timeline-marker {
    border-color: var(--bs-primary);
}

.gtd-timeline-item.active .gtd-timeline-dot {
    background: var(--bs-primary);
}

.gtd-timeline-item.completed .gtd-timeline-marker {
    border-color: var(--bs-success);
    background: var(--bs-success);
    color: #fff;
}

.gtd-timeline-marker i {
    font-size: 0.625rem;
}

.gtd-timeline-content {
    padding-top: 2px;
}

.gtd-timeline-date {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.25rem;
}

.gtd-timeline-title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-gray-800);
}

.gtd-timeline-description {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    line-height: 1.5;
}

/* Timeline Alternate Alignment */
.gtd-timeline-alternate {
    padding-left: 0;
}

.gtd-timeline-alternate::before {
    left: 50%;
    transform: translateX(-50%);
}

.gtd-timeline-alternate .gtd-timeline-item {
    width: 50%;
    padding-right: 32px;
    padding-left: 0;
}

.gtd-timeline-alternate .gtd-timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 32px;
    padding-right: 0;
}

.gtd-timeline-alternate .gtd-timeline-marker {
    left: auto;
    right: -12px;
}

.gtd-timeline-alternate .gtd-timeline-item:nth-child(even) .gtd-timeline-marker {
    left: -12px;
    right: auto;
}

/* Carousel */
[data-carousel] {
    position: relative;
    overflow: hidden;
}

.gtd-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.gtd-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.gtd-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.gtd-carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    pointer-events: none;
}

.gtd-carousel-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: var(--bs-gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gtd-carousel-arrow:hover {
    background: #fff;
    color: var(--bs-gray-900);
    transform: scale(1.05);
}

.gtd-carousel-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.gtd-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.gtd-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--bs-gray-300);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-carousel-dot:hover {
    background: var(--bs-gray-400);
}

.gtd-carousel-dot.active {
    background: var(--bs-primary);
    transform: scale(1.2);
}

/* Countdown */
.gtd-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.gtd-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    min-width: 64px;
}

.gtd-countdown-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-gray-900);
    font-variant-numeric: tabular-nums;
}

.gtd-countdown-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}

.gtd-countdown-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-gray-400);
    padding: 0 0.25rem;
}

.gtd-countdown-ended .gtd-countdown-value {
    color: var(--bs-danger);
}

/* Countdown Variants */
.gtd-countdown-lg .gtd-countdown-unit {
    padding: 1rem 1.5rem;
    min-width: 80px;
}

.gtd-countdown-lg .gtd-countdown-value {
    font-size: 2.5rem;
}

.gtd-countdown-lg .gtd-countdown-label {
    font-size: 0.75rem;
}

.gtd-countdown-sm .gtd-countdown-unit {
    padding: 0.5rem 0.75rem;
    min-width: 48px;
}

.gtd-countdown-sm .gtd-countdown-value {
    font-size: 1.25rem;
}

.gtd-countdown-sm .gtd-countdown-label {
    font-size: 0.5625rem;
}

/* ==========================================================================
   Dark Mode - Batch 15 Components
   ========================================================================== */

[data-bs-theme="dark"] .gtd-chip-list {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-chip {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-chip-remove:hover {
    background: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-chip-input-field {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-star {
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-timeline::before {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-timeline-marker {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-timeline-dot {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-timeline-title {
    color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-timeline-description {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-carousel-arrow {
    background: rgba(0, 0, 0, 0.8);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-carousel-arrow:hover {
    background: var(--bs-gray-900);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-carousel-dot {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-carousel-dot:hover {
    background: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-countdown-unit {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-countdown-value {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-countdown-label {
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-countdown-separator {
    color: var(--bs-gray-600);
}

/* ==========================================================================
   Responsive - Batch 15 Components
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-chip-list {
        padding: 0.375rem 0.5rem;
    }

    .gtd-rating-lg .gtd-star {
        font-size: 1.25rem;
    }

    .gtd-timeline-alternate {
        padding-left: 32px;
    }

    .gtd-timeline-alternate::before {
        left: 11px;
        transform: none;
    }

    .gtd-timeline-alternate .gtd-timeline-item,
    .gtd-timeline-alternate .gtd-timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .gtd-timeline-alternate .gtd-timeline-marker,
    .gtd-timeline-alternate .gtd-timeline-item:nth-child(even) .gtd-timeline-marker {
        left: -32px;
        right: auto;
    }

    .gtd-carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .gtd-countdown-unit {
        padding: 0.5rem 0.625rem;
        min-width: 48px;
    }

    .gtd-countdown-value {
        font-size: 1.25rem;
    }

    .gtd-countdown-label {
        font-size: 0.5625rem;
    }

    .gtd-countdown-separator {
        font-size: 1rem;
        padding: 0 0.125rem;
    }
}

/* ==========================================================================
   Color Picker Component
   ========================================================================== */

.gtd-color-picker {
    position: relative;
    display: inline-block;
}

.gtd-color-picker-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-color-picker-trigger:hover {
    border-color: var(--bs-primary);
}

.gtd-color-picker-trigger:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-color-picker-preview {
    width: 24px;
    height: 24px;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.gtd-color-picker-value {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    color: var(--bs-body-color);
    text-transform: uppercase;
}

.gtd-color-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 240px;
    margin-top: 0.25rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
}

.gtd-color-picker.open .gtd-color-picker-dropdown {
    display: block;
}

.gtd-color-picker-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.gtd-color-picker-swatch {
    width: 24px;
    height: 24px;
    border-radius: 0.25rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.gtd-color-picker-swatch:hover {
    transform: scale(1.15);
}

.gtd-color-picker-swatch.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-primary);
}

.gtd-color-picker-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-color-picker-custom input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.gtd-color-picker-custom input[type="text"] {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-color-picker-preview {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .gtd-color-picker-swatch.active {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-primary);
}

/* ==========================================================================
   Date Range Picker Component
   ========================================================================== */

.gtd-date-range {
    position: relative;
    display: inline-block;
}

.gtd-date-range-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 220px;
}

.gtd-date-range-trigger:hover {
    border-color: var(--bs-primary);
}

.gtd-date-range-trigger:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-date-range-trigger i {
    color: var(--bs-gray-500);
}

.gtd-date-range-text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-date-range-text.placeholder {
    color: var(--bs-gray-500);
}

.gtd-date-range-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 320px;
    margin-top: 0.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
}

.gtd-date-range.open .gtd-date-range-dropdown {
    display: block;
}

.gtd-date-range-presets {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-date-range-preset {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-date-range-preset:hover {
    background: var(--bs-gray-100);
}

.gtd-date-range-preset.active {
    background: var(--bs-primary);
    color: #fff;
}

.gtd-date-range-custom {
    padding: 1rem;
}

.gtd-date-range-inputs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-date-range-input {
    flex: 1;
}

.gtd-date-range-input label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-600);
}

.gtd-date-range-input input {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}

.gtd-date-range-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-date-range-preset:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Range Slider Component
   ========================================================================== */

.gtd-range-slider {
    padding: 0.5rem 0;
}

.gtd-range-slider-track {
    position: relative;
    height: 6px;
    background: var(--bs-gray-200);
    border-radius: 3px;
    margin: 0.75rem 0;
}

.gtd-range-slider-fill {
    position: absolute;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 3px;
}

.gtd-range-slider-handle {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    background: var(--bs-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    z-index: 2;
}

.gtd-range-slider-handle:hover {
    transform: scale(1.1);
}

.gtd-range-slider-handle:active,
.gtd-range-slider-handle.dragging {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.gtd-range-slider-handle-min {
    z-index: 3;
}

.gtd-range-slider-values {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.gtd-range-slider-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.gtd-range-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.gtd-range-slider-label {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-range-slider-inputs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.gtd-range-slider-input {
    flex: 1;
}

.gtd-range-slider-input input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}

.gtd-range-slider-separator {
    color: var(--bs-gray-500);
    font-weight: 500;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-range-slider-track {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-range-slider-handle {
    border-color: var(--bs-gray-900);
}

/* ==========================================================================
   Copy Button Component
   ========================================================================== */

.gtd-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-copy-btn:hover {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

.gtd-copy-btn:active {
    transform: scale(0.98);
}

.gtd-copy-btn.copied {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: var(--bs-success);
}

.gtd-copy-btn i {
    font-size: 0.875em;
}

.gtd-copy-btn-icon {
    padding: 0.375rem;
    min-width: auto;
}

.gtd-copy-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.gtd-copy-btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* Copy target styling */
.gtd-copy-target {
    position: relative;
}

.gtd-copy-target .gtd-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-copy-target:hover .gtd-copy-btn {
    opacity: 1;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-copy-btn {
    color: var(--bs-gray-300);
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-copy-btn:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Share Links Component
   ========================================================================== */

.gtd-share-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gtd-share-link:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gtd-share-link:active {
    transform: translateY(0);
}

.gtd-share-link i {
    font-size: 1.125rem;
}

/* Platform colors */
.gtd-share-link-facebook {
    background: #1877f2;
}

.gtd-share-link-twitter {
    background: #000000;
}

.gtd-share-link-linkedin {
    background: #0a66c2;
}

.gtd-share-link-whatsapp {
    background: #25d366;
}

.gtd-share-link-email {
    background: var(--bs-gray-600);
}

.gtd-share-link-copy {
    background: var(--bs-primary);
}

/* Rectangular variant */
.gtd-share-links-rect .gtd-share-link {
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    gap: 0.5rem;
}

.gtd-share-links-rect .gtd-share-link span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Small variant */
.gtd-share-links-sm .gtd-share-link {
    width: 32px;
    height: 32px;
}

.gtd-share-links-sm .gtd-share-link i {
    font-size: 0.875rem;
}

/* Large variant */
.gtd-share-links-lg .gtd-share-link {
    width: 48px;
    height: 48px;
}

.gtd-share-links-lg .gtd-share-link i {
    font-size: 1.25rem;
}

/* Outline variant */
.gtd-share-links-outline .gtd-share-link {
    background: transparent;
    border: 2px solid currentColor;
}

.gtd-share-links-outline .gtd-share-link-facebook {
    color: #1877f2;
}

.gtd-share-links-outline .gtd-share-link-twitter {
    color: #000000;
}

.gtd-share-links-outline .gtd-share-link-linkedin {
    color: #0a66c2;
}

.gtd-share-links-outline .gtd-share-link-whatsapp {
    color: #25d366;
}

.gtd-share-links-outline .gtd-share-link-email {
    color: var(--bs-gray-600);
}

.gtd-share-links-outline .gtd-share-link-copy {
    color: var(--bs-primary);
}

.gtd-share-links-outline .gtd-share-link:hover {
    background: currentColor;
    color: #fff;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-share-link-twitter {
    background: #ffffff;
    color: #000000;
}

[data-bs-theme="dark"] .gtd-share-links-outline .gtd-share-link-twitter {
    color: #ffffff;
}

/* ==========================================================================
   Print View Component
   ========================================================================== */

.gtd-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-print-only {
    display: none;
}

@media print {
    .gtd-no-print {
        display: none !important;
    }

    .gtd-print-only {
        display: block;
    }

    .gtd-print-break-before {
        break-before: page;
    }

    .gtd-print-break-after {
        break-after: page;
    }

    .gtd-print-avoid-break {
        break-inside: avoid;
    }

    /* Print-friendly styling */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: "";
    }

    /* Hide interactive elements */
    .btn:not(.gtd-print-btn),
    .dropdown,
    .modal,
    .tooltip,
    .popover,
    nav,
    .sidebar,
    .gtd-mobile-menu,
    .gtd-filter-sidebar {
        display: none !important;
    }

    /* Ensure tables print properly */
    table {
        border-collapse: collapse !important;
    }

    th, td {
        border: 1px solid #ddd !important;
        padding: 0.5rem !important;
    }

    /* Print header/footer */
    .gtd-print-header {
        display: block;
        text-align: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #000;
    }

    .gtd-print-footer {
        display: block;
        text-align: center;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #ddd;
        font-size: 0.9em;
        color: #666;
    }

    /* Vehicle listing print styles */
    .gtd-vehicle-card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: 1rem;
    }

    .gtd-vehicle-card img {
        max-height: 200px;
        object-fit: contain;
    }
}

/* Print preview modal */
.gtd-print-preview {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

.gtd-print-preview.show {
    display: flex;
}

.gtd-print-preview-content {
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gtd-print-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-gray-100);
}

.gtd-print-preview-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.gtd-print-preview-actions {
    display: flex;
    gap: 0.5rem;
}

.gtd-print-preview-body {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background: var(--bs-gray-200);
}

.gtd-print-preview-page {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    padding: 1in;
    max-width: 8.5in;
}

/* ==========================================================================
   Responsive Adjustments - Batch 16
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-color-picker-dropdown {
        min-width: 200px;
    }

    .gtd-color-picker-swatches {
        grid-template-columns: repeat(6, 1fr);
    }

    .gtd-date-range-dropdown {
        min-width: 280px;
        left: auto;
        right: 0;
    }

    .gtd-date-range-inputs {
        flex-direction: column;
    }

    .gtd-share-links {
        justify-content: center;
    }

    .gtd-print-preview-content {
        width: 95%;
        max-height: 95vh;
    }

    .gtd-print-preview-page {
        padding: 0.5in;
    }
}

/* ==========================================================================
   File Upload Component
   ========================================================================== */

.gtd-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-gray-50);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-upload-dropzone:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-upload-dropzone.dragover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    transform: scale(1.01);
}

.gtd-upload-dropzone .gtd-upload-icon {
    font-size: 2.5rem;
    color: var(--bs-gray-400);
    margin-bottom: 1rem;
}

.gtd-upload-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.gtd-upload-hint {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.gtd-upload-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.gtd-upload-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.gtd-upload-item .gtd-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    font-size: 2rem;
    color: var(--bs-gray-400);
    background: var(--bs-gray-100);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.gtd-upload-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gtd-upload-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-upload-size {
    font-size: 0.6875rem;
    color: var(--bs-gray-500);
}

.gtd-upload-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-danger);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.625rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-upload-item:hover .gtd-upload-remove {
    opacity: 1;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-upload-dropzone {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-upload-dropzone:hover,
[data-bs-theme="dark"] .gtd-upload-dropzone.dragover {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

/* ==========================================================================
   Image Gallery / Lightbox Component
   ========================================================================== */

.gtd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.gtd-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.gtd-lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 80vh;
    z-index: 1;
}

.gtd-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-lightbox-prev,
.gtd-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    z-index: 10;
}

.gtd-lightbox-prev {
    left: -60px;
}

.gtd-lightbox-next {
    right: -60px;
}

.gtd-lightbox-prev:hover,
.gtd-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-lightbox-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.25rem;
    transition: opacity 0.3s ease;
}

.gtd-lightbox-loader {
    position: absolute;
    font-size: 2rem;
    color: #fff;
}

.gtd-lightbox-caption {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.gtd-lightbox-counter {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.gtd-lightbox-thumbs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.8);
    overflow-x: auto;
}

.gtd-lightbox-thumb {
    width: 60px;
    height: 45px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s ease;
    overflow: hidden;
    background: none;
}

.gtd-lightbox-thumb:hover {
    opacity: 0.8;
}

.gtd-lightbox-thumb.active {
    border-color: var(--bs-primary);
    opacity: 1;
}

.gtd-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Video Player Component
   ========================================================================== */

.gtd-video-player {
    position: relative;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-video-player video {
    display: block;
    width: 100%;
}

.gtd-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding-top: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-video-player:hover .gtd-video-controls,
.gtd-video-player.show-controls .gtd-video-controls {
    opacity: 1;
}

.gtd-video-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    margin: 0 1rem;
}

.gtd-video-progress-bar {
    height: 100%;
    background: var(--bs-primary);
    width: 0;
    transition: width 0.1s linear;
}

.gtd-video-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.gtd-video-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.gtd-video-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gtd-video-volume {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.gtd-video-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.gtd-video-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}

.gtd-video-spacer {
    flex: 1;
}

/* ==========================================================================
   Compare Widget Component
   ========================================================================== */

.gtd-compare-widget {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 300px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    z-index: 1050;
}

.gtd-compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-compare-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.gtd-compare-clear {
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: var(--bs-gray-500);
    cursor: pointer;
    transition: color 0.15s ease;
}

.gtd-compare-clear:hover {
    color: var(--bs-danger);
}

.gtd-compare-items {
    padding: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

.gtd-compare-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: 0.25rem;
}

.gtd-compare-item:last-child {
    margin-bottom: 0;
}

.gtd-compare-item img {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.gtd-compare-item-title {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-compare-item-remove {
    padding: 0.125rem;
    background: transparent;
    border: none;
    color: var(--bs-gray-500);
    cursor: pointer;
    line-height: 1;
}

.gtd-compare-item-remove:hover {
    color: var(--bs-danger);
}

.gtd-compare-btn {
    display: block;
    margin: 0 0.75rem 0.75rem;
}

/* Compare add button */
[data-compare-add] {
    transition: all 0.15s ease;
}

[data-compare-add].active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-compare-item {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Wishlist Button Component
   ========================================================================== */

[data-wishlist-toggle] {
    transition: all 0.2s ease;
}

[data-wishlist-toggle] i {
    transition: transform 0.2s ease;
}

[data-wishlist-toggle].active i {
    color: var(--bs-danger);
    transform: scale(1.2);
}

[data-wishlist-toggle]:not(.active):hover i {
    transform: scale(1.1);
}

/* Wishlist count badge */
[data-wishlist-count] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    background: var(--bs-danger);
    border-radius: 9px;
}

/* ==========================================================================
   Recently Viewed Component
   ========================================================================== */

.gtd-recently-viewed {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-recently-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.gtd-recently-item:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.gtd-recently-image {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.gtd-recently-content {
    flex: 1;
    min-width: 0;
}

.gtd-recently-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-recently-subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-recently-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary);
}

/* Compact variant */
.gtd-recently-item-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.gtd-recently-item-compact:hover {
    background: var(--bs-gray-100);
}

.gtd-recently-item-compact img {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.gtd-recently-info {
    flex: 1;
    min-width: 0;
}

.gtd-recently-info .gtd-recently-title {
    font-size: 0.8125rem;
}

.gtd-recently-info .gtd-recently-subtitle {
    font-size: 0.6875rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-recently-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .gtd-recently-item-compact:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Responsive Adjustments - Batch 17
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-upload-preview {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .gtd-upload-thumb {
        height: 60px;
    }

    .gtd-lightbox-prev,
    .gtd-lightbox-next {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .gtd-lightbox-prev {
        left: 0.5rem;
    }

    .gtd-lightbox-next {
        right: 0.5rem;
    }

    .gtd-lightbox-thumbs {
        padding: 0.5rem;
        gap: 0.25rem;
    }

    .gtd-lightbox-thumb {
        width: 48px;
        height: 36px;
    }

    .gtd-compare-widget {
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    .gtd-video-volume {
        display: none;
    }
}

/* ==========================================================================
   Search Suggestions Component
   ========================================================================== */

.gtd-search-suggestions-wrapper {
    position: relative;
}

.gtd-search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
}

.gtd-search-suggestions-dropdown.show {
    display: block;
}

.gtd-suggestion-item {
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-suggestion-item:hover,
.gtd-suggestion-item.highlighted {
    background: var(--bs-gray-100);
}

.gtd-suggestion-item mark {
    background: rgba(var(--bs-primary-rgb), 0.2);
    color: inherit;
    padding: 0;
}

.gtd-suggestion-empty {
    padding: 1rem;
    text-align: center;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

/* Rich suggestions */
.gtd-suggestion-rich {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-suggestion-image {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.gtd-suggestion-content {
    flex: 1;
    min-width: 0;
}

.gtd-suggestion-title {
    display: block;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-suggestion-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.125rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-suggestion-item:hover,
[data-bs-theme="dark"] .gtd-suggestion-item.highlighted {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Infinite Scroll Component
   ========================================================================== */

.gtd-infinite-sentinel {
    height: 1px;
}

.gtd-infinite-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

.gtd-infinite-loader i {
    font-size: 1rem;
}

/* ==========================================================================
   Lazy Load Component
   ========================================================================== */

[data-lazy-src] {
    background: var(--bs-gray-200);
}

.gtd-lazy-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-lazy-loaded {
    opacity: 1;
    animation: gtd-lazy-fade-in 0.3s ease;
}

@keyframes gtd-lazy-fade-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gtd-lazy-error {
    background: var(--bs-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-lazy-error::after {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--bs-gray-500);
}

/* Dark mode */
[data-bs-theme="dark"] [data-lazy-src] {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-lazy-error {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Quick View Modal Component
   ========================================================================== */

.gtd-quick-view-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.gtd-quick-view-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-quick-view-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.gtd-quick-view-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    overflow: hidden;
    z-index: 1;
}

.gtd-quick-view-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100);
    border: none;
    border-radius: 50%;
    color: var(--bs-gray-600);
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s ease;
}

.gtd-quick-view-close:hover {
    background: var(--bs-gray-200);
    color: var(--bs-gray-800);
}

.gtd-quick-view-body {
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
}

.gtd-quick-view-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    font-size: 2rem;
    color: var(--bs-gray-400);
}

.gtd-quick-view-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--bs-gray-500);
}

.gtd-quick-view-error i {
    font-size: 3rem;
    color: var(--bs-warning);
    margin-bottom: 1rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-quick-view-close {
    background: var(--bs-gray-800);
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-quick-view-close:hover {
    background: var(--bs-gray-700);
    color: var(--bs-gray-200);
}

/* ==========================================================================
   Price Alert Component
   ========================================================================== */

.gtd-price-alert {
    position: relative;
}

.gtd-price-alert-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--bs-success-rgb), 0.1);
    border: 1px solid var(--bs-success);
    border-radius: 0.375rem;
}

.gtd-price-alert-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.gtd-price-alert-form {
    display: none;
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
}

.gtd-price-alert-form.show {
    display: block;
}

.gtd-price-alert-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gtd-price-alert-inputs .form-group {
    margin-bottom: 0;
}

.gtd-price-alert-inputs label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-600);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-price-alert-form {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Saved Search Component
   ========================================================================== */

.gtd-saved-searches {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-saved-search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
}

.gtd-saved-search-item:hover {
    background: var(--bs-gray-200);
}

.gtd-saved-search-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.gtd-saved-search-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-saved-search-date {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    flex-shrink: 0;
}

.gtd-saved-search-delete {
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: var(--bs-gray-500);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
}

.gtd-saved-search-delete:hover {
    color: var(--bs-danger);
}

/* Save search button */
[data-save-search] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-saved-search-item {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-saved-search-item:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Responsive Adjustments - Batch 18
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-search-suggestions-dropdown {
        max-height: 250px;
    }

    .gtd-quick-view-content {
        width: 95%;
        max-height: 95vh;
    }

    .gtd-quick-view-body {
        padding: 1rem;
    }

    .gtd-price-alert-inputs {
        grid-template-columns: 1fr;
    }

    .gtd-price-alert-active {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */

.gtd-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gtd-cookie-banner.show {
    transform: translateY(0);
}

.gtd-cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.gtd-cookie-text {
    flex: 1;
}

.gtd-cookie-text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-cookie-policy-link {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-primary);
}

.gtd-cookie-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gtd-cookie-preferences {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-cookie-preference {
    margin-bottom: 0.75rem;
}

.gtd-cookie-preference label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.gtd-cookie-preference .form-check-label {
    font-weight: 500;
}

.gtd-cookie-preference small {
    color: var(--bs-gray-500);
    font-size: 0.75rem;
    margin-left: 1.5rem;
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.gtd-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1040;
}

.gtd-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-back-to-top:hover {
    background: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.gtd-back-to-top:active {
    transform: translateY(-1px);
}

/* ==========================================================================
   Scroll Spy Navigation
   ========================================================================== */

[data-scroll-spy] a {
    position: relative;
    color: var(--bs-gray-600);
    transition: color 0.15s ease;
}

[data-scroll-spy] a:hover {
    color: var(--bs-primary);
}

[data-scroll-spy] a.active {
    color: var(--bs-primary);
    font-weight: 500;
}

/* Sidebar nav style */
.gtd-scroll-spy-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gtd-scroll-spy-nav a {
    padding: 0.5rem 1rem;
    border-left: 2px solid transparent;
    text-decoration: none;
}

.gtd-scroll-spy-nav a.active {
    border-left-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

/* ==========================================================================
   Sticky Header
   ========================================================================== */

.gtd-sticky-placeholder {
    visibility: hidden;
}

[data-sticky-header].stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    animation: gtd-sticky-slide-down 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@keyframes gtd-sticky-slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

[data-sticky-header].stuck.hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Read More Component
   ========================================================================== */

[data-read-more] {
    position: relative;
}

.gtd-read-more-content,
[data-read-more] > *:not(.gtd-read-more-toggle) {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gtd-read-more-collapsed {
    position: relative;
}

.gtd-read-more-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--bs-body-bg));
    pointer-events: none;
}

.gtd-read-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gtd-read-more-toggle:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.gtd-read-more-toggle i {
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

/* ==========================================================================
   Social Feed Component
   ========================================================================== */

.gtd-social-feed {
    display: grid;
    gap: 0.5rem;
}

.gtd-social-feed-grid {
    grid-template-columns: repeat(3, 1fr);
}

.gtd-social-feed-row {
    grid-template-columns: repeat(6, 1fr);
}

.gtd-social-post {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.375rem;
    background: var(--bs-gray-200);
}

.gtd-social-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gtd-social-post:hover .gtd-social-post-image {
    transform: scale(1.05);
}

.gtd-social-post-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-social-post:hover .gtd-social-post-overlay {
    opacity: 1;
}

.gtd-social-post-overlay i {
    font-size: 1.5rem;
}

.gtd-social-post-likes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.gtd-social-post-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-200);
    color: var(--bs-gray-400);
    font-size: 2rem;
}

.gtd-social-feed-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-size: 1.5rem;
    color: var(--bs-gray-400);
}

.gtd-social-feed-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--bs-gray-500);
}

.gtd-social-feed-error i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-social-post-placeholder {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-read-more-collapsed::after {
    background: linear-gradient(transparent, var(--bs-body-bg));
}

/* ==========================================================================
   Responsive Adjustments - Batch 19
   ========================================================================== */

@media (max-width: 768px) {
    .gtd-cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .gtd-cookie-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gtd-back-to-top {
        width: 40px;
        height: 40px;
        bottom: 1.5rem;
        right: 1.5rem;
        font-size: 1rem;
    }

    .gtd-social-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gtd-social-feed-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .gtd-scroll-spy-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 0;
    }

    .gtd-scroll-spy-nav a {
        border-left: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .gtd-scroll-spy-nav a.active {
        border-bottom-color: var(--bs-primary);
    }
}

/* =================================================================
   CLIPBOARD - Copy to clipboard utilities
   ================================================================= */
.gtd-clipboard-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-clipboard-btn:hover {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

.gtd-clipboard-btn:active {
    transform: scale(0.98);
}

.gtd-clipboard-btn i {
    font-size: 0.875rem;
}

.gtd-clipboard-btn.success {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: var(--bs-success);
}

.gtd-clipboard-btn.success i::before {
    content: "\f00c";
}

.gtd-clipboard-btn.error {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.1);
    border-color: var(--bs-danger);
}

.gtd-clipboard-feedback {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #fff;
    background: var(--bs-gray-800);
    border-radius: 0.25rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gtd-clipboard-feedback.show {
    opacity: 1;
    visibility: visible;
}

.gtd-clipboard-feedback::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--bs-gray-800);
}

.gtd-clipboard-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
}

.gtd-clipboard-inline code {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-clipboard-inline .gtd-clipboard-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

[data-bs-theme="dark"] .gtd-clipboard-btn {
    color: var(--bs-gray-300);
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-clipboard-btn:hover {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-clipboard-inline {
    background: var(--bs-gray-800);
}

/* =================================================================
   KEYBOARD SHORTCUTS - Keyboard shortcut hints
   ================================================================= */
.gtd-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    background: linear-gradient(180deg, var(--bs-gray-100) 0%, var(--bs-gray-200) 100%);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.25rem;
    box-shadow: 0 2px 0 var(--bs-gray-400);
}

.gtd-kbd-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-kbd-group .gtd-kbd-separator {
    color: var(--bs-gray-500);
    font-size: 0.75rem;
}

.gtd-shortcut-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
}

.gtd-shortcut-hint .gtd-kbd {
    margin-left: auto;
}

.gtd-shortcuts-modal {
    max-width: 32rem;
}

.gtd-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-shortcuts-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-gray-200);
}

.gtd-shortcuts-list-item:last-child {
    border-bottom: none;
}

.gtd-shortcuts-category {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--bs-gray-800);
}

.gtd-shortcuts-category:first-child {
    margin-top: 0;
}

[data-bs-theme="dark"] .gtd-kbd {
    color: var(--bs-gray-300);
    background: linear-gradient(180deg, var(--bs-gray-700) 0%, var(--bs-gray-800) 100%);
    border-color: var(--bs-gray-600);
    box-shadow: 0 2px 0 var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-shortcut-hint {
    color: var(--bs-gray-400);
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-shortcuts-list-item {
    border-bottom-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-shortcuts-category {
    color: var(--bs-gray-200);
}

/* =================================================================
   OFFCANVAS - Off-canvas slide panels
   ================================================================= */
.gtd-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    visibility: hidden;
}

.gtd-offcanvas.gtd-offcanvas-start {
    left: 0;
    width: 20rem;
    border-right: 1px solid var(--bs-border-color);
}

.gtd-offcanvas.gtd-offcanvas-end {
    right: 0;
    left: auto;
    width: 20rem;
    border-left: 1px solid var(--bs-border-color);
    transform: translateX(100%);
}

.gtd-offcanvas.gtd-offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-bottom: 1px solid var(--bs-border-color);
    transform: translateY(-100%);
}

.gtd-offcanvas.gtd-offcanvas-bottom {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-top: 1px solid var(--bs-border-color);
    transform: translateY(100%);
}

.gtd-offcanvas.show {
    transform: translate(0, 0);
    visibility: visible;
}

.gtd-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-offcanvas-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.gtd-offcanvas-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.25rem;
    color: var(--bs-gray-500);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.gtd-offcanvas-close:hover {
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
}

.gtd-offcanvas-body {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.gtd-offcanvas-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gtd-offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
}

[data-bs-theme="dark"] .gtd-offcanvas-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-offcanvas-close:hover {
    color: var(--bs-gray-300);
    background: var(--bs-gray-700);
}

/* =================================================================
   TOUR - Product tour / onboarding
   ================================================================= */
.gtd-tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gtd-tour-highlight {
    position: absolute;
    z-index: 1051;
    border-radius: 0.375rem;
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    transition: all 0.3s ease;
}

.gtd-tour-tooltip {
    position: absolute;
    z-index: 1052;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.gtd-tour-tooltip::before {
    content: "";
    position: absolute;
    border: 8px solid transparent;
}

.gtd-tour-tooltip.top::before {
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #fff;
}

.gtd-tour-tooltip.bottom::before {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #fff;
}

.gtd-tour-tooltip.left::before {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #fff;
}

.gtd-tour-tooltip.right::before {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #fff;
}

.gtd-tour-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.gtd-tour-step-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bs-gray-300);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.gtd-tour-step-dot.active {
    background: var(--bs-primary);
}

.gtd-tour-step-dot.completed {
    background: var(--bs-success);
}

.gtd-tour-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.gtd-tour-content {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    line-height: 1.5;
}

.gtd-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gtd-tour-progress {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-tour-buttons {
    display: flex;
    gap: 0.5rem;
}

.gtd-tour-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-tour-btn-skip {
    color: var(--bs-gray-500);
    background: transparent;
    border: none;
}

.gtd-tour-btn-skip:hover {
    color: var(--bs-gray-700);
}

.gtd-tour-btn-prev {
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
}

.gtd-tour-btn-prev:hover {
    background: var(--bs-gray-200);
}

.gtd-tour-btn-next {
    color: #fff;
    background: var(--bs-primary);
    border: 1px solid var(--bs-primary);
}

.gtd-tour-btn-next:hover {
    background: var(--bs-primary-dark, #0a58ca);
}

.gtd-tour-btn-finish {
    color: #fff;
    background: var(--bs-success);
    border: 1px solid var(--bs-success);
}

.gtd-tour-btn-finish:hover {
    background: var(--bs-success-dark, #146c43);
}

[data-bs-theme="dark"] .gtd-tour-tooltip {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tour-tooltip.top::before {
    border-top-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tour-tooltip.bottom::before {
    border-bottom-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tour-tooltip.left::before {
    border-left-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tour-tooltip.right::before {
    border-right-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tour-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-tour-content {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-tour-btn-skip:hover {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-tour-btn-prev {
    color: var(--bs-gray-300);
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

/* =================================================================
   FEEDBACK - User feedback widget
   ================================================================= */
.gtd-feedback {
    padding: 1.25rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
}

.gtd-feedback-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.gtd-feedback-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.gtd-feedback-star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    color: var(--bs-gray-400);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.gtd-feedback-star:hover {
    transform: scale(1.1);
}

.gtd-feedback-star.active,
.gtd-feedback-star:hover {
    color: var(--bs-warning);
}

.gtd-feedback-star.active i::before {
    content: "\f005";
}

.gtd-feedback-emoji {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-feedback-emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    background: var(--bs-white);
    border: 2px solid var(--bs-gray-300);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-feedback-emoji-btn:hover {
    transform: scale(1.1);
    border-color: var(--bs-gray-400);
}

.gtd-feedback-emoji-btn.active {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-feedback-comment {
    margin-bottom: 1rem;
}

.gtd-feedback-comment label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
}

.gtd-feedback-comment textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    resize: vertical;
    min-height: 5rem;
}

.gtd-feedback-comment textarea:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-feedback-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: var(--bs-primary);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-feedback-submit:hover {
    background: var(--bs-primary-dark, #0a58ca);
}

.gtd-feedback-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.gtd-feedback-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.gtd-feedback-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
    border-radius: 50%;
}

.gtd-feedback-success-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.gtd-feedback-success-message {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-feedback-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
}

.gtd-feedback-inline-label {
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

.gtd-feedback-inline .gtd-feedback-rating {
    margin-bottom: 0;
}

.gtd-feedback-inline .gtd-feedback-star {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
}

[data-bs-theme="dark"] .gtd-feedback {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-feedback-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-feedback-comment label {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-feedback-comment textarea {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-feedback-emoji-btn {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-feedback-success-title {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-feedback-success-message {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-feedback-inline {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-feedback-inline-label {
    color: var(--bs-gray-300);
}

/* =================================================================
   PRINT UTILS - Print-specific styles
   ================================================================= */
.gtd-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-print-btn:hover {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

.gtd-print-btn i {
    font-size: 1rem;
}

.gtd-print-only {
    display: none !important;
}

.gtd-no-print {
    display: block;
}

@media print {
    .gtd-no-print {
        display: none !important;
    }

    .gtd-print-only {
        display: block !important;
    }

    .gtd-print-break-before {
        page-break-before: always;
    }

    .gtd-print-break-after {
        page-break-after: always;
    }

    .gtd-print-avoid-break {
        page-break-inside: avoid;
    }

    .gtd-print-full-width {
        width: 100% !important;
        max-width: none !important;
    }

    .gtd-print-header {
        position: running(header);
    }

    .gtd-print-footer {
        position: running(footer);
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    table, th, td {
        border: 1px solid #ccc;
    }

    th, td {
        padding: 0.5rem;
        text-align: left;
    }

    thead {
        display: table-header-group;
    }

    tr {
        page-break-inside: avoid;
    }
}

.gtd-print-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.gtd-print-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bs-gray-900);
    border-radius: 0.5rem 0.5rem 0 0;
    color: #fff;
}

.gtd-print-preview-title {
    font-weight: 600;
}

.gtd-print-preview-actions {
    display: flex;
    gap: 0.5rem;
}

.gtd-print-preview-content {
    flex: 1;
    overflow: auto;
    background: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
}

.gtd-print-preview-page {
    max-width: 8.5in;
    min-height: 11in;
    margin: 1rem auto;
    padding: 1in;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gtd-print-btn {
    color: var(--bs-gray-300);
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-print-btn:hover {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-500);
}

@media (max-width: 768px) {
    .gtd-feedback-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .gtd-tour-tooltip {
        width: calc(100vw - 2rem);
        left: 1rem !important;
        right: 1rem !important;
    }

    .gtd-offcanvas.gtd-offcanvas-start,
    .gtd-offcanvas.gtd-offcanvas-end {
        width: 100%;
    }
}

/* =================================================================
   ANALYTICS - Event tracking indicators
   ================================================================= */
[data-track] {
    cursor: pointer;
}

.gtd-analytics-debug {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 20rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.75rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.9);
    color: #00ff00;
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

.gtd-analytics-debug-entry {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gtd-analytics-debug-entry:last-child {
    border-bottom: none;
}

.gtd-analytics-debug-time {
    color: #888;
    margin-right: 0.5rem;
}

.gtd-analytics-debug-event {
    color: #00ff00;
    font-weight: 600;
}

/* =================================================================
   BREADCRUMBS - Dynamic breadcrumb navigation
   ================================================================= */
.gtd-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gtd-breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-breadcrumbs-item a {
    color: var(--bs-gray-600);
    text-decoration: none;
    transition: color 0.15s ease;
}

.gtd-breadcrumbs-item a:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumbs-item.active {
    color: var(--bs-gray-900);
    font-weight: 500;
}

.gtd-breadcrumbs-separator {
    display: flex;
    align-items: center;
    color: var(--bs-gray-400);
}

.gtd-breadcrumbs-separator i {
    font-size: 0.625rem;
}

.gtd-breadcrumbs-home {
    display: flex;
    align-items: center;
}

.gtd-breadcrumbs-home i {
    font-size: 0.875rem;
}

.gtd-breadcrumbs-truncated {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-breadcrumbs-truncated-btn {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    background: var(--bs-gray-100);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.gtd-breadcrumbs-truncated-btn:hover {
    background: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-breadcrumbs-item {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-breadcrumbs-item a {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-breadcrumbs-item a:hover {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-breadcrumbs-item.active {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-breadcrumbs-truncated-btn {
    color: var(--bs-gray-400);
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-breadcrumbs-truncated-btn:hover {
    background: var(--bs-gray-600);
}

/* =================================================================
   TIMEAGO - Relative time display
   ================================================================= */
[data-timeago] {
    cursor: help;
}

.gtd-timeago {
    font-size: inherit;
    color: var(--bs-gray-600);
}

.gtd-timeago-live {
    position: relative;
}

.gtd-timeago-live::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.375rem;
    background: var(--bs-success);
    border-radius: 50%;
    animation: gtd-timeago-pulse 2s ease-in-out infinite;
}

@keyframes gtd-timeago-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.gtd-timeago-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #fff;
    background: var(--bs-gray-800);
    border-radius: 0.25rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

[data-timeago]:hover .gtd-timeago-tooltip {
    opacity: 1;
    visibility: visible;
}

[data-bs-theme="dark"] .gtd-timeago {
    color: var(--bs-gray-400);
}

/* =================================================================
   BADGE - Badge/counter component
   ================================================================= */
.gtd-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    background: var(--bs-danger);
    border-radius: 0.625rem;
    line-height: 1;
}

.gtd-badge-top-right {
    top: -0.375rem;
    right: -0.375rem;
}

.gtd-badge-top-left {
    top: -0.375rem;
    left: -0.375rem;
}

.gtd-badge-bottom-right {
    bottom: -0.375rem;
    right: -0.375rem;
}

.gtd-badge-bottom-left {
    bottom: -0.375rem;
    left: -0.375rem;
}

.gtd-badge-default {
    background: var(--bs-danger);
}

.gtd-badge-primary {
    background: var(--bs-primary);
}

.gtd-badge-success {
    background: var(--bs-success);
}

.gtd-badge-warning {
    background: var(--bs-warning);
    color: var(--bs-gray-900);
}

.gtd-badge-info {
    background: var(--bs-info);
}

.gtd-badge-secondary {
    background: var(--bs-secondary);
}

.gtd-badge-dot {
    min-width: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    font-size: 0;
}

.gtd-badge-lg {
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
}

.gtd-badge-enter {
    animation: gtd-badge-enter 0.3s ease;
}

@keyframes gtd-badge-enter {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.gtd-badge-exit {
    animation: gtd-badge-exit 0.2s ease forwards;
}

@keyframes gtd-badge-exit {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.gtd-badge-pulse {
    animation: gtd-badge-pulse 0.3s ease;
}

@keyframes gtd-badge-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* =================================================================
   SKELETON - Skeleton loading states
   ================================================================= */
.gtd-skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtd-skeleton {
    background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-300) 50%, var(--bs-gray-200) 75%);
    background-size: 200% 100%;
    animation: gtd-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
}

@keyframes gtd-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.gtd-skeleton-text {
    height: 1rem;
    width: 100%;
}

.gtd-skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.gtd-skeleton-avatar-sm {
    width: 2rem;
    height: 2rem;
}

.gtd-skeleton-avatar-lg {
    width: 4rem;
    height: 4rem;
}

.gtd-skeleton-avatar-xl {
    width: 6rem;
    height: 6rem;
}

.gtd-skeleton-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.375rem;
}

.gtd-skeleton-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-skeleton-card .gtd-skeleton-image {
    border-radius: 0;
}

.gtd-skeleton-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gtd-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gtd-skeleton-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gtd-skeleton-table {
    width: 100%;
}

.gtd-skeleton-table-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-skeleton-table-row:last-child {
    border-bottom: none;
}

.gtd-skeleton-table-header {
    background: var(--bs-gray-100);
    padding: 0.75rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

.gtd-skeleton-cell {
    flex: 1;
    height: 1rem;
}

.gtd-skeleton-inline {
    display: inline-block;
    height: 1em;
    vertical-align: middle;
}

.gtd-skeleton-fade-out {
    animation: gtd-skeleton-fade-out 0.2s ease forwards;
}

@keyframes gtd-skeleton-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

[data-bs-theme="dark"] .gtd-skeleton {
    background: linear-gradient(90deg, var(--bs-gray-700) 25%, var(--bs-gray-600) 50%, var(--bs-gray-700) 75%);
    background-size: 200% 100%;
}

[data-bs-theme="dark"] .gtd-skeleton-table-header {
    background: var(--bs-gray-800);
}

/* =================================================================
   THEME MANAGER - Theme controls
   ================================================================= */
.gtd-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.125rem;
    color: var(--bs-gray-600);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-theme-toggle:hover {
    color: var(--bs-gray-900);
    background: var(--bs-gray-100);
}

.gtd-theme-toggle i {
    transition: transform 0.3s ease;
}

.gtd-theme-toggle:hover i {
    transform: rotate(15deg);
}

.gtd-theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    background: var(--bs-gray-200);
    border-radius: 1.5rem;
}

.gtd-theme-switch-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-theme-switch-option.active {
    color: var(--bs-gray-900);
    background: var(--bs-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gtd-theme-select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    cursor: pointer;
}

.gtd-theme-select:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-theme-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
}

.gtd-theme-preview-card {
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-theme-preview-card:hover {
    border-color: var(--bs-primary);
}

.gtd-theme-preview-card.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-theme-preview-sample {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
}

.gtd-theme-preview-sample.light {
    background: #fff;
    color: #1e293b;
}

.gtd-theme-preview-sample.dark {
    background: #1e293b;
    color: #e2e8f0;
}

.gtd-theme-preview-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

[data-bs-theme="dark"] .gtd-theme-toggle:hover {
    color: var(--bs-gray-100);
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-theme-switch {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-theme-switch-option {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-theme-switch-option.active {
    color: var(--bs-gray-100);
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-theme-select {
    color: var(--bs-gray-300);
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

@media (max-width: 768px) {
    .gtd-breadcrumbs {
        font-size: 0.8125rem;
    }

    .gtd-badge {
        min-width: 1rem;
        height: 1rem;
        font-size: 0.5rem;
    }

    .gtd-theme-preview {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   INPUT MASK - Input formatting and masking
   ================================================================= */
[data-mask] {
    font-family: var(--bs-font-monospace);
}

.gtd-mask-placeholder {
    color: var(--bs-gray-400);
}

.gtd-mask-valid {
    border-color: var(--bs-success) !important;
}

.gtd-mask-invalid {
    border-color: var(--bs-danger) !important;
}

/* =================================================================
   CHARACTER COUNTER - Text character counting
   ================================================================= */
.gtd-char-counter {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    text-align: right;
}

.gtd-char-counter-warning {
    color: var(--bs-warning);
}

.gtd-char-counter-error {
    color: var(--bs-danger);
    font-weight: 500;
}

.gtd-char-counter-success {
    color: var(--bs-success);
}

[data-bs-theme="dark"] .gtd-char-counter {
    color: var(--bs-gray-400);
}

/* =================================================================
   PASSWORD STRENGTH - Password strength indicator
   ================================================================= */
.gtd-password-strength {
    margin-top: 0.5rem;
}

.gtd-password-meter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gtd-password-meter-bar {
    flex: 1;
    height: 0.375rem;
    background: var(--bs-gray-200);
    border-radius: 0.25rem;
    overflow: hidden;
    transition: width 0.3s ease, background 0.3s ease;
}

.gtd-password-meter-bar.gtd-password-weak {
    background: var(--bs-danger);
}

.gtd-password-meter-bar.gtd-password-fair {
    background: var(--bs-warning);
}

.gtd-password-meter-bar.gtd-password-good {
    background: var(--bs-info);
}

.gtd-password-meter-bar.gtd-password-strong {
    background: var(--bs-success);
}

.gtd-password-meter-bar.gtd-password-excellent {
    background: linear-gradient(90deg, var(--bs-success) 0%, var(--bs-primary) 100%);
}

.gtd-password-meter-text {
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 4rem;
    color: var(--bs-gray-600);
}

.gtd-password-requirements {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gtd-password-req {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.gtd-password-req i {
    font-size: 0.5rem;
    color: var(--bs-gray-400);
    transition: color 0.2s ease;
}

.gtd-password-req-passed {
    color: var(--bs-success);
}

.gtd-password-req-passed i {
    color: var(--bs-success);
    font-size: 0.75rem;
}

[data-bs-theme="dark"] .gtd-password-meter-bar {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-password-meter-text {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-password-req {
    color: var(--bs-gray-400);
}

/* =================================================================
   DATA TABLE - Interactive data tables
   ================================================================= */
.gtd-data-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gtd-data-table-search {
    max-width: 20rem;
}

.gtd-data-table-search input {
    padding-left: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236b7280' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
}

.gtd-data-table-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem !important;
}

.gtd-data-table-sortable::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid var(--bs-gray-400);
    margin-bottom: 3px;
}

.gtd-data-table-sortable::before {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--bs-gray-400);
    margin-top: 3px;
}

.gtd-data-table-sortable.gtd-sort-asc::after {
    border-bottom-color: var(--bs-primary);
}

.gtd-data-table-sortable.gtd-sort-desc::before {
    border-top-color: var(--bs-primary);
}

.gtd-data-table-sortable:hover {
    background: var(--bs-gray-100);
}

.gtd-data-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-data-table-info {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-data-table-pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-data-table-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-data-table-page-btn:hover:not(:disabled) {
    background: var(--bs-gray-100);
    border-color: var(--bs-gray-400);
}

.gtd-data-table-page-btn.active {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.gtd-data-table-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-bs-theme="dark"] .gtd-data-table-sortable:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-data-table-info {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-data-table-page-btn {
    color: var(--bs-gray-300);
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-data-table-page-btn:hover:not(:disabled) {
    background: var(--bs-gray-700);
}

/* =================================================================
   PAGINATION - Standalone pagination component
   ================================================================= */
.gtd-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.gtd-pagination-info {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-pagination-btn:hover:not(:disabled) {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-color: var(--bs-primary);
}

.gtd-pagination-btn.active {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.gtd-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-pagination-ellipsis {
    padding: 0 0.25rem;
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-pagination-info {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-pagination-btn {
    color: var(--bs-gray-300);
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-pagination-btn:hover:not(:disabled) {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* =================================================================
   FILTER - Filter component for lists/tables
   ================================================================= */
.gtd-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gtd-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.gtd-filter-control {
    min-width: 10rem;
}

.gtd-filter-clear {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    background: transparent;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-filter-clear:hover {
    color: var(--bs-gray-800);
    border-color: var(--bs-gray-400);
}

.gtd-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-gray-700);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 1rem;
}

.gtd-filter-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    font-size: 0.625rem;
    color: var(--bs-gray-500);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.gtd-filter-tag-remove:hover {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.1);
}

.gtd-filter-no-results {
    padding: 2rem;
    text-align: center;
    color: var(--bs-gray-500);
    font-style: italic;
}

.gtd-filter-count {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-filter-count strong {
    color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-filter {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-filter-label {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-filter-clear {
    color: var(--bs-gray-400);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-filter-clear:hover {
    color: var(--bs-gray-200);
    border-color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-filter-tag {
    color: var(--bs-gray-300);
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-filter-count {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-filter-count strong {
    color: var(--bs-gray-100);
}

@media (max-width: 768px) {
    .gtd-data-table-pagination {
        flex-direction: column;
        gap: 0.75rem;
    }

    .gtd-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .gtd-pagination-buttons {
        justify-content: center;
    }

    .gtd-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .gtd-filter-control {
        min-width: 100%;
    }
}

/* ==========================================================================
   Select All - Batch 23
   ========================================================================== */

.gtd-select-all-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-select-all-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--bs-primary);
}

.gtd-select-all-checkbox:indeterminate {
    opacity: 0.7;
}

.gtd-select-all-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    cursor: pointer;
    user-select: none;
}

.gtd-select-all-count {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-left: 0.25rem;
}

.gtd-selectable-item {
    transition: background-color 0.15s ease;
}

.gtd-selectable-item.gtd-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-selectable-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-select-all-label {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-select-all-count {
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-selectable-item.gtd-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* ==========================================================================
   Multi Select - Batch 23
   ========================================================================== */

.gtd-multiselect {
    position: relative;
    width: 100%;
}

.gtd-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-multiselect-trigger:hover {
    border-color: var(--bs-gray-400);
}

.gtd-multiselect-trigger:focus,
.gtd-multiselect.gtd-open .gtd-multiselect-trigger {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    outline: none;
}

.gtd-multiselect-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.gtd-multiselect-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    max-width: 150px;
}

.gtd-multiselect-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-multiselect-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.gtd-multiselect-tag-remove:hover {
    color: #fff;
}

.gtd-multiselect-placeholder {
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

.gtd-multiselect-arrow {
    margin-left: 0.5rem;
    color: var(--bs-gray-500);
    transition: transform 0.15s ease;
}

.gtd-multiselect.gtd-open .gtd-multiselect-arrow {
    transform: rotate(180deg);
}

.gtd-multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.gtd-multiselect.gtd-open .gtd-multiselect-dropdown {
    display: block;
}

.gtd-multiselect-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-multiselect-search input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.gtd-multiselect-search input:focus {
    outline: none;
    border-color: var(--bs-primary);
}

.gtd-multiselect-options {
    padding: 0.25rem 0;
}

.gtd-multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-multiselect-option:hover {
    background-color: var(--bs-gray-100);
}

.gtd-multiselect-option.gtd-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-multiselect-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bs-primary);
}

.gtd-multiselect-option-label {
    flex: 1;
    font-size: 0.875rem;
}

.gtd-multiselect-no-results {
    padding: 0.75rem;
    text-align: center;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

.gtd-multiselect-actions {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-multiselect-actions button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    background: transparent;
    color: var(--bs-primary);
}

.gtd-multiselect-actions button:hover {
    background: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-multiselect-trigger {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-multiselect-dropdown {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-multiselect-option:hover {
    background-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-multiselect-search input {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-multiselect-actions button:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Tag Input - Batch 23
   ========================================================================== */

.gtd-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 42px;
    padding: 0.375rem 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-tag-input:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-tag-input.gtd-disabled {
    background: var(--bs-gray-100);
    cursor: not-allowed;
    opacity: 0.6;
}

.gtd-tag-input-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    animation: gtd-tag-appear 0.15s ease;
}

@keyframes gtd-tag-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gtd-tag-input-tag-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-tag-input-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.gtd-tag-input-tag-remove:hover {
    color: #fff;
}

.gtd-tag-input-field {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    padding: 0.25rem;
}

.gtd-tag-input-field::placeholder {
    color: var(--bs-gray-500);
}

.gtd-tag-input-hint {
    width: 100%;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

.gtd-tag-input-count {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-left: auto;
}

.gtd-tag-input-count.gtd-max {
    color: var(--bs-warning);
}

.gtd-tag-input-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}

.gtd-tag-input-suggestion {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.gtd-tag-input-suggestion:hover,
.gtd-tag-input-suggestion.gtd-active {
    background-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-tag-input {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-tag-input-field {
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-tag-input.gtd-disabled {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-tag-input-suggestions {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-tag-input-suggestion:hover,
[data-bs-theme="dark"] .gtd-tag-input-suggestion.gtd-active {
    background-color: var(--bs-gray-700);
}

/* ==========================================================================
   Autocomplete - Batch 23
   ========================================================================== */

.gtd-autocomplete {
    position: relative;
    width: 100%;
}

.gtd-autocomplete-input {
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: var(--bs-body-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-autocomplete-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-autocomplete-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    pointer-events: none;
}

.gtd-autocomplete-spinner {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--bs-gray-300);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: gtd-spin 0.6s linear infinite;
}

@keyframes gtd-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.gtd-autocomplete-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    background: var(--bs-gray-400);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-autocomplete:hover .gtd-autocomplete-clear,
.gtd-autocomplete-input:focus ~ .gtd-autocomplete-clear {
    opacity: 1;
}

.gtd-autocomplete-clear:hover {
    background: var(--bs-gray-500);
}

.gtd-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.gtd-autocomplete.gtd-open .gtd-autocomplete-dropdown {
    display: block;
}

.gtd-autocomplete-item {
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-autocomplete-item:hover,
.gtd-autocomplete-item.gtd-active {
    background-color: var(--bs-gray-100);
}

.gtd-autocomplete-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
}

.gtd-autocomplete-item-content {
    flex: 1;
    min-width: 0;
}

.gtd-autocomplete-item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-autocomplete-item-subtitle {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-autocomplete-highlight {
    background-color: rgba(var(--bs-warning-rgb), 0.3);
    font-weight: 600;
}

.gtd-autocomplete-no-results {
    padding: 0.75rem;
    text-align: center;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

.gtd-autocomplete-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}

.gtd-autocomplete-footer a {
    font-size: 0.75rem;
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-autocomplete-input {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-autocomplete-dropdown {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-autocomplete-item:hover,
[data-bs-theme="dark"] .gtd-autocomplete-item.gtd-active {
    background-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-autocomplete-clear {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-autocomplete-clear:hover {
    background: var(--bs-gray-500);
}

/* ==========================================================================
   Date Picker - Batch 23
   ========================================================================== */

.gtd-datepicker {
    position: relative;
    width: 100%;
}

.gtd-datepicker-input {
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: var(--bs-body-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-datepicker-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-datepicker-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    cursor: pointer;
}

.gtd-datepicker-calendar {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
    padding: 0.75rem;
    width: 280px;
    display: none;
}

.gtd-datepicker.gtd-open .gtd-datepicker-calendar {
    display: block;
}

.gtd-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gtd-datepicker-nav {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--bs-gray-600);
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gtd-datepicker-nav:hover {
    background: var(--bs-gray-100);
    color: var(--bs-gray-800);
}

.gtd-datepicker-title {
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.gtd-datepicker-title:hover {
    background: var(--bs-gray-100);
}

.gtd-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    margin-bottom: 0.375rem;
}

.gtd-datepicker-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-500);
    padding: 0.25rem;
}

.gtd-datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
}

.gtd-datepicker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gtd-datepicker-day:hover:not(.gtd-disabled):not(.gtd-selected) {
    background: var(--bs-gray-100);
}

.gtd-datepicker-day.gtd-other-month {
    color: var(--bs-gray-400);
}

.gtd-datepicker-day.gtd-today {
    font-weight: 700;
    color: var(--bs-primary);
}

.gtd-datepicker-day.gtd-selected {
    background: var(--bs-primary);
    color: #fff;
}

.gtd-datepicker-day.gtd-disabled {
    color: var(--bs-gray-300);
    cursor: not-allowed;
}

.gtd-datepicker-day.gtd-range {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0;
}

.gtd-datepicker-day.gtd-range-start {
    border-radius: 0.25rem 0 0 0.25rem;
}

.gtd-datepicker-day.gtd-range-end {
    border-radius: 0 0.25rem 0.25rem 0;
}

.gtd-datepicker-months,
.gtd-datepicker-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

.gtd-datepicker-month,
.gtd-datepicker-year {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-datepicker-month:hover,
.gtd-datepicker-year:hover {
    background: var(--bs-gray-100);
}

.gtd-datepicker-month.gtd-selected,
.gtd-datepicker-year.gtd-selected {
    background: var(--bs-primary);
    color: #fff;
}

.gtd-datepicker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-datepicker-today-btn,
.gtd-datepicker-clear-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: none;
    background: transparent;
    color: var(--bs-primary);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.gtd-datepicker-today-btn:hover,
.gtd-datepicker-clear-btn:hover {
    background: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-datepicker-input {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-datepicker-calendar {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-datepicker-nav:hover,
[data-bs-theme="dark"] .gtd-datepicker-title:hover,
[data-bs-theme="dark"] .gtd-datepicker-day:hover:not(.gtd-disabled):not(.gtd-selected),
[data-bs-theme="dark"] .gtd-datepicker-month:hover,
[data-bs-theme="dark"] .gtd-datepicker-year:hover,
[data-bs-theme="dark"] .gtd-datepicker-today-btn:hover,
[data-bs-theme="dark"] .gtd-datepicker-clear-btn:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-datepicker-day.gtd-other-month {
    color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-datepicker-day.gtd-disabled {
    color: var(--bs-gray-700);
}

/* ==========================================================================
   Color Swatch - Batch 23
   ========================================================================== */

.gtd-color-swatch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-color-swatch-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-700);
}

.gtd-color-swatch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.gtd-color-swatch-item {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gtd-color-swatch-item:hover {
    transform: scale(1.1);
    z-index: 1;
}

.gtd-color-swatch-item.gtd-selected {
    border-color: var(--bs-gray-800);
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-gray-800);
}

.gtd-color-swatch-item.gtd-selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gtd-color-swatch-item.gtd-light.gtd-selected::after {
    color: #000;
    text-shadow: none;
}

.gtd-color-swatch-custom {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 2px dashed var(--bs-gray-400);
    background: var(--bs-body-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
    font-size: 1rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.gtd-color-swatch-custom:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.gtd-color-swatch-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
}

.gtd-color-swatch-preview-color {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--bs-border-color);
}

.gtd-color-swatch-preview-value {
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
    color: var(--bs-gray-700);
    text-transform: uppercase;
}

.gtd-color-swatch-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.gtd-color-swatch-size-sm .gtd-color-swatch-item,
.gtd-color-swatch-size-sm .gtd-color-swatch-custom {
    width: 1.5rem;
    height: 1.5rem;
}

.gtd-color-swatch-size-lg .gtd-color-swatch-item,
.gtd-color-swatch-size-lg .gtd-color-swatch-custom {
    width: 2.5rem;
    height: 2.5rem;
}

.gtd-color-swatch-grid {
    display: grid;
    gap: 0.25rem;
}

.gtd-color-swatch-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gtd-color-swatch-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gtd-color-swatch-grid-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gtd-color-swatch-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-900);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    margin-bottom: 0.25rem;
    z-index: 1;
}

.gtd-color-swatch-item:hover .gtd-color-swatch-tooltip {
    opacity: 1;
    visibility: visible;
}

[data-bs-theme="dark"] .gtd-color-swatch-label {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-color-swatch-item.gtd-selected {
    border-color: var(--bs-gray-100);
    box-shadow: 0 0 0 2px var(--bs-gray-900), 0 0 0 4px var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-color-swatch-custom {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-color-swatch-preview {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-color-swatch-preview-value {
    color: var(--bs-gray-300);
}

@media (max-width: 768px) {
    .gtd-multiselect-dropdown {
        position: fixed;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .gtd-datepicker-calendar {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-top: 0;
    }

    .gtd-autocomplete-dropdown {
        position: fixed;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .gtd-color-swatch-item {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ==========================================================================
   Rich Text Editor - Batch 24
   ========================================================================== */

.gtd-rte {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

.gtd-rte.gtd-focused {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-rte-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--bs-gray-700);
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gtd-rte-btn:hover {
    background: var(--bs-gray-200);
    color: var(--bs-gray-900);
}

.gtd-rte-btn.gtd-active {
    background: var(--bs-primary);
    color: #fff;
}

.gtd-rte-separator {
    width: 1px;
    height: 1.5rem;
    background: var(--bs-border-color);
    margin: 0 0.25rem;
}

.gtd-rte-content {
    padding: 0.75rem;
    min-height: 150px;
    outline: none;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.gtd-rte-content:empty::before {
    content: attr(data-placeholder);
    color: var(--bs-gray-500);
    pointer-events: none;
}

.gtd-rte-content blockquote {
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--bs-primary);
    background: var(--bs-gray-100);
}

.gtd-rte-content pre {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background: var(--bs-gray-900);
    color: var(--bs-gray-100);
    border-radius: 0.375rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    overflow-x: auto;
}

.gtd-rte-content h1,
.gtd-rte-content h2 {
    margin: 0.5rem 0;
    font-weight: 600;
}

.gtd-rte-content ul,
.gtd-rte-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.gtd-rte-counter {
    padding: 0.25rem 0.75rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-gray-50);
}

.gtd-rte-counter.gtd-over-limit {
    color: var(--bs-danger);
}

[data-bs-theme="dark"] .gtd-rte-toolbar {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-rte-btn {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-rte-btn:hover {
    background: var(--bs-gray-700);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-rte-content blockquote {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-rte-counter {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Code Highlight - Batch 24
   ========================================================================== */

.gtd-code-highlight {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    overflow-x: auto;
    tab-size: 4;
}

.gtd-code-wrapper {
    position: relative;
}

.gtd-code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: var(--bs-gray-200);
    color: var(--bs-gray-600);
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.gtd-code-wrapper:hover .gtd-code-copy {
    opacity: 1;
}

.gtd-code-copy:hover {
    background: var(--bs-gray-300);
}

.gtd-code-has-lines {
    padding-left: 0;
}

.gtd-code-line {
    display: block;
}

.gtd-code-line-num {
    display: inline-block;
    width: 3rem;
    padding-right: 1rem;
    text-align: right;
    color: var(--bs-gray-500);
    user-select: none;
    border-right: 1px solid var(--bs-border-color);
    margin-right: 1rem;
}

/* Syntax colors - Light theme */
.gtd-code-keyword { color: #d73a49; }
.gtd-code-string { color: #032f62; }
.gtd-code-comment { color: #6a737d; font-style: italic; }
.gtd-code-number { color: #005cc5; }
.gtd-code-function { color: #6f42c1; }
.gtd-code-operator { color: #d73a49; }
.gtd-code-punctuation { color: #24292e; }

[data-bs-theme="dark"] .gtd-code-highlight {
    background: var(--bs-gray-900);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-code-copy {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-code-copy:hover {
    background: var(--bs-gray-600);
}

/* Syntax colors - Dark theme */
[data-bs-theme="dark"] .gtd-code-keyword { color: #ff7b72; }
[data-bs-theme="dark"] .gtd-code-string { color: #a5d6ff; }
[data-bs-theme="dark"] .gtd-code-comment { color: #8b949e; }
[data-bs-theme="dark"] .gtd-code-number { color: #79c0ff; }
[data-bs-theme="dark"] .gtd-code-function { color: #d2a8ff; }
[data-bs-theme="dark"] .gtd-code-operator { color: #ff7b72; }
[data-bs-theme="dark"] .gtd-code-punctuation { color: #c9d1d9; }

/* ==========================================================================
   Mentions - Batch 24
   ========================================================================== */

.gtd-mentions {
    position: relative;
}

.gtd-mentions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
    max-height: 250px;
    overflow-y: auto;
}

.gtd-mentions-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-mentions-item:hover,
.gtd-mentions-item.gtd-active {
    background-color: var(--bs-gray-100);
}

.gtd-mentions-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

.gtd-mentions-item-content {
    flex: 1;
    min-width: 0;
}

.gtd-mentions-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.gtd-mentions-name mark {
    background: rgba(var(--bs-warning-rgb), 0.3);
    padding: 0;
}

.gtd-mentions-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-mentions-dropdown {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-mentions-item:hover,
[data-bs-theme="dark"] .gtd-mentions-item.gtd-active {
    background-color: var(--bs-gray-700);
}

/* ==========================================================================
   Emoji Picker - Batch 24
   ========================================================================== */

.gtd-emoji-picker {
    position: relative;
    display: inline-block;
}

.gtd-emoji-trigger {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease;
}

.gtd-emoji-trigger:hover {
    border-color: var(--bs-gray-400);
}

.gtd-emoji-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 1050;
    width: 320px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-bottom: 0.5rem;
    display: none;
}

.gtd-emoji-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-emoji-search-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.gtd-emoji-search-input:focus {
    outline: none;
    border-color: var(--bs-primary);
}

.gtd-emoji-tabs {
    display: flex;
    padding: 0.25rem 0.5rem;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-emoji-tab {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.gtd-emoji-tab:hover {
    background: var(--bs-gray-100);
    opacity: 1;
}

.gtd-emoji-tab.gtd-active {
    background: var(--bs-gray-200);
    opacity: 1;
}

.gtd-emoji-content {
    max-height: 250px;
    overflow-y: auto;
}

.gtd-emoji-category {
    padding: 0.5rem;
}

.gtd-emoji-category-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    margin-bottom: 0.375rem;
}

.gtd-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.125rem;
}

.gtd-emoji-item {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.gtd-emoji-item:hover {
    background: var(--bs-gray-100);
    transform: scale(1.2);
}

[data-bs-theme="dark"] .gtd-emoji-trigger {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-emoji-dropdown {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-emoji-search-input {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-emoji-tab:hover,
[data-bs-theme="dark"] .gtd-emoji-item:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-emoji-tab.gtd-active {
    background: var(--bs-gray-600);
}

/* ==========================================================================
   File Preview - Batch 24
   ========================================================================== */

.gtd-file-preview {
    margin-top: 0.5rem;
}

.gtd-file-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-file-preview-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    max-width: 250px;
}

.gtd-file-preview-thumb {
    width: 3rem;
    height: 3rem;
    border-radius: 0.25rem;
    background: var(--bs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
    font-size: 1.25rem;
    overflow: hidden;
    flex-shrink: 0;
}

.gtd-file-preview-image,
.gtd-file-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-file-preview-info {
    flex: 1;
    min-width: 0;
}

.gtd-file-preview-name {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-file-preview-size {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-file-preview-remove {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: var(--bs-gray-300);
    color: var(--bs-gray-600);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gtd-file-preview-remove:hover {
    background: var(--bs-danger);
    color: #fff;
}

.gtd-file-preview-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

[data-bs-theme="dark"] .gtd-file-preview-item {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-file-preview-thumb {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-file-preview-remove {
    background: var(--bs-gray-600);
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Image Gallery - Batch 24
   ========================================================================== */

.gtd-gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
}

.gtd-gallery-overlay.gtd-open {
    display: flex;
}

.gtd-gallery-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gtd-gallery-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    z-index: 10;
}

.gtd-gallery-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-gallery-prev,
.gtd-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    z-index: 10;
}

.gtd-gallery-prev {
    left: 1rem;
}

.gtd-gallery-next {
    right: 1rem;
}

.gtd-gallery-prev:hover,
.gtd-gallery-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-gallery-content {
    position: relative;
    max-width: 90%;
    max-height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-gallery-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: zoom-in;
}

.gtd-gallery-image.gtd-zoomed {
    cursor: zoom-out;
    transform: scale(1.5);
}

.gtd-gallery-spinner {
    position: absolute;
    color: #fff;
    font-size: 2rem;
}

.gtd-gallery-caption {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    text-align: center;
}

.gtd-gallery-counter {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 1rem;
    font-size: 0.875rem;
}

.gtd-gallery-thumbnails {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 0.25rem;
    max-width: 90%;
    overflow-x: auto;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.5rem;
}

.gtd-gallery-thumb {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.gtd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-gallery-thumb:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.gtd-gallery-thumb.gtd-active {
    border-color: #fff;
}

@media (max-width: 768px) {
    .gtd-rte-toolbar {
        padding: 0.375rem;
    }

    .gtd-rte-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .gtd-emoji-dropdown {
        width: 280px;
        position: fixed;
        left: 50%;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .gtd-emoji-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .gtd-file-preview-item {
        max-width: 100%;
        width: 100%;
    }

    .gtd-gallery-prev,
    .gtd-gallery-next {
        width: 2.5rem;
        height: 2.5rem;
    }

    .gtd-gallery-prev {
        left: 0.5rem;
    }

    .gtd-gallery-next {
        right: 0.5rem;
    }

    .gtd-gallery-thumbnails {
        display: none !important;
    }
}

/* ==========================================================================
   Star Rating - Batch 25
   ========================================================================== */

.gtd-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-rating-stars {
    display: flex;
    gap: 0.125rem;
}

.gtd-rating-star {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease;
    line-height: 1;
}

.gtd-rating-star:not(:disabled):hover {
    transform: scale(1.2);
}

.gtd-rating.gtd-readonly .gtd-rating-star {
    cursor: default;
}

.gtd-rating-star i {
    font-size: 1.25rem;
}

.gtd-rating-sm .gtd-rating-star i {
    font-size: 0.875rem;
}

.gtd-rating-lg .gtd-rating-star i {
    font-size: 1.75rem;
}

.gtd-rating-xl .gtd-rating-star i {
    font-size: 2.25rem;
}

.gtd-rating-value {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-gray-700);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .gtd-rating-value {
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Range Slider - Batch 25
   ========================================================================== */

.gtd-range-slider {
    position: relative;
    padding: 0.5rem 0;
}

.gtd-range-slider.gtd-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.gtd-range-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.gtd-range-min,
.gtd-range-max {
    color: var(--bs-gray-500);
}

.gtd-range-current {
    font-weight: 600;
    color: var(--bs-gray-800);
}

.gtd-range-track {
    position: relative;
    height: 6px;
    background: var(--bs-gray-200);
    border-radius: 3px;
}

.gtd-range-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.1s ease;
}

.gtd-range-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    cursor: grab;
    transition: transform 0.15s ease;
}

.gtd-range-thumb:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.gtd-range-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-900);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    margin-bottom: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-range-slider:hover .gtd-range-tooltip {
    opacity: 1;
}

.gtd-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

[data-bs-theme="dark"] .gtd-range-track {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-range-current {
    color: var(--bs-gray-200);
}

/* ==========================================================================
   Progress Ring - Batch 25
   ========================================================================== */

.gtd-progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gtd-progress-ring-svg {
    transform: rotate(-90deg);
}

.gtd-progress-ring-track {
    stroke: var(--bs-gray-200);
}

.gtd-progress-ring-progress {
    stroke: currentColor;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.gtd-progress-ring-progress.bg-primary {
    stroke: var(--bs-primary);
}

.gtd-progress-ring-progress.bg-success {
    stroke: var(--bs-success);
}

.gtd-progress-ring-progress.bg-warning {
    stroke: var(--bs-warning);
}

.gtd-progress-ring-progress.bg-danger {
    stroke: var(--bs-danger);
}

.gtd-progress-ring-progress.bg-info {
    stroke: var(--bs-info);
}

.gtd-progress-ring-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.gtd-progress-ring-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-gray-800);
}

.gtd-progress-ring-label {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

[data-bs-theme="dark"] .gtd-progress-ring-track {
    stroke: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-progress-ring-value {
    color: var(--bs-gray-100);
}

/* ==========================================================================
   Countdown - Batch 25
   ========================================================================== */

.gtd-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-countdown.gtd-expired {
    color: var(--bs-danger);
    font-weight: 500;
}

.gtd-countdown-full {
    gap: 1rem;
}

.gtd-countdown-full .gtd-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4rem;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
}

.gtd-countdown-full .gtd-countdown-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-gray-800);
    font-variant-numeric: tabular-nums;
}

.gtd-countdown-full .gtd-countdown-label {
    font-size: 0.6875rem;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.gtd-countdown-compact {
    gap: 0.25rem;
}

.gtd-countdown-compact .gtd-countdown-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 0.125rem;
}

.gtd-countdown-compact .gtd-countdown-value {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gtd-countdown-compact .gtd-countdown-label {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-countdown-minimal {
    font-family: var(--bs-font-monospace);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gtd-countdown-minimal .gtd-countdown-value:not(:last-child)::after {
    content: ':';
    margin: 0 0.125rem;
}

[data-bs-theme="dark"] .gtd-countdown-full .gtd-countdown-unit {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-countdown-full .gtd-countdown-value {
    color: var(--bs-gray-100);
}

/* ==========================================================================
   Infinite Scroll - Batch 25
   ========================================================================== */

.gtd-infinite-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

.gtd-infinite-end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
    text-align: center;
}

.gtd-infinite-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--bs-danger);
    font-size: 0.875rem;
}

/* ==========================================================================
   Virtual List - Batch 25
   ========================================================================== */

.gtd-virtual-list {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.gtd-virtual-spacer {
    position: relative;
    width: 100%;
}

.gtd-virtual-viewport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.gtd-virtual-item {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    box-sizing: border-box;
}

.gtd-virtual-item:hover {
    background-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .gtd-virtual-item:hover {
    background-color: var(--bs-gray-800);
}

@media (max-width: 768px) {
    .gtd-rating-star i {
        font-size: 1.5rem;
    }

    .gtd-countdown-full {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gtd-countdown-full .gtd-countdown-unit {
        min-width: 3.5rem;
    }

    .gtd-countdown-full .gtd-countdown-value {
        font-size: 1.5rem;
    }

    .gtd-progress-ring-value {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Sortable Lists
   ========================================================================== */

.gtd-sortable {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-sortable-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

.gtd-sortable-item:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
}

.gtd-sortable-item:active {
    cursor: grabbing;
}

.gtd-sortable-item.dragging {
    opacity: 0.5;
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
    transform: scale(1.02);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.gtd-sortable-item.drag-over {
    border-color: var(--bs-primary);
    border-style: dashed;
}

.gtd-sortable-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: var(--bs-secondary-color);
    cursor: grab;
}

.gtd-sortable-handle:active {
    cursor: grabbing;
}

.gtd-sortable-handle i,
.gtd-sortable-handle::before {
    font-size: 1rem;
}

.gtd-sortable-handle::before {
    content: "\2630";
}

.gtd-sortable-content {
    flex: 1;
    min-width: 0;
}

.gtd-sortable-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.75rem;
}

.gtd-sortable-placeholder {
    background: var(--bs-secondary-bg);
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.375rem;
    min-height: 3rem;
    margin-bottom: 0.5rem;
}

/* Sortable Grid Layout */
.gtd-sortable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.gtd-sortable-grid .gtd-sortable-item {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    margin-bottom: 0;
}

.gtd-sortable-grid .gtd-sortable-handle {
    margin-right: 0;
    margin-bottom: 0.5rem;
}

/* Sortable Compact */
.gtd-sortable-compact .gtd-sortable-item {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}

.gtd-sortable-compact .gtd-sortable-handle {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-sortable-item {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-sortable-item:hover {
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .gtd-sortable-item.dragging {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Context Menu
   ========================================================================== */

.gtd-context-menu {
    position: fixed;
    z-index: 1100;
    min-width: 12rem;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: top left;
    transition: all 0.15s ease;
}

.gtd-context-menu.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.gtd-context-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    text-align: left;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-context-menu-item:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-context-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-context-menu-item:disabled:hover {
    background: none;
}

.gtd-context-menu-item i {
    width: 1.25rem;
    margin-right: 0.75rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.gtd-context-menu-item-danger {
    color: var(--bs-danger);
}

.gtd-context-menu-item-danger i {
    color: var(--bs-danger);
}

.gtd-context-menu-divider {
    height: 0;
    margin: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-context-menu-label {
    padding: 0.25rem 1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Context Menu Submenu */
.gtd-context-menu-submenu {
    position: relative;
}

.gtd-context-menu-submenu::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.625rem;
    margin-left: auto;
    color: var(--bs-secondary-color);
}

.gtd-context-menu-submenu-content {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    min-width: 10rem;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
}

.gtd-context-menu-submenu:hover .gtd-context-menu-submenu-content {
    opacity: 1;
    visibility: visible;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-context-menu {
    background: var(--bs-dark-bg-subtle);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gtd-context-menu-submenu-content {
    background: var(--bs-dark-bg-subtle);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Share Buttons
   ========================================================================== */

.gtd-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.gtd-share-btn:active {
    transform: translateY(0);
}

.gtd-share-btn i {
    font-size: 1rem;
}

/* Network Colors */
.gtd-share-btn-twitter {
    background: #1da1f2;
}

.gtd-share-btn-twitter:hover {
    background: #1a91da;
}

.gtd-share-btn-facebook {
    background: #1877f2;
}

.gtd-share-btn-facebook:hover {
    background: #166fe5;
}

.gtd-share-btn-linkedin {
    background: #0a66c2;
}

.gtd-share-btn-linkedin:hover {
    background: #095cb0;
}

.gtd-share-btn-whatsapp {
    background: #25d366;
}

.gtd-share-btn-whatsapp:hover {
    background: #22c55e;
}

.gtd-share-btn-email {
    background: var(--bs-secondary);
}

.gtd-share-btn-email:hover {
    background: var(--bs-secondary-text-emphasis);
}

.gtd-share-btn-copy {
    background: var(--bs-primary);
}

.gtd-share-btn-copy:hover {
    background: var(--bs-primary-text-emphasis);
}

.gtd-share-btn-copy.copied {
    background: var(--bs-success);
}

/* Share Button Sizes */
.gtd-share-buttons-sm .gtd-share-btn {
    width: 2rem;
    height: 2rem;
}

.gtd-share-buttons-sm .gtd-share-btn i {
    font-size: 0.875rem;
}

.gtd-share-buttons-lg .gtd-share-btn {
    width: 3rem;
    height: 3rem;
}

.gtd-share-buttons-lg .gtd-share-btn i {
    font-size: 1.25rem;
}

/* Share Button with Labels */
.gtd-share-buttons-labeled .gtd-share-btn {
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    gap: 0.5rem;
}

.gtd-share-buttons-labeled .gtd-share-btn i {
    margin: 0;
}

/* Share Button Outline Style */
.gtd-share-buttons-outline .gtd-share-btn {
    background: transparent;
    border: 2px solid currentColor;
}

.gtd-share-buttons-outline .gtd-share-btn-twitter {
    color: #1da1f2;
}

.gtd-share-buttons-outline .gtd-share-btn-facebook {
    color: #1877f2;
}

.gtd-share-buttons-outline .gtd-share-btn-linkedin {
    color: #0a66c2;
}

.gtd-share-buttons-outline .gtd-share-btn-whatsapp {
    color: #25d366;
}

.gtd-share-buttons-outline .gtd-share-btn-email {
    color: var(--bs-secondary);
}

.gtd-share-buttons-outline .gtd-share-btn-copy {
    color: var(--bs-primary);
}

.gtd-share-buttons-outline .gtd-share-btn:hover {
    color: #fff;
}

.gtd-share-buttons-outline .gtd-share-btn-twitter:hover {
    background: #1da1f2;
}

.gtd-share-buttons-outline .gtd-share-btn-facebook:hover {
    background: #1877f2;
}

.gtd-share-buttons-outline .gtd-share-btn-linkedin:hover {
    background: #0a66c2;
}

.gtd-share-buttons-outline .gtd-share-btn-whatsapp:hover {
    background: #25d366;
}

.gtd-share-buttons-outline .gtd-share-btn-email:hover {
    background: var(--bs-secondary);
}

.gtd-share-buttons-outline .gtd-share-btn-copy:hover {
    background: var(--bs-primary);
}

/* ==========================================================================
   Parallax
   ========================================================================== */

.gtd-parallax {
    position: relative;
    overflow: hidden;
}

.gtd-parallax-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    pointer-events: none;
}

.gtd-parallax-content {
    position: relative;
    z-index: 1;
}

.gtd-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Parallax Heights */
.gtd-parallax-sm {
    min-height: 200px;
}

.gtd-parallax-md {
    min-height: 400px;
}

.gtd-parallax-lg {
    min-height: 600px;
}

.gtd-parallax-full {
    min-height: 100vh;
}

/* Parallax Content Alignment */
.gtd-parallax-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-parallax-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Parallax Text */
.gtd-parallax-title {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
}

.gtd-parallax-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .gtd-parallax-bg {
        transform: none !important;
    }
}

/* ==========================================================================
   Typewriter
   ========================================================================== */

.gtd-typewriter {
    display: inline;
}

.gtd-typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: text-bottom;
    animation: gtd-blink 0.7s infinite;
}

.gtd-typewriter-cursor-block {
    width: 0.6em;
    opacity: 0.7;
}

.gtd-typewriter-cursor-underscore {
    width: 0.6em;
    height: 2px;
    vertical-align: baseline;
}

@keyframes gtd-blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Typewriter Wrapper Styles */
.gtd-typewriter-wrapper {
    display: inline-flex;
    align-items: baseline;
}

.gtd-typewriter-prefix {
    margin-right: 0.25em;
}

.gtd-typewriter-suffix {
    margin-left: 0.25em;
}

/* Typewriter Highlight */
.gtd-typewriter-highlight {
    color: var(--bs-primary);
}

.gtd-typewriter-gradient {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   Text Highlighter
   ========================================================================== */

.gtd-highlight {
    background: linear-gradient(180deg, transparent 60%, var(--bs-warning-bg-subtle) 60%);
    padding: 0 0.125rem;
    border-radius: 0.125rem;
}

.gtd-highlight-primary {
    background: linear-gradient(180deg, transparent 60%, var(--bs-primary-bg-subtle) 60%);
}

.gtd-highlight-success {
    background: linear-gradient(180deg, transparent 60%, var(--bs-success-bg-subtle) 60%);
}

.gtd-highlight-danger {
    background: linear-gradient(180deg, transparent 60%, var(--bs-danger-bg-subtle) 60%);
}

.gtd-highlight-info {
    background: linear-gradient(180deg, transparent 60%, var(--bs-info-bg-subtle) 60%);
}

/* Solid Highlight */
.gtd-highlight-solid {
    background: var(--bs-warning-bg-subtle);
}

.gtd-highlight-solid.gtd-highlight-primary {
    background: var(--bs-primary-bg-subtle);
}

.gtd-highlight-solid.gtd-highlight-success {
    background: var(--bs-success-bg-subtle);
}

.gtd-highlight-solid.gtd-highlight-danger {
    background: var(--bs-danger-bg-subtle);
}

.gtd-highlight-solid.gtd-highlight-info {
    background: var(--bs-info-bg-subtle);
}

/* Search Highlight */
.gtd-search-highlight {
    background: var(--bs-warning);
    color: var(--bs-dark);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.gtd-search-highlight-current {
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 0 0 2px var(--bs-primary-border-subtle);
}

/* Highlight Animation */
.gtd-highlight-animate {
    animation: gtd-highlight-flash 1s ease;
}

@keyframes gtd-highlight-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Search Results */
.gtd-search-results {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.gtd-search-results-count {
    color: var(--bs-secondary-color);
}

.gtd-search-results-nav {
    display: flex;
    gap: 0.25rem;
}

.gtd-search-results-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-search-results-nav button:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.gtd-search-results-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(255, 193, 7, 0.2) 60%);
}

[data-bs-theme="dark"] .gtd-highlight-primary {
    background: linear-gradient(180deg, transparent 60%, rgba(var(--bs-primary-rgb), 0.2) 60%);
}

[data-bs-theme="dark"] .gtd-highlight-success {
    background: linear-gradient(180deg, transparent 60%, rgba(var(--bs-success-rgb), 0.2) 60%);
}

[data-bs-theme="dark"] .gtd-highlight-danger {
    background: linear-gradient(180deg, transparent 60%, rgba(var(--bs-danger-rgb), 0.2) 60%);
}

[data-bs-theme="dark"] .gtd-highlight-info {
    background: linear-gradient(180deg, transparent 60%, rgba(var(--bs-info-rgb), 0.2) 60%);
}

[data-bs-theme="dark"] .gtd-highlight-solid {
    background: rgba(255, 193, 7, 0.2);
}

[data-bs-theme="dark"] .gtd-search-highlight {
    background: var(--bs-warning);
    color: var(--bs-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-sortable-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .gtd-context-menu {
        min-width: 10rem;
    }

    .gtd-share-buttons-labeled .gtd-share-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .gtd-parallax-title {
        font-size: 2rem;
    }

    .gtd-parallax-subtitle {
        font-size: 1rem;
    }

    .gtd-parallax-sm {
        min-height: 150px;
    }

    .gtd-parallax-md {
        min-height: 300px;
    }

    .gtd-parallax-lg {
        min-height: 400px;
    }
}

/* ==========================================================================
   Clipboard
   ========================================================================== */

.gtd-clipboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-clipboard-btn:hover {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.gtd-clipboard-btn.copied {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success);
    color: var(--bs-success);
}

.gtd-clipboard-btn i {
    font-size: 0.75rem;
}

/* Clipboard Code Block */
.gtd-clipboard-code {
    position: relative;
}

.gtd-clipboard-code pre {
    margin: 0;
    padding: 1rem;
    padding-right: 3rem;
    background: var(--bs-dark-bg-subtle);
    border-radius: 0.5rem;
    overflow-x: auto;
}

.gtd-clipboard-code .gtd-clipboard-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-clipboard-code:hover .gtd-clipboard-btn {
    opacity: 1;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-clipboard-btn {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-clipboard-btn:hover {
    background: var(--bs-tertiary-bg);
}

/* ==========================================================================
   Scroll Spy
   ========================================================================== */

.gtd-scrollspy-nav {
    position: sticky;
    top: 1rem;
}

.gtd-scrollspy-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-scrollspy-nav li {
    margin-bottom: 0.25rem;
}

.gtd-scrollspy-nav a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
}

.gtd-scrollspy-nav a:hover {
    color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.gtd-scrollspy-nav a.active,
.gtd-scrollspy-nav li.active > a {
    color: var(--bs-primary);
    border-left-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    font-weight: 500;
}

/* Scrollspy Nested */
.gtd-scrollspy-nav ul ul {
    margin-left: 1rem;
    margin-top: 0.25rem;
}

.gtd-scrollspy-nav ul ul a {
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
}

/* Scrollspy Indicator */
.gtd-scrollspy-indicator {
    position: absolute;
    left: 0;
    width: 2px;
    background: var(--bs-primary);
    transition: all 0.2s ease;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-scrollspy-nav a:hover {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-scrollspy-nav a.active {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

/* ==========================================================================
   Sticky Elements
   ========================================================================== */

.gtd-sticky-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.stuck {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.gtd-sticky-header {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-sticky-header.stuck {
    border-bottom-color: transparent;
}

.gtd-sticky-sidebar {
    will-change: transform;
}

/* Dark Mode */
[data-bs-theme="dark"] .stuck {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Masonry Layout
   ========================================================================== */

.gtd-masonry {
    position: relative;
}

.gtd-masonry-item {
    transition: all 0.3s ease;
}

.gtd-masonry-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Masonry Card */
.gtd-masonry-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-masonry-card-img {
    width: 100%;
    height: auto;
    display: block;
}

.gtd-masonry-card-body {
    padding: 1rem;
}

.gtd-masonry-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--bs-heading-color);
}

.gtd-masonry-card-text {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

/* Masonry Loading */
.gtd-masonry-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.gtd-masonry-loading::after {
    content: "";
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--bs-border-color);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: gtd-spin 0.8s linear infinite;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-masonry-card {
    background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.gtd-accordion {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-accordion-item {
    border-bottom: 1px solid var(--bs-border-color);
}

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

.gtd-accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-accordion-header:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-accordion-header::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    margin-left: auto;
    color: var(--bs-secondary-color);
    transition: transform 0.3s ease;
}

.gtd-accordion-item.active .gtd-accordion-header::after {
    transform: rotate(180deg);
}

.gtd-accordion-item.active .gtd-accordion-header {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.gtd-accordion-content {
    background: var(--bs-body-bg);
}

.gtd-accordion-body {
    padding: 1rem 1.25rem;
}

/* Accordion Icon */
.gtd-accordion-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

.gtd-accordion-item.active .gtd-accordion-icon {
    color: var(--bs-primary);
}

/* Accordion Flush */
.gtd-accordion-flush {
    border: none;
    border-radius: 0;
}

.gtd-accordion-flush .gtd-accordion-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-accordion-flush .gtd-accordion-header {
    padding-left: 0;
    padding-right: 0;
}

.gtd-accordion-flush .gtd-accordion-body {
    padding-left: 0;
    padding-right: 0;
}

/* Accordion Nested */
.gtd-accordion .gtd-accordion {
    margin: 0 -1.25rem -1rem;
    border: none;
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-accordion {
    border-color: var(--bs-dark-border-subtle);
}

[data-bs-theme="dark"] .gtd-accordion-header {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-accordion-header:hover {
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .gtd-accordion-item.active .gtd-accordion-header {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

[data-bs-theme="dark"] .gtd-accordion-content {
    background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   Lazy Loading
   ========================================================================== */

.gtd-lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gtd-lazy-loading {
    background: var(--bs-secondary-bg);
    position: relative;
}

.gtd-lazy-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 2px solid var(--bs-border-color);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: gtd-spin 0.8s linear infinite;
}

.gtd-lazy-loaded {
    opacity: 1;
}

.gtd-lazy-error {
    opacity: 1;
    background: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.gtd-lazy-error::after {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 2rem;
    color: var(--bs-secondary-color);
}

/* Lazy Image Placeholder */
.gtd-lazy-placeholder {
    background: linear-gradient(90deg, var(--bs-secondary-bg) 0%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 100%);
    background-size: 200% 100%;
    animation: gtd-shimmer 1.5s infinite;
}

@keyframes gtd-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Lazy Background */
.gtd-lazy-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Lazy Fade In */
.gtd-lazy-fade {
    animation: gtd-fade-in 0.5s ease forwards;
}

@keyframes gtd-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-lazy-loading {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-lazy-error {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-lazy-placeholder {
    background: linear-gradient(90deg, var(--bs-dark-bg-subtle) 0%, var(--bs-tertiary-bg) 50%, var(--bs-dark-bg-subtle) 100%);
    background-size: 200% 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-scrollspy-nav {
        position: relative;
        top: 0;
    }

    .gtd-scrollspy-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .gtd-scrollspy-nav li {
        margin-bottom: 0;
    }

    .gtd-scrollspy-nav a {
        padding: 0.375rem 0.75rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 0.25rem;
    }

    .gtd-scrollspy-nav a.active {
        border-left: none;
        border-bottom-color: var(--bs-primary);
    }

    .gtd-accordion-header {
        padding: 0.75rem 1rem;
    }

    .gtd-accordion-body {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   Filter List
   ========================================================================== */

.gtd-filter-input {
    position: relative;
}

.gtd-filter-input input {
    padding-right: 2.5rem;
}

.gtd-filter-input .gtd-filter-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.gtd-filter-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem;
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-filter-input:hover .gtd-filter-clear,
.gtd-filter-input input:focus ~ .gtd-filter-clear {
    opacity: 1;
}

.gtd-filter-no-results {
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.gtd-filter-no-results::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Filter List Items */
.gtd-filter-item {
    transition: opacity 0.2s ease;
}

.gtd-filter-item.filtered-out {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Filter Highlight */
.gtd-filter-highlight {
    background: var(--bs-warning-bg-subtle);
    padding: 0 0.125rem;
    border-radius: 0.125rem;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.gtd-tabs {
    display: flex;
    flex-direction: column;
}

.gtd-tabs-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
}

.gtd-tabs-nav [data-tab] {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.gtd-tabs-nav [data-tab]:hover {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

.gtd-tabs-nav [data-tab].active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.gtd-tabs-content [data-tab-panel] {
    display: none;
}

.gtd-tabs-content [data-tab-panel].active {
    display: block;
    animation: gtd-tab-fade 0.2s ease;
}

@keyframes gtd-tab-fade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tabs Pills */
.gtd-tabs-pills .gtd-tabs-nav {
    border-bottom: none;
    gap: 0.5rem;
}

.gtd-tabs-pills .gtd-tabs-nav [data-tab] {
    border-radius: 0.375rem;
    border-bottom: none;
    margin-bottom: 0;
}

.gtd-tabs-pills .gtd-tabs-nav [data-tab].active {
    background: var(--bs-primary);
    color: #fff;
}

/* Tabs Vertical */
.gtd-tabs-vertical {
    flex-direction: row;
}

.gtd-tabs-vertical .gtd-tabs-nav {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--bs-border-color);
    margin-bottom: 0;
    margin-right: 1rem;
    padding-right: 1rem;
}

.gtd-tabs-vertical .gtd-tabs-nav [data-tab] {
    border-bottom: none;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -1px;
    text-align: left;
}

.gtd-tabs-vertical .gtd-tabs-nav [data-tab].active {
    border-right-color: var(--bs-primary);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-tabs-nav [data-tab]:hover {
    background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   Offcanvas / Drawer
   ========================================================================== */

.gtd-offcanvas {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    transition: transform 0.3s ease;
}

.gtd-offcanvas-left {
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    max-width: 100%;
    border-right: 1px solid var(--bs-border-color);
    transform: translateX(-100%);
}

.gtd-offcanvas-right {
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    max-width: 100%;
    border-left: 1px solid var(--bs-border-color);
    transform: translateX(100%);
}

.gtd-offcanvas-top {
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 100%;
    border-bottom: 1px solid var(--bs-border-color);
    transform: translateY(-100%);
}

.gtd-offcanvas-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 100%;
    border-top: 1px solid var(--bs-border-color);
    transform: translateY(100%);
}

.gtd-offcanvas.active {
    transform: translate(0, 0);
}

.gtd-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-offcanvas-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.gtd-offcanvas-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: color 0.15s ease;
}

.gtd-offcanvas-close:hover {
    color: var(--bs-body-color);
}

.gtd-offcanvas-body {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.gtd-offcanvas-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gtd-offcanvas-backdrop.active {
    opacity: 1;
    visibility: visible;
}

body.gtd-offcanvas-open {
    overflow: hidden;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-offcanvas {
    background: var(--bs-dark-bg-subtle);
}

[data-bs-theme="dark"] .gtd-offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.gtd-breadcrumb {
    padding: 0.5rem 0;
}

.gtd-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.gtd-breadcrumb-item {
    display: flex;
    align-items: center;
}

.gtd-breadcrumb-item + .gtd-breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--bs-secondary-color);
}

.gtd-breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.gtd-breadcrumb-item a:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumb-item a i {
    margin-right: 0.375rem;
}

.gtd-breadcrumb-item.active {
    color: var(--bs-body-color);
    font-weight: 500;
}

/* Breadcrumb with Chevrons */
.gtd-breadcrumb-chevron .gtd-breadcrumb-item + .gtd-breadcrumb-item::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.625rem;
}

/* Breadcrumb with Background */
.gtd-breadcrumb-bg {
    background: var(--bs-tertiary-bg);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}

/* ==========================================================================
   Step Wizard
   ========================================================================== */

.gtd-wizard {
    display: flex;
    flex-direction: column;
}

.gtd-wizard-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 2rem;
}

.gtd-wizard-steps::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: var(--bs-border-color);
    z-index: 0;
}

.gtd-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.gtd-wizard-step-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    font-weight: 600;
    color: var(--bs-secondary-color);
    transition: all 0.2s ease;
}

.gtd-wizard-step-title {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    text-align: center;
    transition: color 0.2s ease;
}

.gtd-wizard-step.active .gtd-wizard-step-marker {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-wizard-step.active .gtd-wizard-step-title {
    color: var(--bs-primary);
    font-weight: 500;
}

.gtd-wizard-step.completed .gtd-wizard-step-marker {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.gtd-wizard-step.completed .gtd-wizard-step-marker::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.gtd-wizard-step.completed .gtd-wizard-step-title {
    color: var(--bs-success);
}

.gtd-wizard-content {
    flex: 1;
}

.gtd-wizard-panel {
    display: none;
}

.gtd-wizard-panel.active {
    display: block;
    animation: gtd-wizard-slide 0.3s ease;
}

@keyframes gtd-wizard-slide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.gtd-wizard-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 1.5rem;
}

/* Wizard Vertical */
.gtd-wizard-vertical {
    flex-direction: row;
}

.gtd-wizard-vertical .gtd-wizard-steps {
    flex-direction: column;
    margin-right: 2rem;
    margin-bottom: 0;
}

.gtd-wizard-vertical .gtd-wizard-steps::before {
    top: 2rem;
    bottom: 2rem;
    left: 1.25rem;
    right: auto;
    width: 2px;
    height: auto;
}

.gtd-wizard-vertical .gtd-wizard-step {
    flex-direction: row;
    margin-bottom: 1.5rem;
}

.gtd-wizard-vertical .gtd-wizard-step-title {
    margin-top: 0;
    margin-left: 1rem;
    text-align: left;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-wizard-step-marker {
    background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   Notifications / Toasts
   ========================================================================== */

.gtd-notification-container {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
    pointer-events: none;
}

.gtd-notification-top-right {
    top: 1rem;
    right: 1rem;
}

.gtd-notification-top-left {
    top: 1rem;
    left: 1rem;
}

.gtd-notification-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.gtd-notification-bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.gtd-notification-top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-notification-bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-notification {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.gtd-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.gtd-notification.hide {
    opacity: 0;
    transform: translateX(100%);
}

.gtd-notification-top-left .gtd-notification,
.gtd-notification-bottom-left .gtd-notification {
    transform: translateX(-100%);
}

.gtd-notification-top-left .gtd-notification.show,
.gtd-notification-bottom-left .gtd-notification.show {
    transform: translateX(0);
}

.gtd-notification-top-left .gtd-notification.hide,
.gtd-notification-bottom-left .gtd-notification.hide {
    transform: translateX(-100%);
}

.gtd-notification-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.gtd-notification-content {
    flex: 1;
    min-width: 0;
}

.gtd-notification-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-notification-message {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.gtd-notification-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.gtd-notification-close:hover {
    opacity: 1;
}

.gtd-notification-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-notification-action {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-notification-action:hover {
    background: var(--bs-secondary-bg);
}

/* Notification Types */
.gtd-notification-success {
    border-left: 4px solid var(--bs-success);
}

.gtd-notification-success .gtd-notification-icon {
    color: var(--bs-success);
}

.gtd-notification-error {
    border-left: 4px solid var(--bs-danger);
}

.gtd-notification-error .gtd-notification-icon {
    color: var(--bs-danger);
}

.gtd-notification-warning {
    border-left: 4px solid var(--bs-warning);
}

.gtd-notification-warning .gtd-notification-icon {
    color: var(--bs-warning);
}

.gtd-notification-info {
    border-left: 4px solid var(--bs-info);
}

.gtd-notification-info .gtd-notification-icon {
    color: var(--bs-info);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-notification {
    background: var(--bs-dark-bg-subtle);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gtd-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .gtd-tabs-nav [data-tab] {
        white-space: nowrap;
    }

    .gtd-offcanvas-left,
    .gtd-offcanvas-right {
        width: 85%;
    }

    .gtd-wizard-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gtd-wizard-step {
        min-width: 100px;
    }

    .gtd-notification-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .gtd-notification-top-center,
    .gtd-notification-bottom-center {
        transform: none;
    }
}

/* ==========================================================================
   Card Flip
   ========================================================================== */

.gtd-card-flip {
    perspective: 1000px;
    cursor: pointer;
}

.gtd-card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform var(--flip-duration, 600ms) ease;
    transform-style: preserve-3d;
}

.gtd-card-flip.flipped .gtd-card-flip-inner {
    transform: rotateY(180deg);
}

.gtd-card-flip-front,
.gtd-card-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-card-flip-front {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.gtd-card-flip-back {
    background: var(--bs-primary);
    color: #fff;
    transform: rotateY(180deg);
}

/* Flip Horizontal */
.gtd-card-flip-horizontal.flipped .gtd-card-flip-inner {
    transform: rotateX(180deg);
}

.gtd-card-flip-horizontal .gtd-card-flip-back {
    transform: rotateX(180deg);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-card-flip-front {
    background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   Carousel
   ========================================================================== */

.gtd-carousel {
    position: relative;
    overflow: hidden;
}

.gtd-carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.gtd-carousel-track > * {
    flex: 0 0 100%;
    width: 100%;
}

.gtd-carousel-prev,
.gtd-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: var(--bs-dark);
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.gtd-carousel:hover .gtd-carousel-prev,
.gtd-carousel:hover .gtd-carousel-next {
    opacity: 1;
}

.gtd-carousel-prev:hover,
.gtd-carousel-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gtd-carousel-prev {
    left: 1rem;
}

.gtd-carousel-next {
    right: 1rem;
}

.gtd-carousel-indicators {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.gtd-carousel-indicator {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-carousel-indicator:hover {
    background: rgba(255, 255, 255, 0.75);
}

.gtd-carousel-indicator.active {
    background: #fff;
    transform: scale(1.2);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-carousel-prev,
[data-bs-theme="dark"] .gtd-carousel-next {
    background: rgba(var(--bs-dark-rgb), 0.9);
    color: #fff;
}

[data-bs-theme="dark"] .gtd-carousel-prev:hover,
[data-bs-theme="dark"] .gtd-carousel-next:hover {
    background: var(--bs-dark);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.gtd-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gtd-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.gtd-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
}

.gtd-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.gtd-lightbox-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 200px;
}

.gtd-lightbox-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.gtd-lightbox-loading {
    position: absolute;
    color: #fff;
    font-size: 2rem;
}

.gtd-lightbox-close,
.gtd-lightbox-prev,
.gtd-lightbox-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-lightbox-close:hover,
.gtd-lightbox-prev:hover,
.gtd-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-lightbox-close {
    top: -3rem;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.25rem;
}

.gtd-lightbox-prev,
.gtd-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1rem;
}

.gtd-lightbox-prev {
    left: -4rem;
}

.gtd-lightbox-next {
    right: -4rem;
}

.gtd-lightbox-caption {
    position: absolute;
    bottom: -2.5rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.gtd-lightbox-counter {
    position: absolute;
    top: -2.5rem;
    left: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

body.gtd-lightbox-open {
    overflow: hidden;
}

/* ==========================================================================
   Pull to Refresh
   ========================================================================== */

.gtd-pull-refresh {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gtd-pull-refresh-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.gtd-pull-refresh-icon {
    font-size: 1.5rem;
    color: var(--bs-primary);
    transition: transform 0.2s ease;
}

.gtd-pull-refresh-indicator.ready .gtd-pull-refresh-icon {
    transform: rotate(180deg);
}

.gtd-pull-refresh-spinner {
    display: none;
    font-size: 1.5rem;
    color: var(--bs-primary);
}

.gtd-pull-refresh-indicator.refreshing .gtd-pull-refresh-icon {
    display: none;
}

.gtd-pull-refresh-indicator.refreshing .gtd-pull-refresh-spinner {
    display: block;
}

.gtd-pull-refresh-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* ==========================================================================
   Swipe Actions
   ========================================================================== */

.gtd-swipe-action {
    position: relative;
    overflow: hidden;
}

.gtd-swipe-action [data-swipe-left],
.gtd-swipe-action [data-swipe-right] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.gtd-swipe-action [data-swipe-left] {
    left: 0;
    transform: translateX(-100%);
}

.gtd-swipe-action [data-swipe-right] {
    right: 0;
    transform: translateX(100%);
}

.gtd-swipe-action [data-swipe-content] {
    position: relative;
    z-index: 1;
    background: var(--bs-body-bg);
    transition: transform 0.3s ease;
}

.gtd-swipe-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 5rem;
    height: 100%;
    padding: 0.5rem 1rem;
    border: none;
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.gtd-swipe-action-btn:hover {
    opacity: 0.9;
}

.gtd-swipe-action-btn i {
    font-size: 1.25rem;
}

.gtd-swipe-action-btn-edit {
    background: var(--bs-primary);
}

.gtd-swipe-action-btn-delete {
    background: var(--bs-danger);
}

.gtd-swipe-action-btn-archive {
    background: var(--bs-warning);
    color: var(--bs-dark);
}

.gtd-swipe-action-btn-pin {
    background: var(--bs-info);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-swipe-action [data-swipe-content] {
    background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   Smooth Scroll
   ========================================================================== */

/* Scroll to top button */
.gtd-scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: var(--bs-primary);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.gtd-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-scroll-top:hover {
    background: var(--bs-primary-text-emphasis);
    transform: translateY(-3px);
}

/* Scroll indicator */
.gtd-scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--bs-primary);
    z-index: 1100;
    transition: width 0.1s linear;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-scroll-top {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-carousel-prev,
    .gtd-carousel-next {
        width: 2.5rem;
        height: 2.5rem;
    }

    .gtd-carousel-prev {
        left: 0.5rem;
    }

    .gtd-carousel-next {
        right: 0.5rem;
    }

    .gtd-lightbox-prev {
        left: -2.5rem;
    }

    .gtd-lightbox-next {
        right: -2.5rem;
    }

    .gtd-scroll-top {
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ============================================================================
   DRAG SELECT - Rectangle selection for multiple items
   ============================================================================ */
.gtd-drag-select-box {
    border: 2px dashed var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    pointer-events: none;
    z-index: 1000;
}

.gtd-selectable {
    user-select: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-selectable:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-select-preview {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.gtd-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* ============================================================================
   TIMELINE - Timeline / history display component
   ============================================================================ */
.gtd-timeline {
    position: relative;
    padding: 1rem 0;
}

.gtd-timeline-vertical {
    padding-left: 2rem;
}

.gtd-timeline-vertical::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}

.gtd-timeline-item {
    position: relative;
    padding-bottom: 2rem;
    opacity: 0;
    transform: translateX(-1rem);
    transition: all 0.4s ease;
}

.gtd-timeline-item:last-child {
    padding-bottom: 0;
}

.gtd-timeline-visible {
    opacity: 1;
    transform: translateX(0);
}

.gtd-timeline-marker {
    position: absolute;
    left: -1.75rem;
    top: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--bs-body-bg);
}

.gtd-timeline-content {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
}

.gtd-timeline-date {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

.gtd-timeline-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--bs-heading-color);
}

.gtd-timeline-body {
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

/* Timeline item types */
.gtd-timeline-item-success .gtd-timeline-marker {
    background: var(--bs-success);
}

.gtd-timeline-item-warning .gtd-timeline-marker {
    background: var(--bs-warning);
}

.gtd-timeline-item-danger .gtd-timeline-marker {
    background: var(--bs-danger);
}

.gtd-timeline-item-info .gtd-timeline-marker {
    background: var(--bs-info);
}

/* Alternating timeline */
.gtd-timeline-alternating {
    padding-left: 0;
}

.gtd-timeline-alternating::before {
    left: 50%;
    transform: translateX(-50%);
}

.gtd-timeline-alternating .gtd-timeline-item {
    width: 50%;
    padding-right: 2rem;
}

.gtd-timeline-alternating .gtd-timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 2rem;
    padding-right: 0;
}

.gtd-timeline-alternating .gtd-timeline-marker {
    left: auto;
    right: -0.75rem;
}

.gtd-timeline-alternating .gtd-timeline-item:nth-child(even) .gtd-timeline-marker {
    left: -0.75rem;
    right: auto;
}

/* Horizontal timeline */
.gtd-timeline-horizontal {
    display: flex;
    padding-left: 0;
    overflow-x: auto;
    gap: 1rem;
}

.gtd-timeline-horizontal::before {
    left: 0;
    right: 0;
    top: 0.5rem;
    width: auto;
    height: 2px;
    bottom: auto;
}

.gtd-timeline-horizontal .gtd-timeline-item {
    flex: 0 0 auto;
    min-width: 200px;
    padding-top: 2rem;
    padding-bottom: 0;
    transform: translateY(-1rem);
}

.gtd-timeline-horizontal .gtd-timeline-marker {
    top: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
}

/* Removing animation */
.gtd-timeline-removing {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-timeline-vertical::before,
[data-bs-theme="dark"] .gtd-timeline-horizontal::before {
    background: var(--bs-border-color);
}

[data-bs-theme="dark"] .gtd-timeline-marker {
    box-shadow: 0 0 0 4px var(--bs-body-bg);
}

[data-bs-theme="dark"] .gtd-timeline-content {
    background: var(--bs-tertiary-bg);
}

/* ============================================================================
   AVATAR STACK - Stacked avatar display component
   ============================================================================ */
.gtd-avatar-stack {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.gtd-avatar-stack-reverse {
    flex-direction: row;
    justify-content: flex-start;
}

.gtd-avatar-stack-item {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    margin-left: -0.75rem;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.gtd-avatar-stack-reverse .gtd-avatar-stack-item {
    margin-left: 0;
    margin-right: -0.75rem;
}

.gtd-avatar-stack-item:first-child {
    margin-left: 0;
}

.gtd-avatar-stack-reverse .gtd-avatar-stack-item:first-child {
    margin-right: 0;
}

.gtd-avatar-stack-item:hover {
    transform: translateY(-2px);
    z-index: 10 !important;
}

.gtd-avatar-stack-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-avatar-stack-overflow {
    background: var(--bs-secondary);
    cursor: pointer;
}

.gtd-avatar-stack-overflow:hover {
    background: var(--bs-gray-600);
}

/* Size variants */
.gtd-avatar-stack-sm .gtd-avatar-stack-item {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.625rem;
    margin-left: -0.5rem;
}

.gtd-avatar-stack-sm.gtd-avatar-stack-reverse .gtd-avatar-stack-item {
    margin-left: 0;
    margin-right: -0.5rem;
}

.gtd-avatar-stack-lg .gtd-avatar-stack-item {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1rem;
    margin-left: -1rem;
}

.gtd-avatar-stack-lg.gtd-avatar-stack-reverse .gtd-avatar-stack-item {
    margin-left: 0;
    margin-right: -1rem;
}

/* Overflow popover */
.gtd-avatar-stack-popover {
    position: fixed;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    z-index: 1050;
    min-width: 150px;
    max-height: 300px;
    overflow-y: auto;
}

.gtd-avatar-stack-popover-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color 0.15s ease;
}

.gtd-avatar-stack-popover-item:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-avatar-stack-popover-item img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
}

.gtd-avatar-mini {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-avatar-stack-item {
    border-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .gtd-avatar-stack-popover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   TAG CLOUD - Weighted tag cloud display
   ============================================================================ */
.gtd-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 1rem;
}

.gtd-tag-cloud-item {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
    line-height: 1.3;
}

.gtd-tag-cloud-item:hover {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    transform: scale(1.1);
}

a.gtd-tag-cloud-item:hover {
    text-decoration: none;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-tag-cloud-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.2);
}

/* ============================================================================
   SEARCH HIGHLIGHT - Highlight search terms in text
   ============================================================================ */
.gtd-highlight {
    background: linear-gradient(to bottom, #fef08a 0%, #fde047 100%);
    color: #1f2937;
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.gtd-highlight-current {
    background: linear-gradient(to bottom, #fb923c 0%, #f97316 100%);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

/* Alternative highlight colors */
.gtd-highlight-blue {
    background: linear-gradient(to bottom, #93c5fd 0%, #60a5fa 100%);
}

.gtd-highlight-green {
    background: linear-gradient(to bottom, #86efac 0%, #4ade80 100%);
}

.gtd-highlight-pink {
    background: linear-gradient(to bottom, #f9a8d4 0%, #f472b6 100%);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-highlight {
    background: linear-gradient(to bottom, #854d0e 0%, #a16207 100%);
    color: #fef9c3;
}

[data-bs-theme="dark"] .gtd-highlight-current {
    background: linear-gradient(to bottom, #c2410c 0%, #ea580c 100%);
    color: #fff;
}

/* ============================================================================
   TREE VIEW - Hierarchical tree view component
   ============================================================================ */
.gtd-tree-view {
    font-size: 0.875rem;
}

.gtd-tree-node {
    outline: none;
}

.gtd-tree-node:focus > .gtd-tree-header {
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-tree-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    padding-left: calc(0.5rem + var(--tree-level, 0) * 1.25rem);
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color 0.15s ease;
    user-select: none;
}

.gtd-tree-header:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-tree-toggle {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--bs-secondary-color);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.gtd-tree-has-children > .gtd-tree-header .gtd-tree-toggle {
    cursor: pointer;
}

.gtd-tree-expanded > .gtd-tree-header .gtd-tree-toggle {
    transform: rotate(90deg);
}

.gtd-tree-checkbox {
    flex-shrink: 0;
    margin: 0 !important;
}

.gtd-tree-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.gtd-tree-has-children > .gtd-tree-header .gtd-tree-icon {
    color: var(--bs-warning);
}

.gtd-tree-expanded > .gtd-tree-header .gtd-tree-icon i.fa-folder::before {
    content: "\f07c"; /* folder-open */
}

.gtd-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-tree-selected > .gtd-tree-header {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-tree-selected > .gtd-tree-header .gtd-tree-label {
    color: var(--bs-primary);
    font-weight: 500;
}

.gtd-tree-children {
    overflow: hidden;
}

/* Animated expand/collapse */
.gtd-tree-children[style*="display: none"] {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

.gtd-tree-children:not([style*="display: none"]) {
    max-height: 9999px;
    opacity: 1;
}

/* Connection lines (optional) */
.gtd-tree-view-lines .gtd-tree-node {
    position: relative;
}

.gtd-tree-view-lines .gtd-tree-node::before {
    content: '';
    position: absolute;
    left: calc(0.5rem + (var(--tree-level, 0) - 1) * 1.25rem + 0.5rem);
    top: 0;
    bottom: 50%;
    width: 1px;
    background: var(--bs-border-color);
}

.gtd-tree-view-lines .gtd-tree-node::after {
    content: '';
    position: absolute;
    left: calc(0.5rem + (var(--tree-level, 0) - 1) * 1.25rem + 0.5rem);
    top: 50%;
    width: 0.75rem;
    height: 1px;
    background: var(--bs-border-color);
}

.gtd-tree-view-lines > .gtd-tree-node::before,
.gtd-tree-view-lines > .gtd-tree-node::after {
    display: none;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-tree-header:hover {
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .gtd-tree-selected > .gtd-tree-header {
    background: rgba(var(--bs-primary-rgb), 0.25);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-timeline-alternating {
        padding-left: 2rem;
    }

    .gtd-timeline-alternating::before {
        left: 0.5rem;
        transform: none;
    }

    .gtd-timeline-alternating .gtd-timeline-item,
    .gtd-timeline-alternating .gtd-timeline-item:nth-child(even) {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }

    .gtd-timeline-alternating .gtd-timeline-marker,
    .gtd-timeline-alternating .gtd-timeline-item:nth-child(even) .gtd-timeline-marker {
        left: -1.75rem;
        right: auto;
    }

    .gtd-avatar-stack-lg .gtd-avatar-stack-item {
        width: 2.5rem;
        height: 2.5rem;
        margin-left: -0.75rem;
    }

    .gtd-tree-header {
        padding-left: calc(0.25rem + var(--tree-level, 0) * 1rem);
    }
}

/* ============================================================================
   KANBAN - Kanban board with draggable cards
   ============================================================================ */
.gtd-kanban {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 0;
    min-height: 400px;
}

.gtd-kanban-column {
    flex: 0 0 280px;
    min-width: 280px;
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-lg);
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.gtd-kanban-column-header {
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gtd-kanban-column-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
}

.gtd-kanban-column-count {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}

.gtd-kanban-cards {
    flex: 1;
    padding: 0.75rem;
    overflow-y: auto;
    min-height: 100px;
}

.gtd-kanban-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gtd-kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.gtd-kanban-card:active {
    cursor: grabbing;
}

.gtd-kanban-card-title {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.gtd-kanban-card-desc {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.gtd-kanban-card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.gtd-kanban-label {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    background: var(--bs-primary);
    color: #fff;
}

.gtd-kanban-dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

.gtd-kanban-placeholder {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border: 2px dashed var(--bs-primary);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-kanban-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .gtd-kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   CALENDAR PICKER - Simple calendar/date picker grid
   ============================================================================ */
.gtd-calendar-picker {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1rem;
    width: fit-content;
    min-width: 280px;
}

.gtd-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gtd-calendar-title {
    font-weight: 600;
    font-size: 1rem;
}

.gtd-calendar-nav {
    background: none;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color 0.15s ease;
}

.gtd-calendar-nav:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.gtd-calendar-grid.gtd-calendar-with-weeks {
    grid-template-columns: auto repeat(7, 1fr);
}

.gtd-calendar-day-header {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding: 0.5rem 0;
}

.gtd-calendar-week-num {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: center;
    padding: 0.5rem 0.25rem;
}

.gtd-calendar-day {
    text-align: center;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
    transition: all 0.15s ease;
    font-size: 0.875rem;
}

.gtd-calendar-day:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-calendar-other-month {
    color: var(--bs-secondary-color);
    opacity: 0.5;
}

.gtd-calendar-today {
    font-weight: 600;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-calendar-selected {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

.gtd-calendar-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-calendar-picker {
    background: var(--bs-tertiary-bg);
}

/* ============================================================================
   CHIPS - Removable chip/badge group
   ============================================================================ */
.gtd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.gtd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.gtd-chip:hover {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary);
}

.gtd-chip-selected {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.gtd-chip-remove:hover {
    opacity: 1;
}

.gtd-chip-selected .gtd-chip-remove {
    color: #fff;
}

.gtd-chip-removing {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

/* Color variants */
.gtd-chip-primary {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.gtd-chip-success {
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: var(--bs-success);
    color: var(--bs-success);
}

.gtd-chip-warning {
    background: rgba(var(--bs-warning-rgb), 0.1);
    border-color: var(--bs-warning);
    color: var(--bs-warning);
}

.gtd-chip-danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.gtd-chip-info {
    background: rgba(var(--bs-info-rgb), 0.1);
    border-color: var(--bs-info);
    color: var(--bs-info);
}

/* ============================================================================
   SPLIT BUTTON - Dropdown split button component
   ============================================================================ */
.gtd-split-button {
    display: inline-flex;
    position: relative;
}

.gtd-split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.gtd-split-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.375rem 0.5rem;
}

.gtd-split-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1050;
    min-width: 160px;
    padding: 0.25rem 0;
}

.gtd-split-dropdown-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 2px;
}

.gtd-split-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.gtd-split-item:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-split-item-danger {
    color: var(--bs-danger);
}

.gtd-split-item-danger:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
}

.gtd-split-divider {
    height: 0;
    margin: 0.25rem 0;
    border-top: 1px solid var(--bs-border-color);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-split-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   FLOATING LABEL - Floating label input fields
   ============================================================================ */
.gtd-floating-label {
    position: relative;
}

.gtd-floating-label input,
.gtd-floating-label textarea,
.gtd-floating-label select {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.gtd-floating-label label {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    background: transparent;
    padding: 0 0.25rem;
}

.gtd-floating-label textarea ~ label {
    top: 1rem;
    transform: none;
}

.gtd-floating-focused label,
.gtd-floating-filled label {
    top: 0.25rem;
    transform: none;
    font-size: 0.75rem;
    color: var(--bs-primary);
}

.gtd-floating-focused input,
.gtd-floating-focused textarea,
.gtd-floating-focused select {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

/* With background variation */
.gtd-floating-label-filled input,
.gtd-floating-label-filled textarea,
.gtd-floating-label-filled select {
    background: var(--bs-tertiary-bg);
    border-color: transparent;
}

.gtd-floating-label-filled.gtd-floating-focused input,
.gtd-floating-label-filled.gtd-floating-focused textarea,
.gtd-floating-label-filled.gtd-floating-focused select {
    background: var(--bs-body-bg);
    border-color: var(--bs-primary);
}

/* ============================================================================
   IMAGE COMPARE - Before/after image comparison slider
   ============================================================================ */
.gtd-image-compare {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

.gtd-image-compare-vertical {
    cursor: ns-resize;
}

.gtd-image-compare img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.gtd-compare-before,
.gtd-compare-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gtd-compare-after {
    position: relative;
}

.gtd-compare-before {
    z-index: 1;
}

.gtd-compare-slider {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-image-compare-horizontal .gtd-compare-slider {
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
}

.gtd-image-compare-vertical .gtd-compare-slider {
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
}

.gtd-compare-handle {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: grab;
    color: var(--bs-gray-600);
    font-size: 0.875rem;
}

.gtd-compare-handle:active {
    cursor: grabbing;
}

.gtd-compare-dragging .gtd-compare-handle {
    transform: scale(1.1);
}

.gtd-compare-label {
    position: absolute;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    border-radius: var(--bs-border-radius);
    z-index: 5;
}

.gtd-compare-label-before {
    left: 0.5rem;
    top: 0.5rem;
}

.gtd-compare-label-after {
    right: 0.5rem;
    top: 0.5rem;
}

.gtd-image-compare-vertical .gtd-compare-label-before {
    left: 0.5rem;
    top: 0.5rem;
}

.gtd-image-compare-vertical .gtd-compare-label-after {
    left: 0.5rem;
    bottom: 0.5rem;
    top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-kanban {
        padding: 0.5rem 0;
    }

    .gtd-kanban-column {
        flex: 0 0 260px;
        min-width: 260px;
    }

    .gtd-calendar-picker {
        min-width: auto;
        width: 100%;
    }

    .gtd-calendar-day {
        padding: 0.375rem;
    }

    .gtd-compare-handle {
        width: 2rem;
        height: 2rem;
    }
}

/* ============================================================================
   STATUS INDICATOR - Online/offline/busy status dots
   ============================================================================ */
.gtd-status-indicator {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--bs-secondary);
    vertical-align: middle;
}

.gtd-status-online {
    background: var(--bs-success);
}

.gtd-status-offline {
    background: var(--bs-secondary);
}

.gtd-status-busy {
    background: var(--bs-danger);
}

.gtd-status-away {
    background: var(--bs-warning);
}

.gtd-status-dnd {
    background: var(--bs-danger);
    position: relative;
}

.gtd-status-dnd::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
}

/* Size variants */
.gtd-status-sm {
    width: 0.5rem;
    height: 0.5rem;
}

.gtd-status-lg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Pulse animation */
.gtd-status-pulse {
    animation: gtd-status-pulse 2s ease-in-out infinite;
}

@keyframes gtd-status-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 4px currentColor;
        opacity: 0.6;
    }
}

.gtd-status-online.gtd-status-pulse {
    color: var(--bs-success);
}

.gtd-status-busy.gtd-status-pulse,
.gtd-status-dnd.gtd-status-pulse {
    color: var(--bs-danger);
}

.gtd-status-away.gtd-status-pulse {
    color: var(--bs-warning);
}

/* ============================================================================
   PROGRESS STEPS - Multi-step progress indicator
   ============================================================================ */
.gtd-progress-steps {
    display: flex;
    align-items: flex-start;
    counter-reset: step;
}

.gtd-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 0.5rem;
}

.gtd-step-marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    z-index: 1;
    transition: all 0.3s ease;
}

.gtd-step-content {
    text-align: center;
    margin-top: 0.75rem;
}

.gtd-step-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-step-description {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

.gtd-step-connector {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--bs-border-color);
    z-index: 0;
}

.gtd-step-connector-completed {
    background: var(--bs-primary);
}

/* Step states */
.gtd-step-completed .gtd-step-marker {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-step-active .gtd-step-marker {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-step-pending .gtd-step-marker {
    opacity: 0.6;
}

/* Vertical variant */
.gtd-progress-steps-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.gtd-progress-steps-vertical .gtd-step {
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    margin-bottom: 1.5rem;
}

.gtd-progress-steps-vertical .gtd-step-content {
    text-align: left;
    margin-top: 0;
    margin-left: 1rem;
}

.gtd-progress-steps-vertical .gtd-step-connector {
    top: 2.5rem;
    left: 1.25rem;
    width: 2px;
    height: calc(100% + 1.5rem);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-step-marker {
    background: var(--bs-tertiary-bg);
}

/* ============================================================================
   BREADCRUMB NAV - Enhanced breadcrumb navigation with dropdowns
   ============================================================================ */
.gtd-breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gtd-breadcrumb-item {
    position: relative;
    display: flex;
    align-items: center;
}

.gtd-breadcrumb-item + .gtd-breadcrumb-item::before {
    content: '/';
    padding: 0 0.5rem;
    color: var(--bs-secondary-color);
}

.gtd-breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.gtd-breadcrumb-item a:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumb-item-active span {
    color: var(--bs-body-color);
    font-weight: 500;
}

/* Ellipsis dropdown */
.gtd-breadcrumb-ellipsis {
    position: relative;
}

.gtd-breadcrumb-ellipsis-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color 0.15s ease;
}

.gtd-breadcrumb-ellipsis-btn:hover {
    background: var(--bs-tertiary-bg);
}

.gtd-breadcrumb-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    z-index: 1050;
    min-width: 150px;
    padding: 0.25rem 0;
}

.gtd-breadcrumb-ellipsis-open .gtd-breadcrumb-dropdown,
.gtd-breadcrumb-item-open .gtd-breadcrumb-dropdown {
    display: block;
}

.gtd-breadcrumb-dropdown-item {
    display: block;
    padding: 0.375rem 0.75rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.gtd-breadcrumb-dropdown-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-breadcrumb-dropdown {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   NUMBER COUNTER - Animated number counter
   ============================================================================ */
.gtd-number-counter {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================================
   PRICE DISPLAY - Formatted price display with currency
   ============================================================================ */
.gtd-price-display {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.gtd-price-currency {
    font-size: 0.875em;
}

.gtd-price-integer {
    font-weight: 600;
}

.gtd-price-decimal,
.gtd-price-fraction {
    font-size: 0.75em;
    opacity: 0.8;
}

.gtd-price-original {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
    font-size: 0.875em;
    margin-right: 0.25rem;
}

.gtd-price-savings {
    background: var(--bs-success);
    color: #fff;
    font-size: 0.75em;
    padding: 0.125rem 0.375rem;
    border-radius: var(--bs-border-radius-sm);
    font-weight: 500;
    margin-left: 0.25rem;
}

/* ============================================================================
   ACTION BAR - Floating action bar for batch operations
   ============================================================================ */
.gtd-action-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1040;
    transition: transform 0.3s ease;
}

.gtd-action-bar-bottom {
    bottom: 1.5rem;
}

.gtd-action-bar-top {
    top: 1.5rem;
    bottom: auto;
    transform: translateX(-50%) translateY(-100%);
}

.gtd-action-bar-visible {
    transform: translateX(-50%) translateY(0);
}

.gtd-action-bar-top.gtd-action-bar-visible {
    transform: translateX(-50%) translateY(0);
}

.gtd-action-bar-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.gtd-action-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-action-bar-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--bs-border-color);
}

[data-action-bar-close] {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

[data-action-bar-close]:hover {
    opacity: 1;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-action-bar {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-progress-steps {
        flex-direction: column;
    }

    .gtd-step {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        padding: 0;
        margin-bottom: 1rem;
    }

    .gtd-step-content {
        text-align: left;
        margin-top: 0;
        margin-left: 1rem;
    }

    .gtd-step-connector {
        top: 2.5rem;
        left: 1.25rem;
        width: 2px;
        height: calc(100% + 1rem);
    }

    .gtd-step-marker {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .gtd-action-bar {
        left: 1rem;
        right: 1rem;
        transform: translateX(0) translateY(100%);
        width: auto;
    }

    .gtd-action-bar-visible {
        transform: translateX(0) translateY(0);
    }

    .gtd-action-bar-top {
        transform: translateX(0) translateY(-100%);
    }

    .gtd-action-bar-top.gtd-action-bar-visible {
        transform: translateX(0) translateY(0);
    }
}

/* ==========================================================================
   Data Card - Enhanced data display card
   ========================================================================== */

.gtd-data-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.gtd-data-card:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

.gtd-data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-data-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

.gtd-data-card-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin: 0.25rem 0 0;
}

.gtd-data-card-actions {
    display: flex;
    gap: 0.25rem;
}

.gtd-data-card-action {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-data-card-action:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.gtd-data-card-body {
    padding: 1.25rem;
}

.gtd-data-card-footer {
    padding: 1rem 1.25rem;
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

.gtd-data-card-collapsed .gtd-data-card-header {
    border-bottom: none;
}

.gtd-data-card-loading {
    position: relative;
    pointer-events: none;
}

.gtd-data-card-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-data-card-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: 0;
    overflow: auto;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-data-card {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .gtd-data-card:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gtd-data-card-loading::after {
    background: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Quick Stats - Summary statistics widget
   ========================================================================== */

.gtd-quick-stats {
    display: flex;
    gap: 1.5rem;
}

.gtd-quick-stats-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.gtd-quick-stats-vertical {
    flex-direction: column;
}

.gtd-stat-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    flex: 1;
    min-width: 150px;
}

.gtd-stat-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border-radius: 0.5rem;
    font-size: 1.25rem;
}

.gtd-stat-primary .gtd-stat-icon {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.gtd-stat-success .gtd-stat-icon {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.gtd-stat-warning .gtd-stat-icon {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
}

.gtd-stat-danger .gtd-stat-icon {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.gtd-stat-info .gtd-stat-icon {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
}

.gtd-stat-content {
    flex: 1;
}

.gtd-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gtd-stat-label {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

.gtd-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}

.gtd-trend-up {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.gtd-trend-down {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.gtd-trend-neutral {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-quick-stats-horizontal {
        flex-direction: column;
    }

    .gtd-stat-item {
        min-width: 100%;
    }
}

/* ==========================================================================
   Feature Badge - Feature flag badges
   ========================================================================== */

.gtd-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 0.25rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.gtd-feature-badge-icon {
    font-size: 0.625rem;
}

.gtd-feature-badge-dismiss {
    margin-left: 0.25rem;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    line-height: 1;
}

.gtd-feature-badge-dismiss:hover {
    opacity: 1;
}

.gtd-feature-badge-dismissing {
    opacity: 0;
    transform: scale(0.8);
}

/* Size variants */
.gtd-feature-badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

.gtd-feature-badge-lg {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* Type variants */
.gtd-feature-badge-default {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.gtd-feature-badge-new {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.gtd-feature-badge-beta {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
}

.gtd-feature-badge-pro {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}

.gtd-feature-badge-deprecated {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.gtd-feature-badge-coming {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
}

.gtd-feature-badge-success {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.gtd-feature-badge-warning {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
}

.gtd-feature-badge-danger {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

/* ==========================================================================
   Empty Message - Empty state messaging
   ========================================================================== */

.gtd-empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
}

.gtd-empty-message-sm {
    padding: 2rem 1.5rem;
}

.gtd-empty-message-lg {
    padding: 4rem 2rem;
}

.gtd-empty-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.gtd-empty-message-sm .gtd-empty-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
}

.gtd-empty-message-lg .gtd-empty-icon {
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
}

.gtd-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 0.5rem;
}

.gtd-empty-text {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin: 0 0 1.5rem;
    max-width: 400px;
}

.gtd-empty-action {
    margin-top: 0;
}

/* ==========================================================================
   Loading Spinner - Loading indicators
   ========================================================================== */

.gtd-loading-spinner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.gtd-spinner-text {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.gtd-spinner {
    display: inline-block;
}

/* Border spinner */
.gtd-spinner-border {
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gtd-spin 0.75s linear infinite;
}

/* Grow spinner */
.gtd-spinner-grow {
    width: 2rem;
    height: 2rem;
    background: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: gtd-grow 0.75s linear infinite;
}

/* Pulse spinner */
.gtd-spinner-pulse {
    width: 2rem;
    height: 2rem;
    background: currentColor;
    border-radius: 50%;
    animation: gtd-pulse 1s ease-in-out infinite;
}

/* Dots spinner */
.gtd-spinner-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.gtd-spinner-dots span {
    width: 0.5rem;
    height: 0.5rem;
    background: currentColor;
    border-radius: 50%;
    animation: gtd-bounce 0.6s ease-in-out infinite;
}

.gtd-spinner-dots span:nth-child(2) {
    animation-delay: 0.1s;
}

.gtd-spinner-dots span:nth-child(3) {
    animation-delay: 0.2s;
}

/* Bars spinner */
.gtd-spinner-bars {
    display: inline-flex;
    gap: 0.125rem;
    height: 2rem;
    align-items: center;
}

.gtd-spinner-bars span {
    width: 0.25rem;
    height: 100%;
    background: currentColor;
    border-radius: 0.125rem;
    animation: gtd-bars 1s ease-in-out infinite;
}

.gtd-spinner-bars span:nth-child(2) {
    animation-delay: 0.1s;
}

.gtd-spinner-bars span:nth-child(3) {
    animation-delay: 0.2s;
}

.gtd-spinner-bars span:nth-child(4) {
    animation-delay: 0.3s;
}

/* Size variants */
.gtd-spinner-sm .gtd-spinner-border,
.gtd-spinner-sm .gtd-spinner-grow,
.gtd-spinner-sm .gtd-spinner-pulse {
    width: 1rem;
    height: 1rem;
}

.gtd-spinner-sm .gtd-spinner-border {
    border-width: 0.15rem;
}

.gtd-spinner-sm .gtd-spinner-dots span {
    width: 0.375rem;
    height: 0.375rem;
}

.gtd-spinner-sm .gtd-spinner-bars {
    height: 1rem;
}

.gtd-spinner-lg .gtd-spinner-border,
.gtd-spinner-lg .gtd-spinner-grow,
.gtd-spinner-lg .gtd-spinner-pulse {
    width: 3rem;
    height: 3rem;
}

.gtd-spinner-lg .gtd-spinner-border {
    border-width: 0.25rem;
}

.gtd-spinner-lg .gtd-spinner-dots span {
    width: 0.75rem;
    height: 0.75rem;
}

.gtd-spinner-lg .gtd-spinner-bars {
    height: 3rem;
}

/* Color variants */
.gtd-spinner-primary {
    color: var(--bs-primary);
}

.gtd-spinner-secondary {
    color: var(--bs-secondary);
}

.gtd-spinner-success {
    color: var(--bs-success);
}

.gtd-spinner-danger {
    color: var(--bs-danger);
}

.gtd-spinner-warning {
    color: var(--bs-warning);
}

.gtd-spinner-info {
    color: var(--bs-info);
}

.gtd-spinner-light {
    color: var(--bs-light);
}

/* Loading overlay */
.gtd-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.gtd-loading-overlay-visible {
    opacity: 1;
    visibility: visible;
}

[data-bs-theme="dark"] .gtd-loading-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Animations */
@keyframes gtd-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes gtd-grow {
    0%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes gtd-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

@keyframes gtd-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100%);
    }
}

@keyframes gtd-bars {
    0%, 100% {
        transform: scaleY(0.5);
    }
    50% {
        transform: scaleY(1);
    }
}

/* ==========================================================================
   Alert Banner - Dismissible alert banners
   ========================================================================== */

.gtd-alert-banner-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 600px;
    padding: 0 1rem;
    pointer-events: none;
}

.gtd-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.gtd-alert-banner-floating {
    transform: translateY(-1rem);
    opacity: 0;
    transition: all 0.3s ease;
}

.gtd-alert-banner-visible {
    transform: translateY(0);
    opacity: 1;
}

.gtd-alert-banner-dismissing {
    transform: translateY(-1rem);
    opacity: 0;
}

.gtd-alert-banner-bottom {
    transform: translateY(1rem);
}

.gtd-alert-banner-bottom.gtd-alert-banner-visible {
    transform: translateY(0);
}

.gtd-alert-banner-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.5;
}

.gtd-alert-banner-content {
    flex: 1;
    min-width: 0;
}

.gtd-alert-banner-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-alert-banner-message {
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-alert-banner-action {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-alert-banner-action:hover {
    background: currentColor;
    color: white;
}

.gtd-alert-banner-dismiss {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.gtd-alert-banner-dismiss:hover {
    opacity: 1;
}

/* Type variants */
.gtd-alert-banner-success {
    border-left: 4px solid var(--bs-success);
}

.gtd-alert-banner-success .gtd-alert-banner-icon {
    color: var(--bs-success);
}

.gtd-alert-banner-success .gtd-alert-banner-action {
    color: var(--bs-success);
}

.gtd-alert-banner-warning {
    border-left: 4px solid var(--bs-warning);
}

.gtd-alert-banner-warning .gtd-alert-banner-icon {
    color: var(--bs-warning);
}

.gtd-alert-banner-warning .gtd-alert-banner-action {
    color: var(--bs-warning);
}

.gtd-alert-banner-danger {
    border-left: 4px solid var(--bs-danger);
}

.gtd-alert-banner-danger .gtd-alert-banner-icon {
    color: var(--bs-danger);
}

.gtd-alert-banner-danger .gtd-alert-banner-action {
    color: var(--bs-danger);
}

.gtd-alert-banner-info {
    border-left: 4px solid var(--bs-info);
}

.gtd-alert-banner-info .gtd-alert-banner-icon {
    color: var(--bs-info);
}

.gtd-alert-banner-info .gtd-alert-banner-action {
    color: var(--bs-info);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-alert-banner {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-alert-banner-container {
        top: 0.5rem;
        padding: 0 0.5rem;
    }

    .gtd-alert-banner {
        padding: 0.75rem 1rem;
    }

    .gtd-alert-banner-action {
        display: none;
    }
}

/* ==========================================================================
   Segmented Control - Segmented button control
   ========================================================================== */

.gtd-segmented-control {
    display: inline-flex;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.gtd-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.gtd-segment:hover {
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

.gtd-segment-active {
    color: var(--bs-primary);
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gtd-segment-active:hover {
    color: var(--bs-primary);
}

.gtd-segment i {
    font-size: 0.875em;
}

/* Size variants */
.gtd-segmented-sm .gtd-segment {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.gtd-segmented-lg .gtd-segment {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}

/* Block variant */
.gtd-segmented-block {
    display: flex;
    width: 100%;
}

.gtd-segmented-block .gtd-segment {
    flex: 1;
}

/* ==========================================================================
   Inline Edit - Inline text editing
   ========================================================================== */

.gtd-inline-edit {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px dashed transparent;
}

.gtd-inline-edit:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.gtd-inline-edit:focus {
    outline: none;
    border-color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.gtd-inline-edit-placeholder {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.gtd-inline-edit-editing {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border-color: transparent;
}

.gtd-inline-edit-input {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bs-primary);
    border-radius: 0.375rem;
    font: inherit;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    min-width: 150px;
}

.gtd-inline-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-inline-edit-input.gtd-inline-edit-error {
    border-color: var(--bs-danger);
}

.gtd-inline-edit-actions {
    display: flex;
    gap: 0.25rem;
}

.gtd-inline-edit-save,
.gtd-inline-edit-cancel {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-inline-edit-save {
    background: var(--bs-success);
    color: white;
}

.gtd-inline-edit-save:hover {
    background: var(--bs-success-text-emphasis);
}

.gtd-inline-edit-cancel {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.gtd-inline-edit-cancel:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.gtd-inline-edit-saving {
    opacity: 0.6;
    pointer-events: none;
}

/* ==========================================================================
   Copy Code - Code block with copy button
   ========================================================================== */

.gtd-copy-code {
    position: relative;
}

.gtd-copy-code-wrapper {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-copy-code-header {
    display: flex;
    align-items: center;
}

.gtd-copy-code-lang {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.gtd-copy-code-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-copy-code-btn:hover {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-primary);
}

.gtd-copy-code-copied {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: white;
}

.gtd-copy-code-copied:hover {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: white;
}

/* ==========================================================================
   Media Object - Media object pattern
   ========================================================================== */

.gtd-media-object {
    display: flex;
    gap: 1rem;
}

.gtd-media-reverse {
    flex-direction: row-reverse;
}

.gtd-media-align-top {
    align-items: flex-start;
}

.gtd-media-align-center {
    align-items: center;
}

.gtd-media-align-bottom {
    align-items: flex-end;
}

.gtd-media-image {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.gtd-media-sm .gtd-media-image {
    width: 2.5rem;
    height: 2.5rem;
}

.gtd-media-lg .gtd-media-image {
    width: 6rem;
    height: 6rem;
}

.gtd-media-xl .gtd-media-image {
    width: 8rem;
    height: 8rem;
}

.gtd-media-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.5rem;
}

.gtd-media-body {
    flex: 1;
    min-width: 0;
}

.gtd-media-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 0.25rem;
}

.gtd-media-content {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Stacked variant for responsive */
@media (max-width: 576px) {
    .gtd-media-stacked {
        flex-direction: column;
        align-items: flex-start;
    }

    .gtd-media-stacked.gtd-media-reverse {
        flex-direction: column;
    }
}

/* ==========================================================================
   Collapsible Panel - Collapsible panel/section
   ========================================================================== */

.gtd-collapsible-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bs-tertiary-bg);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.gtd-panel-header:hover {
    background: var(--bs-secondary-bg);
}

.gtd-panel-header:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.gtd-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

.gtd-panel-icon {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    transition: transform 0.3s ease;
}

.gtd-panel-collapsed .gtd-panel-icon {
    transform: rotate(-90deg);
}

.gtd-panel-body {
    padding: 1.25rem;
    overflow: hidden;
}

.gtd-collapsible-animated .gtd-panel-body {
    transition: height 0.3s ease;
}

.gtd-panel-collapsed .gtd-panel-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* Borderless variant */
.gtd-panel-borderless {
    border: none;
}

.gtd-panel-borderless .gtd-panel-header {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.gtd-panel-borderless .gtd-panel-body {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   Image Upload - Drag and drop image upload
   ========================================================================== */

.gtd-image-upload {
    width: 100%;
}

.gtd-upload-dropzone {
    position: relative;
    padding: 2rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-upload-dropzone:hover {
    border-color: var(--bs-primary);
    background: var(--bs-body-bg);
}

.gtd-upload-dragover {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.gtd-upload-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.gtd-upload-content {
    pointer-events: none;
}

.gtd-upload-icon {
    font-size: 3rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

.gtd-upload-dragover .gtd-upload-icon {
    color: var(--bs-primary);
}

.gtd-upload-text {
    font-size: 1rem;
    color: var(--bs-body-color);
    margin: 0 0 0.5rem;
}

.gtd-upload-browse {
    color: var(--bs-primary);
    cursor: pointer;
    pointer-events: auto;
}

.gtd-upload-browse:hover {
    text-decoration: underline;
}

.gtd-upload-hint {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin: 0;
}

.gtd-upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.gtd-upload-preview:empty {
    display: none;
}

.gtd-upload-item {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.gtd-upload-item:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.gtd-upload-removing {
    opacity: 0;
    transform: scale(0.9);
}

.gtd-upload-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.gtd-upload-info {
    padding: 0.5rem;
}

.gtd-upload-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-upload-size {
    font-size: 0.625rem;
    color: var(--bs-secondary-color);
}

.gtd-upload-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-upload-item:hover .gtd-upload-remove {
    opacity: 1;
}

.gtd-upload-remove:hover {
    background: var(--bs-danger);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-upload-dropzone {
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .gtd-upload-dropzone:hover {
    background: var(--bs-tertiary-bg);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-upload-preview {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* ==========================================================================
   Confirm Button - Button with confirmation dialog
   ========================================================================== */

.gtd-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gtd-confirm-visible {
    opacity: 1;
    visibility: visible;
}

.gtd-confirm-dialog {
    background: var(--bs-body-bg);
    border-radius: 0.75rem;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s ease;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}

.gtd-confirm-visible .gtd-confirm-dialog {
    transform: scale(1);
}

.gtd-confirm-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
}

.gtd-confirm-icon-danger {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.gtd-confirm-icon-warning {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
}

.gtd-confirm-icon-info {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
}

.gtd-confirm-icon-success {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.gtd-confirm-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 0.5rem;
}

.gtd-confirm-message {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin: 0 0 1.5rem;
}

.gtd-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.gtd-confirm-actions .btn {
    min-width: 100px;
}

/* ==========================================================================
   Favorite Toggle - Favorite/unfavorite toggle
   ========================================================================== */

.gtd-favorite-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1.25rem;
}

.gtd-favorite-toggle:hover {
    color: var(--bs-danger);
    transform: scale(1.1);
}

.gtd-favorite-active {
    color: var(--bs-danger);
}

.gtd-favorite-animating {
    animation: gtd-favorite-pop 0.3s ease;
}

@keyframes gtd-favorite-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   Text Highlight - Text highlighting
   ========================================================================== */

.gtd-highlight {
    background: #fef3cd;
    color: inherit;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
}

[data-bs-theme="dark"] .gtd-highlight {
    background: #664d03;
    color: #fff3cd;
}

.gtd-highlight-current {
    background: #f59e0b;
    color: white;
}

/* ==========================================================================
   Slide Toggle - Slide toggle switch
   ========================================================================== */

.gtd-slide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.gtd-slide-toggle-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-slide-toggle-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.gtd-slide-toggle-track {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background: var(--bs-secondary-bg);
    border-radius: 1rem;
    transition: background 0.2s ease;
}

.gtd-slide-toggle-checked .gtd-slide-toggle-track {
    background: var(--bs-primary);
}

.gtd-slide-toggle-thumb {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.gtd-slide-toggle-checked .gtd-slide-toggle-thumb {
    transform: translateX(1.5rem);
}

.gtd-slide-toggle-labels {
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-slide-toggle-on,
.gtd-slide-toggle-off {
    display: none;
}

.gtd-slide-toggle-checked .gtd-slide-toggle-on {
    display: inline;
}

.gtd-slide-toggle:not(.gtd-slide-toggle-checked) .gtd-slide-toggle-off {
    display: inline;
}

/* Size variants */
.gtd-slide-toggle-sm .gtd-slide-toggle-track {
    width: 2.25rem;
    height: 1.125rem;
}

.gtd-slide-toggle-sm .gtd-slide-toggle-thumb {
    width: 0.875rem;
    height: 0.875rem;
}

.gtd-slide-toggle-sm.gtd-slide-toggle-checked .gtd-slide-toggle-thumb {
    transform: translateX(1.125rem);
}

.gtd-slide-toggle-lg .gtd-slide-toggle-track {
    width: 4rem;
    height: 2rem;
}

.gtd-slide-toggle-lg .gtd-slide-toggle-thumb {
    width: 1.75rem;
    height: 1.75rem;
}

.gtd-slide-toggle-lg.gtd-slide-toggle-checked .gtd-slide-toggle-thumb {
    transform: translateX(2rem);
}

/* ==========================================================================
   Character Limit - Character limit indicator
   ========================================================================== */

.gtd-character-limit-wrapper {
    position: relative;
}

.gtd-character-counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

.gtd-counter-warning {
    color: var(--bs-warning);
}

.gtd-counter-danger {
    color: var(--bs-danger);
}

/* ==========================================================================
   Link Preview - Link preview card
   ========================================================================== */

.gtd-link-preview-trigger {
    cursor: pointer;
}

.gtd-link-preview {
    position: fixed;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-width: 350px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gtd-link-preview-visible {
    opacity: 1;
    transform: translateY(0);
}

.gtd-link-preview-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.gtd-link-preview-content {
    padding: 1rem;
}

.gtd-link-preview-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-link-preview-description {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtd-link-preview-url {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtd-link-preview-url i {
    font-size: 0.625rem;
}

/* Card variant (for static embedding) */
.gtd-link-preview-card {
    display: flex;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.gtd-link-preview-card:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

.gtd-link-preview-card .gtd-link-preview-image {
    width: 120px;
    height: auto;
    min-height: 100px;
    flex-shrink: 0;
}

.gtd-link-preview-card .gtd-link-preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gtd-link-preview-card .gtd-link-preview-url {
    color: var(--bs-primary);
    text-decoration: none;
}

.gtd-link-preview-card .gtd-link-preview-url:hover {
    text-decoration: underline;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-link-preview {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-link-preview-card {
        flex-direction: column;
    }

    .gtd-link-preview-card .gtd-link-preview-image {
        width: 100%;
        height: 150px;
    }
}

/* ============================================
   SCROLL PROGRESS
   Page scroll progress indicator
   ============================================ */

.gtd-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--gtd-progress-height, 4px);
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.gtd-scroll-progress-bar {
    height: 100%;
    width: 0;
    background: var(--gtd-progress-color, var(--bs-primary));
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* Gradient variant */
.gtd-scroll-progress-gradient .gtd-scroll-progress-bar {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info), var(--bs-success));
}

/* Glow variant */
.gtd-scroll-progress-glow .gtd-scroll-progress-bar {
    box-shadow: 0 0 10px var(--gtd-progress-color, var(--bs-primary)),
                0 0 5px var(--gtd-progress-color, var(--bs-primary));
}

/* Bottom position */
.gtd-scroll-progress-bottom {
    top: auto;
    bottom: 0;
}

.gtd-scroll-progress-bottom .gtd-scroll-progress-bar {
    border-radius: 2px 2px 0 0;
}

/* Slim variant */
.gtd-scroll-progress-slim {
    height: 2px;
}

/* Thick variant */
.gtd-scroll-progress-thick {
    height: 6px;
}

/* With track background */
.gtd-scroll-progress-track {
    background: var(--bs-border-color);
}

/* Animated stripe effect */
.gtd-scroll-progress-striped .gtd-scroll-progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: gtd-progress-stripes 1s linear infinite;
}

@keyframes gtd-progress-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

/* Pulse animation on scroll */
.gtd-scroll-progress-pulse .gtd-scroll-progress-bar {
    animation: gtd-progress-pulse 2s ease-in-out infinite;
}

@keyframes gtd-progress-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Inline variant (for sections) */
.gtd-scroll-progress-inline {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--bs-border-color);
    overflow: hidden;
}

.gtd-scroll-progress-inline .gtd-scroll-progress-bar {
    border-radius: 4px;
}

/* Progress label */
.gtd-scroll-progress-label {
    position: fixed;
    top: calc(var(--gtd-progress-height, 4px) + 8px);
    right: 16px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-body-color);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.gtd-scroll-progress-label.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Color variants */
.gtd-scroll-progress-success .gtd-scroll-progress-bar {
    background: var(--bs-success);
}

.gtd-scroll-progress-warning .gtd-scroll-progress-bar {
    background: var(--bs-warning);
}

.gtd-scroll-progress-danger .gtd-scroll-progress-bar {
    background: var(--bs-danger);
}

.gtd-scroll-progress-info .gtd-scroll-progress-bar {
    background: var(--bs-info);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-scroll-progress-track {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .gtd-scroll-progress-label {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   FORM WIZARD
   Multi-step form wizard
   ============================================ */

.gtd-form-wizard {
    position: relative;
}

/* Navigation */
.gtd-wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0;
    list-style: none;
    position: relative;
}

.gtd-wizard-nav::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--bs-border-color);
    z-index: 0;
}

.gtd-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.gtd-wizard-marker {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.gtd-wizard-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-align: center;
    transition: color 0.3s ease;
}

.gtd-wizard-subtitle {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: center;
    margin-top: 0.25rem;
}

/* Active state */
.gtd-wizard-step.active .gtd-wizard-marker {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}

.gtd-wizard-step.active .gtd-wizard-title {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Completed state */
.gtd-wizard-step.completed .gtd-wizard-marker {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.gtd-wizard-step.completed .gtd-wizard-marker::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.gtd-wizard-step.completed .gtd-wizard-title {
    color: var(--bs-success);
}

/* Error state */
.gtd-wizard-step.error .gtd-wizard-marker {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

.gtd-wizard-step.error .gtd-wizard-title {
    color: var(--bs-danger);
}

/* Progress line between steps */
.gtd-wizard-step.completed::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--bs-success);
    z-index: -1;
}

.gtd-wizard-step:last-child::after {
    display: none;
}

/* Content panels */
.gtd-wizard-content {
    position: relative;
    overflow: hidden;
}

.gtd-wizard-panel {
    display: none;
    animation: gtd-wizard-fade-in 0.3s ease;
}

.gtd-wizard-panel.active {
    display: block;
}

@keyframes gtd-wizard-fade-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Actions */
.gtd-wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-wizard-prev,
.gtd-wizard-next {
    min-width: 120px;
}

.gtd-wizard-prev:disabled,
.gtd-wizard-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Compact variant */
.gtd-wizard-compact .gtd-wizard-marker {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

.gtd-wizard-compact .gtd-wizard-nav::before {
    top: 16px;
}

.gtd-wizard-compact .gtd-wizard-step.completed::after {
    top: 16px;
}

/* Vertical variant */
.gtd-wizard-vertical .gtd-wizard-nav {
    flex-direction: column;
    align-items: flex-start;
    margin-right: 2rem;
    margin-bottom: 0;
}

.gtd-wizard-vertical .gtd-wizard-nav::before {
    top: 40px;
    bottom: 40px;
    left: 24px;
    right: auto;
    width: 2px;
    height: auto;
}

.gtd-wizard-vertical .gtd-wizard-step {
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.5rem;
}

.gtd-wizard-vertical .gtd-wizard-step:last-child {
    margin-bottom: 0;
}

.gtd-wizard-vertical .gtd-wizard-marker {
    margin-bottom: 0;
    margin-right: 1rem;
}

.gtd-wizard-vertical .gtd-wizard-title {
    text-align: left;
}

.gtd-wizard-vertical .gtd-wizard-step.completed::after {
    top: 50%;
    left: 24px;
    width: 2px;
    height: 100%;
    transform: translateY(50%);
}

/* Numbered variant shows numbers on completed steps */
.gtd-wizard-numbered .gtd-wizard-step.completed .gtd-wizard-marker::after {
    content: none;
}

/* Progress bar under nav */
.gtd-wizard-progress {
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.gtd-wizard-progress-bar {
    height: 100%;
    background: var(--bs-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Card style wizard */
.gtd-wizard-card .gtd-wizard-step {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0 0.5rem;
}

.gtd-wizard-card .gtd-wizard-step.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-wizard-card .gtd-wizard-nav::before {
    display: none;
}

.gtd-wizard-card .gtd-wizard-step.completed::after {
    display: none;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-wizard-marker {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-wizard-card .gtd-wizard-step {
    background: var(--bs-gray-800);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-wizard-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .gtd-wizard-nav::before {
        left: 20px;
        right: 20px;
    }

    .gtd-wizard-step {
        min-width: 80px;
        flex: 0 0 auto;
    }

    .gtd-wizard-marker {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .gtd-wizard-title {
        font-size: 0.75rem;
    }

    .gtd-wizard-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .gtd-wizard-prev,
    .gtd-wizard-next {
        width: 100%;
    }

    .gtd-wizard-vertical {
        flex-direction: column;
    }

    .gtd-wizard-vertical .gtd-wizard-nav {
        margin-right: 0;
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   CONTEXT TOOLTIP
   Context-aware tooltips
   ============================================ */

.gtd-context-tooltip {
    position: absolute;
    z-index: 10000;
    max-width: 300px;
    padding: 0.75rem 1rem;
    background: var(--bs-gray-900);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.gtd-context-tooltip.visible {
    opacity: 1;
    transform: scale(1);
}

/* Arrow */
.gtd-context-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Top position (arrow at bottom) */
.gtd-context-tooltip-top::before {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--bs-gray-900);
}

/* Bottom position (arrow at top) */
.gtd-context-tooltip-bottom::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--bs-gray-900);
}

/* Left position (arrow at right) */
.gtd-context-tooltip-left::before {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--bs-gray-900);
}

/* Right position (arrow at left) */
.gtd-context-tooltip-right::before {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--bs-gray-900);
}

/* Title within tooltip */
.gtd-context-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

/* Rich content tooltip */
.gtd-context-tooltip-rich {
    padding: 0;
    overflow: hidden;
}

.gtd-context-tooltip-rich .gtd-context-tooltip-header {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
}

.gtd-context-tooltip-rich .gtd-context-tooltip-body {
    padding: 0.75rem 1rem;
}

.gtd-context-tooltip-rich .gtd-context-tooltip-footer {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Light theme variant */
.gtd-context-tooltip-light {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.gtd-context-tooltip-light.gtd-context-tooltip-top::before {
    border-top-color: var(--bs-body-bg);
    bottom: -13px;
}

.gtd-context-tooltip-light.gtd-context-tooltip-bottom::before {
    border-bottom-color: var(--bs-body-bg);
    top: -13px;
}

.gtd-context-tooltip-light.gtd-context-tooltip-left::before {
    border-left-color: var(--bs-body-bg);
    right: -13px;
}

.gtd-context-tooltip-light.gtd-context-tooltip-right::before {
    border-right-color: var(--bs-body-bg);
    left: -13px;
}

/* Color variants */
.gtd-context-tooltip-primary {
    background: var(--bs-primary);
}

.gtd-context-tooltip-primary.gtd-context-tooltip-top::before {
    border-top-color: var(--bs-primary);
}

.gtd-context-tooltip-primary.gtd-context-tooltip-bottom::before {
    border-bottom-color: var(--bs-primary);
}

.gtd-context-tooltip-success {
    background: var(--bs-success);
}

.gtd-context-tooltip-success.gtd-context-tooltip-top::before {
    border-top-color: var(--bs-success);
}

.gtd-context-tooltip-success.gtd-context-tooltip-bottom::before {
    border-bottom-color: var(--bs-success);
}

.gtd-context-tooltip-warning {
    background: var(--bs-warning);
    color: var(--bs-gray-900);
}

.gtd-context-tooltip-warning.gtd-context-tooltip-top::before {
    border-top-color: var(--bs-warning);
}

.gtd-context-tooltip-warning.gtd-context-tooltip-bottom::before {
    border-bottom-color: var(--bs-warning);
}

.gtd-context-tooltip-danger {
    background: var(--bs-danger);
}

.gtd-context-tooltip-danger.gtd-context-tooltip-top::before {
    border-top-color: var(--bs-danger);
}

.gtd-context-tooltip-danger.gtd-context-tooltip-bottom::before {
    border-bottom-color: var(--bs-danger);
}

/* Interactive tooltip (allows clicking) */
.gtd-context-tooltip-interactive {
    pointer-events: auto;
}

.gtd-context-tooltip-interactive a {
    color: var(--bs-info-text);
    text-decoration: underline;
}

.gtd-context-tooltip-interactive a:hover {
    color: #fff;
}

/* Wide tooltip */
.gtd-context-tooltip-wide {
    max-width: 400px;
}

/* Compact tooltip */
.gtd-context-tooltip-compact {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    max-width: 200px;
}

/* No arrow variant */
.gtd-context-tooltip-no-arrow::before {
    display: none;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-context-tooltip-light {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-context-tooltip-light.gtd-context-tooltip-top::before {
    border-top-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-context-tooltip-light.gtd-context-tooltip-bottom::before {
    border-bottom-color: var(--bs-gray-800);
}

/* ============================================
   READING TIME
   Estimated reading time calculator
   ============================================ */

.gtd-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.gtd-reading-time-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

.gtd-reading-time-text {
    font-weight: 500;
}

.gtd-reading-time-detail {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    opacity: 0.8;
}

/* Badge variant */
.gtd-reading-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--bs-light);
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Card variant */
.gtd-reading-time-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bs-light);
    border-radius: 0.5rem;
}

.gtd-reading-time-card .gtd-reading-time-icon {
    width: 40px;
    height: 40px;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
}

.gtd-reading-time-card .gtd-reading-time-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.gtd-reading-time-card .gtd-reading-time-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Inline with progress */
.gtd-reading-time-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-reading-time-progress .gtd-reading-time-bar {
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    overflow: hidden;
}

.gtd-reading-time-progress .gtd-reading-time-fill {
    height: 100%;
    background: var(--bs-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Compact variant */
.gtd-reading-time-compact {
    font-size: 0.75rem;
    gap: 0.25rem;
}

.gtd-reading-time-compact .gtd-reading-time-icon {
    font-size: 0.75rem;
}

/* Minimal variant */
.gtd-reading-time-minimal {
    gap: 0.25rem;
}

.gtd-reading-time-minimal .gtd-reading-time-icon {
    display: none;
}

/* Color variants */
.gtd-reading-time-primary {
    color: var(--bs-primary);
}

.gtd-reading-time-success {
    color: var(--bs-success);
}

.gtd-reading-time-warning {
    color: var(--bs-warning);
}

.gtd-reading-time-info {
    color: var(--bs-info);
}

/* Position variants (for article headers) */
.gtd-reading-time-float {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Statistics display */
.gtd-reading-stats {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bs-light);
    border-radius: 0.5rem;
}

.gtd-reading-stat {
    text-align: center;
}

.gtd-reading-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1;
}

.gtd-reading-stat-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-reading-time-badge {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-reading-time-card {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-reading-stats {
    background: var(--bs-gray-800);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-reading-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gtd-reading-stat {
        flex: 0 0 auto;
        min-width: 80px;
    }
}

/* ============================================
   PILL NAV
   Pill navigation tabs
   ============================================ */

.gtd-pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gtd-pill-item {
    margin: 0;
}

.gtd-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-pill-link:hover {
    color: var(--bs-body-color);
    background: var(--bs-light);
}

.gtd-pill-link.active {
    color: #fff;
    background: var(--bs-primary);
}

.gtd-pill-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

/* Icon within pill */
.gtd-pill-link i {
    font-size: 0.875em;
}

/* Badge within pill */
.gtd-pill-link .badge {
    font-size: 0.6875rem;
    padding: 0.2em 0.5em;
}

/* Bordered variant */
.gtd-pill-nav-bordered .gtd-pill-link {
    border: 1px solid var(--bs-border-color);
}

.gtd-pill-nav-bordered .gtd-pill-link:hover {
    border-color: var(--bs-primary);
}

.gtd-pill-nav-bordered .gtd-pill-link.active {
    border-color: var(--bs-primary);
}

/* Filled variant */
.gtd-pill-nav-filled .gtd-pill-link {
    background: var(--bs-light);
}

.gtd-pill-nav-filled .gtd-pill-link:hover {
    background: var(--bs-gray-300);
}

.gtd-pill-nav-filled .gtd-pill-link.active {
    background: var(--bs-primary);
}

/* Underline variant */
.gtd-pill-nav-underline {
    gap: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-pill-nav-underline .gtd-pill-link {
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}

.gtd-pill-nav-underline .gtd-pill-link:hover {
    background: transparent;
    border-bottom-color: var(--bs-gray-400);
}

.gtd-pill-nav-underline .gtd-pill-link.active {
    background: transparent;
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

/* Compact variant */
.gtd-pill-nav-compact .gtd-pill-link {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

/* Large variant */
.gtd-pill-nav-lg .gtd-pill-link {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* Vertical layout */
.gtd-pill-nav-vertical {
    flex-direction: column;
    gap: 0.25rem;
}

.gtd-pill-nav-vertical .gtd-pill-link {
    width: 100%;
    justify-content: flex-start;
    border-radius: 0.5rem;
}

/* Justified (equal width pills) */
.gtd-pill-nav-justified {
    width: 100%;
}

.gtd-pill-nav-justified .gtd-pill-item {
    flex: 1;
}

.gtd-pill-nav-justified .gtd-pill-link {
    width: 100%;
    justify-content: center;
}

/* Color variants */
.gtd-pill-nav-success .gtd-pill-link.active {
    background: var(--bs-success);
}

.gtd-pill-nav-warning .gtd-pill-link.active {
    background: var(--bs-warning);
    color: var(--bs-gray-900);
}

.gtd-pill-nav-danger .gtd-pill-link.active {
    background: var(--bs-danger);
}

.gtd-pill-nav-info .gtd-pill-link.active {
    background: var(--bs-info);
}

/* Soft color variant */
.gtd-pill-nav-soft .gtd-pill-link.active {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* Content panels */
.gtd-pill-content {
    margin-top: 1rem;
}

.gtd-pill-pane {
    display: none;
    animation: gtd-pill-fade 0.2s ease;
}

.gtd-pill-pane.active {
    display: block;
}

@keyframes gtd-pill-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* With indicator line */
.gtd-pill-nav-indicator {
    position: relative;
}

.gtd-pill-nav-indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--bs-primary);
    transition: all 0.3s ease;
}

/* Card style */
.gtd-pill-nav-card {
    background: var(--bs-light);
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.gtd-pill-nav-card .gtd-pill-link {
    border-radius: 0.5rem;
}

.gtd-pill-nav-card .gtd-pill-link.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-pill-link:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-pill-nav-filled .gtd-pill-link {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-pill-nav-filled .gtd-pill-link:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-pill-nav-card {
    background: var(--bs-gray-800);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-pill-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }

    .gtd-pill-nav::-webkit-scrollbar {
        height: 4px;
    }

    .gtd-pill-nav::-webkit-scrollbar-thumb {
        background: var(--bs-border-color);
        border-radius: 2px;
    }

    .gtd-pill-item {
        flex-shrink: 0;
    }

    .gtd-pill-nav-vertical {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* ============================================
   PASSWORD TOGGLE
   Password visibility toggle
   ============================================ */

.gtd-password-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.gtd-password-wrapper .form-control {
    padding-right: 3rem;
}

.gtd-password-toggle {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: color 0.2s ease;
    border-radius: 0 0.375rem 0.375rem 0;
}

.gtd-password-toggle:hover {
    color: var(--bs-body-color);
}

.gtd-password-toggle:focus {
    outline: none;
    color: var(--bs-primary);
}

.gtd-password-toggle i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

/* Active state (password visible) */
.gtd-password-toggle.active {
    color: var(--bs-primary);
}

.gtd-password-toggle.active i {
    transform: scale(1.1);
}

/* Icon transition */
.gtd-password-toggle .fa-eye,
.gtd-password-toggle .fa-eye-slash {
    position: absolute;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.gtd-password-toggle .fa-eye-slash {
    opacity: 1;
}

.gtd-password-toggle .fa-eye {
    opacity: 0;
    transform: scale(0.8);
}

.gtd-password-toggle.active .fa-eye-slash {
    opacity: 0;
    transform: scale(0.8);
}

.gtd-password-toggle.active .fa-eye {
    opacity: 1;
    transform: scale(1);
}

/* Bordered variant (toggle outside input) */
.gtd-password-bordered .form-control {
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
    padding-right: 0.75rem;
}

.gtd-password-bordered .gtd-password-toggle {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    padding: 0 0.75rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0;
}

.gtd-password-bordered .gtd-password-toggle:hover {
    background: var(--bs-gray-200);
}

/* Input group integration */
.input-group .gtd-password-wrapper {
    flex: 1;
}

.input-group .gtd-password-wrapper .form-control {
    border-radius: 0;
}

.input-group > .gtd-password-wrapper:last-child .form-control {
    border-radius: 0 0.375rem 0.375rem 0;
}

/* Small variant */
.gtd-password-sm .form-control {
    padding-right: 2.5rem;
}

.gtd-password-sm .gtd-password-toggle {
    width: 2.25rem;
}

.gtd-password-sm .gtd-password-toggle i {
    font-size: 0.875rem;
}

/* Large variant */
.gtd-password-lg .form-control {
    padding-right: 3.5rem;
}

.gtd-password-lg .gtd-password-toggle {
    width: 3.25rem;
}

.gtd-password-lg .gtd-password-toggle i {
    font-size: 1.125rem;
}

/* With strength indicator */
.gtd-password-strength {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.gtd-password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.gtd-password-strength.weak .gtd-password-strength-bar:nth-child(1) {
    background: var(--bs-danger);
}

.gtd-password-strength.fair .gtd-password-strength-bar:nth-child(-n+2) {
    background: var(--bs-warning);
}

.gtd-password-strength.good .gtd-password-strength-bar:nth-child(-n+3) {
    background: var(--bs-info);
}

.gtd-password-strength.strong .gtd-password-strength-bar {
    background: var(--bs-success);
}

.gtd-password-strength-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
}

.gtd-password-strength.weak + .gtd-password-strength-label {
    color: var(--bs-danger);
}

.gtd-password-strength.fair + .gtd-password-strength-label {
    color: var(--bs-warning);
}

.gtd-password-strength.good + .gtd-password-strength-label {
    color: var(--bs-info);
}

.gtd-password-strength.strong + .gtd-password-strength-label {
    color: var(--bs-success);
}

/* Requirements list */
.gtd-password-requirements {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bs-light);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.gtd-password-requirement {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

.gtd-password-requirement:last-child {
    margin-bottom: 0;
}

.gtd-password-requirement i {
    font-size: 0.75rem;
    width: 1rem;
    text-align: center;
}

.gtd-password-requirement.met {
    color: var(--bs-success);
}

.gtd-password-requirement.met i {
    color: var(--bs-success);
}

/* Floating label integration */
.form-floating .gtd-password-wrapper {
    height: 100%;
}

.form-floating .gtd-password-wrapper .form-control {
    height: 100%;
}

/* Validation states */
.was-validated .gtd-password-wrapper .form-control:valid,
.gtd-password-wrapper .form-control.is-valid {
    padding-right: 4.125rem;
    background-position: right 2.75rem center;
}

.was-validated .gtd-password-wrapper .form-control:invalid,
.gtd-password-wrapper .form-control.is-invalid {
    padding-right: 4.125rem;
    background-position: right 2.75rem center;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-password-bordered .gtd-password-toggle {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-password-bordered .gtd-password-toggle:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-password-requirements {
    background: var(--bs-gray-800);
}

/* ============================================
   SORTABLE TABLE
   Client-side table sorting
   ============================================ */

.gtd-sortable-table {
    width: 100%;
}

.gtd-sortable-header {
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.gtd-sortable-header:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-sort-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.gtd-sortable-header:hover .gtd-sort-indicator {
    opacity: 0.8;
}

.gtd-sortable-header.gtd-sorted .gtd-sort-indicator {
    opacity: 1;
    color: var(--bs-primary);
}

.gtd-sort-indicator i {
    font-size: 0.75rem;
}

/* Active sort highlight */
.gtd-sortable-header.gtd-sorted {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

/* Striped rows after sort */
.gtd-sortable-table tbody tr:nth-child(even) {
    background: var(--bs-light);
}

/* Hover highlight */
.gtd-sortable-table tbody tr {
    transition: background 0.15s ease;
}

.gtd-sortable-table tbody tr:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

/* Compact variant */
.gtd-sortable-table-compact th,
.gtd-sortable-table-compact td {
    padding: 0.5rem 0.75rem;
}

/* Bordered variant */
.gtd-sortable-table-bordered {
    border: 1px solid var(--bs-border-color);
}

.gtd-sortable-table-bordered th,
.gtd-sortable-table-bordered td {
    border: 1px solid var(--bs-border-color);
}

/* No wrap variant */
.gtd-sortable-table-nowrap td {
    white-space: nowrap;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-sortable-table tbody tr:nth-child(even) {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-sortable-header:hover,
[data-bs-theme="dark"] .gtd-sortable-header.gtd-sorted {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

/* ============================================
   COLOR PICKER
   Color selection component
   ============================================ */

.gtd-color-picker {
    position: relative;
    display: inline-block;
}

.gtd-color-picker-wrapper {
    position: relative;
}

.gtd-color-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.gtd-color-picker-trigger:hover {
    border-color: var(--bs-primary);
}

.gtd-color-picker-trigger:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-color-picker-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.gtd-color-picker-value {
    font-family: monospace;
    color: var(--bs-body-color);
}

.gtd-color-picker-trigger i {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-left: 0.25rem;
}

.gtd-color-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 200px;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    display: none;
    margin-top: 0.25rem;
}

.gtd-color-picker-dropdown-open {
    display: block;
    animation: gtd-color-picker-show 0.15s ease;
}

@keyframes gtd-color-picker-show {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gtd-color-picker-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.gtd-color-picker-swatch {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.gtd-color-picker-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gtd-color-picker-swatch.selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.3);
}

.gtd-color-picker-custom {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-color-picker-native {
    width: 40px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.gtd-color-picker-native::-webkit-color-swatch-wrapper {
    padding: 0;
}

.gtd-color-picker-native::-webkit-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.gtd-color-picker-text {
    flex: 1;
    font-family: monospace;
}

/* Inline variant */
.gtd-color-picker-inline .gtd-color-picker-dropdown {
    position: relative;
    display: block;
    box-shadow: none;
    border: none;
    padding: 0;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-color-picker-dropdown {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

/* ============================================
   STAR RATING
   Interactive star rating component
   ============================================ */

.gtd-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-star-rating-stars {
    display: inline-flex;
    gap: 0.125rem;
}

.gtd-star {
    color: var(--bs-border-color);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1.25rem;
}

.gtd-star:hover {
    transform: scale(1.1);
}

.gtd-star-rating-readonly .gtd-star {
    cursor: default;
}

.gtd-star-rating-readonly .gtd-star:hover {
    transform: none;
}

.gtd-star-full {
    color: #FFC107;
}

.gtd-star-half {
    color: #FFC107;
}

.gtd-star-empty {
    color: var(--bs-border-color);
}

.gtd-star-preview {
    color: #FFDB70;
}

.gtd-star-rating-value {
    font-weight: 600;
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

/* Size variants */
.gtd-star-rating-sm .gtd-star {
    font-size: 1rem;
}

.gtd-star-rating-sm .gtd-star-rating-value {
    font-size: 0.8125rem;
}

.gtd-star-rating-lg .gtd-star {
    font-size: 1.5rem;
}

.gtd-star-rating-lg .gtd-star-rating-value {
    font-size: 1rem;
}

.gtd-star-rating-xl .gtd-star {
    font-size: 2rem;
}

/* Compact (no gap) */
.gtd-star-rating-compact .gtd-star-rating-stars {
    gap: 0;
}

/* With labels */
.gtd-star-rating-labeled {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.gtd-star-rating-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Color variants */
.gtd-star-rating-primary .gtd-star-full,
.gtd-star-rating-primary .gtd-star-half {
    color: var(--bs-primary);
}

.gtd-star-rating-danger .gtd-star-full,
.gtd-star-rating-danger .gtd-star-half {
    color: var(--bs-danger);
}

.gtd-star-rating-success .gtd-star-full,
.gtd-star-rating-success .gtd-star-half {
    color: var(--bs-success);
}

/* Heart variant */
.gtd-star-rating-hearts .gtd-star i::before {
    content: '\f004';
}

.gtd-star-rating-hearts .gtd-star-full,
.gtd-star-rating-hearts .gtd-star-half {
    color: var(--bs-danger);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-star-empty {
    color: var(--bs-gray-600);
}

/* ============================================
   QUICK ACTION
   Quick action floating buttons
   ============================================ */

.gtd-quick-action {
    position: fixed;
    z-index: 1040;
}

.gtd-quick-action-bottom-right {
    bottom: 1.5rem;
    right: 1.5rem;
}

.gtd-quick-action-bottom-left {
    bottom: 1.5rem;
    left: 1.5rem;
}

.gtd-quick-action-top-right {
    top: 1.5rem;
    right: 1.5rem;
}

.gtd-quick-action-top-left {
    top: 1.5rem;
    left: 1.5rem;
}

.gtd-quick-action-trigger {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.gtd-quick-action-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.5);
}

.gtd-quick-action-expanded .gtd-quick-action-trigger {
    transform: rotate(45deg);
}

.gtd-quick-action-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.gtd-quick-action-item:hover {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Expanded state - bottom right */
.gtd-quick-action-bottom-right .gtd-quick-action-item {
    bottom: 0;
    right: 0;
}

.gtd-quick-action-expanded.gtd-quick-action-bottom-right .gtd-quick-action-item {
    opacity: 1;
    transform: scale(1);
}

.gtd-quick-action-expanded.gtd-quick-action-bottom-right .gtd-quick-action-item:nth-child(1) {
    transform: translateY(-70px);
}

.gtd-quick-action-expanded.gtd-quick-action-bottom-right .gtd-quick-action-item:nth-child(2) {
    transform: translate(-50px, -50px);
}

.gtd-quick-action-expanded.gtd-quick-action-bottom-right .gtd-quick-action-item:nth-child(3) {
    transform: translateX(-70px);
}

.gtd-quick-action-expanded.gtd-quick-action-bottom-right .gtd-quick-action-item:nth-child(4) {
    transform: translateY(-140px);
}

/* Backdrop */
.gtd-quick-action-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.gtd-quick-action-expanded .gtd-quick-action-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Tooltips for action items */
.gtd-quick-action-item[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-900);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.gtd-quick-action-item:hover[data-tooltip]::before {
    opacity: 1;
}

/* Color variants */
.gtd-quick-action-success .gtd-quick-action-trigger {
    background: var(--bs-success);
    box-shadow: 0 4px 12px rgba(var(--bs-success-rgb), 0.4);
}

.gtd-quick-action-danger .gtd-quick-action-trigger {
    background: var(--bs-danger);
    box-shadow: 0 4px 12px rgba(var(--bs-danger-rgb), 0.4);
}

/* Small variant */
.gtd-quick-action-sm .gtd-quick-action-trigger {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.gtd-quick-action-sm .gtd-quick-action-item {
    width: 38px;
    height: 38px;
    font-size: 0.875rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-quick-action-item {
    background: var(--bs-gray-800);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-quick-action-bottom-right,
    .gtd-quick-action-bottom-left {
        bottom: 1rem;
    }

    .gtd-quick-action-bottom-right {
        right: 1rem;
    }

    .gtd-quick-action-bottom-left {
        left: 1rem;
    }
}

/* ============================================
   DATA EXPORT
   Export table/data to various formats
   ============================================ */

.gtd-export-button {
    position: relative;
}

.gtd-export-button.gtd-exporting {
    pointer-events: none;
    opacity: 0.7;
}

.gtd-export-button.gtd-exporting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gtd-export-spin 0.75s linear infinite;
}

@keyframes gtd-export-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Export toolbar */
.gtd-export-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gtd-export-toolbar .gtd-export-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Export dropdown */
.gtd-export-dropdown {
    position: relative;
    display: inline-block;
}

.gtd-export-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 150px;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
}

.gtd-export-dropdown.open .gtd-export-dropdown-menu {
    display: block;
}

.gtd-export-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
}

.gtd-export-dropdown-item:hover {
    background: var(--bs-light);
}

.gtd-export-dropdown-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* File type icons */
.gtd-export-csv i { color: #28A745; }
.gtd-export-json i { color: #FFC107; }
.gtd-export-excel i { color: #217346; }
.gtd-export-print i { color: var(--bs-secondary-color); }

/* Dark Mode */
[data-bs-theme="dark"] .gtd-export-dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-export-dropdown-item:hover {
    background: var(--bs-gray-800);
}

/* ============================================
   SHARE MENU
   Social sharing dropdown menu
   ============================================ */

.gtd-share-menu {
    position: relative;
    display: inline-block;
}

.gtd-share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-share-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 180px;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.gtd-share-menu-open .gtd-share-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-share-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: all 0.15s ease;
}

.gtd-share-item:hover {
    background: var(--bs-light);
    color: var(--bs-body-color);
}

.gtd-share-item i {
    font-size: 1.125rem;
    width: 1.5rem;
    text-align: center;
}

/* Service-specific colors */
.gtd-share-item .fa-facebook-f { color: #1877F2; }
.gtd-share-item .fa-x-twitter { color: #000; }
.gtd-share-item .fa-linkedin-in { color: #0A66C2; }
.gtd-share-item .fa-whatsapp { color: #25D366; }
.gtd-share-item .fa-envelope { color: var(--bs-secondary-color); }
.gtd-share-item .fa-link { color: var(--bs-primary); }

/* Right-aligned dropdown */
.gtd-share-menu-right .gtd-share-dropdown {
    left: auto;
    right: 0;
}

/* Top positioned (dropup) */
.gtd-share-menu-up .gtd-share-dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
    transform: translateY(8px);
}

.gtd-share-menu-up.gtd-share-menu-open .gtd-share-dropdown {
    transform: translateY(0);
}

/* Inline variant (always visible) */
.gtd-share-menu-inline .gtd-share-trigger {
    display: none;
}

.gtd-share-menu-inline .gtd-share-dropdown {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}

.gtd-share-menu-inline .gtd-share-item {
    width: auto;
    padding: 0.5rem;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
}

.gtd-share-menu-inline .gtd-share-item span {
    display: none;
}

.gtd-share-menu-inline .gtd-share-item:hover {
    border-color: currentColor;
}

/* Icon only variant */
.gtd-share-menu-icons .gtd-share-item span {
    display: none;
}

.gtd-share-menu-icons .gtd-share-dropdown {
    min-width: auto;
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
}

.gtd-share-menu-icons .gtd-share-item {
    padding: 0.5rem;
    border-radius: 0.375rem;
}

/* Large icons */
.gtd-share-menu-lg .gtd-share-item i {
    font-size: 1.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-share-dropdown {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-share-item:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-share-item .fa-x-twitter {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-share-dropdown {
        position: fixed;
        left: 1rem !important;
        right: 1rem;
        bottom: 1rem;
        top: auto !important;
        width: auto;
        border-radius: 0.75rem;
    }

    .gtd-share-menu-open .gtd-share-dropdown {
        transform: translateY(0);
    }
}

/* ============================================
   RANGE INPUT
   Enhanced range input with value display
   ============================================ */

.gtd-range-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.gtd-range-input {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(
        to right,
        var(--bs-primary) 0%,
        var(--bs-primary) var(--range-fill, 50%),
        var(--bs-border-color) var(--range-fill, 50%),
        var(--bs-border-color) 100%
    );
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.gtd-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.gtd-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.gtd-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.gtd-range-min,
.gtd-range-max {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    min-width: 40px;
    text-align: center;
}

.gtd-range-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
    min-width: 60px;
    text-align: right;
    padding: 0.25rem 0.5rem;
    background: var(--bs-light);
    border-radius: 0.25rem;
}

.gtd-range-tooltip {
    position: absolute;
    top: -32px;
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-900);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

.gtd-range-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--bs-gray-900);
}

/* Vertical variant */
.gtd-range-wrapper-vertical {
    flex-direction: column;
    height: 200px;
    width: auto;
}

.gtd-range-wrapper-vertical .gtd-range-input {
    writing-mode: vertical-lr;
    direction: rtl;
    height: auto;
    width: 8px;
}

/* Color variants */
.gtd-range-success .gtd-range-input {
    background: linear-gradient(
        to right,
        var(--bs-success) 0%,
        var(--bs-success) var(--range-fill, 50%),
        var(--bs-border-color) var(--range-fill, 50%),
        var(--bs-border-color) 100%
    );
}

.gtd-range-success .gtd-range-input::-webkit-slider-thumb {
    border-color: var(--bs-success);
}

.gtd-range-danger .gtd-range-input {
    background: linear-gradient(
        to right,
        var(--bs-danger) 0%,
        var(--bs-danger) var(--range-fill, 50%),
        var(--bs-border-color) var(--range-fill, 50%),
        var(--bs-border-color) 100%
    );
}

.gtd-range-danger .gtd-range-input::-webkit-slider-thumb {
    border-color: var(--bs-danger);
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-range-input {
    background: linear-gradient(
        to right,
        var(--bs-primary) 0%,
        var(--bs-primary) var(--range-fill, 50%),
        var(--bs-gray-700) var(--range-fill, 50%),
        var(--bs-gray-700) 100%
    );
}

[data-bs-theme="dark"] .gtd-range-value {
    background: var(--bs-gray-800);
}

/* ============================================
   DROPZONE
   Drag and drop file upload zone
   ============================================ */

.gtd-dropzone {
    position: relative;
    padding: 2rem;
    background: var(--bs-light);
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-dropzone:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-dropzone-dragover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    transform: scale(1.01);
}

.gtd-dropzone-inner {
    pointer-events: none;
}

.gtd-dropzone-icon {
    font-size: 3rem;
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

.gtd-dropzone-text {
    margin-bottom: 0.5rem;
}

.gtd-dropzone-primary {
    display: block;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.25rem;
}

.gtd-dropzone-secondary {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.gtd-dropzone-browse {
    color: var(--bs-primary);
    text-decoration: underline;
}

.gtd-dropzone-hint {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.gtd-dropzone-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gtd-dropzone-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-dropzone-has-files .gtd-dropzone-inner {
    display: none;
}

.gtd-dropzone-has-files {
    padding: 1rem;
    text-align: left;
}

.gtd-dropzone-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    width: calc(50% - 0.375rem);
    min-width: 200px;
}

.gtd-dropzone-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.gtd-dropzone-file-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-light);
    border-radius: 0.375rem;
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.gtd-dropzone-item-info {
    flex: 1;
    min-width: 0;
}

.gtd-dropzone-item-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-dropzone-item-size {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.gtd-dropzone-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.gtd-dropzone-remove:hover {
    background: var(--bs-danger);
    color: #fff;
}

/* Compact variant */
.gtd-dropzone-compact {
    padding: 1rem;
}

.gtd-dropzone-compact .gtd-dropzone-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-dropzone {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-dropzone-item {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-dropzone-file-icon {
    background: var(--bs-gray-700);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-dropzone-item {
        width: 100%;
    }
}

/* ============================================
   IMAGE CAROUSEL
   Image carousel/slider
   ============================================ */

.gtd-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.gtd-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.gtd-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.gtd-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.gtd-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    color: var(--bs-body-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    opacity: 0;
    transition: all 0.2s ease;
}

.gtd-carousel:hover .gtd-carousel-arrow {
    opacity: 1;
}

.gtd-carousel-arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gtd-carousel-prev {
    left: 1rem;
}

.gtd-carousel-next {
    right: 1rem;
}

.gtd-carousel-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.gtd-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.gtd-carousel-dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* Thumbnails variant */
.gtd-carousel-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
}

.gtd-carousel-thumb {
    width: 60px;
    height: 45px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    border: 2px solid transparent;
}

.gtd-carousel-thumb:hover,
.gtd-carousel-thumb.active {
    opacity: 1;
    border-color: var(--bs-primary);
}

/* Fade effect */
.gtd-carousel-fade .gtd-carousel-track {
    display: block;
}

.gtd-carousel-fade .gtd-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gtd-carousel-fade .gtd-carousel-slide.active {
    position: relative;
    opacity: 1;
}

/* Full width variant */
.gtd-carousel-fullwidth {
    border-radius: 0;
    margin: 0 -1rem;
}

/* Counter */
.gtd-carousel-counter {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 1rem;
    z-index: 10;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-carousel-arrow {
    background: rgba(var(--bs-gray-800-rgb), 0.9);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .gtd-carousel-arrow:hover {
    background: var(--bs-gray-800);
}

/* ============================================
   STEP PROGRESS
   Step progress indicator
   ============================================ */

.gtd-step-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gtd-step-line {
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    z-index: 0;
}

.gtd-step-line-fill {
    height: 100%;
    width: 0;
    background: var(--bs-success);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.gtd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0 0.5rem;
}

.gtd-step-marker {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--bs-body-bg);
    border: 3px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-secondary-color);
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.gtd-step-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-align: center;
    transition: color 0.3s ease;
}

.gtd-step-description {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: center;
    margin-top: 0.25rem;
}

/* Current state */
.gtd-step-current .gtd-step-marker {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}

.gtd-step-current .gtd-step-title {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Completed state */
.gtd-step-completed .gtd-step-marker {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.gtd-step-completed .gtd-step-title {
    color: var(--bs-success);
}

/* Pending state */
.gtd-step-pending .gtd-step-marker {
    background: var(--bs-body-bg);
}

/* Vertical variant */
.gtd-step-progress-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.gtd-step-progress-vertical .gtd-step {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.gtd-step-progress-vertical .gtd-step:last-child {
    margin-bottom: 0;
}

.gtd-step-progress-vertical .gtd-step-marker {
    margin-bottom: 0;
    margin-right: 1rem;
}

.gtd-step-progress-vertical .gtd-step-line {
    top: 20px;
    bottom: 20px;
    left: 18px;
    right: auto;
    width: 4px;
    height: auto;
}

.gtd-step-progress-vertical .gtd-step-line-fill {
    width: 100%;
    height: 0;
}

/* Compact variant */
.gtd-step-progress-compact .gtd-step-marker {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

.gtd-step-progress-compact .gtd-step-line {
    top: 14px;
}

.gtd-step-progress-compact .gtd-step-title {
    font-size: 0.75rem;
}

/* Numbers hidden variant */
.gtd-step-progress-dots .gtd-step-marker {
    width: 16px;
    height: 16px;
    font-size: 0;
}

.gtd-step-progress-dots .gtd-step-line {
    top: 8px;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-step-marker {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-step-pending .gtd-step-marker {
    background: var(--bs-gray-800);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-step-title {
        display: none;
    }

    .gtd-step-progress:not(.gtd-step-progress-vertical) {
        padding: 0 1rem;
    }

    .gtd-step-line {
        left: 20px;
        right: 20px;
    }
}

/* ============================================
   AVATAR UPLOAD
   Avatar upload with preview
   ============================================ */

.gtd-avatar-upload {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    cursor: pointer;
}

.gtd-avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--bs-light);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--bs-secondary-color);
    border: 3px solid var(--bs-border-color);
    transition: all 0.2s ease;
}

.gtd-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #fff;
    font-size: 0.875rem;
}

.gtd-avatar-overlay i {
    font-size: 1.5rem;
}

.gtd-avatar-upload:hover .gtd-avatar-overlay {
    opacity: 1;
}

.gtd-avatar-upload:hover .gtd-avatar-preview {
    border-color: var(--bs-primary);
}

.gtd-avatar-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gtd-avatar-actions {
    position: absolute;
    bottom: -8px;
    right: -8px;
}

.gtd-avatar-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-danger);
    color: #fff;
    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.gtd-avatar-remove:hover {
    background: var(--bs-danger);
    transform: scale(1.1);
}

.gtd-avatar-dragover .gtd-avatar-preview {
    border-color: var(--bs-primary);
    border-style: dashed;
}

/* Size variants */
.gtd-avatar-upload-sm {
    width: 80px;
    height: 80px;
}

.gtd-avatar-upload-sm .gtd-avatar-preview {
    font-size: 1.5rem;
}

.gtd-avatar-upload-lg {
    width: 160px;
    height: 160px;
}

.gtd-avatar-upload-lg .gtd-avatar-preview {
    font-size: 3rem;
}

/* Square variant */
.gtd-avatar-upload-square .gtd-avatar-preview,
.gtd-avatar-upload-square .gtd-avatar-overlay {
    border-radius: 0.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-avatar-preview {
    background-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-avatar-remove {
    border-color: var(--bs-gray-900);
}

/* ============================================
   SEARCH INPUT
   Enhanced search input with clear and suggestions
   ============================================ */

.gtd-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gtd-search-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
    z-index: 1;
}

.gtd-search-input {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.gtd-search-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-search-input::placeholder {
    color: var(--bs-secondary-color);
}

.gtd-search-clear {
    position: absolute;
    right: 0.625rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-light);
    border: none;
    border-radius: 50%;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.gtd-search-clear:hover {
    background: var(--bs-danger);
    color: #fff;
}

.gtd-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    margin-top: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.gtd-search-suggestions.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-search-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-search-suggestion:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.gtd-search-suggestion:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.gtd-search-suggestion:hover,
.gtd-search-suggestion.selected {
    background: var(--bs-light);
}

.gtd-search-suggestion i {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    width: 1.25rem;
    text-align: center;
}

.gtd-search-suggestion span {
    flex: 1;
    font-size: 0.875rem;
}

.gtd-search-suggestion small {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Compact variant */
.gtd-search-compact .gtd-search-input {
    padding: 0.5rem 2rem;
    font-size: 0.8125rem;
}

.gtd-search-compact .gtd-search-icon {
    left: 0.75rem;
    font-size: 0.75rem;
}

.gtd-search-compact .gtd-search-clear {
    right: 0.5rem;
    width: 20px;
    height: 20px;
    font-size: 0.625rem;
}

/* Large variant */
.gtd-search-lg .gtd-search-input {
    padding: 0.875rem 3rem;
    font-size: 1rem;
}

.gtd-search-lg .gtd-search-icon {
    left: 1rem;
    font-size: 1.125rem;
}

/* Square variant */
.gtd-search-square .gtd-search-input {
    border-radius: 0.375rem;
}

/* Loading state */
.gtd-search-loading .gtd-search-icon i {
    animation: gtd-search-spin 1s linear infinite;
}

@keyframes gtd-search-spin {
    to {
        transform: rotate(360deg);
    }
}

/* No results */
.gtd-search-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-search-suggestions {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-search-suggestion:hover,
[data-bs-theme="dark"] .gtd-search-suggestion.selected {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-search-clear {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Menu Toggle - Mobile menu toggle with hamburger animation
   ========================================================================== */

.gtd-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.gtd-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gtd-hamburger span:nth-child(1) {
    transform: translateY(-6px);
}

.gtd-hamburger span:nth-child(3) {
    transform: translateY(6px);
}

/* Open state - X animation */
.gtd-menu-open .gtd-hamburger span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.gtd-menu-open .gtd-hamburger span:nth-child(2) {
    opacity: 0;
}

.gtd-menu-open .gtd-hamburger span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

/* Menu toggle button styling */
[data-menu-toggle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: color 0.2s ease;
}

[data-menu-toggle]:hover {
    color: var(--bs-primary);
}

/* Target menu styles */
.gtd-menu-target {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: var(--bs-body-bg);
    z-index: 1050;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.gtd-menu-target.gtd-menu-active {
    transform: translateX(280px);
}

/* Right-side menu */
.gtd-menu-target.gtd-menu-right {
    left: auto;
    right: -280px;
}

.gtd-menu-target.gtd-menu-right.gtd-menu-active {
    transform: translateX(-280px);
}

/* Full-width menu */
.gtd-menu-target.gtd-menu-full {
    left: 0;
    width: 100%;
    transform: translateY(-100%);
}

.gtd-menu-target.gtd-menu-full.gtd-menu-active {
    transform: translateY(0);
}

/* Body scroll lock */
.gtd-menu-body-open {
    overflow: hidden;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-menu-target {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Side Nav - Side navigation with nested menus
   ========================================================================== */

.gtd-sidenav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-sidenav-item {
    position: relative;
}

.gtd-sidenav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}

.gtd-sidenav-link:hover {
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
}

.gtd-sidenav-link.gtd-active {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-left-color: var(--bs-primary);
}

.gtd-sidenav-link i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.7;
}

.gtd-sidenav-link:hover i,
.gtd-sidenav-link.gtd-active i {
    opacity: 1;
}

/* Arrow icon */
.gtd-sidenav-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.gtd-sidenav-item.gtd-expanded > .gtd-sidenav-link .gtd-sidenav-arrow {
    transform: rotate(180deg);
}

/* Submenu */
.gtd-sidenav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background-color: var(--bs-gray-50);
}

.gtd-sidenav-submenu .gtd-sidenav-link {
    padding-left: 2.75rem;
    font-size: 0.875rem;
}

.gtd-sidenav-submenu .gtd-sidenav-submenu .gtd-sidenav-link {
    padding-left: 4rem;
}

/* Badge */
.gtd-sidenav-badge {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 9999px;
    background: var(--bs-primary);
    color: white;
}

.gtd-sidenav-link .gtd-sidenav-arrow + .gtd-sidenav-badge {
    margin-left: 0.5rem;
}

/* Section header */
.gtd-sidenav-header {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

/* Divider */
.gtd-sidenav-divider {
    height: 1px;
    margin: 0.5rem 1rem;
    background: var(--bs-border-color);
}

/* Compact variant */
.gtd-sidenav-compact .gtd-sidenav-link {
    padding: 0.5rem 1rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-sidenav-link:hover {
    background-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-sidenav-submenu {
    background-color: var(--bs-gray-900);
}

/* ==========================================================================
   Breadcrumb Builder - Dynamic breadcrumb generator
   ========================================================================== */

.gtd-breadcrumb-builder {
    padding: 0.5rem 0;
}

.gtd-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.875rem;
}

.gtd-breadcrumb-item {
    display: flex;
    align-items: center;
}

.gtd-breadcrumb-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gtd-breadcrumb-link:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumb-link i {
    margin-right: 0.25rem;
    font-size: 0.75rem;
}

.gtd-breadcrumb-text {
    color: var(--bs-body-color);
    font-weight: 500;
}

.gtd-breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

/* Active item */
.gtd-breadcrumb-item.gtd-active .gtd-breadcrumb-text {
    color: var(--bs-body-color);
}

/* Size variants */
.gtd-breadcrumb-sm .gtd-breadcrumb-list {
    font-size: 0.75rem;
}

.gtd-breadcrumb-lg .gtd-breadcrumb-list {
    font-size: 1rem;
}

/* Style variants */
.gtd-breadcrumb-arrows .gtd-breadcrumb-separator {
    font-family: inherit;
}

.gtd-breadcrumb-arrows .gtd-breadcrumb-separator::before {
    content: '›';
    font-size: 1.125em;
}

.gtd-breadcrumb-dots .gtd-breadcrumb-separator::before {
    content: '•';
}

/* Background variant */
.gtd-breadcrumb-bg .gtd-breadcrumb-list {
    background: var(--bs-gray-100);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-breadcrumb-list {
        font-size: 0.75rem;
    }

    .gtd-breadcrumb-separator {
        margin: 0 0.375rem;
    }
}

/* ==========================================================================
   Form Repeater - Repeatable form field groups
   ========================================================================== */

.gtd-form-repeater {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gtd-repeater-item {
    position: relative;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.gtd-repeater-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Remove animation */
.gtd-repeater-item.gtd-repeater-removing {
    transform: translateX(-20px);
    opacity: 0;
}

/* Item header */
.gtd-repeater-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-repeater-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

.gtd-repeater-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
}

/* Action buttons */
.gtd-repeater-actions {
    display: flex;
    gap: 0.5rem;
}

.gtd-repeater-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.875rem;
    background: var(--bs-gray-100);
    border: none;
    border-radius: 0.375rem;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gtd-repeater-btn:hover {
    background: var(--bs-gray-200);
}

.gtd-repeater-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-repeater-remove] {
    color: var(--bs-danger);
}

[data-repeater-remove]:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
}

/* Add button */
[data-repeater-add] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Drag handle */
.gtd-repeater-drag {
    cursor: grab;
    color: var(--bs-secondary-color);
}

.gtd-repeater-drag:active {
    cursor: grabbing;
}

/* Card variant */
.gtd-repeater-card .gtd-repeater-item {
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Inline variant */
.gtd-repeater-inline .gtd-repeater-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-repeater-item {
    background: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-repeater-btn {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-repeater-btn:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Number Stepper - Number input with increment/decrement
   ========================================================================== */

.gtd-number-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-number-stepper input {
    width: 60px;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border: none;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    -moz-appearance: textfield;
}

.gtd-number-stepper input::-webkit-outer-spin-button,
.gtd-number-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gtd-number-stepper input:focus {
    outline: none;
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    font-size: 0.875rem;
    background: var(--bs-gray-100);
    border: none;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
}

.gtd-stepper-btn:hover:not(:disabled) {
    background: var(--bs-gray-200);
    color: var(--bs-primary);
}

.gtd-stepper-btn:active:not(:disabled) {
    background: var(--bs-gray-300);
}

.gtd-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gtd-stepper-decrement {
    border-right: 1px solid var(--bs-border-color);
}

.gtd-stepper-increment {
    border-left: 1px solid var(--bs-border-color);
}

/* Size variants */
.gtd-number-stepper-sm input {
    width: 50px;
    padding: 0.375rem;
    font-size: 0.875rem;
}

.gtd-number-stepper-sm .gtd-stepper-btn {
    width: 32px;
    font-size: 0.75rem;
}

.gtd-number-stepper-lg input {
    width: 80px;
    padding: 0.75rem;
    font-size: 1.125rem;
}

.gtd-number-stepper-lg .gtd-stepper-btn {
    width: 48px;
    font-size: 1rem;
}

/* Vertical variant */
.gtd-number-stepper-vertical {
    flex-direction: column;
    width: fit-content;
}

.gtd-number-stepper-vertical input {
    width: 60px;
    order: 1;
}

.gtd-number-stepper-vertical .gtd-stepper-increment {
    order: 0;
    width: 100%;
    height: 28px;
    border-left: none;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-number-stepper-vertical .gtd-stepper-decrement {
    order: 2;
    width: 100%;
    height: 28px;
    border-right: none;
    border-top: 1px solid var(--bs-border-color);
}

/* Rounded variant */
.gtd-number-stepper-rounded {
    border-radius: 9999px;
}

.gtd-number-stepper-rounded .gtd-stepper-decrement {
    border-radius: 9999px 0 0 9999px;
}

.gtd-number-stepper-rounded .gtd-stepper-increment {
    border-radius: 0 9999px 9999px 0;
}

/* Primary color variant */
.gtd-number-stepper-primary .gtd-stepper-btn {
    background: var(--bs-primary);
    color: white;
}

.gtd-number-stepper-primary .gtd-stepper-btn:hover:not(:disabled) {
    background: var(--bs-primary-dark, #0056b3);
    color: white;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-number-stepper {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-stepper-btn {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-stepper-btn:hover:not(:disabled) {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Token Input - Token-based input for tags/emails
   ========================================================================== */

.gtd-token-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    cursor: text;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gtd-token-input:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-token-list {
    display: contents;
}

.gtd-token {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
    color: var(--bs-body-color);
    animation: gtd-token-appear 0.2s ease;
}

@keyframes gtd-token-appear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gtd-token-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtd-token-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: 0.625rem;
    background: var(--bs-gray-300);
    border: none;
    border-radius: 50%;
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gtd-token-remove:hover {
    background: var(--bs-danger);
    color: white;
}

.gtd-token-field {
    flex: 1;
    min-width: 80px;
    padding: 0.25rem;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    outline: none;
    color: var(--bs-body-color);
}

.gtd-token-field::placeholder {
    color: var(--bs-secondary-color);
}

/* Error shake animation */
.gtd-token-error {
    animation: gtd-token-shake 0.3s ease;
}

@keyframes gtd-token-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Color variants */
.gtd-token-primary .gtd-token {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.gtd-token-primary .gtd-token-remove {
    background: var(--bs-primary);
    color: white;
}

/* Email validation style */
.gtd-token-email .gtd-token {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

.gtd-token-email .gtd-token-text::before {
    content: '\f0e0';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    margin-right: 0.375rem;
    font-size: 0.75rem;
}

/* Tag style */
.gtd-token-tags .gtd-token {
    background: var(--bs-primary);
    color: white;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
}

.gtd-token-tags .gtd-token-remove {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.gtd-token-tags .gtd-token-remove:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Size variants */
.gtd-token-input-sm {
    min-height: 36px;
    padding: 0.25rem 0.5rem;
    gap: 0.25rem;
}

.gtd-token-input-sm .gtd-token {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.gtd-token-input-sm .gtd-token-field {
    font-size: 0.75rem;
}

.gtd-token-input-lg {
    min-height: 52px;
    padding: 0.5rem 1rem;
}

.gtd-token-input-lg .gtd-token {
    padding: 0.375rem 0.625rem;
    font-size: 1rem;
}

.gtd-token-input-lg .gtd-token-field {
    font-size: 1rem;
}

/* Readonly state */
.gtd-token-input-readonly {
    background: var(--bs-gray-100);
    cursor: default;
}

.gtd-token-input-readonly .gtd-token-remove {
    display: none;
}

.gtd-token-input-readonly .gtd-token-field {
    display: none;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-token-input {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-token {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-token-remove {
    background: var(--bs-gray-600);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-token-input-readonly {
    background: var(--bs-gray-900);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-token-text {
        max-width: 100px;
    }
}

/* ==========================================================================
   Inline Expand - Expandable content sections
   ========================================================================== */

[data-inline-expand] {
    position: relative;
}

.gtd-inline-expand-wrapper {
    position: relative;
    overflow: hidden;
}

.gtd-inline-expand-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gtd-inline-expand-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.gtd-inline-expand-toggle:hover {
    color: var(--bs-primary-dark, #0056b3);
}

.gtd-inline-expand-toggle i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

/* Button variant */
.gtd-inline-expand-btn .gtd-inline-expand-toggle {
    background: var(--bs-gray-100);
    border-radius: 0.375rem;
}

/* Link variant */
.gtd-inline-expand-link .gtd-inline-expand-toggle {
    padding: 0;
    text-decoration: underline;
}

/* Centered toggle */
.gtd-inline-expand-center .gtd-inline-expand-toggle {
    justify-content: center;
    width: 100%;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-inline-expand-gradient {
    background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
}

[data-bs-theme="dark"] .gtd-inline-expand-btn .gtd-inline-expand-toggle {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Load More Button - Pagination load more
   ========================================================================== */

[data-load-more] {
    position: relative;
    transition: opacity 0.2s ease;
}

[data-load-more]:disabled {
    opacity: 0.7;
    cursor: wait;
}

.gtd-load-more-loading {
    pointer-events: none;
}

.gtd-load-more-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
}

.gtd-load-more-info {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Progress variant */
.gtd-load-more-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.gtd-load-more-bar {
    width: 200px;
    height: 4px;
    background: var(--bs-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.gtd-load-more-bar-fill {
    height: 100%;
    background: var(--bs-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Auto-load spinner */
.gtd-load-more-auto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.gtd-load-more-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bs-gray-200);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: gtd-load-more-spin 0.8s linear infinite;
}

@keyframes gtd-load-more-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Input Group - Input with prefix/suffix addons
   ========================================================================== */

.gtd-input-group {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gtd-input-group-focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.gtd-input-group input,
.gtd-input-group select,
.gtd-input-group textarea {
    flex: 1;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    background: transparent;
    border: none;
    outline: none;
    color: var(--bs-body-color);
}

.gtd-input-group select {
    padding-right: 2rem;
}

.gtd-input-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    background: var(--bs-gray-100);
    white-space: nowrap;
}

.gtd-input-prefix {
    border-right: 1px solid var(--bs-border-color);
    border-radius: 0.5rem 0 0 0.5rem;
}

.gtd-input-suffix {
    border-left: 1px solid var(--bs-border-color);
    border-radius: 0 0.5rem 0.5rem 0;
}

.gtd-input-addon i {
    font-size: 1rem;
}

/* Actionable addon */
.gtd-input-addon-action {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gtd-input-addon-action:hover {
    background: var(--bs-gray-200);
    color: var(--bs-primary);
}

/* Size variants */
.gtd-input-group-sm input,
.gtd-input-group-sm select,
.gtd-input-group-sm textarea {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

.gtd-input-group-sm .gtd-input-addon {
    padding: 0 0.625rem;
    font-size: 0.75rem;
}

.gtd-input-group-lg input,
.gtd-input-group-lg select,
.gtd-input-group-lg textarea {
    padding: 0.875rem 1rem;
    font-size: 1rem;
}

.gtd-input-group-lg .gtd-input-addon {
    padding: 0 1rem;
    font-size: 1rem;
}

/* Flush variant (no addon background) */
.gtd-input-group-flush .gtd-input-addon {
    background: transparent;
    border: none;
}

/* Merged variant (addon inside input) */
.gtd-input-group-merged .gtd-input-addon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    z-index: 1;
}

.gtd-input-group-merged .gtd-input-prefix {
    left: 0;
}

.gtd-input-group-merged .gtd-input-suffix {
    right: 0;
}

.gtd-input-group-merged input {
    padding-left: 2.5rem;
}

.gtd-input-group-merged input + .gtd-input-suffix {
    position: absolute;
    right: 0;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-input-group {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-input-addon {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-input-addon-action:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Floating Action Button - FAB with menu
   ========================================================================== */

.gtd-fab {
    position: fixed;
    z-index: 1030;
}

.gtd-fab-bottom-right {
    bottom: 20px;
    right: 20px;
}

.gtd-fab-bottom-left {
    bottom: 20px;
    left: 20px;
}

.gtd-fab-top-right {
    top: 20px;
    right: 20px;
}

.gtd-fab-top-left {
    top: 20px;
    left: 20px;
}

.gtd-fab-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 1.25rem;
    background: var(--bs-primary);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gtd-fab-main:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.5);
}

.gtd-fab-main:active {
    transform: scale(0.95);
}

/* Main button rotation on open */
.gtd-fab-open .gtd-fab-main i {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* FAB Menu */
.gtd-fab-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gtd-fab-open .gtd-fab-menu {
    pointer-events: auto;
    opacity: 1;
}

.gtd-fab-menu-up {
    bottom: 100%;
    margin-bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-fab-menu-down {
    top: 100%;
    margin-top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-fab-menu-left {
    right: 100%;
    margin-right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row-reverse;
}

.gtd-fab-menu-right {
    left: 100%;
    margin-left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
}

/* FAB Item */
.gtd-fab-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gtd-fab-open .gtd-fab-item {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.gtd-fab-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1rem;
    background: white;
    color: var(--bs-body-color);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gtd-fab-item-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gtd-fab-item-label {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--bs-gray-900);
    color: white;
    border-radius: 0.25rem;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* FAB Backdrop */
.gtd-fab-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: -1;
}

.gtd-fab-open .gtd-fab-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Size variants */
.gtd-fab-sm .gtd-fab-main {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.gtd-fab-sm .gtd-fab-item-btn {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

.gtd-fab-lg .gtd-fab-main {
    width: 68px;
    height: 68px;
    font-size: 1.5rem;
}

/* Extended FAB */
.gtd-fab-extended .gtd-fab-main {
    width: auto;
    padding: 0 1.25rem;
    border-radius: 9999px;
    gap: 0.5rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-fab-item-btn {
    background: var(--bs-gray-800);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .gtd-fab-item-label {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Image Annotation - Hotspot/annotation on images
   ========================================================================== */

.gtd-image-annotation {
    position: relative;
    display: inline-block;
}

.gtd-image-annotation img {
    display: block;
    max-width: 100%;
    height: auto;
}

.gtd-annotation-hotspots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gtd-annotation-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

.gtd-hotspot-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gtd-annotation-hotspot:hover .gtd-hotspot-marker {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.5);
}

/* Pulse animation */
.gtd-hotspot-pulse .gtd-hotspot-marker {
    position: relative;
}

.gtd-hotspot-pulse .gtd-hotspot-marker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 50%;
    opacity: 0.4;
    animation: gtd-hotspot-pulse 2s ease-out infinite;
}

@keyframes gtd-hotspot-pulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Ring style */
.gtd-hotspot-ring .gtd-hotspot-marker {
    background: transparent;
    border: 3px solid var(--bs-primary);
    color: var(--bs-primary);
}

/* Tooltip */
.gtd-hotspot-tooltip {
    position: absolute;
    min-width: 150px;
    max-width: 250px;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.gtd-annotation-hotspot:hover .gtd-hotspot-tooltip,
.gtd-hotspot-active .gtd-hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Tooltip positions */
.gtd-tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-bottom: 0.75rem;
}

.gtd-tooltip-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-top: 0.75rem;
}

.gtd-tooltip-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    margin-right: 0.75rem;
}

.gtd-tooltip-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    margin-left: 0.75rem;
}

.gtd-annotation-hotspot:hover .gtd-tooltip-top,
.gtd-hotspot-active .gtd-tooltip-top {
    transform: translateX(-50%) translateY(0);
}

.gtd-annotation-hotspot:hover .gtd-tooltip-bottom,
.gtd-hotspot-active .gtd-tooltip-bottom {
    transform: translateX(-50%) translateY(0);
}

.gtd-annotation-hotspot:hover .gtd-tooltip-left,
.gtd-hotspot-active .gtd-tooltip-left {
    transform: translateY(-50%) translateX(0);
}

.gtd-annotation-hotspot:hover .gtd-tooltip-right,
.gtd-hotspot-active .gtd-tooltip-right {
    transform: translateY(-50%) translateX(0);
}

.gtd-tooltip-title {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.gtd-tooltip-content {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

/* Active state */
.gtd-hotspot-active .gtd-hotspot-marker {
    background: var(--bs-success);
    box-shadow: 0 0 0 4px rgba(var(--bs-success-rgb), 0.3);
}

/* Editable mode */
.gtd-image-annotation[data-editable="true"] img {
    cursor: crosshair;
}

/* Number marker variant */
.gtd-hotspot-numbered .gtd-hotspot-marker {
    font-size: 0.875rem;
    font-weight: 700;
}

/* Small hotspots */
.gtd-hotspot-sm .gtd-hotspot-marker {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
}

/* Large hotspots */
.gtd-hotspot-lg .gtd-hotspot-marker {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .gtd-hotspot-tooltip {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-hotspot-marker {
        width: 28px;
        height: 28px;
        font-size: 0.625rem;
    }

    .gtd-hotspot-tooltip {
        min-width: 120px;
        max-width: 180px;
        padding: 0.5rem;
    }
}

/* ==========================================================================
   BATCH 41: selectDropdown, cardDeck, countdownTimer, priceRange, filterTags, contentLoader
   ========================================================================== */

/* ==========================================================================
   Select Dropdown - Custom select dropdown with search
   ========================================================================== */

.gtd-select-dropdown {
    position: relative;
    width: 100%;
}

.gtd-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.gtd-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.475rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 46px;
}

.gtd-select-trigger:hover {
    border-color: var(--bs-primary);
}

.gtd-select-trigger:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-select-dropdown.is-open .gtd-select-trigger {
    border-color: var(--bs-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.gtd-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-body-color);
}

.gtd-select-placeholder {
    color: var(--bs-gray-500);
}

.gtd-select-arrow {
    margin-left: 0.5rem;
    color: var(--bs-gray-500);
    transition: transform 0.2s ease;
}

.gtd-select-dropdown.is-open .gtd-select-arrow {
    transform: rotate(180deg);
}

.gtd-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-primary);
    border-top: none;
    border-bottom-left-radius: 0.475rem;
    border-bottom-right-radius: 0.475rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow: hidden;
}

.gtd-select-dropdown.is-open .gtd-select-menu {
    display: block;
    animation: gtdSelectSlide 0.2s ease;
}

@keyframes gtdSelectSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gtd-select-search {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-select-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.gtd-select-search-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    background: var(--bs-body-bg);
}

.gtd-select-options {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.gtd-select-option {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-select-option:hover {
    background: var(--bs-gray-100);
}

.gtd-select-option.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.gtd-select-option.is-highlighted {
    background: var(--bs-gray-200);
}

.gtd-select-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-select-option-icon {
    margin-right: 0.5rem;
    width: 20px;
    text-align: center;
}

.gtd-select-option-text {
    flex: 1;
}

.gtd-select-option-check {
    margin-left: 0.5rem;
    color: var(--bs-primary);
    opacity: 0;
}

.gtd-select-option.is-selected .gtd-select-option-check {
    opacity: 1;
}

.gtd-select-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--bs-gray-500);
    font-size: 0.875rem;
}

/* Multiple select tags */
.gtd-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.gtd-select-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bs-primary);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.gtd-select-tag-remove {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.gtd-select-tag-remove:hover {
    opacity: 1;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-select-search-input {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-select-option:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-select-option.is-highlighted {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-select-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Card Deck - Card deck/carousel with swipe
   ========================================================================== */

.gtd-card-deck {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gtd-card-deck-viewport {
    overflow: hidden;
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
}

.gtd-card-deck-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.gtd-card-deck.is-dragging .gtd-card-deck-track {
    transition: none;
}

.gtd-card-deck-card {
    flex: 0 0 auto;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

.gtd-card-deck-card > * {
    height: 100%;
}

/* Navigation */
.gtd-card-deck-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gtd-card-deck-nav:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.gtd-card-deck-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-card-deck-nav:disabled:hover {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: inherit;
}

.gtd-card-deck-prev {
    left: 0;
}

.gtd-card-deck-next {
    right: 0;
}

/* Dots */
.gtd-card-deck-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gtd-card-deck-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-card-deck-dot:hover {
    background: var(--bs-gray-400);
}

.gtd-card-deck-dot.is-active {
    background: var(--bs-primary);
    transform: scale(1.2);
}

/* Counter */
.gtd-card-deck-counter {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-card-deck-counter-current {
    font-weight: 600;
    color: var(--bs-primary);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-card-deck-nav {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gtd-card-deck-dot {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-card-deck-dot:hover {
    background: var(--bs-gray-600);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-card-deck-nav {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Countdown Timer - Countdown timer with events
   ========================================================================== */

.gtd-countdown {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.gtd-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.gtd-countdown-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-primary);
    font-variant-numeric: tabular-nums;
}

.gtd-countdown-label {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.gtd-countdown-separator {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-gray-400);
    margin-bottom: 1.25rem;
}

/* Boxed style */
.gtd-countdown.gtd-countdown-boxed .gtd-countdown-unit {
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    padding: 1rem;
    min-width: 70px;
}

.gtd-countdown.gtd-countdown-boxed .gtd-countdown-value {
    font-size: 2.5rem;
}

/* Flip style */
.gtd-countdown.gtd-countdown-flip .gtd-countdown-unit {
    perspective: 300px;
}

.gtd-countdown.gtd-countdown-flip .gtd-countdown-value {
    position: relative;
    background: linear-gradient(180deg, var(--bs-gray-800) 50%, var(--bs-gray-900) 50%);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Compact style */
.gtd-countdown.gtd-countdown-compact {
    gap: 0.25rem;
}

.gtd-countdown.gtd-countdown-compact .gtd-countdown-unit {
    min-width: auto;
}

.gtd-countdown.gtd-countdown-compact .gtd-countdown-value {
    font-size: 1rem;
}

.gtd-countdown.gtd-countdown-compact .gtd-countdown-label {
    display: none;
}

.gtd-countdown.gtd-countdown-compact .gtd-countdown-separator {
    font-size: 1rem;
    margin-bottom: 0;
}

/* States */
.gtd-countdown.is-urgent .gtd-countdown-value {
    color: var(--bs-danger);
    animation: gtdCountdownPulse 1s ease infinite;
}

@keyframes gtdCountdownPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.gtd-countdown.is-complete .gtd-countdown-value {
    color: var(--bs-success);
}

/* Inline style */
.gtd-countdown.gtd-countdown-inline {
    display: inline;
    gap: 0;
}

.gtd-countdown.gtd-countdown-inline .gtd-countdown-unit {
    display: inline;
    min-width: auto;
}

.gtd-countdown.gtd-countdown-inline .gtd-countdown-value {
    font-size: inherit;
    font-weight: 600;
}

.gtd-countdown.gtd-countdown-inline .gtd-countdown-label {
    display: inline;
    font-size: inherit;
    text-transform: lowercase;
    margin-left: 0.25rem;
}

.gtd-countdown.gtd-countdown-inline .gtd-countdown-separator {
    display: inline;
    font-size: inherit;
    margin: 0 0.25rem;
    font-weight: normal;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-countdown.gtd-countdown-boxed .gtd-countdown-unit {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-countdown-label {
    color: var(--bs-gray-500);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-countdown-unit {
        min-width: 50px;
    }

    .gtd-countdown-value {
        font-size: 1.5rem;
    }

    .gtd-countdown-separator {
        font-size: 1.25rem;
    }

    .gtd-countdown.gtd-countdown-boxed .gtd-countdown-unit {
        min-width: 55px;
        padding: 0.75rem;
    }

    .gtd-countdown.gtd-countdown-boxed .gtd-countdown-value {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Price Range - Dual handle range slider
   ========================================================================== */

.gtd-price-range {
    padding: 1rem 0;
}

.gtd-price-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtd-price-range-label {
    font-weight: 600;
    color: var(--bs-body-color);
}

.gtd-price-range-values {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.gtd-price-range-min-label,
.gtd-price-range-max-label {
    font-weight: 600;
    color: var(--bs-primary);
}

.gtd-price-range-divider {
    color: var(--bs-gray-500);
}

.gtd-price-range-slider {
    position: relative;
    height: 6px;
    margin: 1.5rem 0.75rem;
}

.gtd-price-range-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: var(--bs-gray-200);
    border-radius: 3px;
}

.gtd-price-range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 3px;
}

.gtd-price-range-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--bs-primary);
    border: 3px solid white;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    z-index: 5;
}

.gtd-price-range-handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.gtd-price-range-handle:active,
.gtd-price-range-handle.is-dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}

.gtd-price-range-handle-min {
    z-index: 6;
}

.gtd-price-range-handle-max {
    z-index: 5;
}

/* Tooltip */
.gtd-price-range-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--bs-gray-900);
    color: white;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    margin-bottom: 0.5rem;
}

.gtd-price-range-handle:hover .gtd-price-range-tooltip,
.gtd-price-range-handle.is-dragging .gtd-price-range-tooltip {
    opacity: 1;
}

.gtd-price-range-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--bs-gray-900);
}

/* Inputs */
.gtd-price-range-inputs {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.gtd-price-range-input-group {
    flex: 1;
}

.gtd-price-range-input-label {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.25rem;
}

.gtd-price-range-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    text-align: center;
}

.gtd-price-range-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

/* Markers */
.gtd-price-range-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 0.75rem;
}

.gtd-price-range-marker {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-price-range-track {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-price-range-handle {
    border-color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .gtd-price-range-input {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

/* ==========================================================================
   Filter Tags - Tag selection component
   ========================================================================== */

.gtd-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gtd-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    transition: all 0.2s ease;
    user-select: none;
}

.gtd-filter-tag:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-filter-tag.is-selected {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.gtd-filter-tag.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-filter-tag-icon {
    font-size: 0.875rem;
}

.gtd-filter-tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.gtd-filter-tag.is-selected .gtd-filter-tag-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Checkbox style */
.gtd-filter-tags.gtd-filter-tags-checkbox .gtd-filter-tag {
    border-radius: 0.375rem;
}

.gtd-filter-tag-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: white;
    border: 2px solid var(--bs-gray-400);
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.gtd-filter-tag.is-selected .gtd-filter-tag-checkbox {
    background: white;
    border-color: white;
}

.gtd-filter-tag-checkbox i {
    font-size: 0.625rem;
    color: var(--bs-primary);
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.gtd-filter-tag.is-selected .gtd-filter-tag-checkbox i {
    opacity: 1;
    transform: scale(1);
}

/* Radio style */
.gtd-filter-tags.gtd-filter-tags-radio .gtd-filter-tag-checkbox {
    border-radius: 50%;
}

.gtd-filter-tags.gtd-filter-tags-radio .gtd-filter-tag.is-selected .gtd-filter-tag-checkbox::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--bs-primary);
    border-radius: 50%;
}

/* Compact style */
.gtd-filter-tags.gtd-filter-tags-compact .gtd-filter-tag {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Block style */
.gtd-filter-tags.gtd-filter-tags-block {
    flex-direction: column;
}

.gtd-filter-tags.gtd-filter-tags-block .gtd-filter-tag {
    justify-content: flex-start;
    border-radius: 0.375rem;
}

/* Clear button */
.gtd-filter-tags-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--bs-gray-400);
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    transition: all 0.2s ease;
}

.gtd-filter-tags-clear:hover {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.05);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-filter-tag {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-filter-tag:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-filter-tag-checkbox {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-filter-tags-clear {
    border-color: var(--bs-gray-600);
}

/* ==========================================================================
   Content Loader - Skeleton placeholder loader
   ========================================================================== */

.gtd-content-loader {
    width: 100%;
}

.gtd-skeleton {
    background: linear-gradient(
        90deg,
        var(--bs-gray-200) 25%,
        var(--bs-gray-100) 50%,
        var(--bs-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: gtdSkeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

@keyframes gtdSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gtd-skeleton-line {
    height: 1rem;
    margin-bottom: 0.75rem;
}

.gtd-skeleton-line:last-child {
    margin-bottom: 0;
}

.gtd-skeleton-line.gtd-skeleton-line-sm {
    height: 0.75rem;
}

.gtd-skeleton-line.gtd-skeleton-line-lg {
    height: 1.5rem;
}

.gtd-skeleton-line.gtd-skeleton-line-w50 {
    width: 50%;
}

.gtd-skeleton-line.gtd-skeleton-line-w75 {
    width: 75%;
}

.gtd-skeleton-line.gtd-skeleton-line-w25 {
    width: 25%;
}

.gtd-skeleton-circle {
    border-radius: 50%;
}

.gtd-skeleton-rect {
    border-radius: 0.375rem;
}

/* Card skeleton */
.gtd-skeleton-card {
    padding: 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.gtd-skeleton-card-image {
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.gtd-skeleton-card-title {
    height: 1.25rem;
    width: 70%;
    margin-bottom: 0.75rem;
}

.gtd-skeleton-card-text {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-card-text:nth-child(3) {
    width: 85%;
}

.gtd-skeleton-card-text:nth-child(4) {
    width: 60%;
}

/* List skeleton */
.gtd-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gtd-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.gtd-skeleton-list-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.gtd-skeleton-list-content {
    flex: 1;
}

.gtd-skeleton-list-title {
    height: 1rem;
    width: 40%;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-list-subtitle {
    height: 0.75rem;
    width: 60%;
}

/* Table skeleton */
.gtd-skeleton-table {
    width: 100%;
    border-collapse: collapse;
}

.gtd-skeleton-table-row {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-skeleton-table-row:last-child {
    border-bottom: none;
}

.gtd-skeleton-table-cell {
    flex: 1;
    height: 1rem;
}

.gtd-skeleton-table-header {
    background: var(--bs-gray-100);
}

.gtd-skeleton-table-header .gtd-skeleton-table-cell {
    background: var(--bs-gray-300);
}

/* Article skeleton */
.gtd-skeleton-article {
    padding: 1.5rem;
}

.gtd-skeleton-article-title {
    height: 2rem;
    width: 80%;
    margin-bottom: 1rem;
}

.gtd-skeleton-article-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gtd-skeleton-article-meta-item {
    height: 0.75rem;
    width: 80px;
}

.gtd-skeleton-article-image {
    height: 300px;
    margin-bottom: 1.5rem;
}

.gtd-skeleton-article-paragraph {
    margin-bottom: 1rem;
}

/* Profile skeleton */
.gtd-skeleton-profile {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.gtd-skeleton-profile-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}

.gtd-skeleton-profile-info {
    flex: 1;
}

.gtd-skeleton-profile-name {
    height: 1.5rem;
    width: 50%;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-profile-role {
    height: 1rem;
    width: 30%;
    margin-bottom: 1rem;
}

.gtd-skeleton-profile-bio {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Grid skeleton */
.gtd-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.gtd-skeleton-grid-item {
    height: 200px;
}

/* Fade animation for hiding */
.gtd-content-loader.is-hidden {
    animation: gtdSkeletonFadeOut 0.3s ease forwards;
}

@keyframes gtdSkeletonFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
        height: 0;
        padding: 0;
        margin: 0;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-skeleton {
    background: linear-gradient(
        90deg,
        var(--bs-gray-700) 25%,
        var(--bs-gray-800) 50%,
        var(--bs-gray-700) 75%
    );
    background-size: 200% 100%;
}

[data-bs-theme="dark"] .gtd-skeleton-table-header {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-skeleton-table-header .gtd-skeleton-table-cell {
    background: var(--bs-gray-600);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-skeleton-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .gtd-skeleton-profile-name,
    .gtd-skeleton-profile-role {
        margin-left: auto;
        margin-right: auto;
    }

    .gtd-skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ==========================================================================
   BATCH 42: tabCarousel, alertDismiss, pageLoader, hoverCard, formGroup, mediaPlayer
   ========================================================================== */

/* ==========================================================================
   Tab Carousel - Tab-based carousel with keyboard navigation
   ========================================================================== */

.gtd-tab-carousel {
    position: relative;
}

.gtd-tab-carousel-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}

.gtd-tab-carousel-tabs [data-tab] {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-weight: 500;
    color: var(--bs-gray-600);
    transition: all 0.2s ease;
}

.gtd-tab-carousel-tabs [data-tab]:hover {
    color: var(--bs-primary);
}

.gtd-tab-carousel-tabs [data-tab].is-active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.gtd-tab-carousel-tabs [data-tab]:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-tab-carousel-panels {
    position: relative;
    overflow: hidden;
}

.gtd-tab-carousel-panels [data-panel] {
    animation: gtdTabFadeIn 0.3s ease;
}

.gtd-tab-carousel-fade-out {
    animation: gtdTabFadeOut 0.15s ease forwards;
}

.gtd-tab-carousel-fade-in {
    animation: gtdTabFadeIn 0.3s ease;
}

@keyframes gtdTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gtdTabFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.gtd-tab-carousel-slide-out-left {
    animation: gtdTabSlideOutLeft 0.3s ease forwards;
}

.gtd-tab-carousel-slide-in-left {
    animation: gtdTabSlideInLeft 0.3s ease;
}

.gtd-tab-carousel-slide-out-right {
    animation: gtdTabSlideOutRight 0.3s ease forwards;
}

.gtd-tab-carousel-slide-in-right {
    animation: gtdTabSlideInRight 0.3s ease;
}

@keyframes gtdTabSlideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes gtdTabSlideInLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes gtdTabSlideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes gtdTabSlideInRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Vertical tabs */
.gtd-tab-carousel.gtd-tab-carousel-vertical {
    display: flex;
    gap: 1.5rem;
}

.gtd-tab-carousel.gtd-tab-carousel-vertical .gtd-tab-carousel-tabs {
    flex-direction: column;
    border-bottom: none;
    border-right: 2px solid var(--bs-border-color);
    margin-bottom: 0;
    padding-right: 0;
}

.gtd-tab-carousel.gtd-tab-carousel-vertical .gtd-tab-carousel-tabs [data-tab] {
    border-bottom: none;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -2px;
    text-align: left;
}

.gtd-tab-carousel.gtd-tab-carousel-vertical .gtd-tab-carousel-tabs [data-tab].is-active {
    border-right-color: var(--bs-primary);
}

.gtd-tab-carousel.gtd-tab-carousel-vertical .gtd-tab-carousel-panels {
    flex: 1;
}

/* Pills style */
.gtd-tab-carousel.gtd-tab-carousel-pills .gtd-tab-carousel-tabs {
    border-bottom: none;
    background: var(--bs-gray-100);
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.gtd-tab-carousel.gtd-tab-carousel-pills .gtd-tab-carousel-tabs [data-tab] {
    border-radius: 0.375rem;
    margin-bottom: 0;
}

.gtd-tab-carousel.gtd-tab-carousel-pills .gtd-tab-carousel-tabs [data-tab].is-active {
    background: var(--bs-body-bg);
    border-bottom-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-tab-carousel.gtd-tab-carousel-pills .gtd-tab-carousel-tabs {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-tab-carousel.gtd-tab-carousel-pills .gtd-tab-carousel-tabs [data-tab].is-active {
    background: var(--bs-gray-700);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-tab-carousel-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gtd-tab-carousel-tabs::-webkit-scrollbar {
        display: none;
    }

    .gtd-tab-carousel-tabs [data-tab] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .gtd-tab-carousel.gtd-tab-carousel-vertical {
        flex-direction: column;
    }

    .gtd-tab-carousel.gtd-tab-carousel-vertical .gtd-tab-carousel-tabs {
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid var(--bs-border-color);
    }
}

/* ==========================================================================
   Alert Dismiss - Auto-dismiss alerts with countdown
   ========================================================================== */

.gtd-alert-dismissible {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-alert-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.gtd-alert-content {
    flex: 1;
    min-width: 0;
}

.gtd-alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-alert-message {
    color: var(--bs-gray-600);
    font-size: 0.875rem;
}

.gtd-alert-countdown {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    font-variant-numeric: tabular-nums;
}

.gtd-alert-dismiss-btn {
    flex-shrink: 0;
    padding: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-500);
    transition: color 0.15s ease;
    line-height: 1;
}

.gtd-alert-dismiss-btn:hover {
    color: var(--bs-gray-800);
}

.gtd-alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bs-gray-200);
}

.gtd-alert-progress-bar {
    height: 100%;
    background: var(--bs-primary);
    transition: width 0.05s linear;
}

/* Alert types */
.gtd-alert-success {
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: var(--bs-success);
}

.gtd-alert-success .gtd-alert-icon {
    color: var(--bs-success);
}

.gtd-alert-success .gtd-alert-progress-bar {
    background: var(--bs-success);
}

.gtd-alert-warning {
    background: rgba(var(--bs-warning-rgb), 0.1);
    border-color: var(--bs-warning);
}

.gtd-alert-warning .gtd-alert-icon {
    color: var(--bs-warning);
}

.gtd-alert-warning .gtd-alert-progress-bar {
    background: var(--bs-warning);
}

.gtd-alert-danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    border-color: var(--bs-danger);
}

.gtd-alert-danger .gtd-alert-icon {
    color: var(--bs-danger);
}

.gtd-alert-danger .gtd-alert-progress-bar {
    background: var(--bs-danger);
}

.gtd-alert-info {
    background: rgba(var(--bs-info-rgb), 0.1);
    border-color: var(--bs-info);
}

.gtd-alert-info .gtd-alert-icon {
    color: var(--bs-info);
}

.gtd-alert-info .gtd-alert-progress-bar {
    background: var(--bs-info);
}

/* Dismiss animations */
.gtd-alert-dismiss-fade {
    animation: gtdAlertFadeOut 0.3s ease forwards;
}

@keyframes gtdAlertFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.gtd-alert-dismiss-slide {
    animation: gtdAlertSlideOut 0.3s ease forwards;
}

@keyframes gtdAlertSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Paused state */
.gtd-alert-dismissible.is-paused .gtd-alert-progress-bar {
    animation: gtdAlertProgressPulse 1s ease infinite;
}

@keyframes gtdAlertProgressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-alert-dismiss-btn:hover {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-alert-progress {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Page Loader - Full-page loading overlay
   ========================================================================== */

.gtd-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gtd-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
}

.gtd-page-loader.is-hiding {
    opacity: 0;
}

.gtd-page-loader-backdrop {
    background: rgba(255, 255, 255, 0.95);
}

.gtd-page-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.gtd-page-loader-text {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    font-weight: 500;
}

body.gtd-page-loading {
    overflow: hidden;
}

/* Spinner loader */
.gtd-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--bs-gray-200);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: gtdLoaderSpin 0.8s linear infinite;
}

@keyframes gtdLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Dots loader */
.gtd-loader-dots {
    display: flex;
    gap: 0.5rem;
}

.gtd-loader-dots span {
    width: 12px;
    height: 12px;
    background: var(--bs-primary);
    border-radius: 50%;
    animation: gtdLoaderDots 1.4s ease-in-out infinite both;
}

.gtd-loader-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.gtd-loader-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes gtdLoaderDots {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Pulse loader */
.gtd-loader-pulse {
    width: 48px;
    height: 48px;
    background: var(--bs-primary);
    border-radius: 50%;
    animation: gtdLoaderPulse 1.2s ease-in-out infinite;
}

@keyframes gtdLoaderPulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Bar loader */
.gtd-loader-bar {
    width: 200px;
    height: 4px;
    background: var(--bs-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.gtd-loader-bar-inner {
    height: 100%;
    background: var(--bs-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0;
}

.gtd-loader-bar.gtd-loader-bar-indeterminate .gtd-loader-bar-inner {
    width: 30%;
    animation: gtdLoaderBarIndeterminate 1.5s ease-in-out infinite;
}

@keyframes gtdLoaderBarIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/* Ring loader */
.gtd-loader-ring {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
}

.gtd-loader-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 38px;
    height: 38px;
    margin: 5px;
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
    animation: gtdLoaderRing 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--bs-primary) transparent transparent transparent;
}

.gtd-loader-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.gtd-loader-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.gtd-loader-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes gtdLoaderRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Logo loader */
.gtd-loader-logo {
    width: 64px;
    height: 64px;
    animation: gtdLoaderLogoPulse 2s ease-in-out infinite;
}

@keyframes gtdLoaderLogoPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-page-loader-backdrop {
    background: rgba(17, 17, 17, 0.95);
}

[data-bs-theme="dark"] .gtd-loader-spinner {
    border-color: var(--bs-gray-700);
    border-top-color: var(--bs-primary);
}

[data-bs-theme="dark"] .gtd-loader-bar {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Hover Card - Card with hover effects and preview
   ========================================================================== */

.gtd-hover-card {
    position: relative;
    transition: all 0.3s ease;
}

/* Lift effect */
.gtd-hover-card-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gtd-hover-card-lift.is-hovered {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Scale effect */
.gtd-hover-card-scale {
    transition: transform 0.3s ease;
}

.gtd-hover-card-scale.is-hovered {
    transform: scale(1.03);
}

/* Glow effect */
.gtd-hover-card-glow {
    transition: box-shadow 0.3s ease;
}

.gtd-hover-card-glow.is-hovered {
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.4);
}

/* Border effect */
.gtd-hover-card-border {
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.gtd-hover-card-border.is-hovered {
    border-color: var(--bs-primary);
}

/* Tilt effect */
.gtd-hover-card-tilt {
    transition: transform 0.1s ease;
    transform-style: preserve-3d;
}

/* Focus state */
.gtd-hover-card.is-focused {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Preview popup */
.gtd-hover-card-preview {
    position: fixed;
    z-index: 1060;
    min-width: 300px;
    max-width: 400px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.gtd-hover-card-preview.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.gtd-hover-card-preview-loading {
    padding: 2rem;
    text-align: center;
}

.gtd-hover-card-preview-error {
    padding: 1rem;
    color: var(--bs-danger);
    text-align: center;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-hover-card-lift.is-hovered {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-hover-card-preview {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Form Group - Form group with validation icons
   ========================================================================== */

.gtd-form-group {
    position: relative;
    margin-bottom: 1rem;
}

.gtd-form-group .form-control,
.gtd-form-group .form-select {
    padding-right: 2.5rem;
}

.gtd-form-group-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gtd-form-group.has-success .gtd-form-group-icon,
.gtd-form-group.has-error .gtd-form-group-icon,
.gtd-form-group.has-warning .gtd-form-group-icon {
    opacity: 1;
}

.gtd-form-group.has-success .gtd-form-group-icon {
    color: var(--bs-success);
}

.gtd-form-group.has-error .gtd-form-group-icon {
    color: var(--bs-danger);
}

.gtd-form-group.has-warning .gtd-form-group-icon {
    color: var(--bs-warning);
}

.gtd-form-group.has-success .form-control,
.gtd-form-group.has-success .form-select {
    border-color: var(--bs-success);
}

.gtd-form-group.has-error .form-control,
.gtd-form-group.has-error .form-select {
    border-color: var(--bs-danger);
}

.gtd-form-group.has-warning .form-control,
.gtd-form-group.has-warning .form-select {
    border-color: var(--bs-warning);
}

.gtd-form-group-feedback {
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

.gtd-form-group.has-success .gtd-form-group-feedback {
    color: var(--bs-success);
}

.gtd-form-group.has-error .gtd-form-group-feedback {
    color: var(--bs-danger);
}

.gtd-form-group.has-warning .gtd-form-group-feedback {
    color: var(--bs-warning);
}

/* With label positioning */
.gtd-form-group.has-label .gtd-form-group-icon {
    top: calc(50% + 0.75rem);
}

/* Inline style */
.gtd-form-group.gtd-form-group-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gtd-form-group.gtd-form-group-inline .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.gtd-form-group.gtd-form-group-inline .gtd-form-group-feedback {
    margin-top: 0;
}

/* Floating label adjustment */
.gtd-form-group .form-floating .gtd-form-group-icon {
    top: 1.5rem;
}

/* ==========================================================================
   Media Player - Simple media player controls
   ========================================================================== */

.gtd-media-player {
    position: relative;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-media-player video,
.gtd-media-player audio {
    display: block;
    width: 100%;
}

.gtd-media-player-audio {
    background: var(--bs-gray-900);
    padding: 1rem;
}

.gtd-media-player-audio audio {
    display: none;
}

.gtd-media-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    transition: opacity 0.3s ease;
}

.gtd-media-player-video .gtd-media-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.gtd-media-player.controls-hidden .gtd-media-controls {
    opacity: 0;
}

.gtd-media-player-audio .gtd-media-controls {
    background: transparent;
    position: static;
}

.gtd-media-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.gtd-media-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gtd-media-progress {
    flex: 1;
    padding: 0.5rem 0;
    cursor: pointer;
}

.gtd-media-progress-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.gtd-media-progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.gtd-media-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 2px;
}

.gtd-media-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--bs-primary);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-media-progress:hover .gtd-media-progress-handle {
    opacity: 1;
}

.gtd-media-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: white;
    font-variant-numeric: tabular-nums;
}

.gtd-media-separator {
    opacity: 0.6;
}

.gtd-media-volume {
    display: flex;
    align-items: center;
}

.gtd-media-volume-slider {
    width: 0;
    overflow: hidden;
    transition: width 0.2s ease;
}

.gtd-media-volume:hover .gtd-media-volume-slider {
    width: 60px;
    margin-left: 0.5rem;
}

.gtd-media-volume-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
}

.gtd-media-volume-level {
    height: 100%;
    background: white;
    border-radius: 2px;
}

.gtd-media-volume-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
}

.gtd-media-speed {
    position: relative;
}

.gtd-media-speed-btn {
    font-size: 0.75rem;
    width: auto;
    padding: 0 0.5rem;
}

.gtd-media-speed-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.gtd-media-speed-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-media-speed-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: white;
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: left;
}

.gtd-media-speed-menu button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.gtd-media-speed-menu button.is-active {
    color: var(--bs-primary);
}

/* Overlay play button */
.gtd-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.gtd-media-player.is-playing .gtd-media-overlay {
    opacity: 0;
    pointer-events: none;
}

.gtd-media-overlay-play {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--bs-gray-900);
    transition: transform 0.2s ease, background 0.2s ease;
}

.gtd-media-overlay-play:hover {
    transform: scale(1.1);
    background: white;
}

/* Fullscreen */
.gtd-media-player.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
}

.gtd-media-player.is-fullscreen video {
    height: 100%;
    object-fit: contain;
}

/* Audio player specific */
.gtd-media-player-audio .gtd-media-btn {
    color: var(--bs-body-color);
}

.gtd-media-player-audio .gtd-media-btn:hover {
    background: var(--bs-gray-700);
}

.gtd-media-player-audio .gtd-media-time {
    color: var(--bs-gray-400);
}

.gtd-media-player-audio .gtd-media-progress-bar {
    background: var(--bs-gray-700);
}

.gtd-media-player-audio .gtd-media-volume-bar {
    background: var(--bs-gray-700);
}

.gtd-media-player-audio .gtd-media-volume-level,
.gtd-media-player-audio .gtd-media-volume-handle {
    background: var(--bs-gray-400);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-media-controls {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .gtd-media-btn {
        width: 32px;
        height: 32px;
    }

    .gtd-media-time {
        font-size: 0.6875rem;
    }

    .gtd-media-overlay-play {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   BATCH 43: imageSlider, comparisonTable, breadcrumbDropdown, notificationStack, searchFilter, statCard
   ========================================================================== */

/* ==========================================================================
   Image Slider - Simple image slider with thumbnails
   ========================================================================== */

.gtd-image-slider {
    position: relative;
    width: 100%;
}

.gtd-image-slider-main {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--bs-gray-100);
}

.gtd-image-slider-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 500px;
    transition: opacity 0.3s ease;
}

.gtd-image-slider-fade-out {
    opacity: 0;
}

.gtd-image-slider-fade-in {
    animation: gtdSliderFadeIn 0.3s ease;
}

@keyframes gtdSliderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gtd-image-slider-slide-next {
    animation: gtdSliderSlideNext 0.3s ease;
}

.gtd-image-slider-slide-prev {
    animation: gtdSliderSlidePrev 0.3s ease;
}

@keyframes gtdSliderSlideNext {
    from { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-20px); opacity: 0; }
    51% { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes gtdSliderSlidePrev {
    from { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(20px); opacity: 0; }
    51% { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.gtd-image-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gtd-image-slider-arrow:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gtd-image-slider-prev {
    left: 1rem;
}

.gtd-image-slider-next {
    right: 1rem;
}

.gtd-image-slider-counter {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.gtd-image-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gtd-image-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-gray-300);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-image-slider-dot:hover {
    background: var(--bs-gray-400);
}

.gtd-image-slider-dot.is-active {
    background: var(--bs-primary);
    transform: scale(1.2);
}

.gtd-image-slider-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.gtd-image-slider-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    padding: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.gtd-image-slider-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-image-slider-thumb:hover {
    border-color: var(--bs-gray-400);
}

.gtd-image-slider-thumb.is-active {
    border-color: var(--bs-primary);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-image-slider-main {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-image-slider-arrow {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

[data-bs-theme="dark"] .gtd-image-slider-arrow:hover {
    background: rgba(0, 0, 0, 0.9);
}

[data-bs-theme="dark"] .gtd-image-slider-dot {
    background: var(--bs-gray-600);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-image-slider-arrow {
        width: 32px;
        height: 32px;
    }

    .gtd-image-slider-prev {
        left: 0.5rem;
    }

    .gtd-image-slider-next {
        right: 0.5rem;
    }

    .gtd-image-slider-thumb {
        width: 60px;
        height: 45px;
    }
}

/* ==========================================================================
   Comparison Table - Side-by-side comparison table
   ========================================================================== */

.gtd-comparison-table {
    width: 100%;
    overflow-x: auto;
}

.gtd-comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.gtd-comparison-table th,
.gtd-comparison-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}

.gtd-comparison-table th {
    background: var(--bs-gray-100);
    font-weight: 600;
    position: relative;
    min-width: 150px;
}

.gtd-comparison-table th:first-child {
    min-width: 200px;
    position: sticky;
    left: 0;
    z-index: 2;
}

.gtd-comparison-table td:first-child {
    font-weight: 500;
    background: var(--bs-body-bg);
    position: sticky;
    left: 0;
    z-index: 1;
}

.gtd-comparison-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}

.gtd-comparison-different {
    background: rgba(var(--bs-warning-rgb), 0.1);
}

.gtd-comparison-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.gtd-comparison-remove:hover {
    background: var(--bs-danger);
    color: white;
}

.gtd-comparison-group-header {
    background: var(--bs-gray-50);
}

.gtd-comparison-group-header td:first-child {
    font-weight: 600;
}

.gtd-comparison-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}

.gtd-comparison-group-header.is-expanded .gtd-comparison-toggle {
    transform: rotate(180deg);
}

.gtd-comparison-group-row td:first-child {
    padding-left: 2.5rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-comparison-table th {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-comparison-group-header {
    background: var(--bs-gray-900);
}

/* ==========================================================================
   Breadcrumb Dropdown - Breadcrumb with dropdown navigation
   ========================================================================== */

.gtd-breadcrumb-dropdown {
    font-size: 0.875rem;
}

.gtd-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-breadcrumb-item {
    display: flex;
    align-items: center;
    position: relative;
}

.gtd-breadcrumb-item a {
    color: var(--bs-gray-600);
    text-decoration: none;
    transition: color 0.15s ease;
}

.gtd-breadcrumb-item a:hover {
    color: var(--bs-primary);
}

.gtd-breadcrumb-item.is-current span {
    color: var(--bs-body-color);
    font-weight: 500;
}

.gtd-breadcrumb-separator {
    color: var(--bs-gray-400);
    padding: 0 0.25rem;
}

.gtd-breadcrumb-overflow {
    position: relative;
}

.gtd-breadcrumb-overflow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bs-gray-100);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--bs-gray-600);
    transition: all 0.15s ease;
}

.gtd-breadcrumb-overflow-btn:hover {
    background: var(--bs-gray-200);
    color: var(--bs-body-color);
}

.gtd-breadcrumb-overflow-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 160px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    display: none;
}

.gtd-breadcrumb-overflow.is-open .gtd-breadcrumb-overflow-dropdown {
    display: block;
    animation: gtdBreadcrumbDropdownIn 0.2s ease;
}

@keyframes gtdBreadcrumbDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gtd-breadcrumb-overflow-dropdown a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background 0.15s ease;
}

.gtd-breadcrumb-overflow-dropdown a:hover {
    background: var(--bs-gray-100);
}

.gtd-breadcrumb-item.has-dropdown {
    display: flex;
    align-items: center;
}

.gtd-breadcrumb-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-500);
    transition: transform 0.2s ease;
}

.gtd-breadcrumb-item.is-open .gtd-breadcrumb-dropdown-toggle {
    transform: rotate(180deg);
}

.gtd-breadcrumb-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 140px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    display: none;
}

.gtd-breadcrumb-item.is-open .gtd-breadcrumb-dropdown-menu {
    display: block;
    animation: gtdBreadcrumbDropdownIn 0.2s ease;
}

.gtd-breadcrumb-dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: background 0.15s ease;
}

.gtd-breadcrumb-dropdown-menu a:hover {
    background: var(--bs-gray-100);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-breadcrumb-overflow-btn {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-breadcrumb-overflow-btn:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-breadcrumb-overflow-dropdown,
[data-bs-theme="dark"] .gtd-breadcrumb-dropdown-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-breadcrumb-overflow-dropdown a:hover,
[data-bs-theme="dark"] .gtd-breadcrumb-dropdown-menu a:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Notification Stack - Stacked notification system
   ========================================================================== */

.gtd-notification-stack {
    position: fixed;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    pointer-events: none;
}

.gtd-notification-stack-top-right {
    top: 1rem;
    right: 1rem;
}

.gtd-notification-stack-top-left {
    top: 1rem;
    left: 1rem;
}

.gtd-notification-stack-top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-notification-stack-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.gtd-notification-stack-bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.gtd-notification-stack-bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gtd-notification-stack-top-left .gtd-notification,
.gtd-notification-stack-bottom-left .gtd-notification {
    transform: translateX(-100%);
}

.gtd-notification-stack-top-center .gtd-notification,
.gtd-notification-stack-bottom-center .gtd-notification {
    transform: translateY(-20px);
}

.gtd-notification.is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.gtd-notification.is-dismissing {
    opacity: 0;
    transform: translateX(100%);
}

.gtd-notification-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.gtd-notification-content {
    flex: 1;
    min-width: 0;
}

.gtd-notification-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-notification-message {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-notification-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-500);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.gtd-notification-close:hover {
    background: var(--bs-gray-100);
    color: var(--bs-body-color);
}

.gtd-notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bs-gray-200);
}

.gtd-notification-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--bs-primary);
}

.gtd-notification-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-notification-action {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.gtd-notification-action:hover {
    background: var(--bs-gray-100);
}

.gtd-notification-action-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.gtd-notification-action-primary:hover {
    background: var(--bs-primary);
    opacity: 0.9;
}

/* Notification types */
.gtd-notification-success {
    border-left: 4px solid var(--bs-success);
}

.gtd-notification-success .gtd-notification-icon {
    color: var(--bs-success);
}

.gtd-notification-success .gtd-notification-progress-bar {
    background: var(--bs-success);
}

.gtd-notification-error {
    border-left: 4px solid var(--bs-danger);
}

.gtd-notification-error .gtd-notification-icon {
    color: var(--bs-danger);
}

.gtd-notification-error .gtd-notification-progress-bar {
    background: var(--bs-danger);
}

.gtd-notification-warning {
    border-left: 4px solid var(--bs-warning);
}

.gtd-notification-warning .gtd-notification-icon {
    color: var(--bs-warning);
}

.gtd-notification-warning .gtd-notification-progress-bar {
    background: var(--bs-warning);
}

.gtd-notification-info {
    border-left: 4px solid var(--bs-info);
}

.gtd-notification-info .gtd-notification-icon {
    color: var(--bs-info);
}

.gtd-notification-info .gtd-notification-progress-bar {
    background: var(--bs-info);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-notification {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-notification-close:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-notification-progress {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Search Filter - Search with instant filtering
   ========================================================================== */

.gtd-search-filter {
    position: relative;
}

.gtd-search-filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gtd-search-filter-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--bs-gray-500);
    pointer-events: none;
}

.gtd-search-filter input {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.gtd-search-filter-clear {
    position: absolute;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.gtd-search-filter-clear:hover {
    background: var(--bs-gray-200);
    color: var(--bs-body-color);
}

.gtd-search-filter-count {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
}

.gtd-search-filter-no-results {
    padding: 2rem;
    text-align: center;
    color: var(--bs-gray-500);
}

.gtd-search-highlight {
    background: rgba(var(--bs-warning-rgb), 0.3);
    padding: 0.125rem 0;
    border-radius: 0.125rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-search-filter-clear:hover {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Stat Card - Statistics card with animation
   ========================================================================== */

.gtd-stat-card {
    position: relative;
}

.gtd-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.gtd-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.gtd-stat-trend-up {
    color: var(--bs-success);
}

.gtd-stat-trend-down {
    color: var(--bs-danger);
}

.gtd-stat-sparkline {
    margin-top: 1rem;
    height: 40px;
    color: var(--bs-primary);
}

.gtd-stat-sparkline svg {
    width: 100%;
    height: 100%;
}

/* Compact style */
.gtd-stat-card.gtd-stat-card-compact .gtd-stat-value {
    font-size: 1.75rem;
}

.gtd-stat-card.gtd-stat-card-compact .gtd-stat-trend {
    font-size: 0.75rem;
}

/* Large style */
.gtd-stat-card.gtd-stat-card-large .gtd-stat-value {
    font-size: 3.5rem;
}

/* Colored style */
.gtd-stat-card.gtd-stat-card-primary .gtd-stat-value {
    color: var(--bs-primary);
}

.gtd-stat-card.gtd-stat-card-success .gtd-stat-value {
    color: var(--bs-success);
}

.gtd-stat-card.gtd-stat-card-danger .gtd-stat-value {
    color: var(--bs-danger);
}

.gtd-stat-card.gtd-stat-card-warning .gtd-stat-value {
    color: var(--bs-warning);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-stat-value {
        font-size: 2rem;
    }

    .gtd-stat-card.gtd-stat-card-large .gtd-stat-value {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Color Picker - Color selection component
   ========================================================================== */

.gtd-color-picker {
    position: relative;
    display: inline-block;
}

.gtd-color-picker-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.gtd-color-picker-trigger:hover {
    border-color: var(--bs-primary);
}

.gtd-color-picker-trigger:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-color-picker-swatch {
    width: 24px;
    height: 24px;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
                      linear-gradient(-45deg, #ccc 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #ccc 75%),
                      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.gtd-color-picker-swatch-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.gtd-color-picker-value {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    color: var(--bs-body-color);
    min-width: 60px;
}

.gtd-color-picker-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 220px;
    display: none;
}

.gtd-color-picker.is-open .gtd-color-picker-popup {
    display: block;
}

.gtd-color-picker-presets {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.gtd-color-picker-preset {
    width: 24px;
    height: 24px;
    border-radius: 0.25rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

.gtd-color-picker-preset:hover {
    transform: scale(1.15);
}

.gtd-color-picker-preset.is-selected {
    border-color: var(--bs-primary);
}

.gtd-color-picker-native {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0;
}

.gtd-color-picker-native::-webkit-color-swatch-wrapper {
    padding: 0;
}

.gtd-color-picker-native::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

.gtd-color-picker-input-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-color-picker-hex-input {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-color-picker-popup {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Timeline View - Vertical timeline display
   ========================================================================== */

.gtd-timeline-view {
    position: relative;
    padding-left: 2rem;
}

.gtd-timeline-view::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}

.gtd-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gtd-timeline-view.is-animated .gtd-timeline-item {
    opacity: 0;
    transform: translateX(-20px);
}

.gtd-timeline-view.is-animated .gtd-timeline-item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.gtd-timeline-item:last-child {
    padding-bottom: 0;
}

.gtd-timeline-marker {
    position: absolute;
    left: -1.75rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 3px solid var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.gtd-timeline-marker i {
    font-size: 0.5rem;
    color: var(--bs-white);
}

.gtd-timeline-marker-success {
    background: var(--bs-success);
    box-shadow: 0 0 0 2px var(--bs-success);
}

.gtd-timeline-marker-warning {
    background: var(--bs-warning);
    box-shadow: 0 0 0 2px var(--bs-warning);
}

.gtd-timeline-marker-danger {
    background: var(--bs-danger);
    box-shadow: 0 0 0 2px var(--bs-danger);
}

.gtd-timeline-marker-info {
    background: var(--bs-info);
    box-shadow: 0 0 0 2px var(--bs-info);
}

.gtd-timeline-content {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}

.gtd-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.gtd-timeline-title {
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

.gtd-timeline-date {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-timeline-body {
    color: var(--bs-gray-600);
    font-size: 0.875rem;
}

.gtd-timeline-item.is-collapsible .gtd-timeline-body {
    display: none;
}

.gtd-timeline-item.is-collapsible.is-expanded .gtd-timeline-body {
    display: block;
}

.gtd-timeline-toggle {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--bs-gray-500);
    cursor: pointer;
    transition: color 0.15s ease;
}

.gtd-timeline-toggle:hover {
    color: var(--bs-primary);
}

.gtd-timeline-load-more {
    margin-top: 1rem;
    padding-left: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-timeline-view {
        padding-left: 1.5rem;
    }

    .gtd-timeline-marker {
        left: -1.25rem;
        width: 0.75rem;
        height: 0.75rem;
    }

    .gtd-timeline-content {
        padding: 0.75rem;
    }
}

/* ==========================================================================
   Rating Input - Star rating input
   ========================================================================== */

.gtd-rating-input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-rating-input-stars {
    display: flex;
    gap: 0.125rem;
}

.gtd-rating-input-star {
    background: none;
    border: none;
    padding: 0.125rem;
    cursor: pointer;
    color: var(--bs-gray-300);
    font-size: 1.25rem;
    transition: color 0.1s ease, transform 0.1s ease;
}

.gtd-rating-input-star:hover {
    transform: scale(1.1);
}

.gtd-rating-input-star.is-active,
.gtd-rating-input-star.is-preview {
    color: var(--bs-warning);
}

.gtd-rating-input-star.is-half {
    position: relative;
}

.gtd-rating-input-star.is-half::before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0.125rem;
    width: 50%;
    overflow: hidden;
    color: var(--bs-warning);
}

.gtd-rating-input-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    min-width: 2rem;
}

.gtd-rating-input-clear {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--bs-gray-500);
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-rating-input:hover .gtd-rating-input-clear {
    opacity: 1;
}

.gtd-rating-input-clear:hover {
    color: var(--bs-danger);
}

/* Readonly state */
.gtd-rating-input.is-readonly .gtd-rating-input-star {
    cursor: default;
}

.gtd-rating-input.is-readonly .gtd-rating-input-star:hover {
    transform: none;
}

/* Size variants */
.gtd-rating-input-sm .gtd-rating-input-star {
    font-size: 1rem;
}

.gtd-rating-input-lg .gtd-rating-input-star {
    font-size: 1.5rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-rating-input-star {
    color: var(--bs-gray-600);
}

/* ==========================================================================
   File Preview - File preview with thumbnails
   ========================================================================== */

.gtd-file-preview {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gtd-file-preview.is-dragover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-file-preview-dropzone {
    padding: 2rem 1rem;
}

.gtd-file-preview-icon {
    font-size: 2.5rem;
    color: var(--bs-gray-400);
    margin-bottom: 1rem;
}

.gtd-file-preview-text {
    color: var(--bs-gray-600);
    margin-bottom: 0.5rem;
}

.gtd-file-preview-hint {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-file-preview-button {
    margin-top: 1rem;
}

.gtd-file-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    text-align: left;
}

.gtd-file-preview-item {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.gtd-file-preview-thumbnail {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100);
    overflow: hidden;
}

.gtd-file-preview-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtd-file-preview-thumbnail i {
    font-size: 2rem;
    color: var(--bs-gray-400);
}

.gtd-file-preview-info {
    padding: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-file-preview-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-file-preview-size {
    font-size: 0.675rem;
    color: var(--bs-gray-500);
}

.gtd-file-preview-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: var(--bs-white);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-file-preview-item:hover .gtd-file-preview-remove {
    opacity: 1;
}

.gtd-file-preview-remove:hover {
    background: var(--bs-danger);
}

.gtd-file-preview-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bs-gray-200);
}

.gtd-file-preview-progress-bar {
    height: 100%;
    background: var(--bs-primary);
    transition: width 0.2s ease;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-file-preview-thumbnail {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Step Wizard - Multi-step wizard/process
   ========================================================================== */

.gtd-step-wizard {
    position: relative;
}

.gtd-step-wizard-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.gtd-step-wizard-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 200px;
}

.gtd-step-wizard-indicator::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: calc(-50% + 1rem);
    right: calc(50% + 1rem);
    height: 2px;
    background: var(--bs-border-color);
}

.gtd-step-wizard-indicator:first-child::before {
    display: none;
}

.gtd-step-wizard-indicator.is-completed::before,
.gtd-step-wizard-indicator.is-active::before {
    background: var(--bs-primary);
}

.gtd-step-wizard-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-gray-200);
    color: var(--bs-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gtd-step-wizard-indicator.is-active .gtd-step-wizard-number {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.gtd-step-wizard-indicator.is-completed .gtd-step-wizard-number {
    background: var(--bs-success);
    color: var(--bs-white);
}

.gtd-step-wizard-indicator.is-completed .gtd-step-wizard-number::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
}

.gtd-step-wizard-indicator.is-completed .gtd-step-wizard-number span {
    display: none;
}

.gtd-step-wizard-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-500);
    text-align: center;
}

.gtd-step-wizard-indicator.is-active .gtd-step-wizard-label {
    color: var(--bs-primary);
}

.gtd-step-wizard-indicator.is-completed .gtd-step-wizard-label {
    color: var(--bs-success);
}

.gtd-step-wizard-step {
    display: none;
    animation: gtd-step-fade-in 0.3s ease;
}

.gtd-step-wizard-step.is-active {
    display: block;
}

@keyframes gtd-step-fade-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.gtd-step-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-step-wizard-nav-prev,
.gtd-step-wizard-nav-next {
    min-width: 120px;
}

.gtd-step-wizard-nav-prev:disabled,
.gtd-step-wizard-nav-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Vertical variant */
.gtd-step-wizard.gtd-step-wizard-vertical .gtd-step-wizard-indicators {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
    margin-right: 2rem;
    padding: 0;
}

.gtd-step-wizard.gtd-step-wizard-vertical .gtd-step-wizard-indicator {
    flex-direction: row;
    max-width: none;
    padding-bottom: 2rem;
}

.gtd-step-wizard.gtd-step-wizard-vertical .gtd-step-wizard-indicator::before {
    top: 2rem;
    left: 0.9375rem;
    right: auto;
    bottom: 0;
    width: 2px;
    height: calc(100% - 2rem);
}

.gtd-step-wizard.gtd-step-wizard-vertical .gtd-step-wizard-label {
    margin-top: 0;
    margin-left: 0.75rem;
    text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-step-wizard-indicators {
        padding: 0;
    }

    .gtd-step-wizard-label {
        display: none;
    }

    .gtd-step-wizard-indicator.is-active .gtd-step-wizard-label {
        display: block;
        position: absolute;
        top: 100%;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Collapsible Panel - Collapsible panel/section
   ========================================================================== */

.gtd-collapsible-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.gtd-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bs-gray-100);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.gtd-collapsible-header:hover {
    background: var(--bs-gray-200);
}

.gtd-collapsible-header:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.gtd-collapsible-title {
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-collapsible-icon {
    color: var(--bs-gray-500);
    transition: transform 0.3s ease;
}

.gtd-collapsible-panel.is-expanded .gtd-collapsible-icon {
    transform: rotate(180deg);
}

.gtd-collapsible-content {
    overflow: hidden;
    transition: height 0.3s ease;
}

.gtd-collapsible-panel.is-collapsed .gtd-collapsible-content {
    height: 0;
}

.gtd-collapsible-inner {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Borderless variant */
.gtd-collapsible-panel.gtd-collapsible-borderless {
    border: none;
    border-radius: 0;
}

.gtd-collapsible-panel.gtd-collapsible-borderless .gtd-collapsible-header {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.gtd-collapsible-panel.gtd-collapsible-borderless .gtd-collapsible-inner {
    border-top: none;
    padding-left: 0;
    padding-right: 0;
}

/* Compact variant */
.gtd-collapsible-panel.gtd-collapsible-compact .gtd-collapsible-header {
    padding: 0.75rem 1rem;
}

.gtd-collapsible-panel.gtd-collapsible-compact .gtd-collapsible-inner {
    padding: 0.75rem 1rem;
}

/* Card variant */
.gtd-collapsible-panel.gtd-collapsible-card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.gtd-collapsible-panel.gtd-collapsible-card .gtd-collapsible-header {
    background: var(--bs-body-bg);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-collapsible-header {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-collapsible-header:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-collapsible-panel.gtd-collapsible-card .gtd-collapsible-header {
    background: var(--bs-gray-900);
}

/* ==========================================================================
   Price Comparison - Price comparison chart/grid
   ========================================================================== */

.gtd-price-comparison {
    position: relative;
}

.gtd-comparison-header {
    margin-bottom: 1rem;
}

.gtd-comparison-sort {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gtd-comparison-sort .btn.active {
    background: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}

.gtd-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.gtd-comparison-item {
    position: relative;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-comparison-item:hover {
    border-color: var(--bs-primary);
}

.gtd-comparison-item.is-best {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 1px var(--bs-success);
}

.gtd-comparison-item.is-highlighted {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-comparison-badge {
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background: var(--bs-success);
    color: var(--bs-white);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
}

.gtd-comparison-name {
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

.gtd-comparison-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gtd-comparison-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.gtd-comparison-diff {
    font-size: 0.875rem;
    color: var(--bs-danger);
}

.gtd-comparison-features {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
}

.gtd-comparison-features li {
    padding: 0.25rem 0;
    color: var(--bs-gray-600);
}

.gtd-comparison-savings {
    padding: 0.375rem 0.75rem;
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-comparison-grid {
        grid-template-columns: 1fr;
    }

    .gtd-comparison-amount {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Image Annotation - Image annotation with pins/notes
   ========================================================================== */

.gtd-image-annotation {
    position: relative;
}

.gtd-annotation-container {
    position: relative;
    display: inline-block;
}

.gtd-annotation-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

.gtd-annotation-pins {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.gtd-annotation-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-white);
    border: 2px solid var(--bs-white);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.gtd-annotation-pin:hover,
.gtd-annotation-pin.is-highlighted {
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 10;
}

.gtd-annotation-pin-dot {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0;
}

.gtd-annotation-tooltip {
    position: absolute;
    z-index: 1050;
    padding: 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-100%);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.gtd-annotation-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.gtd-annotation-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--bs-body-color);
}

.gtd-annotation-tooltip-desc {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-annotation-labels {
    margin-top: 1rem;
}

.gtd-annotation-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-annotation-label:hover {
    background: var(--bs-gray-100);
}

.gtd-annotation-label-number {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-annotation-label-text {
    color: var(--bs-body-color);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-annotation-label:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Tooltip Menu - Tooltip with action menu
   ========================================================================== */

.gtd-tooltip-menu {
    position: relative;
    display: inline-block;
}

.gtd-tooltip-menu-dropdown {
    position: absolute;
    z-index: 1050;
    min-width: 160px;
    padding: 0.5rem 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.gtd-tooltip-menu.is-open .gtd-tooltip-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-tooltip-menu-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-top: 0.25rem;
}

.gtd-tooltip-menu.is-open .gtd-tooltip-menu-bottom {
    transform: translateX(-50%) translateY(0);
}

.gtd-tooltip-menu-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-bottom: 0.25rem;
}

.gtd-tooltip-menu.is-open .gtd-tooltip-menu-top {
    transform: translateX(-50%) translateY(0);
}

.gtd-tooltip-menu-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    margin-right: 0.25rem;
}

.gtd-tooltip-menu.is-open .gtd-tooltip-menu-left {
    transform: translateY(-50%) translateX(0);
}

.gtd-tooltip-menu-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    margin-left: 0.25rem;
}

.gtd-tooltip-menu.is-open .gtd-tooltip-menu-right {
    transform: translateY(-50%) translateX(0);
}

.gtd-tooltip-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-tooltip-menu-item:hover,
.gtd-tooltip-menu-item:focus {
    background: var(--bs-gray-100);
    outline: none;
}

.gtd-tooltip-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-tooltip-menu-item-danger {
    color: var(--bs-danger);
}

.gtd-tooltip-menu-item-danger:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
}

.gtd-tooltip-menu-divider {
    height: 1px;
    margin: 0.5rem 0;
    background: var(--bs-border-color);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-tooltip-menu-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-tooltip-menu-item:hover,
[data-bs-theme="dark"] .gtd-tooltip-menu-item:focus {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   DateTime Picker - Combined date and time picker
   ========================================================================== */

.gtd-datetime-picker {
    position: relative;
    display: inline-block;
}

.gtd-datetime-picker input {
    padding-right: 2.5rem;
    cursor: pointer;
}

.gtd-datetime-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    cursor: pointer;
}

.gtd-datetime-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 280px;
    display: none;
}

.gtd-datetime-picker.is-open .gtd-datetime-dropdown {
    display: block;
}

.gtd-datetime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-datetime-nav {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    background: none;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.gtd-datetime-nav:hover {
    background: var(--bs-gray-100);
}

.gtd-datetime-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

.gtd-datetime-calendar {
    padding: 0.75rem;
}

.gtd-datetime-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.gtd-datetime-weekdays span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-500);
    padding: 0.25rem;
}

.gtd-datetime-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.gtd-datetime-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: none;
    background: none;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-datetime-day:hover:not([disabled]) {
    background: var(--bs-gray-100);
}

.gtd-datetime-day.is-today {
    font-weight: 600;
    color: var(--bs-primary);
}

.gtd-datetime-day.is-selected {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.gtd-datetime-day[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

.gtd-datetime-day-empty {
    cursor: default;
}

.gtd-datetime-time {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-datetime-time-group {
    flex: 1;
}

.gtd-datetime-time-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-500);
    margin-bottom: 0.25rem;
}

.gtd-datetime-time-sep {
    padding-bottom: 0.5rem;
    font-weight: 600;
    color: var(--bs-gray-500);
}

.gtd-datetime-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-datetime-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-datetime-nav:hover,
[data-bs-theme="dark"] .gtd-datetime-day:hover:not([disabled]) {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Input Autocomplete - Input with autocomplete suggestions
   ========================================================================== */

.gtd-input-autocomplete {
    position: relative;
}

.gtd-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.gtd-input-autocomplete.is-open .gtd-autocomplete-dropdown {
    display: block;
}

.gtd-autocomplete-loader {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-500);
    display: none;
}

.gtd-input-autocomplete.is-loading .gtd-autocomplete-loader {
    display: block;
}

.gtd-autocomplete-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-autocomplete-item:hover,
.gtd-autocomplete-item.is-selected {
    background: var(--bs-gray-100);
}

.gtd-autocomplete-item-content {
    flex: 1;
    min-width: 0;
}

.gtd-autocomplete-item-label {
    display: block;
    color: var(--bs-body-color);
}

.gtd-autocomplete-item-label mark {
    background: rgba(var(--bs-warning-rgb), 0.3);
    padding: 0;
}

.gtd-autocomplete-item-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtd-autocomplete-empty {
    padding: 1rem;
    text-align: center;
    color: var(--bs-gray-500);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-autocomplete-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-autocomplete-item:hover,
[data-bs-theme="dark"] .gtd-autocomplete-item.is-selected {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Stats Widget - Statistics widget with sparklines
   ========================================================================== */

.gtd-stats-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-stats-widget-content {
    flex: 1;
}

.gtd-stats-widget-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-gray-500);
    margin-bottom: 0.25rem;
}

.gtd-stats-widget-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gtd-stats-widget-number {
    display: inline-block;
}

.gtd-stats-widget-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.gtd-stats-widget-trend-up {
    color: var(--bs-success);
}

.gtd-stats-widget-trend-down {
    color: var(--bs-danger);
}

.gtd-stats-widget-trend-neutral {
    color: var(--bs-gray-500);
}

.gtd-stats-widget-trend-label {
    color: var(--bs-gray-500);
    font-weight: 400;
}

.gtd-stats-widget-sparkline {
    height: 40px;
    width: 100%;
}

.gtd-stats-widget-sparkline svg {
    width: 100%;
    height: 100%;
}

/* Compact variant */
.gtd-stats-widget-compact .gtd-stats-widget-value {
    font-size: 1.5rem;
}

.gtd-stats-widget-compact .gtd-stats-widget-sparkline {
    height: 30px;
}

/* Large variant */
.gtd-stats-widget-large .gtd-stats-widget-value {
    font-size: 3rem;
}

/* Horizontal layout */
.gtd-stats-widget-horizontal {
    flex-direction: row;
    align-items: center;
}

.gtd-stats-widget-horizontal .gtd-stats-widget-sparkline {
    width: 120px;
    height: 40px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-stats-widget-value {
        font-size: 1.5rem;
    }

    .gtd-stats-widget-large .gtd-stats-widget-value {
        font-size: 2rem;
    }

    .gtd-stats-widget-horizontal {
        flex-direction: column;
        align-items: stretch;
    }

    .gtd-stats-widget-horizontal .gtd-stats-widget-sparkline {
        width: 100%;
    }
}

/* ==========================================================================
   Media Grid - Grid layout for media/images
   ========================================================================== */

.gtd-media-grid {
    display: grid;
    grid-template-columns: repeat(var(--gtd-media-grid-columns, 4), 1fr);
    gap: var(--gtd-media-grid-gap, 1rem);
}

.gtd-media-grid-masonry {
    display: block;
    column-count: var(--gtd-media-grid-columns, 4);
    column-gap: var(--gtd-media-grid-gap, 1rem);
}

.gtd-media-grid-masonry .gtd-media-grid-item {
    break-inside: avoid;
    margin-bottom: var(--gtd-media-grid-gap, 1rem);
}

.gtd-media-grid-item {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bs-gray-100);
    aspect-ratio: var(--gtd-aspect-ratio, 1);
}

.gtd-media-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gtd-media-grid-item:hover img {
    transform: scale(1.05);
}

.gtd-media-grid-item.is-selected {
    box-shadow: 0 0 0 3px var(--bs-primary);
}

.gtd-media-grid-select {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
}

.gtd-media-grid-select input {
    position: absolute;
    opacity: 0;
}

.gtd-media-grid-checkbox {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-media-grid-checkbox i {
    opacity: 0;
    color: var(--bs-white);
    font-size: 0.75rem;
}

.gtd-media-grid-select input:checked + .gtd-media-grid-checkbox {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.gtd-media-grid-select input:checked + .gtd-media-grid-checkbox i {
    opacity: 1;
}

.gtd-media-grid-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: var(--bs-white);
    font-size: 0.875rem;
}

.gtd-media-grid-zoom {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: var(--bs-white);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-media-grid-item:hover .gtd-media-grid-zoom {
    opacity: 1;
}

.gtd-media-grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gtd-media-grid-overlay img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}

.gtd-media-grid-overlay-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--bs-white);
    font-size: 1.25rem;
    cursor: pointer;
}

.gtd-media-grid-overlay-caption {
    color: var(--bs-white);
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-media-grid {
        --gtd-media-grid-columns: 2;
    }

    .gtd-media-grid-masonry {
        column-count: 2;
    }
}

/* ==========================================================================
   Card Stack - Stacked card carousel
   ========================================================================== */

.gtd-card-stack {
    position: relative;
    padding-bottom: 3rem;
}

.gtd-card-stack-container {
    position: relative;
    perspective: 1000px;
    min-height: 300px;
}

.gtd-card-stack-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform-origin: center top;
}

.gtd-card-stack-card.is-active {
    position: relative;
    z-index: 10;
}

.gtd-card-stack-card.is-behind {
    transform: translateY(calc(var(--stack-offset, 1) * 20px)) scale(var(--stack-scale, 0.95));
    opacity: var(--stack-opacity, 0.8);
    z-index: calc(5 - var(--stack-offset, 1));
}

.gtd-card-stack-card.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.gtd-card-stack-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.gtd-card-stack-prev,
.gtd-card-stack-next {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-card-stack-prev:hover,
.gtd-card-stack-next:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.gtd-card-stack-dots {
    display: flex;
    gap: 0.5rem;
}

.gtd-card-stack-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bs-gray-300);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-card-stack-dot.is-active {
    background: var(--bs-primary);
    transform: scale(1.25);
}

/* Horizontal variant */
.gtd-card-stack-horizontal .gtd-card-stack-card.is-behind {
    transform: translateX(calc(var(--stack-offset, 1) * 30px)) scale(var(--stack-scale, 0.95));
}

/* ==========================================================================
   Progress Tracker - Multi-step progress tracker
   ========================================================================== */

.gtd-progress-tracker {
    position: relative;
}

.gtd-progress-tracker-horizontal {
    display: flex;
    flex-direction: column;
}

.gtd-progress-tracker-line {
    position: absolute;
    background: var(--bs-gray-200);
}

.gtd-progress-tracker-horizontal .gtd-progress-tracker-line {
    top: 1rem;
    left: 2rem;
    right: 2rem;
    height: 2px;
}

.gtd-progress-tracker-fill {
    height: 100%;
    background: var(--bs-primary);
    width: var(--progress, 0%);
    transition: width 0.3s ease;
}

.gtd-progress-tracker-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.gtd-progress-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: pointer;
}

.gtd-progress-tracker-marker {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-gray-200);
    color: var(--bs-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.gtd-progress-tracker-step-completed .gtd-progress-tracker-marker {
    background: var(--bs-success);
    color: var(--bs-white);
}

.gtd-progress-tracker-step-active .gtd-progress-tracker-marker {
    background: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}

.gtd-progress-tracker-content {
    text-align: center;
    margin-top: 0.75rem;
}

.gtd-progress-tracker-title {
    font-weight: 500;
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.gtd-progress-tracker-step-pending .gtd-progress-tracker-title {
    color: var(--bs-gray-500);
}

.gtd-progress-tracker-desc {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Vertical variant */
.gtd-progress-tracker-vertical .gtd-progress-tracker-line {
    top: 2rem;
    bottom: 2rem;
    left: 1rem;
    width: 2px;
    height: auto;
}

.gtd-progress-tracker-vertical .gtd-progress-tracker-fill {
    width: 100%;
    height: var(--progress, 0%);
}

.gtd-progress-tracker-vertical .gtd-progress-tracker-steps {
    flex-direction: column;
    gap: 2rem;
}

.gtd-progress-tracker-vertical .gtd-progress-tracker-step {
    flex-direction: row;
    align-items: flex-start;
}

.gtd-progress-tracker-vertical .gtd-progress-tracker-content {
    text-align: left;
    margin-top: 0;
    margin-left: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-progress-tracker-horizontal .gtd-progress-tracker-title {
        font-size: 0.75rem;
    }

    .gtd-progress-tracker-horizontal .gtd-progress-tracker-desc {
        display: none;
    }
}

/* ==========================================================================
   Filter Accordion - Accordion-style filter panel
   ========================================================================== */

.gtd-filter-accordion {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.gtd-filter-section {
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-filter-section:last-child {
    border-bottom: none;
}

.gtd-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-filter-section-header:hover {
    background: var(--bs-gray-100);
}

.gtd-filter-section-title {
    font-weight: 600;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-filter-section-count {
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}

.gtd-filter-section-icon {
    color: var(--bs-gray-500);
    transition: transform 0.3s ease;
}

.gtd-filter-section.is-expanded .gtd-filter-section-icon {
    transform: rotate(180deg);
}

.gtd-filter-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gtd-filter-section.is-expanded .gtd-filter-section-content {
    max-height: 500px;
}

.gtd-filter-options {
    padding: 0 1rem 1rem;
}

.gtd-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-filter-option:hover {
    background: var(--bs-gray-100);
}

.gtd-filter-option.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-filter-option input {
    accent-color: var(--bs-primary);
}

.gtd-filter-option-label {
    flex: 1;
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.gtd-filter-option-count {
    color: var(--bs-gray-500);
    font-size: 0.75rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-filter-section-header:hover,
[data-bs-theme="dark"] .gtd-filter-option:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Search Box - Enhanced search input
   ========================================================================== */

.gtd-search-box {
    position: relative;
}

.gtd-search-box-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gtd-search-box-icon {
    position: absolute;
    left: 1rem;
    color: var(--bs-gray-500);
}

.gtd-search-box-input {
    width: 100%;
    padding: 0.75rem 2.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-search-box-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.gtd-search-box-clear {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--bs-gray-500);
    cursor: pointer;
    padding: 0.25rem;
    display: none;
}

.gtd-search-box-clear:hover {
    color: var(--bs-body-color);
}

.gtd-search-box-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.gtd-search-box.is-open .gtd-search-box-dropdown {
    display: block;
}

.gtd-search-box-header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-500);
    text-transform: uppercase;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-search-box-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.gtd-search-box-item:hover {
    background: var(--bs-gray-100);
}

.gtd-search-box-item-content {
    flex: 1;
    min-width: 0;
}

.gtd-search-box-item-label {
    display: block;
    color: var(--bs-body-color);
}

.gtd-search-box-item-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.125rem;
}

.gtd-search-box-remove {
    background: none;
    border: none;
    color: var(--bs-gray-400);
    padding: 0.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gtd-search-box-item:hover .gtd-search-box-remove {
    opacity: 1;
}

.gtd-search-box-remove:hover {
    color: var(--bs-danger);
}

.gtd-search-box-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-gray-500);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-search-box-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-search-box-item:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Status Badge - Status indicator badge
   ========================================================================== */

.gtd-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.gtd-status-badge i {
    font-size: 0.625rem;
}

/* Solid variants */
.gtd-status-badge-solid.gtd-status-badge-success {
    background: var(--bs-success);
    color: var(--bs-white);
}

.gtd-status-badge-solid.gtd-status-badge-warning {
    background: var(--bs-warning);
    color: var(--bs-dark);
}

.gtd-status-badge-solid.gtd-status-badge-danger {
    background: var(--bs-danger);
    color: var(--bs-white);
}

.gtd-status-badge-solid.gtd-status-badge-info {
    background: var(--bs-info);
    color: var(--bs-white);
}

.gtd-status-badge-solid.gtd-status-badge-pending {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.gtd-status-badge-solid.gtd-status-badge-active {
    background: var(--bs-success);
    color: var(--bs-white);
}

.gtd-status-badge-solid.gtd-status-badge-inactive {
    background: var(--bs-gray-400);
    color: var(--bs-white);
}

.gtd-status-badge-solid.gtd-status-badge-default {
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
}

/* Outline variants */
.gtd-status-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.gtd-status-badge-outline.gtd-status-badge-success {
    color: var(--bs-success);
}

.gtd-status-badge-outline.gtd-status-badge-warning {
    color: var(--bs-warning);
}

.gtd-status-badge-outline.gtd-status-badge-danger {
    color: var(--bs-danger);
}

.gtd-status-badge-outline.gtd-status-badge-info {
    color: var(--bs-info);
}

.gtd-status-badge-outline.gtd-status-badge-pending {
    color: var(--bs-secondary);
}

.gtd-status-badge-outline.gtd-status-badge-active {
    color: var(--bs-success);
}

.gtd-status-badge-outline.gtd-status-badge-inactive {
    color: var(--bs-gray-400);
}

.gtd-status-badge-outline.gtd-status-badge-default {
    color: var(--bs-gray-500);
}

/* Light variants */
.gtd-status-badge-light.gtd-status-badge-success {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.gtd-status-badge-light.gtd-status-badge-warning {
    background: rgba(var(--bs-warning-rgb), 0.1);
    color: var(--bs-warning);
}

.gtd-status-badge-light.gtd-status-badge-danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.gtd-status-badge-light.gtd-status-badge-info {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

.gtd-status-badge-light.gtd-status-badge-pending {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--bs-secondary);
}

.gtd-status-badge-light.gtd-status-badge-active {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.gtd-status-badge-light.gtd-status-badge-inactive {
    background: var(--bs-gray-100);
    color: var(--bs-gray-500);
}

.gtd-status-badge-light.gtd-status-badge-default {
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
}

/* Size variants */
.gtd-status-badge-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.675rem;
}

.gtd-status-badge-lg {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Pulse animation */
.gtd-status-badge-pulse {
    position: relative;
}

.gtd-status-badge-pulse-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: gtd-pulse 2s infinite;
}

@keyframes gtd-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
   Data Exporter - Advanced data export with multiple formats
   ========================================================================== */

.gtd-data-exporter {
    position: relative;
    display: inline-block;
}

.gtd-data-exporter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-data-exporter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 280px;
    margin-top: 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.gtd-data-exporter.is-open .gtd-data-exporter-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gtd-data-exporter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-data-exporter-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--bs-gray-500);
    transition: color 0.15s ease;
}

.gtd-data-exporter-close:hover {
    color: var(--bs-gray-700);
}

.gtd-data-exporter-formats {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.25rem;
}

.gtd-data-exporter-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-data-exporter-option:hover {
    background: var(--bs-gray-100);
}

.gtd-data-exporter-option.selected {
    background: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.gtd-data-exporter-option input[type="radio"] {
    display: none;
}

.gtd-data-exporter-option i {
    font-size: 1.25rem;
    color: var(--bs-primary);
    width: 24px;
    text-align: center;
}

.gtd-data-exporter-option-label {
    font-weight: 600;
    font-size: 0.875rem;
}

.gtd-data-exporter-option-desc {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-left: auto;
}

.gtd-data-exporter-options {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-data-exporter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.gtd-data-exporter-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-data-exporter-submit {
    width: 100%;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-data-exporter-dropdown {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-data-exporter-option:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-data-exporter-close:hover {
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Toggle Input - Enhanced toggle switch with labels
   ========================================================================== */

.gtd-toggle-input {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.gtd-toggle-input.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-toggle-input-label-off,
.gtd-toggle-input-label-on {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
    transition: color 0.2s ease;
}

.gtd-toggle-input.is-checked .gtd-toggle-input-label-on {
    color: var(--bs-primary);
    font-weight: 600;
}

.gtd-toggle-input:not(.is-checked) .gtd-toggle-input-label-off {
    color: var(--bs-gray-800);
    font-weight: 600;
}

.gtd-toggle-input-track {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--bs-gray-300);
    border-radius: 13px;
    transition: background 0.2s ease;
}

.gtd-toggle-input.is-checked .gtd-toggle-input-track {
    background: var(--bs-primary);
}

.gtd-toggle-input-track input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gtd-toggle-input-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-toggle-input.is-checked .gtd-toggle-input-slider {
    transform: translateX(22px);
}

.gtd-toggle-input-icon {
    font-size: 0.625rem;
    position: absolute;
}

.gtd-toggle-input-icon-off {
    color: var(--bs-gray-500);
}

.gtd-toggle-input-icon-on {
    color: var(--bs-primary);
    opacity: 0;
}

.gtd-toggle-input.is-checked .gtd-toggle-input-icon-off {
    opacity: 0;
}

.gtd-toggle-input.is-checked .gtd-toggle-input-icon-on {
    opacity: 1;
}

/* Size variants */
.gtd-toggle-input-sm .gtd-toggle-input-track {
    width: 36px;
    height: 20px;
}

.gtd-toggle-input-sm .gtd-toggle-input-slider {
    width: 14px;
    height: 14px;
}

.gtd-toggle-input-sm.is-checked .gtd-toggle-input-slider {
    transform: translateX(16px);
}

.gtd-toggle-input-lg .gtd-toggle-input-track {
    width: 60px;
    height: 32px;
}

.gtd-toggle-input-lg .gtd-toggle-input-slider {
    width: 26px;
    height: 26px;
}

.gtd-toggle-input-lg.is-checked .gtd-toggle-input-slider {
    transform: translateX(28px);
}

/* Color variants */
.gtd-toggle-input-success.is-checked .gtd-toggle-input-track {
    background: var(--bs-success);
}

.gtd-toggle-input-danger.is-checked .gtd-toggle-input-track {
    background: var(--bs-danger);
}

.gtd-toggle-input-warning.is-checked .gtd-toggle-input-track {
    background: var(--bs-warning);
}

.gtd-toggle-input-info.is-checked .gtd-toggle-input-track {
    background: var(--bs-info);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-toggle-input-track {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-toggle-input-label-off,
[data-bs-theme="dark"] .gtd-toggle-input-label-on {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-toggle-input:not(.is-checked) .gtd-toggle-input-label-off {
    color: var(--bs-gray-200);
}

/* ==========================================================================
   Split Pane - Resizable split pane view
   ========================================================================== */

.gtd-split-pane {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gtd-split-pane-vertical {
    flex-direction: column;
}

.gtd-split-panel {
    overflow: auto;
    flex-shrink: 0;
}

.gtd-split-gutter {
    flex-shrink: 0;
    background: var(--bs-gray-200);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.gtd-split-pane-horizontal .gtd-split-gutter {
    cursor: col-resize;
}

.gtd-split-pane-vertical .gtd-split-gutter {
    cursor: row-resize;
}

.gtd-split-gutter:hover,
.gtd-split-pane.is-dragging .gtd-split-gutter {
    background: var(--bs-primary);
}

.gtd-split-pane.is-dragging {
    user-select: none;
}

.gtd-split-pane.is-dragging .gtd-split-panel {
    pointer-events: none;
}

.gtd-split-collapse-btn {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}

.gtd-split-collapse-btn:hover {
    background: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.gtd-split-pane.is-collapsed .gtd-split-gutter {
    background: var(--bs-gray-300);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-split-pane-horizontal {
        flex-direction: column;
    }

    .gtd-split-pane-horizontal .gtd-split-panel {
        width: 100% !important;
        height: auto !important;
    }

    .gtd-split-pane-horizontal .gtd-split-gutter {
        width: 100% !important;
        height: 8px !important;
        cursor: row-resize;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-split-gutter {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-split-collapse-btn {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

/* ==========================================================================
   Card Reveal - Card with reveal content on hover/click
   ========================================================================== */

.gtd-card-reveal {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.gtd-card-reveal-front,
.gtd-card-reveal-back {
    transition: transform var(--gtd-card-reveal-duration, 300ms) ease;
}

.gtd-card-reveal-front {
    position: relative;
    z-index: 1;
}

.gtd-card-reveal-back {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: white;
}

/* Direction: Up */
.gtd-card-reveal-up .gtd-card-reveal-back {
    transform: translateY(100%);
}

.gtd-card-reveal-up.is-revealed .gtd-card-reveal-back {
    transform: translateY(0);
}

/* Direction: Down */
.gtd-card-reveal-down .gtd-card-reveal-back {
    transform: translateY(-100%);
}

.gtd-card-reveal-down.is-revealed .gtd-card-reveal-back {
    transform: translateY(0);
}

/* Direction: Left */
.gtd-card-reveal-left .gtd-card-reveal-back {
    transform: translateX(100%);
}

.gtd-card-reveal-left.is-revealed .gtd-card-reveal-back {
    transform: translateX(0);
}

/* Direction: Right */
.gtd-card-reveal-right .gtd-card-reveal-back {
    transform: translateX(-100%);
}

.gtd-card-reveal-right.is-revealed .gtd-card-reveal-back {
    transform: translateX(0);
}

/* Direction: Fade */
.gtd-card-reveal-fade .gtd-card-reveal-back {
    opacity: 0;
    transform: none;
}

.gtd-card-reveal-fade.is-revealed .gtd-card-reveal-back {
    opacity: 1;
}

.gtd-card-reveal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gtd-card-reveal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Skeleton Loader - Enhanced skeleton loading placeholder
   ========================================================================== */

.gtd-skeleton-loader {
    --gtd-skeleton-base: var(--bs-gray-200);
    --gtd-skeleton-highlight: var(--bs-gray-100);
}

.gtd-skeleton-dark {
    --gtd-skeleton-base: var(--bs-gray-700);
    --gtd-skeleton-highlight: var(--bs-gray-600);
}

.gtd-skeleton-animated [class*="gtd-skeleton-"] {
    background: linear-gradient(
        90deg,
        var(--gtd-skeleton-base) 25%,
        var(--gtd-skeleton-highlight) 50%,
        var(--gtd-skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: gtd-skeleton-shimmer 1.5s infinite;
}

.gtd-skeleton-speed-slow [class*="gtd-skeleton-"] {
    animation-duration: 2.5s;
}

.gtd-skeleton-speed-fast [class*="gtd-skeleton-"] {
    animation-duration: 0.8s;
}

@keyframes gtd-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Card template */
.gtd-skeleton-card {
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.gtd-skeleton-image {
    height: 180px;
    background: var(--gtd-skeleton-base);
}

.gtd-skeleton-body {
    padding: 1rem;
}

.gtd-skeleton-title {
    height: 20px;
    width: 70%;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.gtd-skeleton-text {
    height: 14px;
    width: 100%;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.gtd-skeleton-text.short {
    width: 60%;
}

/* List template */
.gtd-skeleton-list-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gtd-skeleton-base);
    flex-shrink: 0;
}

.gtd-skeleton-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gtd-skeleton-base);
    flex-shrink: 0;
}

.gtd-skeleton-content {
    flex: 1;
}

/* Table template */
.gtd-skeleton-table-row {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-skeleton-cell {
    height: 16px;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
    flex: 1;
}

.gtd-skeleton-cell.wide {
    flex: 2;
}

.gtd-skeleton-cell.narrow {
    flex: 0.5;
}

/* Text/Paragraph template */
.gtd-skeleton-paragraph {
    padding: 1rem;
}

.gtd-skeleton-line {
    height: 14px;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.gtd-skeleton-line.short {
    width: 40%;
}

/* Profile template */
.gtd-skeleton-profile {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: flex-start;
}

.gtd-skeleton-info {
    flex: 1;
}

.gtd-skeleton-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-skeleton-badge {
    width: 60px;
    height: 24px;
    background: var(--gtd-skeleton-base);
    border-radius: 12px;
}

/* Vehicle template */
.gtd-skeleton-vehicle {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.gtd-skeleton-vehicle-image {
    width: 200px;
    height: 150px;
    background: var(--gtd-skeleton-base);
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.gtd-skeleton-vehicle-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gtd-skeleton-vehicle-title {
    height: 24px;
    width: 80%;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
    margin-bottom: 1rem;
}

.gtd-skeleton-vehicle-specs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: auto;
}

.gtd-skeleton-spec {
    width: 80px;
    height: 28px;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
}

.gtd-skeleton-vehicle-price {
    width: 120px;
    height: 32px;
    background: var(--gtd-skeleton-base);
    border-radius: 4px;
}

/* Transition states */
.gtd-skeleton-loader.is-transitioning {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.gtd-skeleton-loader.is-loaded {
    animation: gtd-skeleton-fade-out 0.3s ease forwards;
}

@keyframes gtd-skeleton-fade-out {
    to {
        opacity: 0;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-skeleton-loader {
    --gtd-skeleton-base: var(--bs-gray-700);
    --gtd-skeleton-highlight: var(--bs-gray-600);
}

/* ==========================================================================
   Context Actions - Context-aware action menu
   ========================================================================== */

.gtd-context-actions-menu {
    position: fixed;
    z-index: 1100;
    min-width: 180px;
    max-width: 280px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    padding: 0.375rem;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.15s ease;
}

.gtd-context-actions-menu.is-visible {
    opacity: 1;
    transform: scale(1);
}

.gtd-context-dark {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

.gtd-context-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    transition: background 0.1s ease;
    position: relative;
}

.gtd-context-item:hover {
    background: var(--bs-gray-100);
}

.gtd-context-dark .gtd-context-item:hover {
    background: var(--bs-gray-700);
}

.gtd-context-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-context-item.disabled:hover {
    background: transparent;
}

.gtd-context-item.danger {
    color: var(--bs-danger);
}

.gtd-context-item.danger:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
}

.gtd-context-item i:first-child {
    width: 16px;
    text-align: center;
    font-size: 0.875rem;
}

.gtd-context-icon-placeholder {
    width: 16px;
}

.gtd-context-label {
    flex: 1;
}

.gtd-context-shortcut {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    font-family: monospace;
}

.gtd-context-arrow {
    font-size: 0.625rem;
    color: var(--bs-gray-400);
}

.gtd-context-divider {
    height: 1px;
    background: var(--bs-border-color);
    margin: 0.375rem 0;
}

/* Submenu */
.gtd-context-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 0.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.15s ease;
}

.gtd-context-item.has-submenu:hover > .gtd-context-submenu,
.gtd-context-submenu.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-context-actions-menu {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-context-item:hover {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-context-divider {
    background: var(--bs-gray-700);
}

/* ==========================================================================
   Color Swatch - Color swatch picker with palette support
   ========================================================================== */

.gtd-color-swatch {
    display: inline-block;
}

.gtd-color-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gtd-color-swatch-item {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.gtd-color-swatch-item:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gtd-color-swatch-item.selected {
    border-color: var(--bs-gray-800);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--bs-gray-800);
}

/* Size variants */
.gtd-color-swatch-sm .gtd-color-swatch-item {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
}

.gtd-color-swatch-lg .gtd-color-swatch-item {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.gtd-color-swatch-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-color-swatch-custom-input {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
}

.gtd-color-swatch-custom-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.gtd-color-swatch-custom-input::-webkit-color-swatch {
    border: none;
    border-radius: 0.375rem;
}

.gtd-color-swatch-custom-label {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-color-swatch-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.gtd-color-swatch-preview {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color);
}

.gtd-color-swatch-value {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-color-swatch-item.selected {
    border-color: var(--bs-gray-200);
    box-shadow: 0 0 0 2px var(--bs-gray-800), 0 0 0 4px var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-color-swatch-value {
    color: var(--bs-gray-400);
}

/* ==========================================================================
   Image Zoomer - Image zoom on hover/click with magnifier
   ========================================================================== */

.gtd-image-zoomer {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.gtd-image-zoomer img {
    display: block;
}

.gtd-image-zoomer-lens {
    position: absolute;
    display: none;
    border: 3px solid var(--bs-primary);
    background-repeat: no-repeat;
    cursor: crosshair;
    z-index: 10;
}

.gtd-image-zoomer-lens-circle {
    border-radius: 50%;
}

.gtd-image-zoomer-lens-square {
    border-radius: 0.375rem;
}

.gtd-image-zoomer.is-active {
    cursor: none;
}

.gtd-image-zoomer-result {
    position: absolute;
    display: none;
    width: 300px;
    height: 300px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-repeat: no-repeat;
    background-color: white;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    z-index: 20;
}

.gtd-image-zoomer-result-right {
    left: 100%;
    top: 0;
    margin-left: 1rem;
}

.gtd-image-zoomer-result-left {
    right: 100%;
    top: 0;
    margin-right: 1rem;
}

.gtd-image-zoomer-result-top {
    bottom: 100%;
    left: 0;
    margin-bottom: 1rem;
}

.gtd-image-zoomer-result-bottom {
    top: 100%;
    left: 0;
    margin-top: 1rem;
}

/* ==========================================================================
   Accordion Menu - Accordion-style navigation menu
   ========================================================================== */

.gtd-accordion-menu {
    display: flex;
    flex-direction: column;
}

.gtd-accordion-menu-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-accordion-menu-item:last-child {
    border-bottom: none;
}

.gtd-accordion-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s ease;
}

.gtd-accordion-menu-header:hover {
    background: var(--bs-gray-100);
}

.gtd-accordion-menu-icon {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    transition: transform 0.3s ease;
}

.gtd-accordion-menu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--gtd-accordion-duration, 300ms) ease;
}

.gtd-accordion-menu-item.is-expanded .gtd-accordion-menu-header {
    color: var(--bs-primary);
}

.gtd-accordion-menu-item.is-expanded .gtd-accordion-menu-content {
    padding-bottom: 0.5rem;
}

/* Nested menu items */
.gtd-accordion-menu-content .gtd-accordion-menu-item {
    border-bottom: none;
}

.gtd-accordion-menu-content .gtd-accordion-menu-header {
    padding-left: 2rem;
    font-weight: 400;
    font-size: 0.9375rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-accordion-menu-header:hover {
    background: var(--bs-gray-800);
}

/* ==========================================================================
   Tab Slider - Tab navigation with sliding indicator
   ========================================================================== */

.gtd-tab-slider {
    width: 100%;
}

.gtd-tab-slider-list {
    position: relative;
    display: flex;
    border-bottom: 2px solid var(--bs-border-color);
}

.gtd-tab-slider-vertical .gtd-tab-slider-list {
    flex-direction: column;
    border-bottom: none;
    border-right: 2px solid var(--bs-border-color);
}

.gtd-tab-slider-tab {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--bs-gray-600);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.gtd-tab-slider-tab:hover {
    color: var(--bs-gray-800);
}

.gtd-tab-slider-tab.is-active {
    color: var(--bs-primary);
}

.gtd-tab-slider-indicator {
    position: absolute;
    bottom: -2px;
    height: 2px;
    background: var(--bs-primary);
    transition: all 0.3s ease;
}

.gtd-tab-slider-vertical .gtd-tab-slider-indicator {
    right: -2px;
    bottom: auto;
    width: 2px;
    height: auto;
}

.gtd-tab-slider-panels {
    padding-top: 1rem;
}

.gtd-tab-slider-vertical .gtd-tab-slider-panels {
    padding-top: 0;
    padding-left: 1rem;
}

.gtd-tab-slider-panel {
    display: none;
}

.gtd-tab-slider-panel.is-active {
    display: block;
    animation: gtd-tab-fade-in 0.3s ease;
}

@keyframes gtd-tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-tab-slider-tab {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-tab-slider-tab:hover {
    color: var(--bs-gray-200);
}

/* ==========================================================================
   Alert Stack - Stacked alert notifications
   ========================================================================== */

.gtd-alert-stack {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
    padding: 1rem;
    pointer-events: none;
}

.gtd-alert-stack-top-right {
    top: 0;
    right: 0;
}

.gtd-alert-stack-top-left {
    top: 0;
    left: 0;
}

.gtd-alert-stack-bottom-right {
    bottom: 0;
    right: 0;
}

.gtd-alert-stack-bottom-left {
    bottom: 0;
    left: 0;
}

.gtd-alert-stack-top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-alert-stack-bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.gtd-alert-stack-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gtd-alert-stack-top-left .gtd-alert-stack-item,
.gtd-alert-stack-bottom-left .gtd-alert-stack-item {
    transform: translateX(-100%);
}

.gtd-alert-stack-item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.gtd-alert-stack-item.is-dismissing {
    opacity: 0;
    transform: translateX(100%);
}

.gtd-alert-stack-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.gtd-alert-stack-success .gtd-alert-stack-icon {
    color: var(--bs-success);
}

.gtd-alert-stack-warning .gtd-alert-stack-icon {
    color: var(--bs-warning);
}

.gtd-alert-stack-danger .gtd-alert-stack-icon {
    color: var(--bs-danger);
}

.gtd-alert-stack-info .gtd-alert-stack-icon {
    color: var(--bs-info);
}

.gtd-alert-stack-content {
    flex: 1;
    min-width: 0;
}

.gtd-alert-stack-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gtd-alert-stack-message {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}

.gtd-alert-stack-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gtd-alert-stack-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--bs-gray-500);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.gtd-alert-stack-close:hover {
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
}

.gtd-alert-stack-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--bs-primary);
}

.gtd-alert-stack-success .gtd-alert-stack-progress {
    background: var(--bs-success);
}

.gtd-alert-stack-warning .gtd-alert-stack-progress {
    background: var(--bs-warning);
}

.gtd-alert-stack-danger .gtd-alert-stack-progress {
    background: var(--bs-danger);
}

.gtd-alert-stack-info .gtd-alert-stack-progress {
    background: var(--bs-info);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-alert-stack-item {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-alert-stack-message {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-alert-stack-close:hover {
    background: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

/* ==========================================================================
   Input Validator - Real-time input validation feedback
   ========================================================================== */

.gtd-input-validator-wrapper {
    position: relative;
}

.gtd-input-validator-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtd-input-validator-wrapper.is-valid .gtd-input-validator-input {
    border-color: var(--bs-success);
}

.gtd-input-validator-wrapper.is-valid .gtd-input-validator-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.gtd-input-validator-wrapper.is-invalid .gtd-input-validator-input {
    border-color: var(--bs-danger);
}

.gtd-input-validator-wrapper.is-invalid .gtd-input-validator-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.gtd-input-validator-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.gtd-input-validator-wrapper.is-valid .gtd-input-validator-icon::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--bs-success);
}

.gtd-input-validator-wrapper.is-invalid .gtd-input-validator-icon::before {
    content: "\f057";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--bs-danger);
}

.gtd-input-validator-wrapper.is-validating .gtd-input-validator-icon::before {
    content: "\f110";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--bs-gray-500);
    animation: gtd-spin 1s linear infinite;
}

@keyframes gtd-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.gtd-input-validator-feedback {
    display: none;
    margin-top: 0.375rem;
}

.gtd-input-validator-error {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-danger);
}

.gtd-input-validator-error + .gtd-input-validator-error {
    margin-top: 0.125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-alert-stack {
        max-width: calc(100% - 2rem);
        left: 1rem !important;
        right: 1rem !important;
        transform: none !important;
    }

    .gtd-alert-stack-item {
        transform: translateY(-20px);
    }

    .gtd-alert-stack-item.is-visible {
        transform: translateY(0);
    }

    .gtd-alert-stack-item.is-dismissing {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ============================================
   NUMBER INPUT
   ============================================ */
.gtd-number-input {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--bs-body-bg);
}

.gtd-number-input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: 0;
    border: none;
    background: var(--bs-gray-100);
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.gtd-number-input-btn:hover {
    background: var(--bs-gray-200);
    color: var(--bs-gray-900);
}

.gtd-number-input-btn:active {
    background: var(--bs-gray-300);
}

.gtd-number-input-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bs-gray-100);
}

.gtd-number-input-btn-decrement {
    border-right: 1px solid var(--bs-border-color);
}

.gtd-number-input-btn-increment {
    border-left: 1px solid var(--bs-border-color);
}

.gtd-number-input-field {
    width: 4rem;
    padding: 0.5rem;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

.gtd-number-input-field:focus {
    outline: none;
}

.gtd-number-input:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Size variants */
.gtd-number-input-sm .gtd-number-input-btn {
    width: 2rem;
    font-size: 0.875rem;
}

.gtd-number-input-sm .gtd-number-input-field {
    width: 3rem;
    padding: 0.375rem;
    font-size: 0.875rem;
}

.gtd-number-input-lg .gtd-number-input-btn {
    width: 3rem;
    font-size: 1.125rem;
}

.gtd-number-input-lg .gtd-number-input-field {
    width: 5rem;
    padding: 0.625rem;
    font-size: 1.125rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-number-input {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-number-input-btn {
    background: var(--bs-gray-800);
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-number-input-btn:hover {
    background: var(--bs-gray-700);
    color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .gtd-number-input-btn:active {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-number-input-btn-decrement {
    border-right-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-number-input-btn-increment {
    border-left-color: var(--bs-gray-700);
}

/* ============================================
   TAGS CLOUD
   ============================================ */
.gtd-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
}

.gtd-tags-cloud-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    color: var(--bs-gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gtd-tags-cloud-tag:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.3);
}

.gtd-tags-cloud-tag.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* Size variants based on frequency */
.gtd-tags-cloud-tag-xs {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.gtd-tags-cloud-tag-sm {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
}

.gtd-tags-cloud-tag-md {
    font-size: 0.9375rem;
    padding: 0.375rem 0.75rem;
}

.gtd-tags-cloud-tag-lg {
    font-size: 1.0625rem;
    padding: 0.4375rem 0.875rem;
    font-weight: 500;
}

.gtd-tags-cloud-tag-xl {
    font-size: 1.25rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Color schemes */
.gtd-tags-cloud-gradient .gtd-tags-cloud-tag {
    background: linear-gradient(135deg, var(--bs-gray-100), var(--bs-gray-200));
}

.gtd-tags-cloud-colorful .gtd-tags-cloud-tag:nth-child(5n+1) {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    color: var(--bs-primary);
}

.gtd-tags-cloud-colorful .gtd-tags-cloud-tag:nth-child(5n+2) {
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: rgba(var(--bs-success-rgb), 0.3);
    color: var(--bs-success);
}

.gtd-tags-cloud-colorful .gtd-tags-cloud-tag:nth-child(5n+3) {
    background: rgba(var(--bs-info-rgb), 0.1);
    border-color: rgba(var(--bs-info-rgb), 0.3);
    color: var(--bs-info);
}

.gtd-tags-cloud-colorful .gtd-tags-cloud-tag:nth-child(5n+4) {
    background: rgba(var(--bs-warning-rgb), 0.1);
    border-color: rgba(var(--bs-warning-rgb), 0.3);
    color: var(--bs-warning);
}

.gtd-tags-cloud-colorful .gtd-tags-cloud-tag:nth-child(5n+5) {
    background: rgba(var(--bs-danger-rgb), 0.1);
    border-color: rgba(var(--bs-danger-rgb), 0.3);
    color: var(--bs-danger);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-tags-cloud-tag {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .gtd-tags-cloud-tag:hover {
    background: var(--bs-primary);
    color: #fff;
}

/* ============================================
   COLLAPSIBLE LIST
   ============================================ */
.gtd-collapsible-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtd-collapsible-list-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.gtd-collapsible-list-item:last-child {
    border-bottom: none;
}

.gtd-collapsible-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-collapsible-list-header:hover {
    background: var(--bs-gray-100);
}

.gtd-collapsible-list-header-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    color: var(--bs-gray-500);
}

.gtd-collapsible-list-header-text {
    flex: 1;
    display: flex;
    align-items: center;
}

.gtd-collapsible-list-header-badge {
    margin-left: auto;
    margin-right: 0.75rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bs-gray-200);
    border-radius: 1rem;
    color: var(--bs-gray-600);
}

.gtd-collapsible-list-toggle {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
    transition: transform 0.2s ease;
}

.gtd-collapsible-list-item.is-expanded > .gtd-collapsible-list-header .gtd-collapsible-list-toggle {
    transform: rotate(180deg);
}

.gtd-collapsible-list-content {
    display: none;
    padding: 0 1rem 1rem 2.75rem;
}

.gtd-collapsible-list-item.is-expanded > .gtd-collapsible-list-content {
    display: block;
    animation: gtdCollapsibleSlideDown 0.2s ease;
}

@keyframes gtdCollapsibleSlideDown {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nested lists */
.gtd-collapsible-list .gtd-collapsible-list {
    margin-top: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-gray-50);
}

.gtd-collapsible-list .gtd-collapsible-list .gtd-collapsible-list-header {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-collapsible-list-item {
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-collapsible-list-header:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .gtd-collapsible-list-header-badge {
    background: var(--bs-gray-700);
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-collapsible-list .gtd-collapsible-list {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

/* ============================================
   SORTABLE GRID
   ============================================ */
.gtd-sortable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.gtd-sortable-grid-item {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
}

.gtd-sortable-grid-item:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gtd-sortable-grid-item.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.gtd-sortable-grid-item.is-drag-over {
    border-color: var(--bs-primary);
    border-style: dashed;
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.gtd-sortable-grid-handle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-400);
    cursor: grab;
}

.gtd-sortable-grid-handle:hover {
    color: var(--bs-gray-600);
}

.gtd-sortable-grid-handle::before {
    content: '\2630';
    font-size: 1rem;
}

.gtd-sortable-grid-item-content {
    padding-right: 1.5rem;
}

.gtd-sortable-grid-item-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    margin-bottom: 0.25rem;
}

.gtd-sortable-grid-item-description {
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    line-height: 1.4;
}

/* Placeholder during drag */
.gtd-sortable-grid-placeholder {
    border: 2px dashed var(--bs-primary);
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-primary-rgb), 0.1);
    min-height: 100px;
}

/* Column variants */
.gtd-sortable-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gtd-sortable-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gtd-sortable-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-sortable-grid-item {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-sortable-grid-item:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gtd-sortable-grid-item.is-dragging {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-sortable-grid-item-description {
    color: var(--bs-gray-400);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-sortable-grid {
        grid-template-columns: 1fr;
    }

    .gtd-sortable-grid-cols-2,
    .gtd-sortable-grid-cols-3,
    .gtd-sortable-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SCROLL TIMELINE
   ============================================ */
.gtd-scroll-timeline {
    position: relative;
    overflow: hidden;
}

.gtd-scroll-timeline-wrapper {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1.5rem 0;
}

.gtd-scroll-timeline-wrapper::-webkit-scrollbar {
    display: none;
}

.gtd-scroll-timeline-track {
    position: absolute;
    top: 50%;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: var(--bs-gray-200);
    transform: translateY(-50%);
    z-index: 0;
}

.gtd-scroll-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bs-primary);
    width: 0%;
    transition: width 0.3s ease;
}

.gtd-scroll-timeline-items {
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.gtd-scroll-timeline-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    text-align: center;
    cursor: pointer;
}

.gtd-scroll-timeline-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 3px solid var(--bs-gray-300);
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.gtd-scroll-timeline-item:hover .gtd-scroll-timeline-dot {
    border-color: var(--bs-primary);
    transform: scale(1.2);
}

.gtd-scroll-timeline-item.is-active .gtd-scroll-timeline-dot {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    transform: scale(1.3);
}

.gtd-scroll-timeline-item.is-completed .gtd-scroll-timeline-dot {
    background: var(--bs-success);
    border-color: var(--bs-success);
}

.gtd-scroll-timeline-item.is-completed .gtd-scroll-timeline-dot::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.625rem;
    font-weight: bold;
}

.gtd-scroll-timeline-label {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    max-width: 140px;
    line-height: 1.3;
}

.gtd-scroll-timeline-item.is-active .gtd-scroll-timeline-label {
    color: var(--bs-primary);
    font-weight: 600;
}

.gtd-scroll-timeline-date {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

/* Navigation buttons */
.gtd-scroll-timeline-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.gtd-scroll-timeline-nav:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.gtd-scroll-timeline-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtd-scroll-timeline-nav-prev {
    left: 0;
}

.gtd-scroll-timeline-nav-next {
    right: 0;
}

/* Dots indicator */
.gtd-scroll-timeline-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gtd-scroll-timeline-dots-item {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bs-gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gtd-scroll-timeline-dots-item:hover {
    background: var(--bs-gray-400);
}

.gtd-scroll-timeline-dots-item.is-active {
    background: var(--bs-primary);
    width: 1.5rem;
    border-radius: 0.25rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-scroll-timeline-track {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .gtd-scroll-timeline-dot {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .gtd-scroll-timeline-label {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-scroll-timeline-date {
    color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .gtd-scroll-timeline-nav {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-300);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gtd-scroll-timeline-dots-item {
    background: var(--bs-gray-600);
}

/* ============================================
   FORM AUTOSAVE
   ============================================ */
.gtd-form-autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-gray-600);
    padding: 0.375rem 0.75rem;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    transition: all 0.2s ease;
}

.gtd-form-autosave-indicator-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtd-form-autosave-indicator.is-saving {
    color: var(--bs-warning);
    background: rgba(var(--bs-warning-rgb), 0.1);
}

.gtd-form-autosave-indicator.is-saving .gtd-form-autosave-indicator-icon {
    animation: gtdFormAutosaveSpin 1s linear infinite;
}

.gtd-form-autosave-indicator.is-saved {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
}

.gtd-form-autosave-indicator.is-error {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.1);
}

@keyframes gtdFormAutosaveSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.gtd-form-autosave-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--bs-info-rgb), 0.1);
    border: 1px solid rgba(var(--bs-info-rgb), 0.3);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
}

.gtd-form-autosave-banner.is-visible {
    display: flex;
    animation: gtdFormAutosaveSlideDown 0.3s ease;
}

@keyframes gtdFormAutosaveSlideDown {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gtd-form-autosave-banner-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-info);
}

.gtd-form-autosave-banner-text i {
    font-size: 1rem;
}

.gtd-form-autosave-banner-actions {
    display: flex;
    gap: 0.5rem;
}

.gtd-form-autosave-banner-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gtd-form-autosave-banner-btn-restore {
    background: var(--bs-info);
    color: #fff;
}

.gtd-form-autosave-banner-btn-restore:hover {
    background: var(--bs-info);
    filter: brightness(1.1);
}

.gtd-form-autosave-banner-btn-discard {
    background: transparent;
    color: var(--bs-gray-600);
}

.gtd-form-autosave-banner-btn-discard:hover {
    background: var(--bs-gray-200);
}

/* Timestamp display */
.gtd-form-autosave-timestamp {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-form-autosave-indicator {
    background: var(--bs-gray-800);
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-form-autosave-banner {
    background: rgba(var(--bs-info-rgb), 0.15);
    border-color: rgba(var(--bs-info-rgb), 0.4);
}

[data-bs-theme="dark"] .gtd-form-autosave-banner-btn-discard {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .gtd-form-autosave-banner-btn-discard:hover {
    background: var(--bs-gray-700);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-scroll-timeline-item {
        width: 120px;
    }

    .gtd-scroll-timeline-label {
        font-size: 0.75rem;
        max-width: 100px;
    }

    .gtd-scroll-timeline-nav {
        width: 1.75rem;
        height: 1.75rem;
    }

    .gtd-form-autosave-banner {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .gtd-form-autosave-banner-text {
        justify-content: center;
    }
}

/* ============================================
   MARQUEE TEXT
   ============================================ */
.gtd-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.gtd-marquee-wrapper {
    display: flex;
    width: max-content;
}

.gtd-marquee-wrapper.gtd-marquee-animate {
    animation: gtdMarqueeScroll var(--marquee-duration, 10s) linear infinite;
}

.gtd-marquee-wrapper.gtd-marquee-reverse.gtd-marquee-animate {
    animation-direction: reverse;
}

.gtd-marquee-wrapper.gtd-marquee-paused {
    animation-play-state: paused;
}

.gtd-marquee-content,
.gtd-marquee-clone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: 50px;
    white-space: nowrap;
}

@keyframes gtdMarqueeScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-marquee {
    color: var(--bs-gray-300);
}

/* ============================================
   RATING DISPLAY
   ============================================ */
.gtd-rating-display {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.gtd-rating-display-stars {
    display: flex;
    gap: 0.125rem;
}

.gtd-rating-display-star {
    color: var(--rating-color, var(--bs-warning));
    line-height: 1;
}

.gtd-rating-display-star.is-empty {
    color: var(--bs-gray-300);
}

.gtd-rating-display-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

.gtd-rating-display-count {
    font-size: 0.875em;
    color: var(--bs-gray-500);
}

/* Size variants */
.gtd-rating-display-sm {
    font-size: 0.75rem;
}

.gtd-rating-display-sm .gtd-rating-display-star i {
    font-size: 0.75rem;
}

.gtd-rating-display-md {
    font-size: 0.875rem;
}

.gtd-rating-display-md .gtd-rating-display-star i {
    font-size: 1rem;
}

.gtd-rating-display-lg {
    font-size: 1rem;
}

.gtd-rating-display-lg .gtd-rating-display-star i {
    font-size: 1.25rem;
}

.gtd-rating-display-xl {
    font-size: 1.125rem;
}

.gtd-rating-display-xl .gtd-rating-display-star i {
    font-size: 1.5rem;
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-rating-display-star.is-empty {
    color: var(--bs-gray-600);
}

/* ============================================
   COUNT UP
   ============================================ */
.gtd-count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.gtd-count-up.is-counting {
    color: var(--bs-primary);
}

.gtd-count-up.is-complete {
    color: inherit;
}

/* ============================================
   TEXT TRUNCATE
   ============================================ */
.gtd-text-truncate {
    position: relative;
}

.gtd-text-truncate-wrapper {
    overflow: hidden;
}

.gtd-text-truncate-content.gtd-text-truncate-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--truncate-lines, 3);
    overflow: hidden;
}

.gtd-text-truncate.is-expanded .gtd-text-truncate-content.gtd-text-truncate-lines {
    -webkit-line-clamp: unset;
    display: block;
}

.gtd-text-truncate-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gtd-text-truncate-toggle:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.gtd-text-truncate-toggle i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.gtd-text-truncate.is-expanded .gtd-text-truncate-toggle i {
    transform: rotate(180deg);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-text-truncate-toggle {
    color: var(--bs-primary);
}

/* ============================================
   PULSE BUTTON
   ============================================ */
.gtd-pulse-button {
    position: relative;
    overflow: visible;
}

.gtd-pulse-button-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gtd-pulse-button-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 2px solid var(--pulse-color, var(--bs-primary));
    opacity: 0;
    animation: gtdPulseRing 2s ease-out infinite;
}

.gtd-pulse-button-paused .gtd-pulse-button-ring,
.gtd-pulse-button-stopped .gtd-pulse-button-ring {
    animation-play-state: paused;
    opacity: 0;
}

@keyframes gtdPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Intensity variants */
.gtd-pulse-button-subtle .gtd-pulse-button-ring {
    animation-duration: 3s;
}

.gtd-pulse-button-subtle .gtd-pulse-button-ring:nth-child(2) {
    animation-delay: 1s;
}

.gtd-pulse-button-medium .gtd-pulse-button-ring {
    animation-duration: 2s;
}

.gtd-pulse-button-medium .gtd-pulse-button-ring:nth-child(2) {
    animation-delay: 0.5s;
}

.gtd-pulse-button-intense .gtd-pulse-button-ring {
    animation-duration: 1.5s;
}

.gtd-pulse-button-intense .gtd-pulse-button-ring:nth-child(2) {
    animation-delay: 0.3s;
}

/* ============================================
   CARD HOVER
   ============================================ */
.gtd-card-hover {
    perspective: var(--card-perspective, 1000px);
    transform-style: preserve-3d;
}

.gtd-card-hover-wrapper {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.gtd-card-hover-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
}

.gtd-card-hover.is-hovered {
    z-index: 10;
}

/* Effect variants */
.gtd-card-hover-tilt .gtd-card-hover-wrapper {
    transform-origin: center;
}

.gtd-card-hover-lift:hover .gtd-card-hover-wrapper {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.gtd-card-hover-zoom:hover .gtd-card-hover-wrapper {
    transform: scale(1.05);
}

.gtd-card-hover-glow:hover {
    box-shadow: 0 0 30px rgba(var(--bs-primary-rgb), 0.3);
}

/* Dark mode */
[data-bs-theme="dark"] .gtd-card-hover-lift:hover .gtd-card-hover-wrapper {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .gtd-card-hover-glow:hover {
    box-shadow: 0 0 30px rgba(var(--bs-primary-rgb), 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .gtd-marquee-content,
    .gtd-marquee-clone {
        padding-right: 30px;
    }

    .gtd-rating-display-lg .gtd-rating-display-star i,
    .gtd-rating-display-xl .gtd-rating-display-star i {
        font-size: 1rem;
    }

    .gtd-card-hover-tilt {
        perspective: none;
    }

    .gtd-card-hover-tilt .gtd-card-hover-wrapper {
        transform: none !important;
    }
}