/*
 * PCAST Free Essay Check — Styles
 *
 * Mobile-first design. Brand colours from ieltspodcast.com.
 * Fonts: inherit from site (Source Sans 3 and Open Sans already loaded).
 */

:root {
  --pcast-orange: #ef864c;
  --pcast-green: #69ba94;
  --pcast-red: #c0392b;
  --pcast-whatsapp: #25D366;
  --pcast-facebook: #1877F2;
  --pcast-telegram: #0088cc;
  --pcast-dark: #2c3e50;
  --pcast-grey: #7f8c8d;
  --pcast-light-grey: #ecf0f1;
  --pcast-white: #ffffff;
  --pcast-bg: #f9f9f9;
  --pcast-border: #ddd;
  --pcast-radius: 8px;
  --pcast-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ================================================================
   Layout
   ================================================================ */

.pcast-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px;
  color: var(--pcast-dark);
  line-height: 1.6;
}

/* ================================================================
   State transitions (fade in / fade out)
   ================================================================ */

.pcast-section {
  display: none;
}

.pcast-state-active {
  display: block;
  animation: pcast-fade-in 0.3s ease forwards;
}

.pcast-state-exit {
  display: block;
  animation: pcast-fade-out 0.3s ease forwards;
}

.pcast-hidden {
  display: none !important;
}

@keyframes pcast-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pcast-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ================================================================
   Typography
   ================================================================ */

.pcast-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--pcast-dark);
}

.pcast-subtitle {
  font-size: 1.05rem;
  color: var(--pcast-grey);
  margin-bottom: 24px;
}

/* ================================================================
   Sample video
   ================================================================ */

.pcast-sample-video {
  margin-bottom: 28px;
  text-align: center;
}

.pcast-sample-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pcast-dark);
  margin-bottom: 4px;
}

.pcast-sample-desc {
  font-size: 0.92rem;
  color: var(--pcast-grey);
  margin-bottom: 12px;
}

.pcast-sample-video-container {
  width: 100%;
  border-radius: var(--pcast-radius);
  overflow: hidden;
  box-shadow: var(--pcast-shadow);
  background: #000;
}

.pcast-sample-video-container iframe.pcast-video-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

@supports not (aspect-ratio: 16 / 9) {
  .pcast-sample-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .pcast-sample-video-container iframe.pcast-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ================================================================
   Form fields
   ================================================================ */

.pcast-field {
  margin-bottom: 16px;
}

.pcast-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.pcast-field textarea,
.pcast-field input[type="email"] {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--pcast-border);
  border-radius: var(--pcast-radius);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.pcast-field textarea:focus,
.pcast-field input[type="email"]:focus {
  outline: none;
  border-color: var(--pcast-orange);
}

.pcast-field textarea {
  resize: vertical;
  min-height: 220px;
}

/* Word count */
.pcast-word-count {
  text-align: right;
  font-size: 0.85rem;
  color: var(--pcast-grey);
  margin-top: 4px;
}

.pcast-word-count .pcast-wc-out-of-range {
  color: var(--pcast-red);
  font-weight: 700;
}

/* ================================================================
   Buttons — shared
   ================================================================ */

.pcast-btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: var(--pcast-radius);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  font-family: inherit;
}

.pcast-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--pcast-shadow);
}

.pcast-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.pcast-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mode buttons */
.pcast-mode-buttons {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pcast-btn-nice {
  background-color: var(--pcast-green);
  color: var(--pcast-white);
  flex: 1;
  max-width: 250px;
}

.pcast-btn-nasty {
  background-color: var(--pcast-red);
  color: var(--pcast-white);
  flex: 1;
  max-width: 250px;
}

.pcast-btn-selected {
  box-shadow: 0 0 0 3px var(--pcast-dark);
  transform: translateY(-2px);
}

/* Submit button */
.pcast-btn-submit {
  background-color: var(--pcast-orange);
  color: var(--pcast-white);
  width: 100%;
  font-size: 1.15rem;
  padding: 16px;
}

/* Chosen mode text */
.pcast-chosen-text {
  text-align: center;
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 1rem;
}

#pcast-chosen-mode {
  color: var(--pcast-orange);
}

/* Small print */
.pcast-small-print {
  text-align: center;
  font-size: 0.8rem;
  color: var(--pcast-grey);
  margin-top: 8px;
}

