/**
 * Mesopotamia Theme - Additional Styles
 *
 * Extra CSS for components not covered in style.css
 * Uses CSS Logical Properties for RTL support
 *
 * @package Mesopotamia
 * @version 1.0.0
 */

/*--------------------------------------------------------------
# Loading & Animation States
--------------------------------------------------------------*/
.meso-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.meso-loading::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: -12px;
    margin-inline-start: -12px;
    border: 3px solid var(--meso-gray-300);
    border-block-start-color: var(--meso-primary);
    border-radius: 50%;
    animation: meso-spin 0.8s linear infinite;
}

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

/*--------------------------------------------------------------
# Toast Notifications
--------------------------------------------------------------*/
.meso-toast-container {
    position: fixed;
    inset-block-end: var(--meso-spacing-lg);
    inset-inline-end: var(--meso-spacing-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--meso-spacing-sm);
}

.meso-toast {
    display: flex;
    align-items: center;
    gap: var(--meso-spacing-sm);
    padding-block: var(--meso-spacing-sm);
    padding-inline: var(--meso-spacing-md);
    background-color: var(--meso-gray-900);
    color: var(--meso-white);
    border-radius: var(--meso-border-radius);
    box-shadow: var(--meso-shadow-lg);
    animation: meso-slide-in 0.3s ease;
}

.meso-toast--success {
    background-color: var(--meso-success);
}

.meso-toast--error {
    background-color: var(--meso-error);
}

.meso-toast--warning {
    background-color: var(--meso-warning);
    color: var(--meso-black);
}

@keyframes meso-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/
.meso-mobile-menu {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--meso-transition-base), visibility var(--meso-transition-base);
}

.meso-mobile-menu.is-active {
    opacity: 1;
    visibility: visible;
}

.meso-mobile-menu__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 280px;
    max-inline-size: 80%;
    background-color: var(--meso-white);
    padding: var(--meso-spacing-lg);
    transform: translateX(100%);
    transition: transform var(--meso-transition-base);
}

[dir="rtl"] .meso-mobile-menu__panel {
    transform: translateX(-100%);
}

.meso-mobile-menu.is-active .meso-mobile-menu__panel {
    transform: translateX(0);
}

.meso-mobile-menu__close {
    position: absolute;
    inset-block-start: var(--meso-spacing-md);
    inset-inline-end: var(--meso-spacing-md);
    inline-size: 40px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--meso-gray-500);
}

.meso-mobile-menu__nav {
    margin-block-start: var(--meso-spacing-xl);
}

.meso-mobile-menu__link {
    display: block;
    padding-block: var(--meso-spacing-sm);
    font-size: var(--meso-font-size-lg);
    font-weight: 500;
    color: var(--meso-gray-700);
    border-block-end: 1px solid var(--meso-gray-200);
}

/*--------------------------------------------------------------
# Product Quick View Modal
--------------------------------------------------------------*/
.meso-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--meso-spacing-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--meso-transition-base), visibility var(--meso-transition-base);
}

.meso-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.meso-modal__content {
    background-color: var(--meso-white);
    border-radius: var(--meso-border-radius-lg);
    max-inline-size: 800px;
    inline-size: 100%;
    max-block-size: 90vh;
    overflow: auto;
    transform: scale(0.9);
    transition: transform var(--meso-transition-base);
}

.meso-modal.is-active .meso-modal__content {
    transform: scale(1);
}

.meso-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--meso-spacing-md);
    border-block-end: 1px solid var(--meso-gray-200);
}

.meso-modal__close {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--meso-gray-500);
    transition: color var(--meso-transition-fast);
}

.meso-modal__close:hover {
    color: var(--meso-gray-900);
}

.meso-modal__body {
    padding: var(--meso-spacing-lg);
}

/*--------------------------------------------------------------
# Product Badges
--------------------------------------------------------------*/
.meso-badge {
    display: inline-flex;
    align-items: center;
    padding-block: var(--meso-spacing-xs);
    padding-inline: var(--meso-spacing-sm);
    font-size: var(--meso-font-size-sm);
    font-weight: 600;
    border-radius: var(--meso-border-radius);
}

.meso-badge--sale {
    background-color: var(--meso-error);
    color: var(--meso-white);
}

.meso-badge--new {
    background-color: var(--meso-success);
    color: var(--meso-white);
}

