/**
 * SunFlex - Additional Component Styles
 */

/* Spinner */
.sf-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

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

/* Header hidden state */
.sf-header.header-hidden {
    transform: translateY(-100%);
}

/* Mobile menu toggle active */
.sf-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.sf-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.sf-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu open body state */
body.menu-open {
    overflow: hidden;
}

/* Blog Layout */
.sf-blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

@media (max-width: 1024px) {
    .sf-blog-layout {
        grid-template-columns: 1fr;
    }
}

.sf-blog-sidebar {
    position: sticky;
    top: 100px;
}

/* Pagination */
.sf-pagination,
.navigation.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.sf-pagination .nav-links,
.navigation.pagination .nav-links {
    display: flex;
    gap: 0.5rem;
}

.sf-pagination a,
.sf-pagination span,
.navigation.pagination a,
.navigation.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 1rem;
    background: var(--sf-white);
    border: 1px solid var(--sf-gray-100);
    border-radius: var(--sf-radius-md);
    font-weight: 600;
    color: var(--sf-primary-dark);
    transition: all var(--sf-transition-fast);
}

.sf-pagination a:hover,
.navigation.pagination a:hover {
    border-color: var(--sf-primary-green);
    color: var(--sf-primary-green);
}

.sf-pagination .current,
.navigation.pagination .current {
    background: var(--sf-primary-green);
    border-color: var(--sf-primary-green);
    color: var(--sf-white);
}

/* Single Post Styles */
.sf-post-header {
    padding-top: 120px;
}

.sf-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--sf-gray-500);
}

.sf-post-category {
    background: var(--sf-secondary-pastel);
    color: var(--sf-primary-green);
    padding: 0.25rem 0.75rem;
    border-radius: var(--sf-radius-full);
    font-weight: 600;
}

.sf-post-date,
.sf-post-reading-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sf-post-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .sf-post-title {
        font-size: 1.75rem;
    }
}

.sf-post-excerpt {
    font-size: 1.25rem;
    color: var(--sf-gray-500);
}

.sf-post-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sf-author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.sf-author-name {
    font-weight: 600;
    display: block;
}

.sf-author-role {
    font-size: 0.875rem;
    color: var(--sf-gray-400);
}

/* Featured Image */
.sf-post-featured-image {
    margin: -3rem 0 3rem;
}

.sf-featured-img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--sf-radius-xl);
}

/* Post Content */
.sf-post-content {
    font-size: 1.125rem;
    line-height: 1.8;
}

.sf-post-content h2 {
    margin-top: 2.5rem;
}

.sf-post-content h3 {
    margin-top: 2rem;
}

.sf-post-content p {
    margin-bottom: 1.5rem;
}

.sf-post-content img {
    border-radius: var(--sf-radius-lg);
    margin: 2rem 0;
}

.sf-post-content blockquote {
    border-left: 4px solid var(--sf-primary-green);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--sf-gray-500);
}

.sf-post-content ul,
.sf-post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.sf-post-content li {
    margin-bottom: 0.5rem;
}

/* Tags */
.sf-post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sf-tags-label {
    font-weight: 600;
    margin-right: 0.5rem;
}

.sf-tag {
    background: var(--sf-milk);
    color: var(--sf-gray-500);
    padding: 0.25rem 0.75rem;
    border-radius: var(--sf-radius-full);
    font-size: 0.875rem;
    transition: all var(--sf-transition-fast);
}

.sf-tag:hover {
    background: var(--sf-secondary-pastel);
    color: var(--sf-primary-green);
}

/* Share */
.sf-post-share {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sf-gray-100);
}

.sf-share-label {
    font-weight: 600;
}

.sf-share-buttons {
    display: flex;
    gap: 0.5rem;
}

.sf-share-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--sf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-white);
    transition: all var(--sf-transition-fast);
}

