/* ShopEase Ecommerce Website Styles */

/* CRITICAL: Bootstrap CDN CSS Override - Must be first to override external CSS */
/* This fixes Bootstrap's -webkit-text-size-adjust and -webkit-match-parent compatibility issues */

/* Fix Bootstrap's -webkit-text-size-adjust for Chrome 54+, Firefox, Safari compatibility */
/* Use both properties for maximum browser compatibility */
html body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Additional override for Bootstrap body element */
body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Ultimate override for Bootstrap CDN CSS - Highest specificity */
html body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Override for all possible Bootstrap body combinations */
html body,
body,
html body * {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Fix Bootstrap's -webkit-match-parent for Safari 15.4+ compatibility */
/* Use both properties for maximum browser compatibility */
html body th,
html body td,
html body table th,
html body table td,
html body .table th,
html body .table td,
html body thead th,
html body tbody th,
html body tfoot th,
html body thead td,
html body tbody td,
html body tfoot td {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: inherit !important;
    text-align: left !important;
}

/* Ultimate override for Bootstrap CDN th elements - Highest specificity */
html body th {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: inherit !important;
    text-align: left !important;
}

/* Override for all possible Bootstrap th combinations */
html body th,
body th,
html body table th,
body table th,
html body .table th,
body .table th,
html body thead th,
body thead th,
html body tbody th,
body tbody th,
html body tfoot th,
body tfoot th {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: inherit !important;
    text-align: left !important;
}

/* Bootstrap Compatibility Fixes - Must be first to override CDN CSS */
/* Fix Bootstrap's -webkit-match-parent for Safari 15.4+ compatibility */
/* Use both properties for maximum browser compatibility */
th, td, .table th, .table td, thead th, tbody th, tfoot th {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: left !important;
}

/* Override all Bootstrap text alignment classes */
.text-start, .text-end, .text-center, .text-justify {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
}

/* Comprehensive override for all Bootstrap elements */
*[class*="table"] th,
*[class*="table"] td,
table th,
table td,
.table th,
.table td,
thead th,
tbody th,
tfoot th,
thead td,
tbody td,
tfoot td {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: left !important;
}

/* Override for all elements with Bootstrap classes */
*[class*="text-"] {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
}

/* Ultimate override for Bootstrap CDN CSS - Highest specificity */
html body th,
html body td,
html body .table th,
html body .table td,
html body thead th,
html body tbody th,
html body tfoot th {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: left !important;
}

/* Override for all possible Bootstrap table combinations */
html body table th,
html body table td,
html body .table th,
html body .table td,
html body .table-striped th,
html body .table-striped td,
html body .table-bordered th,
html body .table-bordered td {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: left !important;
}

/* CSS Compatibility Fixes for Cross-Browser Support */

/* Text size adjustment - Both properties for maximum compatibility */
* {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Print color adjustment - Both properties for maximum compatibility */
* {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Override Bootstrap's webkit-only properties */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Fix for Bootstrap's webkit-specific text alignment */
.text-start {
    text-align: left;
}

.text-end {
    text-align: right;
}

/* Fix for Bootstrap's table header alignment */
th {
    text-align: -webkit-match-parent;
    text-align: match-parent;
    text-align: inherit;
    text-align: left;
}

/* Fix for all elements using match-parent */
[style*="-webkit-match-parent"] {
    text-align: -webkit-match-parent;
    text-align: match-parent;
    text-align: inherit;
    text-align: left;
}

/* Override Bootstrap's -webkit-match-parent for Safari 15.4+ compatibility */
* {
    text-align: -webkit-match-parent;
    text-align: match-parent;
    text-align: inherit;
}

/* More specific override for Bootstrap table elements */
table th,
.table th,
thead th {
    text-align: -webkit-match-parent !important;
    text-align: match-parent !important;
    text-align: left !important;
}

/* Override for all Bootstrap elements using -webkit-match-parent */
[class*="text-"] {
    text-align: -webkit-match-parent;
    text-align: match-parent;
}

/* Browser compatibility fixes using @supports */

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --white-color: #ffffff;
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* Header Styles */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white-color);
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.navbar-nav .nav-link {
    font-weight: 500;
    transition: var(--transition);
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    margin-bottom: 0;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-buttons .btn {
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding: 12px 30px;
    border-radius: var(--border-radius);
    font-weight: 600;
}

.hero-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* Section Titles */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

/* Category Cards */
.category-card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid #e9ecef;
}

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

.category-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.category-card h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.category-card p {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

/* Product Cards */
.product-card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid #e9ecef;
}

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

.product-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 123, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-info {
    padding: 1.5rem;
}

.product-info h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
}

.product-price {
    margin-bottom: 0.5rem;
}

.current-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.original-price {
    font-size: 1rem;
    color: var(--secondary-color);
    text-decoration: line-through;
    margin-left: 0.5rem;
}

.product-rating {
    margin-bottom: 1rem;
}

.rating-count {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

/* Feature Cards */
.feature-card {
    padding: 2rem;
    text-align: center;
}

.feature-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.feature-card h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--secondary-color);
}

