/* ===== COMPONENTS CSS FILE - UPDATED 20250905-24 ===== */

/* ===== API BADGES ===== */
.api-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-badge.newsapi {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.api-badge.reddit {
    background: linear-gradient(135deg, #ff4500 0%, #ff6b35 100%);
    color: white;
}

.api-badge.hackernews {
    background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
    color: white;
}

.api-badge.fallback {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

/* ===== ADDITIONAL META DATA ===== */
.reddit-score, .reddit-comments, .hn-score, .hn-comments {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.2rem 0.4rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    border: 1px solid #e9ecef;
}

.reddit-score, .reddit-comments {
    background: #fff5f5;
    border-color: #fed7d7;
    color: #e53e3e;
}

.hn-score, .hn-comments {
    background: #fffaf0;
    border-color: #fbd38d;
    color: #dd6b20;
}

/* ===== PAGE HEADER ===== */
.page-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 4rem 0;
    margin-top: 80px;
    box-shadow: 0 4px 20px rgba(44, 62, 80, 0.3);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px;
    text-align: center !important;
}

.page-header-content {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.page-title {
    font-size: 3rem;
    margin: 0 auto 1rem auto !important;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    text-align: center !important;
    width: 100% !important;
}

.page-subtitle {
    font-size: 1.3rem;
    margin: 0 auto 2rem auto !important;
    color: #ecf0f1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 400;
    text-align: center !important;
    width: 100% !important;
}

.breadcrumb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
}

.breadcrumb a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.breadcrumb a:hover {
    color: #3498db;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.breadcrumb .separator {
    color: #95a5a6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.breadcrumb .current {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== MAIN CONTENT ===== */
.main-content {
    padding: 4rem 0;
}

.content-section {
    margin-bottom: 5rem;
}

.content-section:last-child {
    margin-bottom: 0;
}

/* ===== CONCEPTS GRID ===== */
.concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.concept-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.concept-card h3 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

.concept-card ul {
    list-style: none;
    padding: 0;
}

.concept-card li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
}

.concept-card li::before {
    content: '•';
    color: #3498db;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.concept-card strong {
    color: #2c3e50;
}

/* ===== TRENDS GRID ===== */
.trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.trend-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.trend-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.trend-category {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
}

.trend-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    line-height: 1.4;
}

.trend-card p {
    color: #7f8c8d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.trend-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.trend-date {
    color: #95a5a6;
}

.trend-impact {
    background: #27ae60;
    color: white;
    padding: 0.2rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.trend-impact:contains("High") {
    background: #e74c3c;
}

.trend-impact:contains("Medium") {
    background: #f39c12;
}

.trend-impact:contains("Growing") {
    background: #27ae60;
}

/* ===== NEWS TIMELINE ===== */
.news-timeline {
    margin-top: 2rem;
    position: relative;
}

.news-timeline::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #3498db, #e74c3c);
}

.news-item {
    display: flex;
    margin-bottom: 2rem;
    position: relative;
}

.news-date {
    width: 120px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 2rem;
    font-weight: 600;
    color: #3498db;
    font-size: 0.9rem;
}

.news-content {
    flex: 1;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    margin-left: 2rem;
    position: relative;
}

.news-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid white;
}

.news-content h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.news-content p {
    color: #7f8c8d;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.news-link {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.news-link:hover {
    color: #2980b9;
}

/* ===== RESOURCES GRID ===== */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.resource-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.resource-card h3 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

.resource-card ul {
    list-style: none;
    padding: 0;
}

.resource-card li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
}

.resource-card li::before {
    content: '→';
    color: #3498db;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.resource-card a {
    color: #7f8c8d;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.5;
}

.resource-card a:hover {
    color: #3498db;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.3s ease;
}

.btn:hover::before {
    left: 0;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.6);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-3px);
}

.btn-success {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.6);
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6);
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(243, 156, 18, 0.6);
}

.btn-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
}

.btn-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.6);
}

.btn-light {
    background: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
}

.btn-light:hover {
    background: #e2e6ea;
    border-color: #cbd3da;
}

