/* Global SVG Icon Styles */
.svg-icon {
    display: inline-block;
    fill: currentColor;
    vertical-align: -0.125em;
    width: 1.6em;
    height: 1.6em;
}

/* Fixed width icons */
.svg-icon.fa-fw {
    width: 1.25em;
    text-align: center;
}

/* Icon sizes */
.svg-icon.fa-xs {
    font-size: .75em;
}

.svg-icon.fa-sm {
    font-size: .875em;
}

.svg-icon.fa-lg {
    font-size: 1.25em;
}

.svg-icon.fa-2x {
    font-size: 2em;
}

.svg-icon.fa-3x {
    font-size: 3em;
}

.svg-icon.fa-4x {
    font-size: 4em;
}

.svg-icon.fa-5x {
    font-size: 5em;
}

.svg-icon.fa-6x {
    font-size: 6em;
}

.svg-icon.fa-7x {
    font-size: 7em;
}

.svg-icon.fa-8x {
    font-size: 8em;
}

.svg-icon.fa-9x {
    font-size: 9em;
}

.svg-icon.fa-10x {
    font-size: 10em;
}

/* Icon colors */
.svg-icon.text-primary {
    fill: #0066cc;
}

.svg-icon.text-secondary {
    fill: #6c757d;
}

.svg-icon.text-success {
    fill: #28a745;
}

.svg-icon.text-danger {
    fill: #dc3545;
}

.svg-icon.text-warning {
    fill: #ffc107;
}

.svg-icon.text-info {
    fill: #17a2b8;
}

.svg-icon.text-light {
    fill: #f8f9fa;
}

.svg-icon.text-dark {
    fill: #343a40;
}

.svg-icon.text-white {
    fill: #ffffff;
}

.svg-icon.text-muted {
    fill: #6c757d;
}

/* Icon spacing */
.svg-icon.me-1 {
    margin-right: 0.25rem !important;
}

.svg-icon.me-2 {
    margin-right: 0.5rem !important;
}

.svg-icon.me-3 {
    margin-right: 1rem !important;
}

.svg-icon.ms-1 {
    margin-left: 0.25rem !important;
}

.svg-icon.ms-2 {
    margin-left: 0.5rem !important;
}

.svg-icon.ms-3 {
    margin-left: 1rem !important;
}

/* Icon animations */
.svg-icon.fa-spin {
    animation: fa-spin 2s infinite linear;
}

.svg-icon.fa-pulse {
    animation: fa-spin 1s infinite steps(8);
}

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

/* Icon transformations */
.svg-icon.fa-rotate-90 {
    transform: rotate(90deg);
}

.svg-icon.fa-rotate-180 {
    transform: rotate(180deg);
}

.svg-icon.fa-rotate-270 {
    transform: rotate(270deg);
}

.svg-icon.fa-flip-horizontal {
    transform: scale(-1, 1);
}

.svg-icon.fa-flip-vertical {
    transform: scale(1, -1);
}

.svg-icon.fa-flip-both {
    transform: scale(-1, -1);
}

/* Icon in buttons */
.btn .svg-icon {
    margin-right: 0.25rem;
}

.btn .svg-icon:last-child {
    margin-right: 0;
}

/* Icon stacking */
.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.fa-stack-1x {
    line-height: inherit;
}

.fa-stack-2x {
    font-size: 2em;
}

/* FAQ specific styles */
/* FAQ icon styles moved to category-page.scss */

/* FAQ card styles moved to category-page.scss */

/* Article meta icons */
.article-meta .svg-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

/* Navigation arrows */
.nav-arrow .svg-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Breadcrumb icons */
.breadcrumb-content .svg-icon {
    margin-right: 5px;
}

/* Social icons */
.social-link .svg-icon {
    width: 24px;
    height: 24px;
}

/* Missing icon indicator */
.missing-icon {
    display: inline-block;
    padding: 2px 4px;
    background-color: #ff0000;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
}

/* Special icon sizes for random destination widget */
.destination-icon .svg-icon {
    width: 35px;
    height: 35px;
}

.globe-icon.svg-icon {
    width: 100px;
    height: 100px;
}

/* Fix button text color */
.btn-generate {
    color: white !important;
}

.btn-generate:hover,
.btn-generate:focus,
.btn-generate:active {
    color: white !important;
}

/* Badge styles */
.badge.bg-success {
    color: white !important;
}

.badge {
    padding: 3px !important;
}

/* Button primary color - moved to SCSS variables */

/* Offer subtitle color fix */
.offer-subtitle {
    color: var(--bs-heading-color) !important;
}

/* Remove underline from buttons */
.btn, .btn:hover, .btn:focus, .btn:active,
a.btn, a.btn:hover, a.btn:focus, a.btn:active {
    text-decoration: none !important;
}

/* Category page FAQ card styles moved to category-page.scss */

/* FAQ listing in category pages only */
.faq-section .faq-card {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 0 !important;
}

.faq-section .faq-card .faq-icon {
    flex-shrink: 0 !important;
}

.faq-section .faq-card .faq-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Force navbar container spacing to match sticky state */
.navbar .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Ensure navbar-actions stays to the right */
.navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
}

/* Fix navbar layout at small screens */
@media (max-width: 375px) {
    .navbar .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 10px !important;
    }
    
    .navbar-brand {
        flex-shrink: 1;
        min-width: 0;
        max-width: calc(100% - 100px);
    }
    
    .navbar-actions {
        flex-shrink: 0;
        gap: 0.25rem !important;
    }
    
    .search-toggle {
        width: 35px !important;
        height: 35px !important;
        padding: 0.25rem !important;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
    }
    
    .navbar-toggler-text {
        display: none !important;
    }
}