.meso-badge--hot {
    background-color: var(--meso-warning);
    color: var(--meso-black);
}

/*--------------------------------------------------------------
# Quantity Selector
--------------------------------------------------------------*/
.meso-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--meso-gray-300);
    border-radius: var(--meso-border-radius);
    overflow: hidden;
}

.meso-qty__btn {
    inline-size: 36px;
    block-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--meso-gray-100);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--meso-gray-700);
    transition: background-color var(--meso-transition-fast);
}

.meso-qty__btn:hover {
    background-color: var(--meso-gray-200);
}

.meso-qty__input {
    inline-size: 50px;
    block-size: 36px;
    text-align: center;
    border: none;
    font-size: var(--meso-font-size-base);
    appearance: textfield;
    -moz-appearance: textfield;
}

.meso-qty__input::-webkit-outer-spin-button,
.meso-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*--------------------------------------------------------------
# Wishlist Button
--------------------------------------------------------------*/
.meso-wishlist-btn {
    inline-size: 40px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--meso-white);
    border: 1px solid var(--meso-gray-300);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--meso-transition-fast);
}

.meso-wishlist-btn:hover {
    border-color: var(--meso-error);
    color: var(--meso-error);
}

.meso-wishlist-btn.is-active {
    background-color: var(--meso-error);
    border-color: var(--meso-error);
    color: var(--meso-white);
}

/*--------------------------------------------------------------
# Skeleton Loading
--------------------------------------------------------------*/
.meso-skeleton {
    background: linear-gradient(90deg,
            var(--meso-gray-200) 0%,
            var(--meso-gray-100) 50%,
            var(--meso-gray-200) 100%);
    background-size: 200% 100%;
    animation: meso-shimmer 1.5s infinite;
    border-radius: var(--meso-border-radius);
}

@keyframes meso-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.meso-skeleton--text {
    block-size: 1rem;
    margin-block-end: var(--meso-spacing-sm);
}

.meso-skeleton--title {
    block-size: 1.5rem;
    inline-size: 60%;
    margin-block-end: var(--meso-spacing-md);
}

.meso-skeleton--image {
    aspect-ratio: 4/3;
    inline-size: 100%;
}

/*--------------------------------------------------------------
# Accordion (FAQ/Product Details)
--------------------------------------------------------------*/
.meso-accordion {
    border: 1px solid var(--meso-gray-200);
    border-radius: var(--meso-border-radius);
    overflow: hidden;
}

.meso-accordion__item {
    border-block-end: 1px solid var(--meso-gray-200);
}

.meso-accordion__item:last-child {
    border-block-end: none;
}

.meso-accordion__trigger {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--meso-spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--meso-font-primary);
    font-size: var(--meso-font-size-base);
    font-weight: 600;
    text-align: start;
    color: var(--meso-gray-900);
    transition: background-color var(--meso-transition-fast);
}

.meso-accordion__trigger:hover {
    background-color: var(--meso-gray-100);
}

.meso-accordion__icon {
    inline-size: 20px;
    block-size: 20px;
    transition: transform var(--meso-transition-fast);
}

.meso-accordion__item.is-active .meso-accordion__icon {
    transform: rotate(180deg);
}

.meso-accordion__content {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--meso-transition-base);
}

.meso-accordion__item.is-active .meso-accordion__content {
    max-block-size: 500px;
}

.meso-accordion__body {
    padding: var(--meso-spacing-md);
    padding-block-start: 0;
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
.meso-topbar {
    background-color: var(--meso-primary);
    color: var(--meso-white);
    text-align: center;
    padding-block: var(--meso-spacing-xs);
    font-size: var(--meso-font-size-sm);
}

.meso-topbar-text {
    display: inline-flex;
    align-items: center;
    gap: var(--meso-spacing-xs);
}

/*--------------------------------------------------------------
# Floating Buttons
--------------------------------------------------------------*/
.meso-floating-buttons {
    position: fixed;
    inset-block-end: 100px;
    inset-inline-start: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: var(--meso-spacing-sm);
}

.meso-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 50px;
    block-size: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: var(--meso-shadow-lg);
    transition: transform var(--meso-transition-fast), box-shadow var(--meso-transition-fast);
    text-decoration: none;
}

.meso-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.meso-float-btn--whatsapp {
    background-color: #25D366;
    color: #fff;
}

.meso-float-btn--phone {
    background-color: var(--meso-primary);
    color: #fff;
}

