/*
Speed Analyzer  – Admin Styles
Version: v0.719
*/

/* apply the same box-shadow to modules 1–7 */
.wpsa-stat-card, .wpsa-concl-block, .wpsa-module-1 > div:nth-of-type(1) {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* CSS for photo class Animation */
/* Container stays relative if you need absolute children later */
.wpsa-stat-cards.photo {
  position: relative;
}

/* Base styling + transition on each card */
.wpsa-stat-cards.photo .wpsa-stat-card {
  /* your existing backgrounds still apply via inline styles,
     but add box-shadow & transition here */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition:
    transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer; /* if you want it to feel “clickable” */
}

/* On hover: lift up & deepen the shadow */
.wpsa-stat-cards.photo .wpsa-stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

/* If you also want the PSI halves to animate, target them too */
.wpsa-stat-cards.photo .psi-half {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.wpsa-stat-cards.photo .psi-half:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}


/* Pulse animation */
@keyframes pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Tooltip */
.custom-tooltip {
  display: inline-block;
  background: #2271b1;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  margin-left: 6px;
  cursor: pointer;
  position: relative;
  font-style: normal;
}
.custom-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 24px;
  left: 0;
  background: #2271b1;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  width: 240px;
  font-size: 13px;
  z-index: 9999;
  white-space: pre-wrap;
}

/* tooltip flip*/

/* 1) Hide the real “?” character */
.custom-tooltip {
  color: transparent;
  position: relative; /* your existing */
}

/* 2) Re-draw the “?” as ::before so we can spin it */
.custom-tooltip::before {
  content: "?";
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;  height: 100%;
  text-align: center;
  line-height: inherit;
  font-style: normal;
  color: #fff; /* match your original text color */

  /* 3D setup */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
}

/* 3) Spin only that “?” on hover */
.custom-tooltip:hover::before {
  transform: rotateY(360deg);
}

/* 4) Make sure your tooltip bubble (::after) stays upright */
.custom-tooltip::after {
  backface-visibility: hidden;
}


/* Table text */
.widefat td {
  font-size: 15px;
  font-weight: bold;
  color: #3c434a;
  text-align: center;
}
.widefat th {
  font-size: 16px;
  color: #000;
  text-align: center;
  line-height: 1.5;
}
/* Module 1 table */
.wpsa-module1-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 15px 15px 0 0;
  width: 100%;
}

/*Module 1 and 2 z-index*/
.wpsa-module-1,
.wpsa-module-2,
.wpsa-module-3-4 {
    z-index: 60;
}

