/**
 * @package     J2Commerce
 * @subpackage  plg_j2commerce_app_subscriptionproduct
 *
 * @copyright   (C)2024-2026 J2Commerce, LLC <https://www.j2commerce.com>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ── Subscription detail view ───────────────────────────────────────────── */

.j2commerce_subscription_edit_button {
    text-align: right;
}

.j2commerce_subscription_edit_button > h3 {
    float: left;
    margin-bottom: 0;
}

.j2commerce_subscription_detail_view dt,
.j2commerce_subscription_detail_view dd {
    padding: 2px 0;
}

.j2commerce_subscription_detail_view .text-body-secondary {
    color: #adb5bd;
}

.j2commerce_subscription_detail_view .j2commerce_subscription_edit_message {
    padding: 15px 0 0;
}

.j2commerce_subscription_detail_view .calendar-container {
    color: #333;
}

/* ── Inline calendar / date inputs ──────────────────────────────────────── */

input.calender_subscription {
    width: 70px;
}

.calender_hours_subscription {
    width: 22px;
}

/* ── Subscription history ────────────────────────────────────────────────── */

#subscription_history_type {
    width: auto;
}

/* ── Status badges (Bootstrap 5 badge supplements) ──────────────────────── */

.badge.bg-future,
span.badge-future {
    background-color: #ee82ee; /* violet */
    color: #000;
}

.badge.bg-in-trial,
span.badge-in-trial {
    background-color: #16a8ff;
    color: #fff;
}

.badge.bg-card-expired,
span.badge-card-expired {
    background-color: #e40050;
    color: #fff;
}

.badge.bg-canceled,
span.badge-canceled {
    background-color: #8c560a;
    color: #fff;
}

/* ── Inline validation ───────────────────────────────────────────────────── */

input.invalid,
textarea.invalid {
    border: 1px solid #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* ── Inline order editing ────────────────────────────────────────────────── */

.edit_orderitem_price,
.edit_orderitem_name,
.remove_order_fee,
.remove_order_shipping,
.edit_orderitem_attributes,
.remove_orderitem_attribute,
.edit_shipping_name,
.edit_orderitem_quantity {
    cursor: pointer;
}

.orderitem_price_edit_cont,
.orderitem_price_text_cont {
    display: inline-block;
}

.orderitem_price_field {
    width: 60px;
}

.edit_orderitem_name_cont,
.edit_orderitem_name_out,
.edit_shipping_name_out {
    display: inline-block;
}

.remove_order_fee,
.remove_orderitem_attribute,
.remove_order_shipping {
    color: #dc3545;
}

input.orderitem_quantity_field {
    width: 50px;
}

/* ── Status update notification option ──────────────────────────────────── */

.subs_update_status_notify_option {
    margin-top: 10px;
}

/* ── Subscription content helpers ───────────────────────────────────────── */

.j2commerce_subscription_content .cursor-pointer {
    cursor: pointer !important;
}

/* ── Checkbox label fix ──────────────────────────────────────────────────── */

.form-check label.form-check-label {
    display: inline-block;
}

/* ── My-account Subscriptions tab — collapsible per-subscription cards ─────
   Shared classes across both the bootstrap5 and uikit twins so this one CSS
   file styles either template unchanged. */

.j2c-subscription-card {
    background: #fff;
}

/* Bare icon-only toggle — no button chrome (no background/border/circle),
   just a clickable chevron. Shared by both twins; bs5 relies on the native
   `.btn` reset (transparent border, no color modifier) plus this override,
   uikit drops the uk-button/uk-border-circle classes entirely. */
.j2c-toggle-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 0;
}

.j2c-toggle-icon {
    transition: transform 0.2s ease;
}

/* Bootstrap 5: the collapse plugin toggles `.collapsed` on the trigger button
   automatically — no JS needed for the chevron rotation. */
[data-bs-toggle="collapse"]:not(.collapsed) .j2c-toggle-icon {
    transform: rotate(180deg);
}

/* UIkit: uk-toggle does not manage a "collapsed" class itself, so the inline
   toggle script (see profile_subscriptions.php) adds/removes this class. */
.j2c-toggle-icon.j2c-rotated {
    transform: rotate(180deg);
}

/* Plugin-owned muted-text utility for the uikit twin (R1 — replaces the banned
   UIkit muted-color helper class). Mirrors UIkit 3's own `--uk-global-muted-color`
   custom property (the same variable the banned helper itself reads), so this
   renders identically, with the same #999 fallback UIkit ships by default. */
.j2c-sub-muted {
    color: var(--uk-global-muted-color, #999);
}

.j2c-sub-product-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
}

.j2c-sub-inline-field {
    min-width: 5.5rem;
}

.j2c-sub-inline-field .j2c-sub-inline-label {
    font-size: 0.75rem;
}

/* Payment method logo — scoped to this card only. The admin equivalent rule
   (admin-order.css .j2commerce-payment-image { width: 140px }) is admin-only
   CSS and never loads on the frontend my-account page, and 140px is far too
   large for this compact card row anyway. */
.j2c-subscription-card .j2commerce-payment-image {
    max-height: 32px;
    width: auto;
}

/* UIkit "Cancel Subscription" dropdown item: <button> has no equivalent to
   Bootstrap's .dropdown-item that resets native button chrome, so reset it here. */
.j2c-uk-dropdown-btn {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
}