/* ================================
   KDA Modern Compact UI (Override)
   Paste at END of style.css
================================== */

/* Card container more "app-like" and less tall */
.kda-skin-analyzer{
  max-width: 620px;
  margin: 16px auto;
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

/* Title tighter */
.kda-skin-analyzer h3{
  font-size: 22px;
  margin: 0 0 10px 0;
  letter-spacing: .2px;
}

/* Upload area: compact + clean */
.kda-upload-area{
  padding: 18px;
  margin: 14px 0;
  border-radius: 16px;
  border-width: 2px;
  background: rgba(255,255,255,.96);
}

/* Tip line inside upload area */
.kda-upload-area .kda-pretip{
  margin-top: 10px ;
  font-size: 13px ;
  opacity: .85 ;
  line-height: 1.35 ;
}

/* Preview smaller to avoid long modal */
#kda-preview{
    margin-top:10px;
    border-radius:14px;
    max-height:180px;
    object-fit:cover;
}

/* Button: modern, shorter height, not "giant" */
#kda-analyze-btn{
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 14px;
  margin-top: 10px;
  box-shadow: 0 10px 24px rgba(245, 87, 108, 0.22);
}

/* Loading box more compact */
.kda-loading{
  padding: 22px;
}
.kda-spinner{
  width: 40px;
  height: 40px;
  border-width: 4px;
  margin: 0 auto 12px;
}

/* Results container: compact "panel" with smooth scrolling */
#kda-result{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  max-height: 420px;
  overflow: auto;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  background: rgba(255,255,255,.98);
  /* IMPORTANT: do not force text direction here; let translation handle */
  white-space: normal; /* the report itself handles pre-wrap */
}

/* Make the "✓ Analysis Complete!" line look like a badge (even if inline styles exist) */
#kda-result > div:first-child{
  display: inline-flex ;
  align-items: center ;
  gap: 8px ;
  padding: 8px 12px ;
  border-radius: 999px ;
  background: rgba(39,174,96,.10) ;
  color: #1e8e55 ;
  font-weight: 700 ;
  margin-bottom: 12px ;
}

/* Report box: readable, modern typography */
#kda-result .kda-report{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(102,126,234,.06);
  border: 1px solid rgba(102,126,234,.14);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Make bullets nicer */
#kda-result .kda-report{
  word-spacing: .2px;
}

/* Mobile: reduce vertical space + make it feel like a bottom sheet */
@media (max-width: 768px){
  .kda-skin-analyzer{
    margin: 10px;
    padding: 14px;
    border-radius: 16px;
  }

  .kda-upload-area{
    padding: 14px;
    border-radius: 14px;
  }

  #kda-analyze-btn{
    font-size: 14px;
    padding: 11px 14px;
    border-radius: 14px;
  }

  #kda-result{
    padding: 12px;
    max-height: 52vh; /* important: prevent taking whole screen */
    border-radius: 16px;
  }

  #kda-result .kda-report{
    font-size: 13.5px;
    line-height: 1.55;
  }
}

/* Make report follow site direction (RTL/LTR) */
#kda-result { 
  text-align: start;              /* بدل left/right */
  direction: inherit;             /* يرث من html/body */
}

#kda-result .kda-report{
  text-align: inherit;
  direction: inherit;
  unicode-bidi: plaintext;        /* أفضل من isolate مع نص مختلط */
  white-space: pre-wrap;          /* خليه موحد */
}

/* إذا موقعك يضع dir على html */
html[dir="rtl"] #kda-result,
html[dir="rtl"] #kda-result .kda-report{
  direction: rtl;
}

html[dir="ltr"] #kda-result,
html[dir="ltr"] #kda-result .kda-report{
  direction: ltr;
}
/* Remove upload arrow icon */
.kda-upload-area > div:first-child{
    display:none 
}
/* Hide Preview label and icon */
#kda-preview-label,
.kda-preview-label,
#kda-preview + div,
#kda-preview-label {
    display:none ;
}
/* Upload text modern gold style */
.kda-upload-area p{
    color: #d4af37; /* gold */
    font-weight: 600;
    letter-spacing: .3px;
    transition: all .25s ease;
    cursor: pointer;
}

/* Hover effect */
.kda-upload-area:hover p{
    color: #f1c40f; /* brighter gold */
    transform: translateY(-1px);
    text-shadow: 0 2px 8px rgba(212,175,55,.25);
}

/* Active press effect */
.kda-upload-area:active p{
    transform: translateY(0);
    opacity: .8;
}