/* ================================================================
   Error message
   ================================================================ */

.pcast-error {
  background-color: #fdecea;
  color: var(--pcast-red);
  padding: 12px 16px;
  border-radius: var(--pcast-radius);
  font-size: 0.95rem;
  border-left: 4px solid var(--pcast-red);
  margin-top: 16px;
}

.pcast-error-inline {
  color: var(--pcast-red);
  text-align: center;
  padding: 40px 20px;
  font-size: 1rem;
}

/* ================================================================
   Timer / Progress section (State 2) — fallback text
   ================================================================ */

.pcast-progress-message {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pcast-orange);
  text-align: center;
  margin: 24px 0 20px;
  min-height: 2em;
}

.pcast-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--pcast-light-grey);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 32px;
}

.pcast-progress-bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pcast-green), var(--pcast-orange));
  border-radius: 4px;
  transition: width 1s ease;
}

/* Email capture */
.pcast-email-capture {
  background: var(--pcast-white);
  border: 2px solid var(--pcast-border);
  border-radius: var(--pcast-radius);
  padding: 24px;
  margin-bottom: 32px;
  text-align: center;
}

.pcast-email-capture label {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.pcast-email-capture input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--pcast-border);
  border-radius: var(--pcast-radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.pcast-email-capture input[type="email"]:focus {
  outline: none;
  border-color: var(--pcast-orange);
}

.pcast-email-success {
  color: var(--pcast-green);
  font-weight: 600;
  font-size: 1rem;
  margin-top: 12px;
}

/* ================================================================
   Video Waiting Screen (State 2)
   ================================================================ */

/* --- Video container: fullscreen mode --- */
.pcast-vw-fullscreen {
  position: relative;
  width: 100%;
  border-radius: var(--pcast-radius);
  overflow: hidden;
  background: #000;
  margin-bottom: 20px;
}

.pcast-vw-fullscreen video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

@supports not (aspect-ratio: 16 / 9) {
  .pcast-vw-fullscreen {
    padding-bottom: 56.25%;
    height: 0;
  }
  .pcast-vw-fullscreen video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
}

/* --- Video container: corner mode --- */
.pcast-vw-corner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  border-radius: var(--pcast-radius);
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border: 3px solid var(--pcast-orange);
  transition: all 0.6s ease-in-out;
}

.pcast-vw-corner video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

/* --- Subtitles overlay --- */
.pcast-subtitles {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 90%;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

.pcast-vw-corner .pcast-subtitles {
  font-size: 0.75rem;
  padding: 4px 8px;
  bottom: 6px;
  max-width: 95%;
}

/* --- Unmute overlay --- */
.pcast-unmute-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  cursor: pointer;
  background: rgba(0,0,0,0.15);
}

.pcast-unmute-btn {
  background: var(--pcast-orange);
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  font-family: inherit;
  transition: transform 0.15s;
}

.pcast-unmute-btn:hover {
  transform: scale(1.05);
}

.pcast-vw-corner .pcast-unmute-overlay { display: none; }

/* --- Progress pill --- */
.pcast-progress-pill {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--pcast-white);
  border: 2px solid var(--pcast-orange);
  border-radius: 50px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pcast-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 999;
}

.pcast-progress-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--pcast-orange);
  border-top-color: transparent;
  border-radius: 50%;
  animation: pcast-spin 0.8s linear infinite;
}

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

/* ================================================================
   Essay Simulation
   ================================================================ */

#pcast-sim-container {
  max-width: 720px;
  margin: 0 auto 100px;
  animation: pcast-fade-in 0.5s ease forwards;
  transition: opacity 1s ease;
}

.pcast-essay-paper {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--pcast-radius);
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.8;
  min-height: 300px;
}

.pcast-essay-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #333;
}