.sf-share-facebook { background: #1877F2; }
.sf-share-twitter { background: #1DA1F2; }
.sf-share-linkedin { background: #0A66C2; }
.sf-share-telegram { background: #0088cc; }

.sf-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    color: var(--sf-white);
}

/* Author Box */
.sf-author-box {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--sf-white);
    border-radius: var(--sf-radius-xl);
    box-shadow: var(--sf-shadow-md);
}

.sf-author-box-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sf-author-box-name {
    margin-bottom: 0.5rem;
}

.sf-author-box-bio {
    color: var(--sf-gray-500);
    margin-bottom: 1rem;
}

/* Post Navigation */
.sf-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 640px) {
    .sf-post-navigation {
        grid-template-columns: 1fr;
    }
}

.sf-post-nav-item {
    padding: 1.5rem;
    background: var(--sf-milk);
    border-radius: var(--sf-radius-lg);
    transition: all var(--sf-transition-fast);
}

.sf-post-nav-item:hover {
    background: var(--sf-secondary-pastel);
}

.sf-post-nav-prev {
    text-align: left;
}

.sf-post-nav-next {
    text-align: right;
}

.sf-post-nav-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--sf-gray-400);
    margin-bottom: 0.5rem;
}

.sf-post-nav-next .sf-post-nav-label {
    justify-content: flex-end;
}

.sf-post-nav-title {
    font-weight: 600;
    color: var(--sf-primary-dark);
    display: block;
}

/* Widget Styles */
.sf-widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--sf-white);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-sm);
}

.sf-widget-title {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sf-primary-green);
}

.sf-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sf-widget li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sf-gray-100);
}

.sf-widget li:last-child {
    border-bottom: none;
}

.sf-widget a {
    color: var(--sf-gray-500);
}

.sf-widget a:hover {
    color: var(--sf-primary-green);
}

/* Input error state */
.sf-input.error,
.sf-select.error,
.sf-textarea.error {
    border-color: var(--sf-error);
}

/* Form messages */
.sf-form-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    color: var(--sf-success);
    padding: 1rem;
    border-radius: var(--sf-radius-md);
    margin-top: 1rem;
}

.sf-form-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--sf-error);
    padding: 1rem;
    border-radius: var(--sf-radius-md);
    margin-top: 1rem;
}

/* Dragover state */
.sf-file-upload.dragover {
    border-color: var(--sf-primary-green);
    background: var(--sf-secondary-pastel);
}

/* Product Archive */
.sf-archive-header {
    background: var(--sf-gradient-light);
    padding: 3rem 0;
    margin-top: 80px;
    margin-bottom: 3rem;
}

.sf-archive-title {
    margin-bottom: 0.5rem;
}

.sf-archive-description {
    color: var(--sf-gray-500);
    max-width: 600px;
}

/* Contact Page */
.sf-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

@media (max-width: 1024px) {
    .sf-contact-grid {
        grid-template-columns: 1fr;
    }
}

.sf-contact-info-card {
    background: var(--sf-white);
    border-radius: var(--sf-radius-xl);
    padding: 2rem;
    box-shadow: var(--sf-shadow-md);
}

.sf-contact-info-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--sf-gray-100);
}

.sf-contact-info-item:last-child {
    border-bottom: none;
}

.sf-contact-info-icon {
    width: 50px;
    height: 50px;
    background: var(--sf-secondary-pastel);
    border-radius: var(--sf-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-primary-green);
    flex-shrink: 0;
}

.sf-contact-info-label {
    font-size: 0.875rem;
    color: var(--sf-gray-400);
    margin-bottom: 0.25rem;
}

.sf-contact-info-value {
    font-weight: 600;
}

.sf-contact-info-value a {
    color: var(--sf-primary-dark);
}

.sf-contact-info-value a:hover {
    color: var(--sf-primary-green);
}

/* Map */
.sf-map-wrapper {
    margin-top: 3rem;
    border-radius: var(--sf-radius-xl);
    overflow: hidden;
    box-shadow: var(--sf-shadow-lg);
}

.sf-map-wrapper iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* Calculator result update animation */
#sf-calc-result.updated {
    animation: resultPulse 0.3s ease;
}

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

/* Print styles */
@media print {
    .sf-header,
    .sf-footer,
    .sf-back-to-top,
    .sf-callback-widget,
    .sf-cta {
        display: none !important;
    }
    
    .sf-main {
        padding-top: 0 !important;
    }
}