/* ==========================================================================
   Campaign Master (UK) Ltd Tools — Frontend Styles v1.1
   All colours/spacing are CSS custom properties injected via CMUK_Global_Styles
   so every value is overridable from the admin Global Styling page.
   ========================================================================== */

/* - Defaults (overridden by the inline <style id="cmuk-global-styles">) - */
:root {
  --cmuk-accent: #2563eb;
  --cmuk-accent-hover: #1d4ed8;
  --cmuk-accent-light: #eff6ff;
  --cmuk-text: #111827;
  --cmuk-muted: #6b7280;
  --cmuk-bg: #000000;
  --cmuk-surface: #f9fafb;
  --cmuk-border: #e5e7eb;
  --cmuk-radius: 10px;
  --cmuk-font: inherit;
  --cmuk-field-gap: 16px;
  --cmuk-pad: 24px;
  --cmuk-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
  --cmuk-shadow-lg: 0 4px 16px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);
}

/* - Outer alignment wrapper - */
.cmuk-tool-outer {
  display: flex;
  margin: 2em 0;
}

.cmuk-align-left {
  justify-content: flex-start;
}

.cmuk-align-center {
  justify-content: center;
}

.cmuk-align-right {
  justify-content: flex-end;
}

.cmuk-align-full {
  justify-content: stretch;
}

.cmuk-align-full .cmuk-tool {
  width: 100%;
  max-width: 100% !important;
}

/* - Tool root - */
.cmuk-tool {
  font-family: var(--cmuk-font);
  color: var(--cmuk-text);
  width: 100%;
  box-sizing: border-box;
}

/* - Card shell - */
.cmuk-tool-card {
  background: var(--cmuk-bg);
  border: 1px solid var(--cmuk-border);
  border-radius: var(--cmuk-radius);
  padding: var(--cmuk-pad);
  box-shadow: var(--cmuk-shadow);
  transition: box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}

.cmuk-tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cmuk-accent), color-mix(in srgb, var(--cmuk-accent) 60%, #a855f7));
  border-radius: var(--cmuk-radius) var(--cmuk-radius) 0 0;
}

/* - Card header - */
.cmuk-tool-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cmuk-border);
  /*display: flex;
  align-items: center;*/
  gap: 10px;
}

.cmuk-tool-icon {
  width: 34px;
  height: 34px;
  background: var(--cmuk-accent-light);
  border-radius: calc(var(--cmuk-radius) * 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cmuk-accent);
  font-size: 16px;
}

.cmuk-tool-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cmuk-text);
}

.cmuk-tool-description {
  font-size: 13px;
  color: var(--cmuk-muted);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* - Fields - */
.cmuk-fields {
  display: flex;
  flex-direction: column;
  gap: var(--cmuk-field-gap);
}

.cmuk-field {
  position: relative;
}

/* Label — top (default) */
.cmuk-field-top .cmuk-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--cmuk-text);
  letter-spacing: .01em;
}

/* Label — left */
.cmuk-field-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cmuk-field-left .cmuk-label {
  width: 150px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--cmuk-text);
}

.cmuk-field-left .cmuk-field-input {
  flex: 1;
  min-width: 0;
}

/* Label — hidden (a11y-visible) */
.cmuk-field-hidden-label .cmuk-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* - Inputs -─ */
.cmuk-tool input[type="text"],
.cmuk-tool input[type="email"],
.cmuk-tool input[type="number"],
.cmuk-tool input[type="url"],
.cmuk-tool input[type="password"],
.cmuk-tool input[type="file"],
.cmuk-tool textarea,
.cmuk-tool select {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--cmuk-border);
  border-radius: calc(var(--cmuk-radius) * 0.6);
  box-sizing: border-box;
  font-size: 14px;
  font-family: inherit;
  color: var(--cmuk-text);
  background: var(--cmuk-bg);
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.5;
}

.cmuk-tool textarea {
  resize: vertical;
  min-height: 96px;
}

.cmuk-tool input:focus,
.cmuk-tool textarea:focus,
.cmuk-tool select:focus {
  outline: none;
  border-color: var(--cmuk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmuk-accent) 15%, transparent);
}

.cmuk-tool input::placeholder,
.cmuk-tool textarea::placeholder {
  color: #9ca3af;
}

.cmuk-tool select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none' viewBox='0 0 12 7'%3E%3Cpath stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

/* Row of two selects side by side (e.g. pricing calculator) */
.cmuk-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* - Submit row - */
.cmuk-submit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: calc(var(--cmuk-field-gap) * 0.5);
  flex-wrap: wrap;
}