/* Module wrappers */
.wpsa-module-1,
.wpsa-module-2,
.wpsa-module-3-4,
.wpsa-module-5,
.wpsa-module-6 {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* New: Module 7 (Conclusion) wrapper styling */
.wpsa-module-7 {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
 }

/* Conclusion sections and blocks */
.wpsa-module-7 .wpsa-concl-section {
  margin-bottom: 50px;
}
.wpsa-module-7 .wpsa-concl-block {
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
}
/* Color coding for conclusion blocks */
.wpsa-concl-good    { background: #c6f7c3; }
.wpsa-concl-medium  { background: #fef6b3; }
.wpsa-concl-bad     { background: #ffdddd; }
.wpsa-concl-neutral { background: #dddddd; }


/* Run button */
.button-primary.wpsa-button-run {
  min-height: 40px;
}

.button-primary {
 position: relative;
  overflow: hidden;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(#4CAF50, #45A049);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /*box-shadow: 0 6px rgba(0,0,0,0.2);*/
  transition:
    transform 0.1s ease-out,
    box-shadow 0.1s ease-out,
    background 0.2s ease;
}

.button-primary:hover {
    background: linear-gradient(#5BC26B, #4CAF50);
}

.button-primary:active {
 transform: translateY(4px);
  box-shadow: 0 2px rgba(0,0,0,0.2);
  background: linear-gradient(#388E3C, #2E7D32);
}

.button-primary:active::after {
    animation: ripple 0.6s ease-out;
}

/* Ripple keyframes */
@keyframes ripple {
  to {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

/* Titles */
/* subtitle under plugin title */
#wpsa-header-credit {
 font-style: italic;
 color: #777777;
 font-size: 12px;
 font-weight: 400;
}

.wpsa-header-subtitle {
  display: block;
  font-size: 12px;
  color: #777;
  margin-top: 4px; 
  font-weight: 400;
}

#test-results .wpsa-module-title {
      font-size: 19px;
}

.wpsa-module-title {
  font-size: 22px !important;
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 400;
}

/* Header */
.header-brand {
  /* position: relative;
  right: 40%;*/
    padding-bottom: 35px !important;
}




.wpsa-header {
  display: flex;
  gap: 10px;
  max-width: 750px;
  margin: 0 auto 10px;
}

.wpsa-logo { height: 50px; }
.wpsa-version { color: #777; font-size: 14px; position: relative; top:5px; font-weight: 400; }

.wpsa-name {
  top: 5px;
  position: relative;
  font-size: 23px;
  font-weight: 400;
}

h3 {
  font-size: 14px;
}

/* Form */
#wpsa-speed-test-container,
#speed-test-form {
  display: flex;
   flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  max-width: 750px;
  margin: 0 auto 10px;
  padding-top:50px;
}

.wpsa-input-url,
input[name="test_url"] {
  flex: 1;
  padding: 6px;
}

/* Tested URL line */
.wpsa-url-display {
  max-width: 750px;
  margin: 0 auto 20px;
  color: #555;
  font-style: italic;
  text-align: left;
  }

#wpsa-tested-url {
    position: relative;
    bottom: 50px;
   pointer-events: none;
}

#wpsa-daily-remaining {
  font-style: normal;
}

/*lock icon*/
/* form layout */
.wpsa-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* lock-icon wrapper & positioning */
.wpsa-url-field {
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
}

.wpsa-url-field .wpsa-input-url {
  width: 100%;
  padding-right: 2.4em;
  box-sizing: border-box;
}

.wpsa-url-field .wpsa-url-lock {
  position: absolute;
  top: 50%;
  right: 0.6em;
  transform: translateY(-50%);
pointer-events: none;
  font-size: 1.2em;
  color: #666;
}

/* ----------------------------------------------------------------------------
   Lock-icon tooltip (separate from the “?” bubbles)
   ---------------------------------------------------------------------------- */
/* re-enable hover *just* on the tooltip wrapper */
.wpsa-url-field .wpsa-url-lock.wpsa-lock-tooltip {
  pointer-events: auto;
}

.wpsa-lock-tooltip {
  display: inline-block;
  position: relative;
  cursor: default; /* or pointer if you like */
}

/* on hover, show the bubble just like .custom-tooltip does */
.wpsa-lock-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #2271b1;
  color: #fff;
  padding: 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre-wrap;
  z-index: 9999;
  margin-top: 6px;
  width: 200px;
  text-align: center;
}




/* --------------------------------------- */
/* Running indicators (hidden by default)  */
/* --------------------------------------- */
#running-test,
#module2-running,
#module5-running,
#module7-running {
  display: none;
  font-size: 18px;
  /*font-weight: bold;*/
  color: #2271b1;
  animation: pulse 2s infinite;
  max-width: 750px;
  margin: 10px auto;
}

/* --------------------------------------- */
/* Module 7 wrapper & children             */
/* hidden until JS reveals them in sequence */
/* --------------------------------------- */
#module7-wrapper {
  display: none;
}
#module7-wrapper #module7-running {
  display: none;
}
#module7-wrapper #module7-container {
  display: none;
}




/*Module 1*/
#running-test {
    top:10px;
    position: relative;
}

/* Tabs moved into top-right corner */
.wpsa-tabs2,
.wpsa-tabs5 {
  position: absolute;
  top: 20px;
  right: 20px;
  margin-bottom: 0;
}
.wpsa-tab2,
.wpsa-tab5 {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  background: #f1f1f1;
}
.wpsa-tab2.active,
.wpsa-tab5.active {
  background: #0073aa;
  color: #fff;
  border-color: #005a8c;
}

/* Footnotes */
.wpsa-footnote,
#module2-footnote {
  font-style: italic;
  margin-top: 10px;
  color: #555;
}
/* hide Module 2 footnote until data arrives */
#module2-footnote {
  display: none;
}

/* Stat cards (all modules) */
.wpsa-stat-cards {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.wpsa-stat-card {
  flex: 1;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.header {
  font-size: 16px;
  margin-bottom: 8px;
  text-align: center;
}
.value {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

/* Modules 3 & 4: force equal halves */
.wpsa-module-3-4 .wpsa-stat-cards > div {
  flex: 1;
}

/* Hide desktop panels & module5 until JS runs */
#asset-desktop,
#perf-desktop,
#wpsa-module5 {
  display: none;
}

/* Performance circle */
.performance-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 10px;
  border: 5px solid #ccc;
  background: #f5f5f5;
  position: relative;
}
.perf-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: bold;
}

