/* Subscriptions, access control and devices */

.wg-sub-msg{ margin: 0 0 16px; padding: 12px 16px; border-radius: 4px; }
.wg-sub-msg.success{ background: #e7f5e9; color: #237a2f; border: 1px solid #b8e0bf; }
.wg-sub-msg.failed, .wg-sub-msg.invalid{ background: #fdecea; color: #b02a2a; border: 1px solid #f5c6c6; }
.wg-sub-msg.pending{ background: #eaf4fb; color: #006ba1; border: 1px solid #bcdcf0; }

.wg-subscription-table{ width: 100%; border-collapse: collapse; }
.wg-subscription-table th, .wg-subscription-table td{ padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08); }
.wg-subscription-table th{ font-weight: 600; }

.wg-sub-badge{ display: inline-block; padding: 2px 10px; border-radius: 12px; color: #fff; font-size: 12px; line-height: 1.6; }
.wg-sub-badge.active{ background: #46b450; }
.wg-sub-badge.grace{ background: #f0ad4e; }
.wg-sub-badge.expired{ background: #dc3232; }
.wg-sub-badge.cancelled{ background: #72777c; }
.wg-sub-badge.pending{ background: #00a0d2; }

.wg-sub-actions{ margin-top: 14px; }

.wg-subscribe{ display: block; text-align: center; padding: 10px 16px; border: 0; border-radius: 4px; cursor: pointer; font-size: 15px; font-weight: 500; background: #d8dce2; color: #222d34; }
.wg-subscribe:hover{ background: #408bea; color: #fff; }
.wg-subscribe.busy{ opacity: .6; cursor: wait; }

.wg-plan-page{ max-width: 600px; margin: 0 auto; }
.wg-plan-header{ text-align: center; margin: 16px 0 32px; }
.wg-plan-logo{ max-width: 140px; height: auto; margin-bottom: 16px; border-radius: 8px; }
.wg-plan-title{ font-size: 22px; font-weight: 700; color: #111; margin: 0; }
.wg-plan-card{ background: #fff; border-radius: 12px; padding: 18px 24px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.04); border: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; cursor: pointer; position: relative; }
.wg-plan-card:hover{ border-color: #2e8b57; box-shadow: 0 4px 12px rgba(46,139,87,.15); }
.wg-plan-card-body{ display: flex; align-items: center; gap: 12px; }
.wg-plan-icon{ display: flex; align-items: center; color: #f57e20; font-size: 24px; margin-left: 4px; }
.wg-plan-name{ font-weight: 700; font-size: 16px; color: #111; }
.wg-plan-old{ position: absolute; top: -12px; right: 24px; background: #e74c3c; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; text-decoration: line-through; }
.wg-plan-card .wg-plan-buy{ display: inline-block; background: #fff; color: #2e8b57; border: 1px solid #2e8b57; padding: 6px 16px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all .3s ease; }
.wg-plan-card .wg-plan-buy:hover{ background: #2e8b57; color: #fff; }
.wg-plan-info{ text-align: center; font-size: 13px; color: #111; line-height: 1.8; margin-bottom: 24px; }
.wg-plan-info a{ color: #111; text-decoration: none; border-bottom: 1px solid #111; }
.wg-plan-features{ list-style: none; padding: 0; margin: 24px 0; }
.wg-plan-features li{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 14px; color: #111; line-height: 1.6; }
.wg-plan-check{ color: #2e8b57; font-size: 16px; font-weight: 700; margin-top: 2px; }

.wg-sub-current{ margin-bottom: 20px; }
.wg-sub-current table{ margin-bottom: 10px; }

.wg-locked{ display: block; padding: 18px 20px; border: 1px dashed transparent; border-radius: 6px; text-align: center; }
.wg-locked .icon{ display: block; font-size: 26px; margin-bottom: 8px; }
.wg-locked strong{ display: block; margin-bottom: 4px; }

.wg-devices-table{ width: 100%; border-collapse: collapse; }
.wg-devices-table th, .wg-devices-table td{ padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08); }
.wg-device-current{ font-weight: 600; }
.wg-device-current .wg-device-this{ color: #46b450; font-size: 12px; }
.wg-logout-device{ cursor: pointer; color: #dc3232; }
.wg-logout-device:hover{ text-decoration: underline; }