/* - Button -─ */
.cmuk-tool .cmuk-submit {
  background: var(--cmuk-accent);
  color: #fff;
  border: 2px solid var(--cmuk-accent);
  padding: 10px 24px;
  border-radius: calc(var(--cmuk-radius) * 0.6);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
  white-space: nowrap;
}

.cmuk-tool .cmuk-submit:hover {
  background: var(--cmuk-accent-hover);
  border-color: var(--cmuk-accent-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cmuk-accent) 30%, transparent);
}

.cmuk-tool .cmuk-submit:active {
  transform: translateY(1px);
  box-shadow: none;
}

.cmuk-tool .cmuk-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Outline button variant */
.cmuk-buttons-outline .cmuk-submit {
  background: transparent;
  color: var(--cmuk-accent);
}

.cmuk-buttons-outline .cmuk-submit:hover {
  background: var(--cmuk-accent-light);
  box-shadow: none;
}

/* - Loading - */
.cmuk-loading {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cmuk-muted);
}

.cmuk-loading.is-visible {
  display: flex;
}

.cmuk-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--cmuk-border);
  border-top-color: var(--cmuk-accent);
  border-radius: 50%;
  animation: cmuk-spin .75s linear infinite;
  flex-shrink: 0;
}

@keyframes cmuk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* - Result panel - */
.cmuk-result {
  display: none;
  margin-top: 20px;
  border-radius: calc(var(--cmuk-radius) * 0.7);
  overflow: hidden;
  animation: cmuk-reveal .25s ease both;
}

.cmuk-result.is-visible {
  display: block;
}

.cmuk-result-inner {
  padding: 16px 18px;
  background: var(--cmuk-surface);
  border: 1px solid var(--cmuk-border);
  border-left: 4px solid var(--cmuk-accent);
  border-radius: calc(var(--cmuk-radius) * 0.7);
  font-size: 14px;
  line-height: 1.6;
}

.cmuk-result.is-error .cmuk-result-inner {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
  color: #991b1b;
}

/* Result header row */
.cmuk-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cmuk-result-label {
  font-weight: 700;
  font-size: 13px;
  /*text-transform: uppercase;*/
  letter-spacing: .06em;
  color: var(--cmuk-accent);
}

.cmuk-result.is-error .cmuk-result-label {
  color: #dc2626;
}

/* Copy button inside result */
.cmuk-copy-btn {
  background: var(--cmuk-bg);
  border: 1px solid var(--cmuk-border);
  color: var(--cmuk-muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}

.cmuk-copy-btn:hover {
  background: var(--cmuk-accent);
  color: #fff;
  border-color: var(--cmuk-accent);
}

.cmuk-copy-btn.copied {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

/* Code/monospace output inside result */
.cmuk-result .cmuk-code-output {
  font-family: 'SF Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--cmuk-border);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.55;
  margin-top: 8px;
  cursor: pointer;
}

.cmuk-result input[type="text"],
.cmuk-result textarea {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 13px;
  background: #fff;
  margin-top: 8px;
  cursor: pointer;
}

/* Stat pills (pricing, blacklist etc.) */
.cmuk-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}

.cmuk-stat-pill {
  background: var(--cmuk-bg);
  border: 1px solid var(--cmuk-border);
  border-radius: calc(var(--cmuk-radius) * 0.5);
  padding: 12px 14px;
  text-align: center;
}

.cmuk-stat-pill .cmuk-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--cmuk-accent);
  letter-spacing: -0.03em;
  line-height: 1;
}

.cmuk-stat-pill .cmuk-stat-label {
  font-size: 11px;
  color: var(--cmuk-muted);
  margin-top: 4px;
 /* text-transform: uppercase;*/
  letter-spacing: .05em;
}

/* Status badge (pass/fail) */
.cmuk-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

.cmuk-badge-pass {
  background: #dcfce7;
  color: #166534;
}

.cmuk-badge-fail {
  background: #fee2e2;
  color: #991b1b;
}

.cmuk-badge-warn {
  background: #fef9c3;
  color: #854d0e;
}

/* Check list (validator/accessibility) */
.cmuk-check-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.cmuk-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cmuk-border);
  font-size: 13.5px;
}

.cmuk-check-list li:last-child {
  border-bottom: none;
}

.cmuk-check-icon {
  flex-shrink: 0;
  font-size: 15px;
  margin-top: 1px;
}

/* Short URL display */
.cmuk-url-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cmuk-bg);
  border: 1.5px solid var(--cmuk-accent);
  border-radius: calc(var(--cmuk-radius) * 0.6);
  padding: 10px 12px;
  margin-top: 10px;
}

