/* Online converter — restyled to match the HTML5Point site design system.
   Functional selectors required by online_converter.min.1.0.6.js are preserved:
   #hidden_frame, #progressContainer, #uploadProgress, #conProBar, .loading_text,
   #outputDiv (.outputDiv_small/.outputDiv_full), #outputFrame, #hideOutput,
   #previewDiv, #converterError, .select_btn file-input overlay. */

#hidden_frame{width:0;height:0;display:none}

/* Card =============================================================== */
#o-convert{background:#fff;border-radius:var(--r,22px);padding:22px 24px;margin:0;box-shadow:var(--shadow-soft,0 12px 30px -16px rgba(14,14,18,.12))}
.o-convert-border{border:2px dashed #FF8A4C}

#o_text{margin:0;padding:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--ink,#0E0E12);line-height:1.3}
#o_superscript{margin-top:20px}

/* Upload row ========================================================== */
.uploadContainer{margin:0;padding:0}
.uploadContainer form{margin:0;padding:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 0}
.file-upload-input{overflow:hidden;flex:1 1 120px;min-width:0;height:42px;font-size:.88rem;padding:10px 14px;border:1px solid var(--line,#F1E7DE);border-right:0;background:#FFFAF5;color:var(--ink-soft,#5C5C66);white-space:nowrap;text-overflow:ellipsis;border-radius:10px 0 0 10px}
.select_btn{cursor:pointer;display:inline-block;position:relative;color:#fff;font-size:.85rem;font-weight:600;padding:0;background:#1F1F1F;border:0;height:42px;border-radius:0 10px 10px 0;transition:background .2s ease}
.select_btn span{position:absolute;top:11px;left:14px;cursor:pointer}
.select_btn input{position:relative;cursor:pointer;display:block !important;width:104px !important;height:42px !important;opacity:0 !important;filter:alpha(opacity=0);overflow:hidden !important}
.select_btn:hover{background:#3A3A3A}
#fileUpload{cursor:pointer;position:relative;color:#fff;font-size:.9rem;font-weight:700;margin-left:10px;padding:0 22px;height:42px;border:0;border-radius:999px;background:var(--grad,linear-gradient(135deg,#FF8A4C 0%,#FF6A2C 50%,#E0431B 100%));box-shadow:0 14px 30px -12px rgba(255,106,44,.55);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
#fileUpload:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(255,106,44,.7);filter:brightness(1.05)}
#fileUpload:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}

#converterError{color:#b3261e;font-size:.9rem;font-weight:600;margin-top:8px}
#converterError:empty{margin:0}

/* Progress ============================================================ */
#progressContainer{display:none;margin-top:14px}
.loading-container{position:relative;background:#F1E7DB;width:100%;height:24px;border-radius:999px;overflow:hidden;margin:0 auto 10px;text-align:center;color:var(--ink,#0E0E12);line-height:24px}
.loading_text{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;font-size:.78rem;font-weight:600}
.loading-upload{position:absolute;top:0;left:0;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#FFB37A 0%,#FF8A4C 100%)}
.loading-convert{position:absolute;top:0;left:0;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#FF8A4C 0%,#FF6A2C 60%,#E0431B 100%)}

/* Output ============================================================== */
/* .reveal keeps a transform after animating (translateY(0)), which turns the
   ancestor into a containing block and traps the fixed fullscreen overlay
   inside the card. End the converter's reveal at none so fixed = viewport. */
.oc-section .online-converter.reveal.in{transform:none}

.outputDiv_small{display:none;position:relative;width:100%;height:610px;margin-top:18px;background:#fff;border:1px solid var(--line,#F1E7DE);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft,0 12px 30px -16px rgba(14,14,18,.12))}
.outputDiv_full{display:block;position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(8,10,14,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000}
#outputFrame{position:absolute;top:2%;left:1%;height:96%;width:98%;border:0;background:#fff;border-radius:12px}
.outputDiv_small #outputFrame{top:0;left:0;width:100%;height:100%;border-radius:0}
#hideOutput{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:20px;font-weight:700;line-height:36px;text-align:center;cursor:pointer;display:none;z-index:10;transition:background .2s ease,transform .2s ease}
#hideOutput:hover{background:var(--pri,#FF6A2C);transform:scale(1.05)}

/* Sample + preview links ============================================= */
.samplePres{display:block;width:fit-content;margin:14px 0 0 auto;padding:8px 16px;background:#fff;border:1px solid #F7D7B8;border-radius:999px;color:var(--ink-soft,#5C5C66);font-size:.85rem;text-decoration:none;transition:border-color .2s ease}
.samplePres:hover{border-color:#FF8A4C;color:var(--ink,#0E0E12)}
#previewDiv{display:none;position:relative;height:auto;margin-top:22px;text-align:center;font-size:.95rem}
#previewDiv[style*="inline"]{display:block !important} /* script sets display:inline; render centered block instead */
#previewDiv span{color:var(--ink-soft,#5C5C66)}
.preview_btn{color:var(--pri,#FF6A2C);cursor:pointer;font-weight:700;text-decoration:none;opacity:.9}
.preview_btn:hover{opacity:1;text-decoration:underline}
.down_btn{color:var(--pri,#FF6A2C);border:0;cursor:pointer;font-weight:700;opacity:.9}
.down_btn:hover{opacity:1}
.o_para{margin-bottom:5px;font-size:12px;color:var(--ink-soft,#5C5C66)}

/* Responsive ========================================================== */
@media (min-width:768px) and (max-width:1200px){
  #o_text{font-size:1.02rem}
}
@media (max-width:768px){
  #o-convert{padding:18px}
  #o_text{text-align:center;margin-bottom:12px}
  .uploadContainer form{justify-content:center}
  .outputDiv_small{height:70vh}
  #fileUpload{margin-left:0;margin-top:10px;width:100%}
  .samplePres{width:fit-content;margin:16px auto 0;text-align:center}
}