/*
Theme Name: Custom Theme
Author: ZH
Description: Custom Starter Theme CMS Team (Website)
Version: 2.0
License: MIT
Tags: wordpress, html, javascript, sass, css, postcss, webpack, babel, PHP, LD
Text Domain: Custom Theme
*/

/*
This CSS file is needed for WordPress to recognize the theme and display its info.
Please use the ../src/assets/styles/main.scss as an entry point for your SASS code.
*/


li.pms-field.pms-field-subscriptions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 30px 0;
}
.pms-subscription-plan {
    position: relative;
    padding: 10px;
    width: 100%;
    border: 2px solid #ffffff;
    border-radius: 10px;
}
.pms-subscription-plan:has(input[type="radio"]:checked) {
        background: linear-gradient(90deg, #1581D5, #F6779D);
}
.pms-subscription-plan input {
    height: 100% !important;
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    opacity:0;
    z-index: 999;
}
span.pms-subscription-plan-price {
    display: block;
    width: 100%;
    flex-wrap: nowrap;
}
.pms-subscription-plan label {
    display: block !important;
}
section.RegisterSection {
    padding: 40px 20px;
}
span.pms-subscription-plan-name {
    font-size: 22px;
    text-align: center;
    display: block;
}
span.pms-subscription-plan-price {
    text-align: center;
}
.pms-subscription-plan-description {
    padding: 10px 0;
    text-align: center;
}


span.separator {
  padding: 0 10px;
}

.CanceledPlan {
  background: #ae0000;
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  border-radius: 200px;
  padding: 5px;
  margin-top: 10px;
}

.pms-login-error strong {
  color: red;
}
.LatestTable td {
  padding: 19.5px 0;
}
.LatestTable tr {
  border-bottom: 1px solid;
  border-color: gray !important;
}
.LatestTable tr td:nth-of-type(1) {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
}
.LatestTable {
  table-layout: fixed;
  width: 100%;    
}


.FileWrapper img {
  width: 100px;
  filter: brightness(0) invert(1);
}
.FileWrapper {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin: 30px auto 20px;
  background: linear-gradient(90deg, #1581D5, #F6779D);
  width: fit-content;
  padding: 15px 30px;;
  border-radius: 20px;
}
.FileWrapper span {
  color: white;
  text-align: center;
  font-size: 20px;
}
.FileResult {
  text-align: center;
}
.QuickUploadForm{background:#1f2f4a;padding:35px;border-radius:20px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.QuickUploadForm h2{color:#ffffff;margin-bottom:8px;font-weight:600;}
.QuickUploadForm p{color:#b8c4d6;font-size:14px;margin-bottom:25px;}
.QuickUploadForm .upload-btn{background:#f5b81e;color:#000;padding:16px;width:100%;border-radius:50px;font-weight:600;cursor:pointer;border:none;font-size:16px;transition:0.3s;}
.QuickUploadForm .upload-btn:hover{background:#e2a812;}
.QuickUploadForm input[type="file"]{display:none;}
.QuickUploadForm .kdp-input{margin-top:20px;width:100%;padding:16px;border-radius:12px;border:1px solid #3b4f6b;background:#1a2740;color:#fff;font-size:15px;outline:none;}
.QuickUploadForm .kdp-input::placeholder{color:#8fa3bf;}
.QuickUploadForm .copy-btn{margin-top:20px;width:100%;padding:18px;border-radius:50px;border:none;font-size:18px;font-weight:600;background:#5c6473;color:#fff;cursor:pointer;transition:0.3s;}
.QuickUploadForm .copy-btn:hover{background:#6b7484;}
.QuickUpload {
  background: #162239;
  border-radius: 30px;
  padding: 30px 30px;
}
.QuickUpload h5 {
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin-bottom: 25px;
}
.QuickUpload {
  margin-top: 30px;
}

.QuickUpload .progressBar{
  display:none;
  height:6px;
  background:#2d3f5f;
  margin-top:12px;
  border-radius:10px;
  overflow:hidden;
}
.QuickUpload #progress{
  height:100%;
  width:0%;
  background:#f5b81e;
  transition:0.2s;
}

.QuickUpload .loader{
  display:none;
  margin-top:10px;
  width:22px;
  height:22px;
  border:3px solid #ccc;
  border-top:3px solid #f5b81e;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}


.PageWrapper{position:relative;}
video.PageBG{position:absolute;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.2;}
.PageWrapper > .row{position:relative;z-index:1;}

.FileUploader .upload-container{padding:40px;border-radius:20px;background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 0 40px rgba(0,0,0,0.4);text-align:center;position:relative;}
.FileUploader .drop-zone{border:2px dashed rgba(255,255,255,0.5);padding:60px 20px;border-radius:15px;cursor:pointer;transition:0.3s ease;}
.FileUploader .drop-zone.dragover{background:rgba(255,255,255,0.1);border-color:#00f2fe;box-shadow:0 0 20px #00f2fe;}
.FileUploader .progress-bar{width:100%;height:10px;background:rgba(255,255,255,0.1);border-radius:10px;margin-top:20px;overflow:hidden;display:none;}
.FileUploader .progress{height:100%;width:0%;background:linear-gradient(90deg,#00f2fe,#4facfe);transition:width 0.3s;}
.FileUploader .loader{display:none;margin-top:20px;}
.FileUploader .drop-zone.disabled{opacity:0.5;pointer-events:none;cursor:not-allowed;border-color:rgba(255,255,255,0.2);}
.FileUploader .loader div{width:15px;height:15px;margin:3px;background:#00f2fe;border-radius:50%;display:inline-block;animation:bounce 0.6s infinite alternate;}
.FileUploader .loader div:nth-child(2){animation-delay:0.2s;}
.FileUploader .loader div:nth-child(3){animation-delay:0.4s;}
.FileUploader .result{margin-top:20px;font-size:18px;}
@keyframes bounce{
  to{transform:translateY(-10px);}
}

.UserUsage .circle-container{position:relative;width:200px;height:200px;}
.UserUsage svg{transform:rotate(-90deg);width:100%;height:100%;}
.UserUsage .circle-bg{fill:none;stroke:#e6e6e6;stroke-width:15;}
.UserUsage .circle-progress{fill:none;stroke:url(#gradient);stroke-width:15;stroke-linecap:round;transition:stroke-dashoffset 1s ease;stroke-dasharray:267; /* circumference */stroke-dashoffset:267; /* start empty */}
.UserUsage .circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;text-align:center;user-select:none;}
.UserUsage .circle-text .percent{font-size:3.5rem;font-weight:700;}
.UserUsage .circle-text .details{font-size:1rem;opacity:0.8;margin-top:8px;font-weight:500;}