/* Diagnostics list */
.diagnostics ul {
  list-style: none;
  padding-left: 0;
}
.diagnostics li {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.diagnostics li .icon {
  margin-right: 6px;
}
.severe .icon { color: #d32f2f; }
.moderate .icon { color: #f9a825; }

/* Misc */
.wpsa-notice-limit{
    margin: 20px auto !important;
    max-width: 750px;
    position: relative;
    top:300px;
}

.notice-error {
     max-width: 750px;
     margin: 0 auto 20px !important;
     position: relative;
    top: 300px;
}

.notice-error2 {
     max-width: 750px;
     margin: 0 auto 20px !important;
     position: relative;
     top: -50px;
     /*color: #d32f2f;*/
     border: 1px solid #b32d2e;
     border-left-width: 4px;
}

.notice-error3 {
top: 220px;
}

h2 { padding-top: 10px; }
.notice-warning {
  border-left-color: #d00;
  background: white;
  padding: 0;
  margin: 0;
  }

h4 {
    margin-bottom: 5px;
    }


    /* Module 5 */
.metrics > .wpsa-footnote {
 padding-bottom: 20px;
}

#mobile-diag, #desktop-diag {
    text-decoration: underline;
}


/* Module 6 */
.wpsa-module-6 .wpsa-stat-cards {
    padding-bottom: 20px;
}

#recom {
    text-decoration: underline;
}


/* Module 7 */
.wpsa-cta{
margin-top: 100px !important;
}
.wpsa-cta h2{
font-size: 14px;}

#module7-container h3{
    text-decoration: underline;
}

.wpsa-module-6 {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Tabs for Module 6 */
.wpsa-module-6 .wpsa-summary-45-row { justify-content: center; }

.wpsa-tabs6 {
  position: absolute;
  top: 20px;
  right: 20px;
}
.wpsa-tab6 {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  background: #f1f1f1;
}
.wpsa-tab6 + .wpsa-tab6 {
  margin-left: -4px;
}
.wpsa-tab6.active {
  background: #0073aa;
  color: #fff;
  border-color: #005a8c;
}

/* Hide summary until ready */
#wpsa-module6 {
  display: none;
}

/* Running indicator for summary */
#module6-running {
  display: none;
  font-size: 18px;
  font-weight: bold;
  color: #2271b1;
  animation: pulse 2s infinite;
  max-width: 750px;
  margin: 10px auto;
}

/* PSI-metrics combined card */
.psi-metrics {
  padding: 0;
  display: flex;
}
.psi-metrics .psi-halves {
  display: flex;
  width: 100%;
  height: 100%;
}
.psi-metrics .psi-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.psi-metrics .psi-half + .psi-half {
  border-left: 1px solid #ccc;
}
.psi-metrics .psi-half:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.psi-metrics .psi-half:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Recommendations list */
.wpsa-recommendations {
  list-style: none;
  padding-left: 0;
}
.wpsa-recommendations li {
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-bottom: 8px;
}
.wpsa-recommendations .icon {
  margin-right: 6px;
  font-size: 16px;
}

/* Prevent layout shift by equalizing summary cards height */
.wpsa-module-6 .wpsa-stat-cards {
  align-items: stretch;
}
.wpsa-module-6 .wpsa-stat-card {
  min-height: 120px;
}

/* Center the 4.5 row (Active plugins / PHP / DB) and avoid stretching cards full width */
.wpsa-module-6 .wpsa-summary-45-row {
  justify-content: center;          /* horizontally center the row */
}
.wpsa-module-6 .wpsa-summary-45-row .wpsa-stat-card {
  flex: 0 0 140px;                  /* keep card width compact so centering is visible */
}
@media (max-width: 700px) {
  .wpsa-module-6 .wpsa-summary-45-row .wpsa-stat-card {
    flex: 1 1 100%;                 /* stack nicely on small screens */
  }
}



/* PSI circle “N/A” styling */
.performance-circle.na {
  border-color: #ccc !important;
  background: #f0f0f0 !important;
}
.performance-circle.na .perf-text {
  color: #777 !important;
}

/* FAILED message beside circle */
.perf-error {
  margin-top: 8px;
  color: #d32f2f;
  font-style: italic;
}

/* ===== New: Error notice styling inside Module 1 ===== */
.wpsa-module-1 .notice-warning {
  background: #fff !important;
  max-width: 750px;
  margin: 0 auto 20px;
  padding: 16px;
  border: 1px solid #d00;
  border-left-width: 4px;
  box-sizing: border-box;
}

/* Sidebar navigation */
.wpsa-layout {
  display: flex;
  margin-top: 32px;
}

