/**
 * WyConsent blocked-iframe placeholder styles.
 *
 * Themeable via --wyco-placeholder-* custom properties (fed by the Appearance
 * model, Appearance::placeholder_css_vars). Reserves space to avoid layout shift
 * (CLS = 0). The YouTube thumbnail variant layers image + overlay behind the
 * consent prompt.
 */

.wyco-placeholder {
   --wyco-placeholder-bg: #f3f4f6;
   --wyco-placeholder-fg: #1f2937;
   --wyco-placeholder-accent: #2271b1;
   --wyco-placeholder-accent-fg: #ffffff;
   --wyco-placeholder-accent-hover: #135e96;
   --wyco-placeholder-accent-fg-hover: #ffffff;
   --wyco-placeholder-overlay: rgba(0, 0, 0, 0.35);
   --wyco-placeholder-radius: 8px;

   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   overflow: hidden;
   max-width: 100% !important;
   min-height: 100% !important;
   padding: 16px;
   background: var(--wyco-placeholder-bg);
   color: var(--wyco-placeholder-fg);
   border-radius: var(--wyco-placeholder-radius);
   text-align: center;
}

/* Thumbnail layer (YouTube preview), covers the whole card. */
.wyco-placeholder__thumb {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border: 0;
}

/* Dimming overlay above the thumbnail, below the prompt. */
.wyco-placeholder__overlay {
   position: absolute;
   inset: 0;
   background: var(--wyco-placeholder-overlay);
}

.wyco-placeholder--thumb {
   color: #ffffff;
}

.wyco-placeholder__inner {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   max-width: 480px;
}

/* Decorative play glyph (CSS triangle in a rounded badge). */
.wyco-placeholder__play {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.55);
}

.wyco-placeholder__play::before {
   content: "";
   width: 0;
   height: 0;
   margin-left: 4px;
   border-style: solid;
   border-width: 10px 0 10px 18px;
   border-color: transparent transparent transparent #ffffff;
}

.wyco-placeholder__text {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
}

.wyco-placeholder__btn {
   display: inline-block;
   padding: 10px 18px;
   font-size: 14px;
   font-weight: 600;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.15s ease, color 0.15s ease;
   /* !important: the placeholder button is a <button> that page builders (Elementor)
      and themes style through their own button rules, often with higher specificity.
      The plugin's configured colors must always win. */
   color: var(--wyco-placeholder-accent-fg) !important;
   background: var(--wyco-placeholder-accent) !important;
   border: 0 !important;
}

.wyco-placeholder__btn:hover,
.wyco-placeholder__btn:focus {
   color: var(--wyco-placeholder-accent-fg-hover) !important;
   background: var(--wyco-placeholder-accent-hover) !important;
}

.wyco-placeholder__btn:focus-visible {
   outline: 2px solid var(--wyco-placeholder-fg);
   outline-offset: 2px;
}

.wyco-placeholder--thumb .wyco-placeholder__btn:focus-visible {
   outline-color: #ffffff;
}

.wyco-placeholder__link {
   font-size: 12px;
   color: inherit;
   text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
   .wyco-placeholder__btn {
      transition: none;
   }
}