/* Footer */
.footer {
    background: var(--dark-color) !important;
}

.footer h5, .footer h6 {
    color: var(--white-color);
}

.footer a {
    transition: var(--transition);
}

.footer a:hover {
    color: var(--primary-color) !important;
}

.social-links a {
    font-size: 1.2rem;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--primary-color) !important;
}

.payment-methods i {
    font-size: 1.5rem;
    color: var(--white-color);
}

/* Button Styles */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Form Styles */
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-label {
    font-weight: 500;
    color: var(--dark-color);
}

/* Card Styles */
.card {
    border-radius: var(--border-radius);
    border: 1px solid #e9ecef;
    box-shadow: var(--box-shadow);
}

.card-header {
    background: var(--light-color);
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
}

/* Alert Styles */
.alert {
    border-radius: var(--border-radius);
    border: none;
}

/* Badge Styles */
.badge {
    border-radius: 50px;
}

/* Pagination */
.pagination .page-link {
    border-radius: var(--border-radius);
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

/* Product Details */
.product-gallery {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.product-details h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.product-price-large {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.discount-badge {
    background: var(--danger-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Cart Styles */
.cart-item {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.cart-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ced4da;
    background: white;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.quantity-btn:hover {
    background: var(--light-color);
}

/* Order Styles */
.order-card {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.order-status {
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pending { background: #fff3cd; color: #856404; }
.status-confirmed { background: #d1ecf1; color: #0c5460; }
.status-processing { background: #d4edda; color: #155724; }
.status-shipped { background: #cce5ff; color: #004085; }
.status-delivered { background: #d4edda; color: #155724; }
.status-cancelled { background: #f8d7da; color: #721c24; }

/* Admin Dashboard */
.admin-sidebar {
    background: var(--dark-color);
    min-height: 100vh;
    padding: 2rem 0;
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1.5rem;
    transition: var(--transition);
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.admin-sidebar .nav-link i {
    width: 20px;
    margin-right: 0.5rem;
}

.stats-card {
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.stats-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .category-card,
    .product-card {
        margin-bottom: 1rem;
    }
    
    .navbar-nav {
        margin-top: 1rem;
    }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 40px 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .product-info {
        padding: 1rem;
    }
    
    .product-info h5 {
        font-size: 0.9rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Toast Notifications */
.toast {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* Admin Dashboard Styles */
.admin-sidebar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.admin-sidebar .nav-link {
    color: rgba(255,255,255,0.8);
    padding: 12px 20px;
    border-radius: 8px;
    margin: 4px 0;
    transition: all 0.3s ease;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    color: white;
    background: rgba(255,255,255,0.1);
    transform: translateX(5px);
}

.admin-sidebar .nav-link i {
    width: 20px;
    margin-right: 10px;
}

.admin-main {
    background: #f8f9fa;
    min-height: 100vh;
}

.admin-header {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 0;
}

.admin-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.admin-stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.admin-stats-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.admin-stats-card p {
    opacity: 0.9;
    margin: 0;
}

.admin-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.admin-table th {
    background: #f8f9fa;
    border: none;
    padding: 1rem;
    font-weight: 600;
    color: #495057;
}

.admin-table td {
    border: none;
    padding: 1rem;
    vertical-align: middle;
}

.admin-table tbody tr {
    transition: background-color 0.3s ease;
}

.admin-table tbody tr:hover {
    background-color: #f8f9fa;
}

.admin-btn {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.admin-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.admin-modal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.admin-modal .modal-header {
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem;
}

.admin-modal .modal-body {
    padding: 1.5rem;
}

.admin-modal .modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 1.5rem;
}

.admin-form .form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-form .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.admin-form .form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.admin-alert {
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-badge {
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.admin-pagination .page-link {
    border: none;
    color: #667eea;
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.admin-pagination .page-link:hover {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
}

.admin-pagination .page-item.active .page-link {
    background: #667eea;
    color: white;
}

.admin-search {
    position: relative;
}

.admin-search .form-control {
    padding-left: 3rem;
    border-radius: 25px;
}

.admin-search .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.admin-filters {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.admin-filters .form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

.admin-filters .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Product Management Specific Styles */
.product-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.product-thumbnail-placeholder {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumbnail-placeholder.hidden {
    display: none;
}

.bulk-actions-dropdown {
    display: none;
}

.inline-form {
    display: inline;
}

.current-image-preview {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}

.current-image-placeholder {
    display: none;
    max-width: 100px;
    max-height: 100px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* YouTube iframe accessibility improvements */
.video-wrapper iframe {
    border: none;
    outline: none;
}

.video-wrapper iframe:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Screen reader only content */
.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;
}

/* Improve focus visibility for video controls */
.video-wrapper iframe[role="application"] {
    position: relative;
}

.video-wrapper iframe[role="application"]:focus-within {
    box-shadow: 0 0 0 2px #007bff;
    border-radius: 4px;
}