.cmuk-url-display input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  font-family: 'SF Mono', monospace;
  font-size: 13.5px;
  color: var(--cmuk-accent);
  font-weight: 600;
  min-width: 0;
}

.cmuk-url-display input:focus {
  outline: none;
  box-shadow: none;
}

/* - Animations - */
@keyframes cmuk-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* - Error helper text - */
.cmuk-error {
  color: #dc2626;
  font-size: 13.5px;
}

/* - Responsive - */
@media (max-width: 540px) {
  .cmuk-tool-card {
    padding: calc(var(--cmuk-pad) * 0.7);
  }

  .cmuk-field-left {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .cmuk-field-left .cmuk-label {
    width: auto;
  }

  .cmuk-field-row {
    grid-template-columns: 1fr;
  }

  .cmuk-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cmuk-submit-row .cmuk-submit {
    justify-content: center;
  }
}

/* - Reduced motion - */
@media (prefers-reduced-motion: reduce) {
  .cmuk-tool *, .cmuk-spinner {
    animation: none !important;
    transition: none !important;
  }
}


/* spam Assasin results*/
.cmuk-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.cmuk-summary-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

.cmuk-summary-value {
  font-size: 32px;
  font-weight: 700;
}

.cmuk-summary-label {
  margin-top: 8px;
  color: #666;
}

.cmuk-progress {
  width: 100%;
  height: 22px;
  background: #eee;
  border-radius: 30px;
  overflow: hidden;
}

.cmuk-progress-bar {
  height: 22px;
  transition: .4s;
}

.cmuk-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.cmuk-table th {
  background: #f3f4f6;
  text-align: left;
  padding: 12px;
}

.cmuk-table td {
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.cmuk-table tr:hover {
  background: #fafafa;
}

.cmuk-ha-email-details {
  padding: 16px 20px;
  background: var(--cmuk-accent);
  /*linear-gradient(135deg,#2563eb,#4f46e5);*/
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.cmuk-ha-hops-dot-div {
  position: absolute;
  left: -28px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--cmuk-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

.cmuk-ha-hops-line-div {
  border-left: 3px solid var(--cmuk-accent);
  margin-left: 10px;
  padding-left: 20px;
}

/*Subject Line Generator CSS*/

.cmuk-ai-summary {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.cmuk-stat {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.cmuk-stat span {
  display: block;
  color: #666;
  font-size: 13px;
}

.cmuk-stat strong {
  font-size: 22px;
  color: #2563eb;
}

.cmuk-ai-card {

  display: flex;
  align-items: center;
  gap: 20px;

  margin-bottom: 18px;

  padding: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  background: #fff;

  transition: .2s;

}

.cmuk-ai-card:hover {

  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

  transform: translateY(-2px);

}

.cmuk-ai-score {

  width: 70px;
  height: 70px;

  border-radius: 50%;

  background: var(--cmuk-accent);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  font-weight: bold;

  flex-shrink: 0;

}

.cmuk-ai-content {

  flex: 1;

}

.cmuk-ai-content h4 {

  margin: 0 0 8px;

  font-size: 18px;

}

.cmuk-ai-content p {

  margin: 0 0 12px;

  color: #666;

}

.cmuk-ai-tags {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

.cmuk-tag {

  background: #eef4ff;

  color: #2563eb;

  border-radius: 20px;

  padding: 4px 10px;

  font-size: 12px;

}

.su-tabs {
  margin: 0 0 1.5em;
  padding: 0px !important;
  border: 8px solid var(--cmuk-accent) !important;
  border-radius: 5px !important;
  background: #eee !important;
}

.su-tabs-nav {

  background: var(--cmuk-accent) !important;

}

.su-tabs-nav span {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin: 6px;
  border: 1px solid #fff;
}

.su-tabs-nav span.su-tabs-current {
  background: #ffffff !important;
  cursor: default !important;
  color: var(--cmuk-accent) !important;
}

.su-tabs-nav span:hover {
  background: #f5f5f5;
  color: var(--cmuk-accent) !important;
}


/*------------------- Card Animation --------------------------*/



.su-tabs-panes{
    perspective:1200px;
}

.su-tabs-pane.su-tabs-pane-open{
    animation: depthReveal .6s cubic-bezier(.22,1,.36,1) forwards;
    transform-origin:center top;
}

@keyframes depthReveal{

    from{
        opacity:0;
        transform:
            rotateX(-8deg)
            translateY(35px)
            scale(.98);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:
            rotateX(0)
            translateY(0)
            scale(1);
        filter:blur(0);
    }

}