/**
 * WebEffortless Membership Manager — Frontend Styles
 * Premium My Account experience with modern cards, progress bars, and micro-animations.
 */
:root {
    --wemem-primary: #6366f1;
    --wemem-primary-dark: #4f46e5;
    --wemem-primary-light: #818cf8;
    --wemem-primary-bg: rgba(99,102,241,.06);
    --wemem-success: #10b981;
    --wemem-danger: #ef4444;
    --wemem-warning: #f59e0b;
    --wemem-gray-50: #f8fafc;
    --wemem-gray-100: #f1f5f9;
    --wemem-gray-200: #e2e8f0;
    --wemem-gray-300: #cbd5e1;
    --wemem-gray-400: #94a3b8;
    --wemem-gray-500: #64748b;
    --wemem-gray-700: #334155;
    --wemem-gray-900: #0f172a;
    --wemem-radius: 14px;
    --wemem-radius-sm: 8px;
    --wemem-radius-xs: 6px;
    --wemem-radius-pill: 9999px;
    --wemem-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --wemem-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    --wemem-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
    --wemem-gradient: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --wemem-transition: .2s cubic-bezier(.4,0,.2,1);
    --wemem-transition-spring: .4s cubic-bezier(.34,1.56,.64,1);
    --wemem-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wemem-my-memberships, .wemem-membership-details { font-family: var(--wemem-font); }

/* Restriction Notice */
.wemem-restriction-notice {
    background:linear-gradient(135deg,#f8fafc,#eef2ff); border:1px solid #e0e7ff;
    border-radius:var(--wemem-radius); padding:32px; text-align:center; margin:24px 0;
}
.wemem-restriction-notice__icon { font-size:40px; margin-bottom:12px; }
.wemem-restriction-notice__content p { color:var(--wemem-gray-700); font-size:16px; margin-bottom:16px; }
.wemem-restriction-notice--inline { padding:16px 20px; text-align:left; }

/* Buttons */
.wemem-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 22px; border-radius:var(--wemem-radius-sm);
    font-weight:600; font-size:14px; text-decoration:none; border:none; cursor:pointer;
    transition: all var(--wemem-transition); font-family:var(--wemem-font);
}
.wemem-btn--primary { background:var(--wemem-gradient); color:#fff; box-shadow:var(--wemem-shadow); }
.wemem-btn--primary:hover { transform:translateY(-1px); box-shadow:var(--wemem-shadow-md); color:#fff; opacity:.92; }
.wemem-btn--outline {
    background:transparent; border:1px solid var(--wemem-gray-200); color:var(--wemem-gray-700);
}
.wemem-btn--outline:hover { border-color:var(--wemem-primary); color:var(--wemem-primary); transform:translateY(-1px); }
.wemem-btn--secondary { background:var(--wemem-gray-100); color:var(--wemem-gray-700); }
.wemem-btn--secondary:hover { background:var(--wemem-gray-200); }
.wemem-btn--danger { background:#fee2e2; color:#991b1b; }
.wemem-btn--danger:hover { background:#fecaca; }
.wemem-btn--sm { padding:7px 14px; font-size:13px; }

/* Page Header */
.wemem-my-memberships h2 {
    font-size:22px; font-weight:700; color:var(--wemem-gray-900);
    display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.wemem-count-badge {
    font-size:12px; font-weight:700; background:var(--wemem-primary-bg);
    color:var(--wemem-primary); padding:2px 10px; border-radius:var(--wemem-radius-pill);
}

/* Membership Cards */
.wemem-memberships-list { display:flex; flex-direction:column; gap:16px; }
.wemem-membership-card {
    background:#fff; border:1px solid var(--wemem-gray-200);
    border-radius:var(--wemem-radius); padding:0; overflow:hidden;
    transition: box-shadow var(--wemem-transition), transform var(--wemem-transition);
}
.wemem-membership-card:hover { box-shadow:var(--wemem-shadow-md); transform:translateY(-2px); }

.wemem-membership-card__inner { padding:24px; }
.wemem-membership-card__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.wemem-membership-card__plan { font-size:18px; font-weight:700; color:var(--wemem-gray-900); margin:0; }
.wemem-membership-card__details { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.wemem-membership-card__label { display:block; font-size:11px; color:var(--wemem-gray-500); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.wemem-membership-card__value { display:block; font-size:15px; font-weight:500; color:var(--wemem-gray-900); margin-top:3px; }
.wemem-membership-card__actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Progress Bar */
.wemem-progress { margin:0 0 16px; }
.wemem-progress__bar {
    width:100%; height:6px; background:var(--wemem-gray-100);
    border-radius:var(--wemem-radius-pill); overflow:hidden;
}
.wemem-progress__fill {
    height:100%; border-radius:var(--wemem-radius-pill);
    background:var(--wemem-gradient); transition: width 1s ease-out;
    width:0;
}
.wemem-progress__label {
    display:flex; justify-content:space-between; margin-top:6px;
    font-size:11px; color:var(--wemem-gray-500); font-weight:500;
}

/* Status Badges */
.wemem-status-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 12px; border-radius:var(--wemem-radius-pill);
    font-size:12px; font-weight:600; text-transform:capitalize;
}
.wemem-status-badge::before {
    content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.wemem-status--active { background:#d1fae5; color:#065f46; }
.wemem-status--active::before { background:#10b981; }
.wemem-status--complimentary { background:#dbeafe; color:#1e40af; }
.wemem-status--complimentary::before { background:#3b82f6; }
.wemem-status--pending { background:#fef3c7; color:#92400e; }
.wemem-status--pending::before { background:#f59e0b; }
.wemem-status--paused { background:#e2e8f0; color:#475569; }
.wemem-status--paused::before { background:#94a3b8; }
.wemem-status--expired { background:#fee2e2; color:#991b1b; }
.wemem-status--expired::before { background:#ef4444; }
.wemem-status--cancelled { background:#fecaca; color:#991b1b; }
.wemem-status--cancelled::before { background:#dc2626; }

/* Membership Details */
.wemem-back-link {
    display:inline-flex; align-items:center; gap:4px;
    color:var(--wemem-primary); text-decoration:none; margin-bottom:16px;
    font-weight:600; font-size:14px; transition: color var(--wemem-transition);
}
.wemem-back-link:hover { color:var(--wemem-primary-dark); }
.wemem-membership-details__header {
    display:flex; align-items:center; gap:12px; margin-bottom:24px;
    padding-bottom:16px; border-bottom:1px solid var(--wemem-gray-200);
}
.wemem-membership-details__header h2 { margin:0; font-size:22px; font-weight:700; color:var(--wemem-gray-900); }
.wemem-membership-details__grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px; margin-bottom:32px;
}
.wemem-detail-item {
    padding:16px; background:var(--wemem-gray-50); border:1px solid var(--wemem-gray-100);
    border-radius:var(--wemem-radius-sm); transition: background var(--wemem-transition);
}
.wemem-detail-item:hover { background:#eef2ff; }
.wemem-detail-item__label {
    display:block; font-size:11px; color:var(--wemem-gray-500);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; font-weight:700;
}
.wemem-detail-item__value { font-size:15px; font-weight:600; color:var(--wemem-gray-900); }

/* Activity Log */
.wemem-membership-details h3 {
    font-size:17px; font-weight:700; color:var(--wemem-gray-900);
    margin:0 0 16px; padding-bottom:8px; border-bottom:2px solid var(--wemem-gray-100);
}
.wemem-activity-log { border-left:2px solid var(--wemem-gray-200); padding-left:20px; }
.wemem-activity-item { position:relative; padding:10px 0; }
.wemem-activity-item::before {
    content:''; position:absolute; left:-25px; top:16px;
    width:10px; height:10px; border-radius:50%; background:var(--wemem-primary);
    border:2px solid #fff; box-shadow:0 0 0 2px var(--wemem-gray-200);
}
.wemem-activity-item__date { display:block; font-size:12px; color:var(--wemem-gray-400); font-weight:500; }
.wemem-activity-item__type { font-weight:600; color:var(--wemem-gray-700); margin:0 8px; font-size:14px; }
.wemem-activity-item__note { color:var(--wemem-gray-500); font-size:13px; }

/* No Memberships */
.wemem-no-memberships { text-align:center; padding:48px 20px; }
.wemem-no-memberships__icon { font-size:48px; margin-bottom:12px; display:block; }
.wemem-no-memberships p { color:var(--wemem-gray-500); margin-bottom:16px; font-size:16px; }

/* Order Membership Table */
.wemem-order-memberships { width:100%; border-collapse:collapse; margin-top:12px; }
.wemem-order-memberships th { text-align:left; padding:8px 12px; background:var(--wemem-gray-50); font-size:12px; color:var(--wemem-gray-500); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.wemem-order-memberships td { padding:10px 12px; border-bottom:1px solid var(--wemem-gray-100); }

/* Drip Restriction Notice */
.wemem-restriction-notice--drip { background:linear-gradient(135deg,#fffbeb,#fef3c7); border-color:#fbbf24; }
.wemem-restriction-notice--drip .wemem-restriction-notice__icon { font-size:36px; }
.wemem-restriction-notice__sub { color:var(--wemem-gray-500); font-size:14px; margin-top:4px; }

/* Restricted Excerpt Teaser */
.wemem-restricted-excerpt { position:relative; margin-bottom:16px; max-height:200px; overflow:hidden; }
.wemem-restricted-excerpt::after { content:''; position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(transparent,#fff); pointer-events:none; }

/* Upcoming Content (Drip Timeline) */
.wemem-upcoming-content { margin-top:24px; }
.wemem-upcoming-content h3 { font-size:17px; font-weight:700; color:var(--wemem-gray-900); margin-bottom:16px; }
.wemem-upcoming-list { display:flex; flex-direction:column; gap:12px; }
.wemem-upcoming-item {
    display:flex; align-items:center; gap:16px; padding:16px;
    border-radius:var(--wemem-radius-sm); background:var(--wemem-gray-50);
    border:1px solid var(--wemem-gray-100);
    transition: all var(--wemem-transition);
}
.wemem-upcoming-item:hover { background:#eef2ff; border-color:#c7d2fe; }
.wemem-upcoming-item--unlocked { opacity:.7; }
.wemem-upcoming-item__icon {
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.wemem-upcoming-item__icon--locked { background:#fef2f2; color:#ef4444; }
.wemem-upcoming-item__icon--unlocked { background:#ecfdf5; color:#10b981; }
.wemem-upcoming-item__info { flex:1; }
.wemem-upcoming-item__title { font-weight:600; font-size:14px; color:var(--wemem-gray-900); }
.wemem-upcoming-item__title a { color:var(--wemem-primary); text-decoration:none; }
.wemem-upcoming-item__title a:hover { text-decoration:underline; }
.wemem-upcoming-item__date { font-size:12px; color:var(--wemem-gray-500); margin-top:2px; }

/* WooCommerce Integration */
/* WooCommerce Integration */
.wemem-member-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    margin: 12px 0;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.05);
}
.wemem-member-price-badge--potential {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
    box-shadow: 0 2px 4px rgba(52, 211, 153, 0.05);
}
.wemem-badge-icon { font-size: 14px; }

.wemem-loop-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: 6px;
    margin-right: 6px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid transparent;
    vertical-align: middle;
}
.wemem-loop-badge--member {
    background: #fffbeb;
    color: #d97706;
    border-color: #fef3c7;
}
.wemem-loop-badge--save {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #dcfce7;
}
.wemem-loop-badge--locked {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fee2e2;
}

.wemem-purchase-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    font-size: 14px;
    margin: 20px 0;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.05);
}
.wemem-purchase-notice__icon { font-size: 18px; }

.wemem-cart-savings { color:#059669; font-weight:600; font-size:12px; }

.wemem-thankyou-notice {
    display:flex; align-items:flex-start; gap:16px; padding:24px; margin:20px 0;
    border-radius:var(--wemem-radius); background:linear-gradient(135deg,#ecfdf5,#d1fae5); border:1px solid #6ee7b7;
}
.wemem-thankyou-notice__icon { font-size:32px; flex-shrink:0; }
.wemem-thankyou-notice__content h3 { margin:0 0 6px; font-size:18px; color:#065f46; }
.wemem-thankyou-notice__content p { margin:0 0 12px; color:#047857; font-size:14px; }
.wemem-thankyou-notice .button {
    background:#059669 !important; color:#fff !important; border:none !important;
    border-radius:var(--wemem-radius-xs) !important; padding:8px 20px !important; font-weight:600 !important;
}
.wemem-thankyou-notice .button:hover { background:#047857 !important; }

.wemem-order-memberships-title { margin-top:24px; }

.wemem-product-membership-info {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wemem-product-membership-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}
.wemem-product-membership-info__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}
.wemem-product-membership-info__icon { font-size: 20px; }
.wemem-product-membership-info__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
}
.wemem-product-membership-info__label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}
.wemem-product-membership-info__value { font-weight: 600; color: #0f172a; font-size: 14px; }
.wemem-product-membership-info__desc {
    margin: 14px 0 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    font-style: italic;
}

.wemem-loop-badge--membership {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

/* Confirmation Modal */
.wemem-confirm-modal {
    position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
}
.wemem-confirm-modal__overlay { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); }
.wemem-confirm-modal__content {
    position:relative; background:#fff; border-radius:var(--wemem-radius); padding:32px;
    width:100%; max-width:400px; text-align:center;
    box-shadow:var(--wemem-shadow-lg); animation: wemem-modal-pop var(--wemem-transition-spring);
}
@keyframes wemem-modal-pop { from { opacity:0; transform:scale(.9) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
.wemem-confirm-modal__icon { font-size:40px; margin-bottom:12px; display:block; }
.wemem-confirm-modal__title { font-size:18px; font-weight:700; color:var(--wemem-gray-900); margin:0 0 8px; }
.wemem-confirm-modal__text { font-size:14px; color:var(--wemem-gray-500); margin:0 0 24px; line-height:1.6; }
.wemem-confirm-modal__actions { display:flex; gap:8px; justify-content:center; }

/* Frontend Toast */
.wemem-toast-container {
    position:fixed; top:20px; right:20px; z-index:160000;
    display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.wemem-toast {
    display:flex; align-items:center; gap:10px;
    padding:14px 20px; border-radius:var(--wemem-radius-sm);
    background:#fff; box-shadow:var(--wemem-shadow-lg); border:1px solid var(--wemem-gray-200);
    font-size:14px; font-weight:500; color:var(--wemem-gray-900);
    pointer-events:auto; min-width:280px; max-width:420px;
    animation: wemem-toast-slide var(--wemem-transition-spring);
    font-family: var(--wemem-font);
}
.wemem-toast--success { border-left:4px solid var(--wemem-success); }
.wemem-toast--error { border-left:4px solid var(--wemem-danger); }
.wemem-toast__icon { font-size:18px; flex-shrink:0; }
.wemem-toast--removing { animation: wemem-toast-out .25s ease-in forwards; }
@keyframes wemem-toast-slide { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
@keyframes wemem-toast-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(100%); } }

/* Pricing Plans Grid */
.wemem-plans-grid {
    display: grid;
    gap: 24px;
    margin: 30px 0;
    width: 100%;
}
.wemem-plans-grid--cols-1 { grid-template-columns: 1fr; }
.wemem-plans-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wemem-plans-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wemem-plans-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.wemem-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--wemem-gray-200);
    border-radius: var(--wemem-radius);
    padding: 32px;
    box-shadow: var(--wemem-shadow-md);
    transition: transform var(--wemem-transition), box-shadow var(--wemem-transition);
}
.wemem-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wemem-shadow-lg);
}
.wemem-plan-card--active {
    border-color: var(--wemem-success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15), var(--wemem-shadow-md);
}
.wemem-plan-card--active::after {
    content: '✓';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 24px;
    height: 24px;
    background: var(--wemem-success);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--wemem-shadow);
}

.wemem-plan-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--wemem-radius-pill);
}
.wemem-badge--free { background: #d1fae5; color: #065f46; }
.wemem-badge--purchase { background: #ede9fe; color: #5b21b6; }
.wemem-badge--manual { background: #e2e8f0; color: #475569; }

.wemem-plan-card__name {
    font-size: 20px;
    font-weight: 800;
    color: var(--wemem-gray-900);
    margin: 0 0 4px;
}
.wemem-plan-card__duration {
    font-size: 12px;
    font-weight: 600;
    color: var(--wemem-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wemem-plan-card__price {
    font-size: 26px;
    font-weight: 800;
    color: var(--wemem-gray-900);
    margin: 24px 0;
    line-height: 1.2;
}
.wemem-plan-price__free { color: var(--wemem-success); }
.wemem-plan-price__contact { color: var(--wemem-gray-400); font-size: 18px; }

.wemem-plan-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wemem-gray-700);
    margin-bottom: 24px;
    flex-grow: 1;
}
.wemem-plan-card__desc p { margin: 0 0 12px; }
.wemem-plan-card__desc p:last-child { margin-bottom: 0; }

.wemem-plan-card__footer {
    width: 100%;
}
.wemem-plan-card__footer .wemem-btn {
    width: 100%;
    justify-content: center;
}
.wemem-btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 992px) {
    .wemem-plans-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

@media (max-width:600px) {
    .wemem-membership-card__details { grid-template-columns:1fr; }
    .wemem-membership-details__grid { grid-template-columns:1fr 1fr; }
    .wemem-membership-card__actions { flex-direction:column; }
    .wemem-plan-card { padding: 24px; }
}