/**
 * WordPress Landing – Logged-In Profile Menu  v6
 * Pixel-perfect match of Next.js UserProfileDropdown (AvatarMenu).
 * All values taken from live computed measurements of the Next.js component.
 */

/* ──────────────────────────────────────────────────────────────
   1. Profile bar wrapper injected into the Elementor header
────────────────────────────────────────────────────────────── */
#seo-wp-profile-bar,
#seo-wp-profile-bar-s {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Sticky header: ensure dropdown is not clipped by parent overflow */
.pxl-header-elementor-sticky .e-con,
.pxl-header-elementor-sticky .e-con-inner,
.pxl-header-elementor-sticky [data-id="6cc8e52"],
.pxl-header-elementor-sticky .elementor-widget-container {
  overflow: visible !important;
}

/* ──────────────────────────────────────────────────────────────
   2. Dashboard button (blue pill to the LEFT of the avatar)
────────────────────────────────────────────────────────────── */
.seo-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: #1d3f6f;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(29, 63, 111, 0.25);
}
.seo-dashboard-btn:hover {
  background: #163358;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 63, 111, 0.35);
  color: #ffffff !important;
}
.seo-dashboard-btn:active {
  transform: scale(0.97) translateY(0);
}
.seo-dashboard-btn svg {
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   3. Avatar button  (w-12 h-12 = 48×48px in Next.js)
────────────────────────────────────────────────────────────── */
.seo-avatar-wrapper {
  position: relative;
}
.seo-avatar-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  padding: 0 !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
  animation: seoAvatarIn 0.2s ease forwards;
}
.seo-avatar-btn:hover  { transform: scale(1.05); }
.seo-avatar-btn:active { transform: scale(0.95); }
.seo-avatar-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

@keyframes seoAvatarIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ──────────────────────────────────────────────────────────────
   4. Dropdown panel
   Next.js: absolute right-0 mt-2 w-72 bg-white rounded-2xl
            shadow-lg z-50 border border-gray-200 overflow-hidden
   Measured: 288 × 515 px, border-radius 16px
────────────────────────────────────────────────────────────── */
.seo-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);         /* mt-2 = 0.5rem = 8px */
  right: 0;
  width: 288px;                  /* w-72 = 18rem */
  background: #ffffff;
  border-radius: 16px;           /* rounded-2xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);  /* shadow-lg */
  border: 1px solid #e5e7eb;     /* border-gray-200 */
  overflow: hidden;
  z-index: 99999;

  /* Animation initial state  (mirrors Framer: opacity 0, y -10, scale 0.95) */
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  transform-origin: top right;
}
.seo-profile-dropdown.seo-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* ──────────────────────────────────────────────────────────────
   5. Dropdown header  (Next.js: p-4 pb-3 = 16px 16px 12px)
   Measured height: 108px
