/* Custom CSS for AR Image Converter */

/* AR-specific elements */
.ar-link {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-info);
    color: var(--bs-dark);
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.ar-link:hover {
    background-color: var(--bs-info-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ar-icon {
    margin-right: 0.5rem;
}

.ar-device-info {
    display: none;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.5rem;
    background-color: rgba(var(--bs-info-rgb), 0.1);
}

.ar-not-supported {
    display: none;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.5rem;
    background-color: rgba(var(--bs-warning-rgb), 0.1);
}

/* Image gallery styles */
.image-card {
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    background-color: rgba(255, 255, 255, 0.05);
}

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

.image-card img {
    object-fit: scale-down;
    height: 200px;
    width: 100%;
}

.image-card .badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Dimension presets */
.dimension-preset {
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-secondary);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dimension-preset:hover {
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
}

.dimension-preset.active {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
}

/* Create dropdown styles */
.custom-dropdown .dropdown-menu.glass-dropdown {
    background-color: #171723 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 1999 !important;
    min-width: 200px !important;
    padding: 8px !important;
    border-radius: 12px;
}

.custom-dropdown .dropdown-item {
    color: white !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    margin: 3px 0 !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease;
}

.custom-dropdown .dropdown-item:hover {
    background-color: #2d2d3a !important;
    color: white !important;
}

.custom-dropdown .dropdown-item i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 10px !important;
}

/* QR code container */
.qr-code-container canvas {
    display: inline-block !important;

/* Fix for create section icon alignment */
.create-card-btn .create-icon-container i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    display: inline-block !important;
}

/* Ensure icons in buttons are properly centered */
.btn i.fas,
.btn i.fab,
.btn i.far {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

    margin: 0 auto;
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
}

/* Image preview */
.preview-container {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
}

.preview-image {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Loading indicator */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}

.loading-overlay.active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.spinner-container {
    text-align: center;
}

.loading-text {
    color: white;
    margin-top: 1rem;
    font-size: 1.2rem;
}

/* Source badges */
.source-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.source-gallery {
    background-color: var(--bs-success);
}

.source-upload {
    background-color: var(--bs-info);
}

.source-ai {
    background-color: var(--bs-primary);
}

.source-search {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

/* Print warning */
.print-warning {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    border-left: 4px solid var(--bs-danger);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Hero section */
.hero-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #373737 100%);
    margin-bottom: 2rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

.hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.hero-section p {
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Feature cards */
.feature-card {
    height: 100%;
    padding: 2rem;
    border: none;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--bs-info);
}

/* Footer */
.footer {
    margin-top: 3rem;
    padding: 2rem 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bottom action bar padding */
.bottom-action-padding {
    padding-bottom: 100px !important;
}

/* Fixed action bar styling for bottom of pages */
.fixed-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000; 
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
}

/* Prominent edit options button */
.edit-options-btn {
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.edit-options-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Center icons in action buttons */
.remove-item-btn,
.btn-icon,
.btn-sm[title] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
}

/* Ensure all icons are centered in buttons */
.btn .fas,
.btn .fab,
.btn .far {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix spacing issues for proper container padding */
.glass-card {
    overflow: hidden;
}

.glass-card .card-body,
.glass-card .card-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Base icon styling */
.fas, .fab, .far {
    margin-right: 0.5rem;
    font-size: 1.25em;
}

/* Button icon styling */
.btn .fas, 
.btn .fab, 
.btn .far {
    margin: 0 0.25rem 0 0;
    position: relative;
    top: -1px; /* Slight adjustment for vertical alignment in buttons */
}

/* Custom badges styling */
.custom-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    height: fit-content;
    width: fit-content;
}

/* Fix for regular Bootstrap badges with icons */
.badge i {
    display: inline-block !important;
    position: static !important;
    transform: none !important;
    margin-right: 0.35rem;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    top: -1px;
    position: relative !important;
}

.custom-badge-primary {
    background-color: rgba(13, 110, 253, 0.85);
    color: white;
}

.custom-badge-secondary {
    background-color: rgba(108, 117, 125, 0.85);
    color: white;
}

.custom-badge-success {
    background-color: rgba(25, 135, 84, 0.85);
    color: white;
}

/* Highlight animation for crop buttons */
.highlight-pulse {
    /* Animation disabled */
    animation: none;
    box-shadow: none;
}

@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    50% { box-shadow: 0 0 20px 15px rgba(25, 135, 84, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Add specific styling to ensure crop buttons are always visible */
#crop-buttons {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
    position: relative;
}

#crop-buttons button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Cart button styling for profile page cards */
form[action*="add-to-cart"] button,
.btn-glass-primary.rounded-pill[title="Add to Cart"],
button[title="Add to Cart"] {
    background: linear-gradient(45deg, rgba(13, 110, 253, 0.7), rgba(25, 135, 242, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

form[action*="add-to-cart"] button:hover,
.btn-glass-primary.rounded-pill[title="Add to Cart"]:hover,
button[title="Add to Cart"]:hover {
    background: linear-gradient(45deg, rgba(20, 120, 255, 0.8), rgba(35, 150, 255, 0.8));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.custom-badge-danger {
    background-color: rgba(220, 53, 69, 0.85);
    color: white;
}

.custom-badge-warning {
    background-color: rgba(255, 193, 7, 0.85);
    color: black;
}

.custom-badge-info {
    background-color: rgba(13, 202, 240, 0.85);
    color: black;
}

.custom-badge-light {
    background-color: rgba(248, 249, 250, 0.85);
    color: black;
}

.custom-badge-dark {
    background-color: rgba(33, 37, 41, 0.85);
    color: white;
}

/* Navigation icon styling */
.nav-link .fas,
.nav-link .fab,
.nav-link .far {
    width: auto; /* Allow natural width */
    height: auto; /* Allow natural height */
}

/* Remove right margin for button icons that don't need it */
.btn-glass i.fas,
.btn-glass-primary i.fas,
.btn-glass-secondary i.fas,
.remove-item-btn .fas {
    margin-right: 0;
}

/* Better spacing for label elements */
.form-label {
    margin-left: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Better spacing for form elements */
.form-control, 
.form-select {
    margin-bottom: 0.5rem;
}

/* Gradient buttons */
.btn-gradient-pink {
    background: linear-gradient(135deg, #0EA5E9, #06B6D4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient-pink:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Custom gradient backgrounds for other pages */
.bg-gradient-custom-red {
    background: linear-gradient(135deg, #DC2626, #EF4444);
}

.bg-gradient-custom-gray {
    background: linear-gradient(135deg, #475569, #64748B);
}

/* Consolidated Glassmorphism Classes */
.glass-base {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-modal {
    background: rgba(23, 23, 35, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-button {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Price tag styles for orders */
.glass-price-tag {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-price-blue { border-color: rgba(13, 110, 253, 0.3); }
.glass-price-purple { border-color: rgba(111, 66, 193, 0.3); }
.glass-price-green { border-color: rgba(25, 135, 84, 0.3); }
.glass-price-red { border-color: rgba(220, 53, 69, 0.3); }
.glass-price-gray { border-color: rgba(108, 117, 125, 0.3); }

/* Multi-select visual feedback */
.multi-select-highlight {
    background: rgba(0, 123, 255, 0.1) !important;
    border: 2px solid rgba(0, 123, 255, 0.3) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.sticky-bulk-actions.scrolling {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* User message styles */
.profile-user-message {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Performance Optimizations */
* {
    /* Use hardware acceleration for better performance */
    backface-visibility: hidden;
    perspective: 1000px;
}

.glass-card,
.glass-button,
.activity-badge,
.multi-select-highlight {
    /* Enable hardware acceleration for smooth animations */
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize animations for 60fps */
@media (prefers-reduced-motion: no-preference) {
    .glass-card,
    .feature-card,
    .image-card {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Tabbed dimensions interface */
#dimensionsTabs .nav-link {
    color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

#dimensionsTabs .nav-link.active {
    color: white;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.4) 0%, rgba(111, 66, 193, 0.4) 100%);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

#dimensionsTabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

/* Improve mobile spacing */
@media (max-width: 576px) {
    .preset-size {
        margin-bottom: 0.5rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    #dimensionsTabs .nav-link {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    #dimensionsTabs .nav-link i {
        margin-right: 0.3rem !important;
    }
}

    background: linear-gradient(135deg, #6c757d, #5a6268);
}

/* Result page tab styles */
#resultTabs .nav-link {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#resultTabs .nav-link.active {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.7) 0%, rgba(25, 135, 184, 0.7) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.4);
}

#resultTabs .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Make space between tabs on tiny screens */
@media (max-width: 375px) {
    #resultTabs .nav-link {
        padding: 0.5rem 0.3rem;
        font-size: 0.85rem;
    }
}

/* Hide tab controls on larger screens */
@media (min-width: 992px) {
    #resultTabsContent .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }
}
/* Navbar Create dropdown styling */
.navbar-nav .dropdown-menu.glass-dropdown {
    background-color: #171723 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 1999 !important;
    min-width: 200px !important;
    padding: 8px !important;
    border-radius: 12px;
}

.navbar-nav .dropdown-item {
    color: white !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    margin: 3px 0 !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: #2d2d3a !important;
    color: white !important;
}

.navbar-nav .dropdown-item i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 10px !important;
}

/* Add active state styling for dropdown button */
.navbar-nav .nav-item.dropdown .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
}