.pcast-essay-title {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.pcast-essay-question {
  font-size: 0.95rem;
  color: #444;
}

.pcast-essay-body {
  font-size: 0.95rem;
  color: #222;
  transition: opacity 0.5s ease;
}

/* Error highlight on the whole paragraph block */
.pcast-essay-highlight-error {
  background: rgba(192,57,43,0.08);
  border-left: 4px solid var(--pcast-red);
  padding-left: 12px;
  border-radius: 0 4px 4px 0;
}

/* Inline highlight for the opening sentence */
.pcast-mark-warning {
  background: rgba(239,134,76,0.25);
  padding: 1px 3px;
  border-radius: 2px;
}

/* Good essay segments */
.pcast-good-intro,
.pcast-good-body,
.pcast-good-conclusion {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 4px;
  animation: pcast-fade-in 0.4s ease forwards;
}

.pcast-good-intro { border-left: 4px solid var(--pcast-green); background: rgba(105,186,148,0.08); }
.pcast-good-body  { border-left: 4px solid var(--pcast-orange); background: rgba(239,134,76,0.06); }
.pcast-good-conclusion { border-left: 4px solid var(--pcast-green); background: rgba(105,186,148,0.08); }

/* --- Annotations layer --- */
.pcast-annotations-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: visible;
}

.pcast-annotation {
  position: absolute;
  background: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
  z-index: 5;
}

.pcast-ann-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Annotation types */
.pcast-ann-error   { border-left: 4px solid var(--pcast-red);    color: var(--pcast-red); }
.pcast-ann-warning { border-left: 4px solid var(--pcast-orange); color: var(--pcast-orange); }
.pcast-ann-success { border-left: 4px solid var(--pcast-green);  color: var(--pcast-green); font-size: 1.1rem; }

/* Annotation positions */
.pcast-ann-pos-top-right    { top: 10px;  right: -10px; }
.pcast-ann-pos-top-right-2  { top: 50px;  right: -10px; }
.pcast-ann-pos-right-mid    { top: 120px; right: -10px; }
.pcast-ann-pos-right-mid-2  { top: 160px; right: -10px; }
.pcast-ann-pos-right-top    { top: 80px;  right: -10px; }
.pcast-ann-pos-left-top     { top: 80px;  left: -10px; }
.pcast-ann-pos-left-bottom  { bottom: 40px; left: -10px; }
.pcast-ann-pos-center-bottom { bottom: 10px; left: 50%; transform: translateX(-50%) translateY(-8px); }
.pcast-ann-pos-center-bottom.pcast-ann-visible { transform: translateX(-50%) translateY(0); }

/* ================================================================
   Video player (State 3)
   ================================================================ */

.pcast-video-container {
  width: 100%;
  margin: 20px 0;
  border-radius: var(--pcast-radius);
  overflow: hidden;
  box-shadow: var(--pcast-shadow);
  background: #000;
}

.pcast-video-container iframe.pcast-video-iframe,
.pcast-video-container video.pcast-video-element {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
  .pcast-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .pcast-video-container iframe.pcast-video-iframe,
  .pcast-video-container video.pcast-video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Video email capture (post-value lead capture on State 3) */
.pcast-video-email-capture {
  margin: 24px 0;
  border-color: var(--pcast-orange);
}

.pcast-email-capture-desc {
  font-size: 0.92rem;
  color: var(--pcast-grey);
  margin-bottom: 14px;
}

/* ================================================================
   Share buttons
   ================================================================ */

.pcast-share {
  text-align: center;
  margin: 24px 0;
}

.pcast-share h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.pcast-share-subheading {
  font-size: 0.95rem;
  color: var(--pcast-grey);
  margin-bottom: 16px;
}

.pcast-share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pcast-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--pcast-white);
  transition: opacity 0.15s, transform 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.pcast-share-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.pcast-share-btn:active {
  transform: translateY(0);
  opacity: 0.75;
}

.pcast-share-icon {
  font-size: 1.1rem;
}

.pcast-share-whatsapp { background-color: var(--pcast-whatsapp); }
.pcast-share-facebook { background-color: var(--pcast-facebook); }
.pcast-share-telegram { background-color: var(--pcast-telegram); }
.pcast-share-email    { background-color: #666666; }
.pcast-share-copy     { background-color: var(--pcast-orange); }

/* ================================================================
   Upsell
   ================================================================ */

.pcast-upsell {
  background: var(--pcast-bg);
  padding: 32px 20px;
  border-radius: var(--pcast-radius);
  margin-top: 32px;
  text-align: center;
}

.pcast-upsell-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pcast-dark);
  margin-bottom: 8px;
}