.wpsa-sidebar-nav {
 position: absolute;
    top: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 220px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 50;
    font-size: 14px;
  
}

/* Hide the left sidebar on smaller screens (below 768px) */
@media (max-width: 767px) {
  .wpsa-sidebar-nav {
    display: none;
  }
}

/* With flex:1 on the main column, no extra margin-left is needed */
.wpsa-layout .wpsa-main-content {
  flex: 1;
}

.wpsa-nav-tile {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  border-left: 5px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s, border-left-color 0.2s;
}

.wpsa-nav-tile:hover {
  background: #eaf1f9;
}

.wpsa-nav-tile.active {
  background: #0073aa;
  color: #fff;
  border-left-color: #ff6b35;
}

.wpsa-nav-tile i {
  font-size: 16px;
}

/* Allow page content to be shifted */
.wpsa-has-sidebar {
  margin-left: 230px;
}

/* Panels – hidden by default unless activated */
.wpsa-panel {
  display: none;
}
.wpsa-panel.active {
  display: block;
}

/* =============================================================================
   Speed Analyzer – Right-side “Ratings & Support” Feedback Panel
   ============================================================================= */

/* Container for the entire feedback box */
.wpsa-feedback-panel {
  position: absolute;
  top: 500px;             
  right: 10px;             /* 30px from the right edge of the content area */
  width: 220px;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 50;             /* sit above the main content */
  font-size: 14px;
}

/* Each internal section (Ratings vs. Support) */
.wpsa-feedback-panel .wpsa-feedback-section {
  margin-bottom: 20px;
}

.wpsa-feedback-panel .wpsa-feedback-section:last-child {
  margin-bottom: 0;
}

/* Section headings */
.wpsa-feedback-panel h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #333333;
}

/* Star icons row (five stars) */
.wpsa-feedback-panel .wpsa-stars {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 8px;
}
.wpsa-feedback-panel .wpsa-stars .dashicons-star-filled {
  color: #e26f56;
  font-size: 16px;
  margin-right: 2px;
}
.wpsa-feedback-panel .wpsa-stars .dashicons-star-filled:last-child {
  margin-right: 0;
}

/* Paragraph text */
.wpsa-feedback-panel p {
  margin: 0 0 12px;
  line-height: 1.4;
  color: #555555;
}

/* Buttons (“Leave a rating” / “Get Support”) */
.wpsa-feedback-panel .wpsa-button-feedback {
  display: inline-block;
  text-decoration: none;
  background: #0073aa;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.wpsa-feedback-panel .wpsa-button-feedback:hover {
  background: #005f8d;
}

/* Hide the entire panel on smaller screens */
@media (max-width: 767px) {
  .wpsa-feedback-panel {
    display: none;
  }
}

/* PDF Report Button */
.wpsa-pdf-button-wrap {
  text-align: center;
  margin: 30px 0;
}

.wpsa-button-pdf {
  position: relative;
  overflow: hidden;
  padding: 0.6em 1.4em;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #2271b1;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin: 70px;
}

.wpsa-button-pdf:hover {
  background: #c0392b;
}

/* Shine effect */
.wpsa-button-pdf::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
}

.wpsa-button-pdf:hover::before {
  animation: shine 0.8s forwards;
}

@keyframes shine {
  100% {
    left: 200%;
  }
}


/*License*/   
form#wpsa-license-form{
    max-width: fit-content;
      background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 100;
}


#wpsa-license-panel .wpsa-header{
    position: relative;
    right: 25%;
    top: -50px;
}

 #wpsa-license-panel {
   left: 25%;
   position: relative;
  top: 50px;
   z-index: 100;
    }
    
  
/* Make our nav‐tiles look like buttons/blocks, not links */
.wpsa-nav-tile {
  text-decoration: none;
}
.wpsa-nav-tile:hover {
  text-decoration: none;
}

/* license‐panel inline messages */
.wpsa-license-error-headline {
  color:    #d32f2f;
  font-size: 16px;
  margin-bottom: 1em;
  position: absolute;
  top: 200px;
  left: 250px;
}
.wpsa-license-success-headline {
  color:    #388e3c;
  font-size: 16px;
  margin-bottom: 1em;
  position: absolute;
  top: 200px;
  left: 250px;
}

/* Grey-out NA cards even if JS previously set an inline background */

