/* Styles for renewals page */
.woocommerce-renewals {
    font-size: var(--wp--preset--font-size--small);
}

.woocommerce-renewals .renewable-products {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.woocommerce-renewals .renewable-product {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    margin-bottom: 0;
}
.woocommerce-renewals .product-container {
    display: flex;
    flex-wrap: wrap;
}
.woocommerce-renewals .product-info {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}
.woocommerce-renewals .product-actions {
    flex: 0 0 200px;
}
.woocommerce-renewals .product-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}
.woocommerce-renewals .license-period {
    color: #666;
    font-size: 0.9em;
    margin-top: 5px;
}
.woocommerce-renewals .price-container {
    margin-bottom: 15px;
    line-height:1.2em;
}
.woocommerce-renewals .renewal-discount {
    color: green;
    font-size: 0.9em;
    display:block;
}
.woocommerce-renewals .button-container .button {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* Styles for upgrades page */
.woocommerce-upgrades {
    font-size: var(--wp--preset--font-size--small);
}
.woocommerce-upgrades .upgrade-products {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.woocommerce-upgrades .upgrade-product {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    margin-bottom: 0;
}
.woocommerce-upgrades .product-container {
    display: flex;
    flex-wrap: wrap;
}
.woocommerce-upgrades .product-info {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}
.woocommerce-upgrades .product-actions {
    flex: 0 0 200px;
}
.woocommerce-upgrades .price-line,
.woocommerce-renewals .price-line {
    font-size: 0.95em;
}
.woocommerce-upgrades .price-line .price-label,
.woocommerce-renewals .price-line .price-label {
    color: #666;
    font-size: 0.85em;
    display: inline-block;
    min-width: 62px;
}
.woocommerce-upgrades .price-line.your-price,
.woocommerce-renewals .price-line.your-price {
    font-weight: 700;
    font-size: 1.05em;
}
.woocommerce-upgrades .price-line.your-price ins,
.woocommerce-renewals .price-line.your-price ins {
    text-decoration: none;
}
.woocommerce-upgrades .upgrade-free {
    color: green;
}
.woocommerce-upgrades .upgrades-intro,
.woocommerce-renewals .renewals-intro {
    color: #666;
    max-width: 640px;
    margin: 0 0 10px;
}
.woocommerce-upgrades .ssp-discount-deadline,
.woocommerce-renewals .ssp-discount-deadline {
    color: #b45309;
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 6px;
}
.woocommerce-upgrades .ssp-discount-forever,
.woocommerce-renewals .ssp-discount-forever {
    color: green;
    font-size: 0.9em;
    margin-top: 6px;
}
.woocommerce-upgrades .product-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}
.woocommerce-upgrades .upgrade-from {
    color: #666;
    font-size: 0.9em;
    margin-top: 5px;
}
.woocommerce-upgrades .upgrades-intro {
    color: #666;
    max-width: 640px;
    margin: 0 0 10px;
}
.woocommerce-upgrades .upgrade-credit-note {
    color: green;
    font-size: 0.9em;
    margin-top: 6px;
}
.woocommerce-upgrades .price-container {
    margin-bottom: 15px;
}
.woocommerce-upgrades .upgrade-discount {
    color: green;
    font-size: 0.9em;
    display:block;
}
.woocommerce-upgrades .button-container .button {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* Responsive styles for both pages */
@media (max-width: 768px) {
    .woocommerce-renewals .product-container,
    .woocommerce-upgrades .product-container {
        flex-direction: column;
    }
    .woocommerce-renewals .product-actions,
    .woocommerce-upgrades .product-actions {
        flex: 0 0 auto;
        margin-top: 15px;
    }
}

/* Styles for renewal discount notice */
.renewal-discount-notice {
    color: green;
    margin-top: 5px;
    font-size: 0.9em;
}
/* Archive-tile badge: a personal discount awaits on the product page */
.products .ssp-archive-discount-badge {
    display: inline-block;
    color: green;
    border: 1px solid rgba(0,128,0,.35);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    padding: 2px 10px;
    margin: 4px 0 6px;
}

/* Licence term pills on My Account titles ("1 year" | "5 sites"), styled like
 * Super Speedy Imports' run-screen version pill, tinted for the dark theme. */
.woocommerce-upgrades .product-name .ssp-licence-pill,
.woocommerce-renewals .product-name .ssp-licence-pill {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.16);
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}
.woocommerce-upgrades .product-name .ssp-licence-pill + .ssp-licence-pill,
.woocommerce-renewals .product-name .ssp-licence-pill + .ssp-licence-pill { margin-left: 4px; }

/* Upgrades: one-line description under each title, and the product/sites filter. */
.woocommerce-upgrades .ssp-licence-description {
    color: #a8a3b3;
    font-size: 0.95em;
    margin: -4px 0 4px;
}
.woocommerce-upgrades .ssp-upgrades-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
}
.woocommerce-upgrades .ssp-upgrades-filter label {
    font-weight: 600;
    font-size: 0.9em;
}
.woocommerce-upgrades .ssp-upgrades-filter select {
    min-width: 180px;
    max-width: 100%;
}
.woocommerce-upgrades li.upgrade-product[hidden] { display: none; }

/* Upgrade price on product pages and pricing cards: the sale price stays visible
 * between the struck normal price and the customer's own price. */
.ssp-upgrade-sale {
    display: inline-block;
    font-size: 0.55em;
    font-weight: 600;
    color: #d8b4fe;
    vertical-align: middle;
    margin-right: 8px;
    white-space: nowrap;
}
.ssp-upgrade-sale .amount,
.ssp-upgrade-sale .woocommerce-Price-amount { color: inherit; }

/* All Access Pass upsell box on the cart and checkout. */
.ssp-pass-upsell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.08);
}
.ssp-pass-upsell-text { flex: 1 1 320px; }
.ssp-pass-upsell-title { display: block; font-size: 1.1em; margin-bottom: 2px; }
.ssp-pass-upsell-name { font-weight: 600; }
.ssp-pass-upsell-name .ssp-licence-pill,
.ssp-pass-upsell .ssp-licence-pill {
    display: inline-block; padding: 2px 8px; margin-left: 6px; border-radius: 999px;
    background: rgba(168, 85, 247, 0.16); color: #d8b4fe; font-size: 12px; font-weight: 600;
    vertical-align: middle; white-space: nowrap;
}
.ssp-pass-upsell p { margin: 6px 0 0; }
.ssp-pass-upsell-button { white-space: nowrap; }