/* ========== SubscriptionPage.kt + ManageSubscriptionPage.kt ========== */

/* LazyPageLayout(maxWidthIn=600dp): center, 16dp padding, flex column, 16dp gap. */
.payment-page-shell {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* "Choose Your Subscription" / "Manage Subscription" — headlineSmall SemiBold. */
.payment-page-title {
    color: #2e2c28;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* ── Status banner (success / cancel) ──────────────────────────────────────── */

/* Card(shape=8dp, containerColor=<type>Container@40%) Row(CenterVertically). */
.payment-status-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
}

/* primaryContainer @ 40% alpha. */
.payment-status-success {
    background: rgba(0, 106, 142, 0.15);
    color: #004a62;
}

/* errorContainer @ 40% alpha. */
.payment-status-cancel {
    background: rgba(176, 0, 32, 0.1);
    color: #b00020;
}

.payment-status-message p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* ── Trial status message ────────────────────────────────────────────────── */

/* bodyLarge, onSurfaceVariant for normal, error color for warning. */
.payment-trial-message {
    color: rgba(46, 44, 40, 0.7);
    font-size: 16px;
    margin: 0;
}

.payment-trial-warning {
    color: #b00020;
}

/* ── Plan selection cards ────────────────────────────────────────────────── */

/* Column(spacedBy=16dp) with 16dp top/bottom padding. */
.payment-plans {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

/* Card: surface bg, 12dp rounded, 2dp border (outline@50% unselected, primary selected). */
.payment-plan-card {
    border: 2px solid rgba(46, 44, 40, 0.2);
    border-radius: 12px;
    padding: 16px;
    background: #fefefe;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.15s ease;
    user-select: none;
}

.payment-plan-card:hover {
    border-color: rgba(0, 106, 142, 0.5);
}

.payment-plan-card-selected {
    border-color: #006a8e;
}

.payment-plan-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* titleLarge. */
.payment-plan-title {
    color: #2e2c28;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

/* bodyMedium, onSurfaceVariant. */
.payment-plan-price {
    color: rgba(46, 44, 40, 0.6);
    font-size: 14px;
    margin: 0;
}

/* CheckCircle icon container on the right of the selected card. */
.payment-plan-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ── Loading / error ─────────────────────────────────────────────────────── */

.payment-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 106, 142, 0.2);
    border-top-color: #006a8e;
    border-radius: 50%;
    animation: payment-spin 0.8s linear infinite;
    margin: 8px auto;
}

@keyframes payment-spin {
    to { transform: rotate(360deg); }
}

.payment-error {
    color: #b00020;
    font-size: 14px;
    margin: 0;
}

/* ── Subscription info card (Manage page) ────────────────────────────────── */

/* Card(elevation=4dp, surfaceVariant bg). */
.payment-info-card {
    background: #f0ede8;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* InfoRow: Row(CenterVertically, spacedBy=12dp). */
.payment-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-info-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* labelMedium, onSurfaceVariant. */
.payment-info-label {
    color: rgba(46, 44, 40, 0.6);
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 2px;
}

/* bodyLarge SemiBold. */
.payment-info-value {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Row(CenterVertically, spacedBy=8dp) with error icon + bold error text. */
.payment-cancelled-warning {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-cancelled-warning p {
    color: #b00020;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

/* ── Cancel subscription button ──────────────────────────────────────────── */

/* Column(CenterHorizontally). */
.payment-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
}

/* TextButton style: no background, error color text, 8dp rounded. */
.payment-cancel-button {
    background: none;
    border: none;
    color: #b00020;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.payment-cancel-button:hover:not(.payment-cancel-button-disabled) {
    background: rgba(176, 0, 32, 0.08);
}

.payment-cancel-button-disabled {
    color: rgba(46, 44, 40, 0.38);
    cursor: default;
}