.mb-fb-down,
.mb-fb-down * {
    box-sizing: border-box;
}

/* Prevent any viewport breakout from creating a horizontal scrollbar. */
html.mb-fb-down-active,
body.mb-fb-down-active {
    overflow-x: hidden !important;
}

.mb-fb-down {
    --mb-fb-down-width-num: 100;
    --mb-fb-down-radius: 100px;
    --mb-fb-down-input-bg: #ffffff;
    --mb-fb-down-input-border: #d9e4ff;
    --mb-fb-down-input-text: #1f2937;
    --mb-fb-down-button-bg: #0d6efd;
    --mb-fb-down-button-text: #ffffff;
    --mb-fb-down-button-hover: #0b5ed7;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    font-family: Arial, Helvetica, sans-serif;
}

.mb-fb-down__form {
    /* JS sets the exact pixel width and centering offset at runtime. */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mb-fb-down__input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 2px solid var(--mb-fb-down-input-border) !important;
    border-radius: var(--mb-fb-down-radius) !important;
    outline: 0 !important;
    background: var(--mb-fb-down-input-bg) !important;
    color: var(--mb-fb-down-input-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 60px !important;
    text-align: center !important;
    box-shadow: none !important;
}

.mb-fb-down__input:focus {
    border-color: var(--mb-fb-down-button-bg) !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .12) !important;
}

.mb-fb-down__input::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
    text-align: center !important;
}

