/* Karmatus Search V16.7 Styles */

/* --- Mobile Specific --- */
@media (max-width: 768px) {
    .dina-header, header.site-header, .header-wrapper, #header { display: none !important; }
    body { padding-top: 70px !important; }

    .karmatus-glass-bar {
        position: fixed !important;
        top: 15px !important; left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 30px) !important;
        height: 50px !important;
        z-index: 99999 !important;
        background: linear-gradient(135deg, rgba(249, 243, 237, .9), rgba(255, 255, 255, .8)) !important;
        backdrop-filter: blur(12px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, .6) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, .06) !important;
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        padding: 0 15px !important;
        cursor: pointer !important;
    }

    .karmatus-bar-content { display: flex !important; align-items: center !important; gap: 8px !important; }
    .karmatus-search-text { font-size: 14px !important; color: #10455B !important; font-weight: 600 !important; }
    .karmatus-bar-logo { height: 22px !important; width: auto !important; }
    .karmatus-search-icon { color: #FFAA11 !important; font-size: 20px !important; }

    .karmatus-search-overlay {
        position: fixed !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        background: rgba(0, 0, 0, .5) !important;
        z-index: 100000 !important;
        display: none !important; opacity: 0 !important;
        transition: opacity .25s ease !important;
    }
    .karmatus-search-overlay.active { display: block !important; opacity: 1 !important; }

    .karmatus-search-page {
        position: fixed !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        background: #fdfdfd !important;
        z-index: 100001 !important;
        transform: translateY(100%) !important;
        transition: transform .35s cubic-bezier(.2, .8, .2, 1) !important;
        display: flex !important; flex-direction: column !important;
    }
    .karmatus-search-page.active { transform: translateY(0) !important; }

    .karmatus-search-header {
        padding: 12px 15px !important;
        background: #fff !important;
        display: flex !important; align-items: center !important; gap: 10px !important;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .04) !important;
    }

    .karmatus-search-back { border: none; background: none; font-size: 18px; cursor: pointer; padding: 0 5px; }

    .karmatus-real-input {
        width: 100% !important; height: 44px !important;
        background: #f5f7f9 !important; border: none !important;
        border-radius: 12px !important; padding: 0 15px 0 40px !important;
        font-size: 14px !important; color: #333 !important; outline: none !important; font-weight: 500 !important;
    }

    .karmatus-input-wrapper { flex: 1 !important; position: relative !important; }
    .karmatus-search-submit-icon {
        position: absolute !important; left: 12px !important; top: 50% !important;
        transform: translateY(-50%) !important; color: #FFAA11 !important; font-size: 18px !important;
    }

    .karmatus-results-scroll { flex: 1 !important; overflow-y: auto !important; padding: 15px !important; background: #fafafa !important; }
    .karmatus-products-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 20px !important; }

    .karmatus-prod-card {
        display: flex !important; align-items: center !important;
        background: #fff !important; border-radius: 12px !important;
        padding: 8px !important; text-decoration: none !important;
        border: 1px solid #eee !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .02) !important;
        height: 85px !important;
    }

    .karmatus-prod-img { width: 70px !important; height: 70px !important; min-width: 70px !important; object-fit: cover !important; border-radius: 10px !important; margin-left: 12px !important; }
    .karmatus-prod-info { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; }
    .karmatus-prod-title {
        font-size: 13px !important; color: #333 !important; margin-bottom: 6px !important;
        line-height: 1.4 !important; font-weight: 600 !important; overflow: hidden !important;
        display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    }
    .karmatus-prod-price { font-size: 13px !important; color: #FFAA11 !important; font-weight: 700 !important; }

    .karmatus-load-more-btn {
        display: block; width: 100%; text-align: center; padding: 14px;
        background: #fff; color: #FFAA11; font-weight: 600; border-radius: 12px;
        font-size: 14px; border: 1px solid #FFAA11; cursor: pointer; transition: all .2s;
        margin-bottom: 30px; box-shadow: 0 2px 8px rgba(255, 170, 17, .15);
    }
    .karmatus-load-more-btn:active { background: #FFAA11; color: #fff; transform: scale(.98); }

    .karmatus-cat-row {
        display: flex !important; align-items: center !important; padding: 10px 12px !important;
        background: #fff !important; border-radius: 10px !important; margin-bottom: 8px !important;
        text-decoration: none !important; color: #333 !important; border: 1px solid #eee !important;
    }
    .karmatus-cat-icon {
        width: 32px; height: 32px; background: rgba(255, 170, 17, .1); border-radius: 8px;
        display: flex; align-items: center; justify-content: center; color: #FFAA11;
        margin-left: 10px; font-size: 15px;
    }
    
    .karmatus-history-box { margin-bottom: 15px; }
    .history-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: bold; color: #10455B; }
    .clear-history { color: #FFAA11; cursor: pointer; }
    .history-items { display: flex; flex-wrap: wrap; gap: 6px; }
    .karmatus-status-msg { text-align: center; padding: 20px; color: #999; font-size: 13px; }
}

/* --- Desktop Specific --- */
@media (min-width: 769px) {
    .karmatus-glass-bar, .karmatus-search-overlay { display: none !important; }

    .dina-search-con { display: block !important; position: relative !important; z-index: 1000 !important; }
    .dina-search-form {
        display: flex !important; align-items: center !important;
        background: #f8f9fa !important; border: 1px solid #ddd !important;
        border-radius: 8px !important; height: 40px !important; width: 100% !important;
    }
    .dina-search-form .search-input {
        border: none !important; background: transparent !important; height: 100% !important;
        flex: 1 !important; padding: 0 12px !important; font-size: 13px !important; outline: none !important; color: #333 !important;
    }
    .dina-search-form .btn-search {
        background: none !important; border: none !important; color: #FFAA11 !important;
        font-size: 16px !important; padding: 0 12px !important; cursor: pointer !important;
    }

    .karmatus-desktop-results {
        position: absolute; top: 105%; left: 0; right: 0;
        background: #fff; border-radius: 8px; box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
        z-index: 2000; display: none; max-height: 500px; overflow-y: auto; border: 1px solid #eee;
    }
    .karmatus-desktop-results.active { display: block; }

    .desktop-row {
        display: flex; align-items: center; padding: 10px 12px;
        border-bottom: 1px solid #f5f5f5; color: #333; text-decoration: none; transition: background .2s;
    }
    .desktop-row:hover { background: #fcfcfc; }
    .desktop-row img { width: 40px; height: 40px; border-radius: 6px; margin-left: 10px; object-fit: cover; }
}

/* --- General Loading --- */
.karmatus-loading-state { padding: 30px; text-align: center; color: #888; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.karmatus-loading-state i { color: #FFAA11; font-size: 24px; }
.karmatus-loading-text { animation: pulse 1.5s infinite; font-weight: 500; }
@keyframes pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }