.twf-member-status-tag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 2px solid #0d6efd;
  border-radius: 8px;
  background: #f0f7ff;
  font-size: 14px;
  line-height: 1.35;
  margin: 12px 0;
}
.twf-member-status-tag.is-paused {
  border-color: #dc3545;
  background: #fff4f4;
}
.twf-member-status-tag.is-regular {
  border-color: #ffc107;
  background: #fffbf0;
}
.twf-member-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.twf-member-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #198754;
  box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25);
}
.twf-member-status-tag.is-paused .twf-member-status-dot {
  background: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}
.twf-member-status-tag.is-regular .twf-member-status-dot {
  background: #ffc107;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
}
.twf-member-status-text {
  font-weight: 600;
  color: #0d0d0d;
}
.twf-member-status-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #222;
}
.twf-member-status-metrics .twf-label {
  font-weight: 600;
  color: #0d6efd;
}
.twf-member-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 0;
}
.twf-toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0;
}
.twf-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.twf-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.twf-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.twf-toggle-switch input:checked + .twf-toggle-slider {
  background-color: #28a745;
}
.twf-toggle-switch input:checked + .twf-toggle-slider:before {
  transform: translateX(26px);
}
.twf-toggle-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  user-select: none;
}
.twf-member-price-label {
  display: inline-block;
  background: #0d6efd;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1;
  margin-left: 4px;
}
.twf-member-price-label.twf-limit-reached {
  background: #dc3545;
  animation: pulse-limit 2s ease-in-out infinite;
}
@keyframes pulse-limit {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.twf-addr-readonly input[readonly],
.twf-addr-readonly textarea[readonly] {
  background: #f9fafb !important;
  color: #555 !important;
}
.twf-locked-label:after {
  content: " (ล็อก)";
  color: #dc3545;
  font-weight: 400;
}
.twf-address-locked #ship-to-different-address {
  display: none !important;
}

/* My Account Status Widget */
.twf-account-status-widget {
  margin: 0;
  padding: 20px 0 0 0;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  background: transparent;
}
.twf-account-status-widget.is-paused {
  border-top-color: rgba(220, 53, 69, 0.3);
}
.twf-account-status-widget.is-regular {
  border-top-color: rgba(255, 193, 7, 0.3);
}
.twf-account-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.twf-account-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #198754;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
  flex-shrink: 0;
}
.twf-account-status-widget.is-paused .twf-account-status-dot {
  background: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}
.twf-account-status-widget.is-regular .twf-account-status-dot {
  background: #ffc107;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
}
.twf-account-status-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0d0d0d;
  line-height: 1.3;
}
.twf-account-status-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.twf-budget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.twf-budget-row .twf-label {
  font-weight: 600;
  color: #666;
}
.twf-budget-row .twf-value {
  font-weight: 700;
  color: #0d0d0d;
}
.twf-budget-row.twf-budget-remaining {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.twf-budget-row.twf-budget-remaining .twf-label {
  font-size: 15px;
  color: #198754;
}
.twf-budget-row.twf-budget-remaining .twf-value {
  font-size: 17px;
  color: #198754;
}
.twf-regular-notice {
  margin: 0;
  padding: 10px;
  background: rgba(255,193,7,0.1);
  border-left: 3px solid #ffc107;
  border-radius: 3px;
  font-size: 13px;
  color: #856404;
  font-weight: 600;
}

/* Fixed Submit Buttons for Admin Pages */
.twf-fixed-submit-bar {
  position: fixed;
  bottom: 0;
  left: 160px;
  right: 0;
  background: #fff;
  border-top: 1px solid #ccd0d4;
  padding: 12px 20px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media screen and (max-width: 782px) {
  .twf-fixed-submit-bar {
    left: 0;
  }
}

.twf-fixed-submit-bar .button-primary {
  font-size: 14px;
  height: 36px;
  line-height: 34px;
  padding: 0 16px;
}

.twf-fixed-submit-bar-spacer {
  height: 60px;
}

/* Adjust WP admin content to account for fixed bar */
body.wp-admin .wrap {
  padding-bottom: 80px;
}

/* Loading spinner for fixed submit bar */
.twf-fixed-submit-bar .twf-loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #e0e0e0;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: twf-spin 0.8s linear infinite;
  display: none;
}

@keyframes twf-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Variation Member-Only Field Styling */
.twf-variation-member-only {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 8px 0;
}

.twf-variation-member-only label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  color: #333;
}

.twf-variation-member-only input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.twf-variation-member-only:hover {
  background: #f0f0f0;
  border-color: #ccc;
}