/* Wrapper */
.ppc-wrapper { max-width: 1200px; margin: 0 auto; font-family: inherit; }

/* Tabs */
.ppc-tabs-nav { border-bottom: 2px solid #eee; margin-bottom: 20px; }
.ppc-tab-btn {
    background: none; border: none; padding: 15px 20px; 
    font-size: 16px; font-weight: bold; color: #888; cursor: pointer;
}
.ppc-tab-btn.active { color: #000; border-bottom: 3px solid #000; }

/* Dashboard Layout */
.ppc-dashboard { display: flex; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; min-height: 500px; }
.ppc-sidebar { width: 30%; background: #f9f9f9; border-right: 1px solid #ddd; }
.ppc-display-area { width: 70%; padding: 30px; background: #fff; }

/* Sidebar List */
.ppc-list { list-style: none; padding: 0; margin: 0; }
.ppc-item { padding: 15px 20px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; justify-content: space-between; }
.ppc-item:hover, .ppc-item.active { background: #000; color: #fff; }

/* Content Styling */
.ppc-placeholder, .ppc-loading { text-align: center; color: #999; margin-top: 50px; }
.ppc-tags { margin-bottom: 15px; }
.ppc-tag { background: #e0f7fa; color: #006064; padding: 4px 10px; border-radius: 12px; font-size: 12px; margin-right: 5px; }
.ppc-substance-group { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.ppc-substance-group h4 { margin-bottom: 15px; color: #555; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; }

/* Header & Badges */
.ppc-meta-header { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center; }
.ppc-badge-length { background: #222; color: #fff; padding: 5px 12px; border-radius: 4px; font-weight: bold; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.ppc-badge-length .dashicons { font-size: 16px; width: 16px; height: 16px; color: #ffd700; }

/* Stats Grid */
.ppc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
.ppc-box { background: #f5f5f5; padding: 15px; border-radius: 5px; text-align: center; }
.ppc-box small { text-transform: uppercase; color: #666; font-size: 10px; }
.ppc-box div { font-weight: bold; font-size: 16px; margin-top: 5px; }

/* Smart Links */
.ppc-linked-cycles-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ppc-smart-link { background: #f0f0f1; border: 1px solid #ddd; padding: 10px 15px; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; color: #333; }
.ppc-smart-link:hover { background: #000; color: #fff; border-color: #000; }
.ppc-smart-link .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* Tables */
.ppc-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.ppc-table th { background: #eee; text-align: left; padding: 10px; }
.ppc-table td { border-bottom: 1px solid #eee; padding: 10px; }

/* ---------------------------------------------------- */
/* PRODUCTS GRID (Desktop)                              */
/* ---------------------------------------------------- */
.ppc-prod-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 15px; 
    margin-top: 15px; 
    /* Ensures all cards in the row are equal height */
    align-items: stretch; 
}

.ppc-prod-card { 
    border: 1px solid #eee; 
    padding: 10px; 
    text-align: center; 
    border-radius: 5px; 
    background: #fff;
    min-width: 0;
    
    /* === FLEXBOX MAGIC === */
    display: flex;
    flex-direction: column; 
    height: 100%; /* Force card to fill the grid cell */
}

.ppc-prod-card img { 
    width: 100%; 
    height: auto; 
    margin-bottom: 10px; 
    border-radius: 4px; 
    /* Make image fit nicely */
    object-fit: contain;
}

/* Title: Cap at 3 lines, but don't force empty space below if short */
.ppc-prod-card h4 { 
    font-size: 14px; 
    line-height: 1.4em;
    max-height: 4.2em; /* 1.4 * 3 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 5px 0 10px 0;
}

/* Price */
.ppc-price { 
    font-weight: bold; 
    margin-bottom: 5px; 
    color: #000; 
}

/* Button: STICK TO BOTTOM */
.ppc-btn { 
    display: block; 
    background: #000; 
    color: #fff; 
    text-decoration: none; 
    padding: 8px; 
    border-radius: 4px; 
    font-size: 12px; 
    
    /* This pushes the button to the bottom of the flex card */
    margin-top: auto; 
}

.ppc-btn:hover { background: #333; color: #fff; }

/* ---------------------------------------------------- */
/* MOBILE SWIPE FIX                                     */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    .ppc-dashboard { flex-direction: column; }
    .ppc-sidebar { width: 100%; height: 200px; overflow-y: scroll; border-bottom: 1px solid #ddd; }
    .ppc-display-area { width: 100%; padding: 20px 15px; }

    .ppc-swipe-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 15px;
        padding-bottom: 15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: none !important;
        align-items: stretch; /* Match height on mobile too */
    }

    .ppc-prod-card {
        flex: 0 0 160px !important;
        width: 160px !important;
        max-width: 160px !important;
        scroll-snap-align: start;
        margin-right: 0;
        height: auto; /* Flex container handles height */
    }
}

/* Button States */
.ppc-loading-btn {
    opacity: 0.7;
    cursor: wait;
    background: #555 !important;
}

.ppc-added-btn {
    background: #28a745 !important; /* Green */
    color: #fff !important;
    border-color: #28a745 !important;
    pointer-events: none; /* Prevent double click */
}

.ppc-added-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 3px;
}