────────────────────────────────────────────────────────────── */
.seo-dd-header {
  padding: 16px 16px 12px;       /* p-4 pb-3 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar inside dropdown  (w-12 h-12 mb-2 = 48×48px, mb 8px) */
.seo-dd-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f4f6;           /* bg-gray-100 fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;            /* mb-2 */
  flex-shrink: 0;
  animation: seoSpringIn 0.25s cubic-bezier(0.26, 0.53, 0.74, 1.48) 0.1s both;
}
.seo-dd-avatar-wrap img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Greeting  (text-base font-semibold text-gray-800 = 16px 600 #1f2937) */
.seo-dd-greeting {
  font-size: 16px !important;    /* text-base */
  font-weight: 600 !important;   /* font-semibold */
  color: #1f2937 !important;     /* text-gray-800 */
  margin: 0 !important;
  line-height: 1.5 !important;   /* override theme's 30px line-height */
  animation: seoFadeIn 0.3s ease 0.2s both;
}

@keyframes seoSpringIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes seoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────
   6. Dropdown body  (Next.js: px-3 py-2 flex flex-col gap-1)
   Measured: padding 8px 12px, gap 4px
────────────────────────────────────────────────────────────── */
.seo-dd-body {
  padding: 8px 12px;             /* py-2 px-3 */
  display: flex;
  flex-direction: column;
  gap: 4px;                      /* gap-1 */
}

/* ── Info rows (name + email)
   Next.js: flex items-center gap-2 w-full py-2 px-3
            text-gray-800 text-sm font-medium rounded-xl
   Measured: 36px high, padding 8px 12px, gap 8px, br 14px
──────────────────────────────────────────────────────────── */
.seo-info-row {
  display: flex;
  align-items: center;
  gap: 8px;                      /* gap-2 */
  width: 100%;
  padding: 8px 12px;             /* py-2 px-3 */
  border-radius: 14px;           /* rounded-xl (computed 14px in their config) */
  font-size: 14px;               /* text-sm */
  font-weight: 500;              /* font-medium */
  color: #1f2937;                /* text-gray-800 */
  background: transparent;
  line-height: 1.4 !important;   /* override theme's 30px line-height */
  animation: seoSlideInX 0.2s ease both;
}
.seo-info-row:nth-child(1) { animation-delay: 0.05s; }
.seo-info-row:nth-child(2) { animation-delay: 0.10s; }
.seo-info-row svg { flex-shrink: 0; color: currentColor; }
.seo-info-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   7. Subscription section wrapper
   Next.js: py-2 border-b border-gray-300 mb-1
   Measured: padding 8px 0, bottom border #d1d5db, mb 4px
────────────────────────────────────────────────────────────── */
.seo-sub-section {
  padding: 8px 0;                /* py-2 */
  border-bottom: 1px solid #d1d5db;  /* border-b border-gray-300 */
  margin-bottom: 4px;            /* mb-1 */
  animation: seoSlideInX 0.2s ease 0.11s both;
}

/* Sub label  (text-xs text-gray-700 font-bold mb-1 px-3) */
.seo-sub-label {
  font-size: 12px !important;    /* text-xs */
  font-weight: 700 !important;   /* font-bold */
  color: #374151 !important;     /* text-gray-700 */
  margin: 0 0 4px !important;    /* mb-1 */
  padding: 0 12px;               /* px-3 */
}

/* ── Subscription box
   Next.js: flex flex-col gap-1 w-full py-3 px-3 bg-primary/10 rounded-lg
   Measured: bg rgba(28,78,128,0.1), padding 12px, gap 4px, br 10px
──────────────────────────────────────────────────────────── */
.seo-sub-box {
  display: flex;
  flex-direction: column;
  gap: 4px;                      /* gap-1 */
  width: 100%;
  padding: 12px;                 /* py-3 px-3 */
  border-radius: 10px;           /* rounded-lg (computed 10px) */
}
.seo-sub-box--active  { background: rgba(28, 78, 128, 0.1); }  /* bg-primary/10 */
.seo-sub-box--inactive { background: rgba(0, 0, 0, 0.05); }

/* Plan name row (flex items-center gap-2) */
.seo-sub-plan-row {
  display: flex;
  align-items: center;
  gap: 8px;                      /* gap-2 */
}
.seo-sub-plan-row svg { flex-shrink: 0; }
.seo-sub-box--active   .seo-sub-plan-row svg { color: #1c4e80; }
.seo-sub-box--inactive .seo-sub-plan-row svg { color: #9ca3af; }

/* Plan name text  (text-sm text-primary font-bold) */
.seo-sub-plan-name {
  font-size: 14px;               /* text-sm */
  font-weight: 700;              /* font-bold */
  line-height: 1.4 !important;   /* override theme 30px */
}
.seo-sub-box--active   .seo-sub-plan-name { color: #1c4e80; }  /* text-primary */
.seo-sub-box--inactive .seo-sub-plan-name { color: #6b7280; }

/* Price row  (text-xs text-primary/90) */
.seo-sub-price-row {
  font-size: 12px;               /* text-xs */
  color: rgba(28, 78, 128, 0.9);  /* text-primary/90 */
  line-height: 1.33 !important;  /* override theme 30px → ~16px for 12px font */
}
.seo-sub-price-row .seo-currency-code {
  opacity: 0.75;                 /* opacity-75 */
}

/* Detail rows  (text-xs text-primary/90)
   Pages row gets justify-between for label/value layout */
.seo-sub-detail-row {
  font-size: 12px;               /* text-xs */
  color: rgba(28, 78, 128, 0.9);  /* text-primary/90 */
  display: flex;
  align-items: center;
  line-height: 1.33 !important;  /* override theme 30px → ~16px for 12px font */
}
.seo-sub-detail-row--pages {
  justify-content: space-between; /* flex justify-between */
}
.seo-sub-detail-row .seo-detail-value {
  font-weight: 700;              /* font-bold */
}

/* ── Cancel Auto Renewal button
   Next.js: bg-red-100 text-red-600 rounded-lg mt-2 py-2 px-3
   Measured: bg #fee2e2, color #dc2626, br 10px, mt 8px, 36px high
──────────────────────────────────────────────────────────── */
.seo-cancel-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;           /* gap-2 – theme forces 6px on buttons */
  width: 100% !important;
  padding: 8px 12px !important;  /* py-2 px-3 – theme forces 13px 20px */
  background: #fee2e2 !important; /* bg-red-100 */
  color: #dc2626 !important;      /* text-red-600 */
  font-size: 14px !important;    /* text-sm – theme forces 16px */
  font-weight: 500 !important;   /* font-medium */
  line-height: 1.4 !important;   /* override theme 30px */
  border: none !important;
  border-radius: 10px !important; /* rounded-lg – theme forces 8px */
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  margin-top: 8px !important;    /* mt-2 */
  box-sizing: border-box !important;
}
.seo-cancel-btn:hover  { background: rgba(254, 226, 226, 0.85) !important; }
.seo-cancel-btn:active { transform: scale(0.98); }
.seo-cancel-btn--hidden { display: none !important; }

/* ──────────────────────────────────────────────────────────────
   8. Action rows  (Dashboard / Profile Settings / Log Out)
   Next.js: flex items-center gap-2 w-full py-2 px-3
            text-sm font-medium rounded-xl
   Measured: padding 8px 12px, height 36px, gap 8px, br 14px
   Default background: TRANSPARENT (only coloured on hover)
────────────────────────────────────────────────────────────── */
.seo-action-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;           /* gap-2 – theme forces 6px on buttons */
  width: 100% !important;
  padding: 8px 12px !important;  /* py-2 px-3 – theme forces 13px 20px on buttons */
  border-radius: 14px !important; /* rounded-xl – theme forces 8px on buttons */
  font-size: 14px !important;    /* text-sm – theme forces 16px on buttons */
  font-weight: 500 !important;   /* font-medium */
  line-height: 1.4 !important;   /* override theme 30px line-height */
  color: #374151;                /* text-gray-700 default */
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
  animation: seoSlideInX 0.2s ease both;
  box-sizing: border-box !important;
}
.seo-action-row:nth-of-type(1) { animation-delay: 0.12s; }
.seo-action-row:nth-of-type(2) { animation-delay: 0.13s; }
.seo-action-row:nth-of-type(3) { animation-delay: 0.16s; }

/* Dashboard: text-primary (#1c4e80), hover bg-primary/10 */
.seo-action-row--dashboard {
  color: #1c4e80 !important;     /* text-primary */
}
.seo-action-row--dashboard:hover {
  background: rgba(28, 78, 128, 0.1) !important;  /* hover:bg-primary/10 */
  color: #1c4e80 !important;
  transform: translateX(2px);
}

/* Profile Settings: text-gray-700, hover bg-gray-100 */
.seo-action-row--profile {
  color: #374151 !important;     /* text-gray-700 */
}
.seo-action-row--profile:hover {
  background: #f3f4f6 !important; /* hover:bg-gray-100 */
  color: #374151 !important;
  transform: translateX(2px);
}

/* Log Out: text-red-600, transparent bg, hover bg-red-100 */
.seo-action-row--logout {
  color: #dc2626 !important;     /* text-red-600 */
  background: transparent !important;
}
.seo-action-row--logout:hover {
  background: #fee2e2 !important; /* hover:bg-red-100 */
  color: #dc2626 !important;
  transform: translateX(2px);
}

.seo-action-row:active { transform: scale(0.98); }
.seo-action-row svg { flex-shrink: 0; }

@keyframes seoSlideInX {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ──────────────────────────────────────────────────────────────
   9. Mobile sidebar variant (injected into [data-id="6cc8e52"])
────────────────────────────────────────────────────────────── */
#seo-wp-profile-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}
.seo-mobile-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.seo-mobile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.seo-mobile-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}
.seo-mobile-email {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.seo-mobile-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 12px;
}
.seo-mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none !important;
  border-radius: 8px;
  margin: 0 8px;
  transition: background 0.15s, color 0.15s;
}
.seo-mobile-link:hover {
  background: #f3f4f6;
  color: #1d3f6f;
}
.seo-mobile-dashboard-link {
  background: #1d3f6f;
  color: #fff !important;
  font-weight: 600;
}
.seo-mobile-dashboard-link:hover {
  background: #163358;
  color: #fff !important;
}
.seo-mobile-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #dc2626;
  background: #fef2f2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.seo-mobile-logout-btn:hover { background: #fee2e2; }

/* ──────────────────────────────────────────────────────────────
   10. Loading spinner
────────────────────────────────────────────────────────────── */
.seo-avatar-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: seoPulse 1.5s ease-in-out infinite;
}
@keyframes seoPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ──────────────────────────────────────────────────────────────
   11. Pricing card badge row – spacing & overlap fix
   Overrides post-2895.css (margin-top: 5px, left: 41% which caused overlap).
────────────────────────────────────────────────────────────── */

/* 11a. Space above the badge row (was 5px) */
.elementor-element[data-id="507a0a0"] .pxl-pricing__price::before,
.elementor-element[data-id="507a0a0"] .pxl-pricing__price::after,
.elementor-element[data-id="07d47f9"] .pxl-pricing__price::before,
.elementor-element[data-id="07d47f9"] .pxl-pricing__price::after,
.elementor-element[data-id="5d716bf"] .pxl-pricing__price::before,
.elementor-element[data-id="5d716bf"] .pxl-pricing__price::after {
    margin-top: 12px !important;
}

/* 11b. Fix "Annually" badge – flush left */
.elementor-element[data-id="507a0a0"] .pxl-pricing__price::before,
.elementor-element[data-id="07d47f9"] .pxl-pricing__price::before,
.elementor-element[data-id="5d716bf"] .pxl-pricing__price::before {
    left: 0 !important;
}

/* 11c. Fix "Save" badge – flush right (prevents overlap with "Annually" badge
   regardless of currency/amount length) */
.elementor-element[data-id="507a0a0"] .pxl-pricing__price::after,
.elementor-element[data-id="07d47f9"] .pxl-pricing__price::after,
.elementor-element[data-id="5d716bf"] .pxl-pricing__price::after {
    left: auto !important;
    right: 0 !important;
}

/* 11d. Space below the badge row so description clears both badges */
.elementor-element[data-id="507a0a0"] .pxl-pricing__top .pxl-pricing__desc,
.elementor-element[data-id="07d47f9"] .pxl-pricing__top .pxl-pricing__desc,
.elementor-element[data-id="5d716bf"] .pxl-pricing__top .pxl-pricing__desc {
    margin-top: 58px !important;
}