/**
 * My Products — WooCommerce My Account Dashboard
 *
 * Row card layout with thumbnail, content, and action zones.
 * Design matches the Rise Admin license pages.
 *
 * @package Rise_Core
 */

/* =============================================
   Section
   ============================================= */
.rise-my-products {
    margin: 0 0 2em;
}

.rise-my-products__title {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 0 1em;
    color: #1f2937;
}

/* =============================================
   Grid — Single column, full-width rows
   ============================================= */
.rise-my-products__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

/* =============================================
   Card
   ============================================= */
.rise-product-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.rise-product-card:hover {
    box-shadow: 0 4px 12px rgba(119, 158, 203, 0.12);
    border-color: #d0dae8;
    transform: translateY(-1px);
}

/* =============================================
   Card Layout — Thumbnail + Content
   ============================================= */
.rise-product-card__layout {
    display: flex;
    align-items: flex-start;
    gap: 1.25em;
    padding: 1.25em;
}

/* =============================================
   Left: Thumbnail
   ============================================= */
.rise-product-card__image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
}

.rise-product-card__image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* =============================================
   Center: Content
   ============================================= */
.rise-product-card__content {
    flex: 1;
    min-width: 0;
}

/* =============================================
   Top Row: Name + Status + Type + Expiry
   ============================================= */
.rise-product-card__top-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em 0.75em;
    margin-bottom: 0.75em;
}

.rise-product-card__header {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    margin: 0;
}

.rise-product-card__name {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 !important;
    color: #1f2937;
    line-height: 1.3;
}

/* Status badge with dot indicator (matches admin) */
.rise-product-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.7em;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.rise-product-card__status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    flex-shrink: 0;
}

.rise-product-card__status--active {
    background: #dcfce7;
    color: #166534;
}
.rise-product-card__status--active::before {
    background: #22c55e;
}

.rise-product-card__status--expired {
    background: #fef3c7;
    color: #92400e;
}
.rise-product-card__status--expired::before {
    background: #f59e0b;
}

.rise-product-card__status--cancelled {
    background: #fef2f2;
    color: #991b1b;
}
.rise-product-card__status--cancelled::before {
    background: #ef4444;
}

.rise-product-card__status--suspended {
    background: #f3f4f6;
    color: #6b7280;
}
.rise-product-card__status--suspended::before {
    background: #9ca3af;
}

/* =============================================
   Meta: Type Tag + Expiration
   ============================================= */
.rise-product-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

/* Type pill badge (matches admin .rise-type-tag) */
.rise-product-card__type-tag {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.7em;
    font-weight: 500;
}

.rise-product-card__type-tag--subscription {
    background: #edf3f9;
    color: #5a7ba8;
}

.rise-product-card__type-tag--lifetime {
    background: #faf3f2;
    color: #b05a4a;
}

/* Expiration text */
.rise-product-card__expiry {
    font-size: 0.8em;
    color: #6b7280;
}

.rise-product-card__expiry--lifetime {
    font-style: italic;
    color: #9ca3af;
}

.rise-product-card__expiry--warning {
    color: #d97706;
    font-weight: 500;
}

.rise-product-card__expiry--urgent {
    color: #ef4444;
    font-weight: 600;
}

.rise-product-card__days {
    color: #9ca3af;
    font-size: 0.9em;
}

/* =============================================
   License Key Bar
   ============================================= */
.rise-product-card__key-bar {
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75em;
}

.rise-product-card__key {
    flex: 1;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.75em;
    color: #374151;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    border: none;
    padding: 0;
}

.rise-product-card__copy-btn {
    padding: 4px 12px;
    background: #779ecb;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7em;
    font-weight: 500;
    transition: background 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.rise-product-card__copy-btn:hover {
    background: #6a8dba;
}

.rise-product-card__copy-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

/* =============================================
   Activations Section
   ============================================= */
.rise-product-card__activations {
    margin-bottom: 0;
}

/* Meter bar */
.rise-product-card__meter {
    margin-bottom: 0.5em;
}

.rise-product-card__meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.75em;
    color: #6b7280;
}

.rise-product-card__meter-header strong {
    color: #374151;
    font-weight: 600;
}

.rise-product-card__meter-bar {
    height: 5px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}

.rise-product-card__meter-fill {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
    transition: width 0.3s ease;
    min-width: 0;
}

/* Domain list */
.rise-product-card__domain-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rise-product-card__domain-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75em;
    color: #374151;
    padding: 2px 0;
}

.rise-product-card__domain-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rise-product-card__staging-badge {
    display: inline-block;
    font-size: 0.6875em;
    background: #edf3f9;
    color: #5a7ba8;
    padding: 1px 7px;
    border-radius: 9999px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
}

/* Not yet activated */
.rise-product-card__no-activations {
    font-size: 0.75em;
    color: #9ca3af;
    font-style: italic;
    margin: 0;
}

/* =============================================
   Action Buttons (row below activations)
   ============================================= */
.rise-product-card__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.75em;
    padding-top: 0.75em;
    border-top: 1px solid #f3f4f6;
}

.rise-product-card__action-btn {
    display: inline-block;
    padding: 0.45em 1em;
    font-size: 0.8em;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #d1d5db;
    color: #374151;
    background: #fff;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.rise-product-card__action-btn:link,
.rise-product-card__action-btn:visited {
    color: #374151;
    text-decoration: none;
}

.rise-product-card__action-btn:hover {
    background: #f9fafb;
    text-decoration: none;
    color: #374151;
    border-color: #c4c9d0;
}

.rise-product-card__action-btn--primary,
.rise-product-card__action-btn--primary:link,
.rise-product-card__action-btn--primary:visited {
    background: #779ecb;
    color: #fff !important;
    border-color: #779ecb;
    text-decoration: none;
}

.rise-product-card__action-btn--primary:hover {
    background: #6a8dba;
    border-color: #6a8dba;
    color: #fff !important;
    text-decoration: none;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 600px) {
    .rise-product-card__layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .rise-product-card__top-row {
        justify-content: center;
    }

    .rise-product-card__header {
        justify-content: center;
        flex-wrap: wrap;
    }

    .rise-product-card__meta {
        justify-content: center;
    }

    .rise-product-card__key-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .rise-product-card__key {
        text-align: center;
    }

    .rise-product-card__copy-btn {
        text-align: center;
    }

    .rise-product-card__meter-header {
        justify-content: center;
        gap: 0.5em;
    }

    .rise-product-card__domain-list {
        align-items: center;
    }

    .rise-product-card__actions {
        justify-content: center;
    }
}