.mb-fb-down__button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 165px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border: 2px solid var(--mb-fb-down-button-bg) !important;
    border-radius: var(--mb-fb-down-radius) !important;
    background: var(--mb-fb-down-button-bg) !important;
    color: var(--mb-fb-down-button-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.mb-fb-down__button:hover,
.mb-fb-down__button:focus {
    border-color: var(--mb-fb-down-button-hover) !important;
    background: var(--mb-fb-down-button-hover) !important;
    color: var(--mb-fb-down-button-text) !important;
}

.mb-fb-down__frame {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 640px) {
    .mb-fb-down__form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .mb-fb-down__input,
    .mb-fb-down__button {
        width: 100% !important;
        min-width: 100% !important;
        height: 54px !important;
        font-size: 18px !important;
        line-height: 52px !important;
    }
}

/* v1.8: staged fetch -> title/preview -> download. */
.mb-fb-down__message,
.mb-fb-down__result {
    position: relative !important;
    left: 0 !important;
    margin: 14px 0 0 !important;
    max-width: none !important;
    transform: translateX(0);
}

.mb-fb-down__message[hidden],
.mb-fb-down__result[hidden],
.mb-fb-down__thumbnail[hidden],
.mb-fb-down__video-hint[hidden] { display: none !important; }

.mb-fb-down__message {
    padding: 12px 16px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 12px !important;
    color: #1e40af !important;
    background: #eff6ff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}
.mb-fb-down__message--error {
    color: #991b1b !important;
    border-color: #fecaca !important;
    background: #fef2f2 !important;
}
.mb-fb-down__video-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: #fff !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
}
.mb-fb-down__thumbnail {
    width: 180px !important;
    height: 102px !important;
    flex: 0 0 180px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}
.mb-fb-down__video-details { min-width: 0 !important; flex: 1 1 auto !important; }
.mb-fb-down__video-label {
    color: var(--mb-fb-down-button-bg) !important;
    font: 700 11px/1.4 Arial, sans-serif !important;
    letter-spacing: 1px !important;
}
.mb-fb-down__video-title {
    color: #111827 !important;
    font: 700 19px/1.4 Arial, sans-serif !important;
    overflow-wrap: anywhere !important;
    margin: 6px 0 0 !important;
}
.mb-fb-down__video-hint {
    color: #6b7280 !important;
    font: 400 13px/1.5 Arial, sans-serif !important;
    margin: 7px 0 0 !important;
}
.mb-fb-down__download-form { margin: 14px 0 0 !important; padding: 0 !important; }
.mb-fb-down__download-button { width: 100% !important; }
.mb-fb-down__fetch-button:disabled { opacity: .75 !important; cursor: wait !important; }

@media (max-width: 640px) {
    .mb-fb-down__video-card { flex-direction: column !important; align-items: stretch !important; }
    .mb-fb-down__thumbnail { width: 100% !important; height: auto !important; aspect-ratio: 16/9; flex: none !important; }
    .mb-fb-down__video-title { font-size: 17px !important; }
}

/* v2.0: embedded playable preview, quality buttons and processing state. */
.mb-fb-down__media{flex:0 0 42%;width:42%;min-width:0;position:relative;display:grid;place-items:center;
  aspect-ratio:16/9;background:#eef2f7;border-radius:12px;overflow:hidden!important}
.mb-fb-down__player,.mb-fb-down__thumbnail{width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;object-fit:contain!important;display:block!important;
  margin:0!important;border:0!important;border-radius:10px!important;flex:none!important;background:#111827!important}
.mb-fb-down__thumbnail{object-fit:cover!important}
.mb-fb-down__player[hidden],.mb-fb-down__thumbnail[hidden],.mb-fb-down__no-preview[hidden],
.mb-fb-down__progress[hidden],.mb-fb-down__ready-link[hidden]{display:none!important}
.mb-fb-down__no-preview{font:500 13px/1.5 Arial,sans-serif;color:#6b7280;padding:12px;text-align:center}
.mb-fb-down__qualities{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:16px!important}
.mb-fb-down__quality{padding:12px 18px!important;border:1px solid var(--mb-fb-down-button-bg)!important;
  border-radius:12px!important;color:#fff!important;background:var(--mb-fb-down-button-bg)!important;
  font:600 14px/1.3 Arial,sans-serif!important;cursor:pointer!important;max-width:100%!important;
  height:auto!important;box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important;transition:background .2s ease,transform .2s ease}
.mb-fb-down__quality:hover{background:var(--mb-fb-down-button-hover)!important;transform:translateY(-1px)}
.mb-fb-down__quality:disabled{opacity:.6!important;cursor:wait!important;transform:none!important}
.mb-fb-down__progress{padding:14px!important;margin-top:14px!important;border:1px solid #dbeafe!important;
  border-radius:12px!important;background:#f8fbff!important;text-align:center!important;overflow:hidden!important}
.mb-fb-down__progress-bar{height:5px!important;border-radius:50px!important;background:linear-gradient(90deg,#dbeafe,#2563eb,#dbeafe)!important;
  width:45%!important;animation:mb-fb-slide 1.4s ease-in-out infinite alternate!important;margin:0 0 8px!important}
@keyframes mb-fb-slide{from{transform:translateX(0)}to{transform:translateX(120%)}}
.mb-fb-down__progress-text{font:500 13px/1.5 Arial,sans-serif!important;color:#1d4ed8!important}
.mb-fb-down__ready-link{display:block!important;text-align:center!important;margin-top:13px!important;
  font:600 14px/1.5 Arial,sans-serif!important;color:var(--mb-fb-down-button-bg)!important;text-decoration:underline!important}
.mb-fb-down__video-hint{display:block!important}
@media(max-width:640px){
  .mb-fb-down__media{width:100%;flex:none!important;max-width:100%!important}
  .mb-fb-down__qualities{flex-direction:column!important;gap:9px!important}
  .mb-fb-down__quality{width:100%!important}
  .mb-fb-down__video-card{gap:12px!important}
}
@media(prefers-reduced-motion:reduce){.mb-fb-down__progress-bar{animation:none!important}}

/* v2.0.3: clean Reel/Video MP4 quality buttons, without confusing audio-only wording. */
.mb-fb-down__quality {display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:48px!important;white-space:normal!important;text-align:center!important;}
.mb-fb-down__quality:focus-visible {outline:3px solid #93c5fd!important;outline-offset:2px!important;}

/* A vertical Reel should be previewed as a 9:16 video, not in a wide 16:9 letterbox. */
.mb-fb-down__result--reel .mb-fb-down__media {
  flex:0 0 clamp(240px,28%,340px)!important;
  width:clamp(240px,28%,340px)!important;
  max-width:100%!important;
  aspect-ratio:9/16!important;
  height:auto!important;
}
@media (max-width:640px){
  .mb-fb-down__result--reel .mb-fb-down__media {
    width:min(100%,360px)!important;flex:0 0 auto!important;
    margin-inline:auto!important;aspect-ratio:9/16!important;
  }
}

/* v2.0.7: the preview plays video; quality buttons alone download MP4. */
.mb-fb-down__media-play{
  position:absolute!important;inset:0!important;z-index:3!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-direction:column!important;gap:9px!important;
  width:100%!important;height:100%!important;padding:18px!important;
  border:0!important;border-radius:12px!important;
  background:linear-gradient(180deg,rgba(10,21,39,.10),rgba(10,21,39,.55))!important;
  color:#fff!important;font:700 15px/1.35 Arial,sans-serif!important;
  text-align:center!important;cursor:pointer!important;
  transition:background .2s ease!important;
}
.mb-fb-down__media-play span{
  display:grid!important;place-items:center!important;
  width:54px!important;height:54px!important;border-radius:50%!important;
  background:rgba(255,255,255,.97)!important;color:#1764d5!important;
  font:700 23px/1 Arial,sans-serif!important;
  box-shadow:0 6px 20px rgba(0,0,0,.18)!important;
}
.mb-fb-down__media-play:hover{background:linear-gradient(180deg,rgba(10,21,39,.08),rgba(10,21,39,.73))!important}
.mb-fb-down__media-play:focus-visible{outline:3px solid #93c5fd!important;outline-offset:-4px!important}
.mb-fb-down__media-play:disabled{cursor:wait!important;opacity:.85!important}
.mb-fb-down__media-play[hidden],.mb-fb-down__preview-play[hidden]{display:none!important}
.mb-fb-down__preview-play{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:12px 0 0!important;padding:9px 14px!important;
  border:1px solid #cbd5e1!important;border-radius:9px!important;
  background:#fff!important;color:#1d4ed8!important;
  font:600 13px/1.4 Arial,sans-serif!important;cursor:pointer!important;
}
.mb-fb-down__preview-play:hover{background:#eff6ff!important}
.mb-fb-down__preview-play:focus-visible{outline:3px solid #93c5fd!important;outline-offset:2px!important}