.btn-dark {
    background: #343a40;
    color: white;
}

.btn-dark:hover {
    background: #23272b;
}

.btn-outline-primary {
    background: transparent;
    color: #3498db;
    border: 2px solid #3498db;
}

.btn-outline-primary:hover {
    background: #3498db;
    color: white;
}

.btn-outline-secondary {
    background: transparent;
    color: #6c757d;
    border: 2px solid #6c757d;
}

.btn-outline-secondary:hover {
    background: #6c757d;
    color: white;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ===== CARDS ===== */
.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.card-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.card-title {
    margin: 0;
    color: #2c3e50;
    font-size: 1.25rem;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.card-primary {
    border-top: 4px solid #3498db;
}

.card-success {
    border-top: 4px solid #27ae60;
}

.card-danger {
    border-top: 4px solid #e74c3c;
}

.card-warning {
    border-top: 4px solid #f39c12;
}

.card-info {
    border-top: 4px solid #17a2b8;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-weight: 600;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-input.is-valid {
    border-color: #27ae60;
}

.form-input.is-invalid {
    border-color: #e74c3c;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.form-check-input {
    margin-right: 0.5rem;
}

.form-check-label {
    margin: 0;
    cursor: pointer;
}

.form-floating {
    position: relative;
}

.form-floating .form-input,
.form-floating .form-textarea {
    height: 3.5rem;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating .form-textarea {
    height: 5rem;
}

.form-floating .form-label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating .form-input:focus ~ .form-label,
.form-floating .form-input:not(:placeholder-shown) ~ .form-label,
.form-floating .form-textarea:focus ~ .form-label,
.form-floating .form-textarea:not(:placeholder-shown) ~ .form-label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* ===== BADGES ===== */
.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.375rem;
}

.badge-primary {
    background: #3498db;
    color: white;
}

.badge-secondary {
    background: #6c757d;
    color: white;
}

.badge-success {
    background: #27ae60;
    color: white;
}

.badge-danger {
    background: #e74c3c;
    color: white;
}

.badge-warning {
    background: #f39c12;
    color: white;
}

.badge-info {
    background: #17a2b8;
    color: white;
}

.badge-light {
    background: #f8f9fa;
    color: #212529;
}

.badge-dark {
    background: #343a40;
    color: white;
}

.badge-pill {
    border-radius: 10rem;
}

/* ===== ALERTS ===== */
.alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.alert-primary {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}

.alert-secondary {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-light {
    color: #636464;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-dark {
    color: #141619;
    background-color: #d3d3d4;
    border-color: #bcbebf;
}

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
    cursor: pointer;
}

.btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

/* ===== LOADING SPINNERS ===== */
.spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow 0.75s linear infinite;
}

.spinner-grow-sm {
    width: 1rem;
    height: 1rem;
}

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }
    50% {
        opacity: 1;
    }
}

/* ===== TOOLTIPS ===== */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ===== MODALS ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal.show {
    display: block;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

.modal-title {
    margin: 0;
    color: #2c3e50;
}

.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== PROGRESS BARS ===== */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.375rem;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #3498db;
    transition: width 0.6s ease;
}