.pcast-upsell-intro {
  font-size: 1.05rem;
  color: var(--pcast-grey);
  margin-bottom: 28px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* Pricing cards grid */
.pcast-pricing-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.pcast-pricing-card {
  background: var(--pcast-white);
  border: 2px solid var(--pcast-border);
  border-radius: var(--pcast-radius);
  padding: 24px 20px;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pcast-pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.pcast-pricing-card-popular {
  border-color: var(--pcast-orange);
  box-shadow: 0 2px 12px rgba(239, 134, 76, 0.15);
}

.pcast-pricing-card-premium {
  border-color: var(--pcast-green);
}

.pcast-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pcast-orange);
  color: var(--pcast-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pcast-pricing-badge-premium {
  background: var(--pcast-green);
}

.pcast-pricing-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pcast-dark);
  margin: 0 0 4px;
}

.pcast-pricing-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pcast-dark);
  margin-bottom: 12px;
}

.pcast-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  text-align: left;
}

.pcast-pricing-features li {
  padding: 4px 0 4px 24px;
  position: relative;
  font-size: 0.95rem;
  color: var(--pcast-dark);
}

.pcast-pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--pcast-green);
  font-weight: 700;
}

.pcast-pricing-per {
  font-size: 0.82rem;
  color: var(--pcast-grey);
  margin-bottom: 16px;
}

.pcast-btn-pricing {
  background: var(--pcast-orange);
  color: var(--pcast-white);
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.pcast-btn-pricing-premium {
  background: var(--pcast-green);
}

.pcast-btn-pricing-current {
  background: var(--pcast-light-grey);
  color: var(--pcast-grey);
  cursor: default;
  display: block;
  text-align: center;
  padding: 14px;
  font-size: 1.05rem;
  width: 100%;
  box-sizing: border-box;
}

.pcast-btn-pricing-current:hover {
  transform: none;
  box-shadow: none;
}

.pcast-pricing-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--pcast-grey);
}

.pcast-pricing-card-free {
  border-style: dashed;
}

/* Social proof */
.pcast-upsell-proof {
  font-size: 0.9rem;
  color: var(--pcast-grey);
  margin-bottom: 16px;
  font-style: italic;
}

/* Guarantee */
.pcast-upsell-guarantee {
  background: var(--pcast-white);
  border: 2px solid var(--pcast-green);
  border-radius: var(--pcast-radius);
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--pcast-dark);
  max-width: 480px;
  margin: 0 auto;
}

/* ================================================================
   Responsive — desktop (min-width: 768px)
   ================================================================ */

@media (min-width: 768px) {
  .pcast-container {
    padding: 40px 24px;
  }

  .pcast-title {
    font-size: 2rem;
  }

  /* Share buttons: single row on desktop */
  .pcast-share-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
  }

  .pcast-share-btn {
    flex: 1;
    max-width: 180px;
  }

  /* Timer layout: single column (video + simulation stack) */
  #pcast-timer-section {
    display: block;
  }

  #pcast-timer-section.pcast-state-active {
    display: block;
  }

  /* Mode buttons */
  .pcast-mode-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
  }

  /* Pricing cards: row on desktop */
  .pcast-pricing-cards {
    flex-direction: row;
    align-items: stretch;
  }

  .pcast-pricing-card {
    flex: 1;
  }

  /* 4-card layout: 2x2 grid on tablet-ish, full row on wide */
  .pcast-pricing-cards-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Annotation overflow visible on desktop */
  .pcast-essay-paper {
    overflow: visible;
  }
}

/* ================================================================
   Responsive — mobile adjustments for video waiting screen
   ================================================================ */

@media (max-width: 767px) {
  .pcast-vw-corner {
    width: 180px;
    bottom: 10px;
    right: 10px;
  }

  #pcast-sim-container {
    margin-bottom: 70px;
  }

  .pcast-essay-paper {
    padding: 18px 14px;
  }

  .pcast-essay-body {
    font-size: 0.85rem;
  }

  /* Stack annotations on mobile instead of absolute positioning */
  .pcast-annotations-layer {
    position: relative;
    margin-top: 16px;
  }

  .pcast-annotation {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    display: block;
    margin-bottom: 8px;
    white-space: normal;
    transform: none;
  }

  .pcast-ann-visible {
    transform: none;
  }

  .pcast-ann-pos-center-bottom,
  .pcast-ann-pos-center-bottom.pcast-ann-visible {
    transform: none;
  }

  .pcast-progress-pill {
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .pcast-unmute-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
}