.meso-float-btn--top {
    background-color: var(--meso-gray-700);
    color: #fff;
}

.meso-float-btn--top.is-visible {
    display: flex;
}

/*--------------------------------------------------------------
# Header Styles
--------------------------------------------------------------*/
.meso-header {
    background-color: var(--meso-header-bg, #fff);
    box-shadow: var(--meso-shadow-sm);
    transition: background-color var(--meso-transition-base);
}

.meso-header.is-sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
}

.meso-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--meso-spacing-md);
    max-inline-size: var(--wp--style--global--content-size);
    margin-inline: auto;
    padding-inline: var(--meso-spacing-lg);
}

.meso-store-name {
    font-size: var(--meso-font-size-xl);
    font-weight: 700;
    color: var(--meso-primary);
    margin: 0;
}

.meso-store-tagline {
    font-size: var(--meso-font-size-sm);
    color: var(--meso-gray-500);
    margin: 0;
}

/*--------------------------------------------------------------
# Footer Styles
--------------------------------------------------------------*/
.meso-footer {
    background-color: var(--meso-footer-bg, #1a1a1a);
    color: var(--meso-white);
    padding-block: var(--meso-spacing-2xl);
}

.meso-footer a {
    color: var(--meso-gray-300);
    transition: color var(--meso-transition-fast);
}

.meso-footer a:hover {
    color: var(--meso-secondary);
}

.meso-footer-about {
    color: var(--meso-gray-400);
    line-height: 1.8;
    margin-block-end: var(--meso-spacing-md);
}

.meso-copyright {
    text-align: center;
    color: var(--meso-gray-500);
    padding-block-start: var(--meso-spacing-lg);
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
    margin-block-start: var(--meso-spacing-xl);
}

/*--------------------------------------------------------------
# Contact Info
--------------------------------------------------------------*/
.meso-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--meso-spacing-sm);
}

.meso-contact-item {
    display: flex;
    align-items: center;
    gap: var(--meso-spacing-sm);
    color: var(--meso-gray-300);
}

.meso-contact-item svg {
    flex-shrink: 0;
    color: var(--meso-secondary);
}

/*--------------------------------------------------------------
# Social Icons
--------------------------------------------------------------*/
.meso-social-icons {
    display: flex;
    gap: var(--meso-spacing-sm);
    flex-wrap: wrap;
}

.meso-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--meso-white);
    transition: background-color var(--meso-transition-fast);
}

.meso-social-icon:hover {
    background-color: var(--meso-secondary);
    color: var(--meso-white);
}

/*--------------------------------------------------------------
# Trust Badges
--------------------------------------------------------------*/
.meso-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--meso-spacing-lg);
    padding-block: var(--meso-spacing-lg);
    background-color: var(--meso-gray-100);
    margin-block: var(--meso-spacing-xl);
    border-radius: var(--meso-border-radius-lg);
}

.meso-trust-badge {
    display: flex;
    align-items: center;
    gap: var(--meso-spacing-sm);
    color: var(--meso-gray-700);
}

.meso-trust-badge svg {
    color: var(--meso-success);
}

/*--------------------------------------------------------------
# Payment Icons
--------------------------------------------------------------*/
.meso-payment-icons {
    display: flex;
    gap: var(--meso-spacing-sm);
    flex-wrap: wrap;
    margin-block-start: var(--meso-spacing-md);
}

.meso-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--meso-spacing-xs) var(--meso-spacing-sm);
    background-color: var(--meso-white);
    border-radius: var(--meso-border-radius);
    font-size: var(--meso-font-size-sm);
    color: var(--meso-gray-700);
}

/*--------------------------------------------------------------
# COD Badge
--------------------------------------------------------------*/
.meso-cod-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--meso-spacing-xs);
    padding: var(--meso-spacing-xs) var(--meso-spacing-sm);
    background-color: #e8f5e9;
    color: var(--meso-success);
    border-radius: var(--meso-border-radius);
    font-size: var(--meso-font-size-sm);
    font-weight: 600;
}

/*--------------------------------------------------------------
# Responsive Adjustments
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .meso-floating-buttons {
        inset-block-end: 80px;
    }

    .meso-float-btn {
        inline-size: 45px;
        block-size: 45px;
    }

    .meso-trust-badges {
        flex-direction: column;
        align-items: center;
        gap: var(--meso-spacing-md);
    }
}