.progress-bar-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;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-primary { color: #3498db !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #27ae60 !important; }
.text-danger { color: #e74c3c !important; }
.text-warning { color: #f39c12 !important; }
.text-info { color: #17a2b8 !important; }
.text-light { color: #f8f9fa !important; }
.text-dark { color: #343a40 !important; }

.bg-primary { background-color: #3498db !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #27ae60 !important; }
.bg-danger { background-color: #e74c3c !important; }
.bg-warning { background-color: #f39c12 !important; }
.bg-info { background-color: #17a2b8 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-dark { background-color: #343a40 !important; }

.border-primary { border-color: #3498db !important; }
.border-secondary { border-color: #6c757d !important; }
.border-success { border-color: #27ae60 !important; }
.border-danger { border-color: #e74c3c !important; }
.border-warning { border-color: #f39c12 !important; }
.border-info { border-color: #17a2b8 !important; }
.border-light { border-color: #f8f9fa !important; }
.border-dark { border-color: #343a40 !important; }

.rounded { border-radius: 0.375rem !important; }
.rounded-top { border-top-left-radius: 0.375rem !important; border-top-right-radius: 0.375rem !important; }
.rounded-end { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
.rounded-bottom { border-bottom-right-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }
.rounded-start { border-bottom-left-radius: 0.375rem !important; border-top-left-radius: 0.375rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.rounded-0 { border-radius: 0 !important; }

.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.shadow-none { box-shadow: none !important; }

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }
.fw-normal { font-weight: 400 !important; }
.fw-light { font-weight: 300 !important; }
.fw-lighter { font-weight: lighter !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
.text-decoration-none { text-decoration: none !important; }

.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }

.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }

.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }

.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

.border { border: 1px solid #dee2e6 !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-start { border-left: 1px solid #dee2e6 !important; }

.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }
.border-5 { border-width: 5px !important; }

/* ===== RESPONSIVE UTILITIES ===== */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block { display: block !important; }
    .d-sm-grid { display: grid !important; }
    .d-sm-table { display: table !important; }
    .d-sm-table-row { display: table-row !important; }
    .d-sm-table-cell { display: table-cell !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
    .d-md-grid { display: grid !important; }
    .d-md-table { display: table !important; }
    .d-md-table-row { display: table-row !important; }
    .d-md-table-cell { display: table-cell !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-grid { display: grid !important; }
    .d-lg-table { display: table !important; }
    .d-lg-table-row { display: table-row !important; }
    .d-lg-table-cell { display: table-cell !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block { display: block !important; }
    .d-xl-grid { display: grid !important; }
    .d-xl-table { display: table !important; }
    .d-xl-table-row { display: table-row !important; }
    .d-xl-table-cell { display: table-cell !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
}

@media (min-width: 1400px) {
    .d-xxl-none { display: none !important; }
    .d-xxl-inline { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-grid { display: grid !important; }
    .d-xxl-table { display: table !important; }
    .d-xxl-table-row { display: table-row !important; }
    .d-xxl-table-cell { display: table-cell !important; }
    .d-xxl-flex { display: flex !important; }
    .d-xxl-inline-flex { display: inline-flex !important; }
}

/* ===== LANGUAGE SWITCHER ===== */
.language-switcher {
    margin-left: auto;
    margin-right: 1rem;
}

.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(37, 99, 235, 0.1);
    border: 2px solid rgba(37, 99, 235, 0.2);
    border-radius: 0.75rem;
    color: #2563eb;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.lang-btn:hover {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

.lang-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.lang-icon {
    font-size: 1.1rem;
}

.lang-text {
    white-space: nowrap;
    font-weight: 600;
}

.lang-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    font-weight: bold;
}

.lang-dropdown.active .lang-arrow {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.75rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.lang-dropdown.active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    color: #374151;
    font-weight: 500;
}

.lang-option:hover {
    background-color: #f8fafc;
    color: #2563eb;
}

.lang-option:first-child {
    border-radius: 0.75rem 0.75rem 0 0;
}

.lang-option:last-child {
    border-radius: 0 0 0.75rem 0.75rem;
}

.lang-flag {
    font-size: 1.4rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .navbar .container {
        flex-wrap: wrap;
    }
    
    .language-switcher {
        order: 3;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .navbar-toggle {
        order: 2;
        display: block;
    }
    
    .navbar-menu {
        order: 4;
        width: 100%;
        margin-top: 1rem;
        display: none;
    }
    
    .navbar-menu.active {
        display: block;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .language-switcher {
        order: 3;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .lang-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .lang-menu {
        right: auto;
        left: 0;
        min-width: 160px;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .lang-menu {
        background: #1f2937;
        border-color: #374151;
    }
    
    .lang-option {
        color: #d1d5db;
    }
    
    .lang-option:hover {
        background-color: #374151;
        color: #60a5fa;
    }
}