.wpsa-stat-card.is-na { background: #eee; }

/* optional: style for the warning we prepend */

.wpsa-notice-failed { margin: 10px 0 15px; }

/* neutral look for N/A cards */

.wpsa-stat-card.is-na,
.wpsa-card-lcp.is-na,
.wpsa-card-fcp.is-na {
  background: #eeeeee;
}

/* 4.5 full-width under Modules 3/4 */
.wpsa-module-3-4 .wpsa-module-45-title{
  margin:16px 0 10px;
}

.wpsa-module-3-4 .wpsa-module45-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

/* Match the existing card look */
.wpsa-module-3-4 .wpsa-meta-card{border-radius:8px;padding:16px;background:#dddddd;}
/*.wpsa-module-3-4 .wpsa-meta-card .header{font-weight:600;opacity:.9;}*/
/*.wpsa-module-3-4 .wpsa-meta-card .value{font-weight:700;font-size:18px;margin-top:6px;}*/
.wpsa-module-3-4 .wpsa-meta-card .subvalue{font-weight:700;font-size:15px;}

/* Severity colors */
.wpsa-module-3-4 .wpsa-meta-card.is-green{background:#c6f7c3;}
.wpsa-module-3-4 .wpsa-meta-card.is-amber{background:#fff3cd;}
.wpsa-module-3-4 .wpsa-meta-card.is-red{background:#ffdddd;}

/* Responsive */
@media (max-width:1140px){
  .wpsa-module-3-4 .wpsa-module45-cards{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:700px){
  .wpsa-module-3-4 .wpsa-module45-cards{grid-template-columns:1fr;}
}

/* 4.5 grid: baseline row height but allow growth if needed */
.wpsa-module-3-4 .wpsa-module45-cards {
  grid-auto-rows: minmax(78px, auto);
}

/* Compact card layout (was padding:16px) */
.wpsa-module-3-4 .wpsa-meta-card {
  padding: 10px 12px;
  min-height: 78px;                 /* close to the 79.4px you liked, but flexible */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Slightly smaller typography inside 4.5 so two lines still fit */
.wpsa-module-3-4 .wpsa-meta-card .header { 
  margin-bottom: 4px; 
}
.wpsa-module-3-4 .wpsa-meta-card .value { 
  font-size: 14px; 
  line-height: 1.15; 
}
.wpsa-module-3-4 .wpsa-meta-card .subvalue { 
  font-size: 12.5px; 
  line-height: 1; 
}

/* Optional: a tighter floor on small screens */
@media (max-width:700px){
  .wpsa-module-3-4 .wpsa-meta-card { min-height: 66px; }
}



/*Compare*/
.cr-table {
    top: 15px;
    position: relative; 
    z-index: 1000;
}

.wpsa-compare-form {
    top: 10px;
    position: relative; 
}

.wpsa-form-label {
    top: 1.75px;
    position: relative;
}

#wpsa-compare-panel .wpsa-trends {
    z-index: 1000;
    position: relative;
}

/* Left-align the header on Compare panel */
#wpsa-compare-panel .wpsa-header{
  position: relative;      /* keep relative */
  right: auto;             /* no offset */
  margin: 0 0 10px 0;      /* remove auto-centering */
  max-width: none;         /* let it follow the content column */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

#wpsa-compare-panel .wpsa-header-info{ text-align: left; }
#wpsa-compare-panel .wpsa-logo{ height: 50px; flex: 0 0 auto; }



#wpsa-compare-panel .wpsa-compare-title {
    padding-top: 35px;
     max-width:980px !important;      /* match .cr-table max-width */
      margin:0 auto 12px;   /* same centering, slightly tighter gap */
      position:relative;
      padding-left:0;       /* make sure no stray indent */
      text-align:left;
  }
  
 /* Brand PDF: pull only the header fully to the left edge of the page content */
#wpsa-customize-panel form{
     background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 100;
}
 
 
 
@media (min-width: 750px){
  #wpsa-customize-panel .header-brand{
    /* keep it a flex row */
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* shift visually to the viewport-left, minus the admin’s left gutter */
    transform: translateX(calc(((100vw - 750px) / -2) - 20px)); /* 20px = WP admin gutter */
    padding-left: 120px; /* add the same gutter back so content isn’t glued to the edge */
  }

  #wpsa-customize-panel .header-brand .wpsa-logo{ height: 50px; flex: 0 0 auto; }
  #wpsa-customize-panel .header-brand .wpsa-header-info{ text-align:left; flex:1 1 auto; min-width:0; }
}

@media (max-width: 749.98px){
  #wpsa-customize-panel .header-brand{
    transform: none;
    margin: 0 0 10px 0;
    display: flex; flex-wrap: wrap; gap: 12px;
  }
  #wpsa-customize-panel .header-brand .wpsa-header-info{ width: 100%; }
}