.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    width: 400px;
    max-width: 90%;
    min-height: 550px;
    max-height: 550px;
    /* max-height: 90vh; */
    background: #fff;
    border-radius: 20px;
    padding: 0;                     /* ← IMPORTANT: remove inner push */
    position: relative;
    margin-top: 30px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    transition: none !important;
    animation: modalIn .25s ease;
}

/* =============================
   FIXED POSITIONS INSIDE MODAL
   ============================= */
/* HEADER FIX — STOP SIDE BY SIDE */
.modal-header {
    padding: 25px 30px 15px;
    border-bottom: 1px solid #f1f1f1;
    flex-shrink: 0;
    display: block;
}

.modal-header h2,
.modal-header p {
    display: block;
    width: 100%;
}

/* CONTENT SCROLL */
.modal-content {
    flex: 1;
    padding: 20px 30px;
    overflow-y: auto;
}

/* FOOTER & BUTTON FIX */
.modal-footer {
    padding: 15px 30px;
    border-top: 1px solid #f1f1f1;
    flex-shrink: 0;
    background: #fff;
    z-index: 5;
}

.modal-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* Hide hidden x-show items cleanly */
.modal-footer [x-cloak],
.modal-footer [x-show="false"] {
    display: none !important;
}

/* Prevent transition flickers during Alpine’s x-transition */
[x-cloak] { display: none !important; }

.modal-box h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
}

.modal-desc {
    font-size: 14px;
    margin-bottom: 20px;
    color: #555;
}

.file-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.text-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

/* .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
} */

.cancel-btn,
.upload-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.cancel-btn {
    background: #ddd;
}

.upload-btn {
    background: #1472dd;
    color: #fff;
    /* margin-top:20px; */
}

@keyframes modalIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Prevent body scroll when modal open */
body.upload-modal-open {
    overflow: hidden;
}



.ai-toggle-upload_resume {
    width: 44px;
    height: 22px;
    background: #d1d5db;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: .2s ease;
}
.ai-toggle-upload_resume.active {
    background: #7aafeb;
}
.ai-toggle-upload_resume-knob {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 999px;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: .2s ease;
}
.ai-toggle-upload_resume.active .ai-toggle-upload_resume-knob {
    transform: translateX(22px);
}


.ai-toggle-upload_resume {
    width: 44px;
    height: 22px;
    background: #d1d5db;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: .2s ease;
}

.ai-toggle-upload_resume.active {
    background: #7aafeb;
}



/* Switch container */
.mode-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
}

/* Each option button */
.mode-option {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-weight: 600;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Active mode styling */
.mode-option.active {
    background: darkgray;
    color: white;
}

/* Hover effect */
.mode-option:hover {
    background: #ddd;
}




.textarea_pell{
    margin-bottom: 30px;
}



.upload-status-graphic img {
  width: 150px;
  margin: 30px auto;
  transition: opacity 0.4s ease;
}

.continue-btn {
  background: #7aafeb;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 12px 30px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.continue-btn:hover { background: #7aafeb; }

.linkedin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* .modal-box {
  background: white;
  border-radius: 18px;
  padding: 30px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  transition: all 0.35s ease;

} */

/* .modal-desc {
  color: #555;
  font-size: 15px;
  margin-bottom: 20px;
} */

.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 25px;
}

.cancel-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  flex: 1;
}

.upload-btn {
  background: #1472dd;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  flex: 1;
}

@media (max-width: 600px) {
  .modal-box {
    font-size: 14px;
    min-height: 550px;
    max-height: 550px;             /* Fixed height */
    margin-top:-60px !important;

  }
  .modal-desc {
    font-size: 13px;
  }
  .upload-btn, .cancel-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}



/* UNIVERSAL MODERN LOADER STYLE */
.progress-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 60px 20px;
  text-align: center;
  min-height: 260px;
}

/* Center every loader icon perfectly */
.progress-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* HEADINGS */
.modern-loader h3,
.success-loader h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 10px;
  color: #1a1a1a;
  text-align: center;
}

.loader-sub {
  font-size: 14px;
  color: #6c7a8c;
  margin-top: 6px;
  text-align: center;
  max-width: 300px;
}

/* --- STAGE 1: SPINNING RING --- */
.loader-ring {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  position: relative;
}
.loader-ring .ring {
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  border: 4px solid #dbe7f7;
  border-top-color: #7aafeb;
  border-radius: 50%;
  animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}

.form-body {
  position: relative;
  overflow: hidden;
  min-height: 280px;          /* prevents sudden shrink */
  transition: min-height 0.4s ease, opacity 0.4s ease;
}
/* --- STAGE 2: PULSING DOTS --- */
.loader-pulse {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.loader-pulse span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7aafeb;
  animation: pulse 1s infinite ease-in-out;
}
.loader-pulse span:nth-child(2) { animation-delay: 0.2s; }
.loader-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.4); opacity: 1; }
}

/* --- STAGE 3: SUCCESS --- */
.success-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #e4f1ff, #fff);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  box-shadow: 0 0 25px rgba(122,175,235,0.25);
  animation: pop 0.5s ease;
  margin-bottom: 8px;
}
@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}



[x-cloak] { display: none; }


/* Container when in analyzing mode */
.analysis-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 460px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px 14px 18px;
}

/* Blurred resume screenshot */
.analysis-resume-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/dkmemoia1/image/upload/v1761502122/Screenshot_from_2025-10-26_19-06-32_xuzq3u.png');
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.6);
  transform: scale(1.05);
}

/* Dark overlay + center node */
.analysis-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
}

/* Central “resume core” */
.analysis-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #e5f0ff, #1c2938);
  box-shadow: 0 0 25px rgba(122,175,235,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.analysis-core .core-inner {
  width: 36px;
  height: 44px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  position: relative;
}
.analysis-core .core-inner::before,
.analysis-core .core-inner::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
}
.analysis-core .core-inner::before { top: 10px; }
.analysis-core .core-inner::after { top: 20px; }

/* Rays + icons */

.analysis-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 50%; /* rotate around left center */
  transform: rotate(var(--angle));
  animation: ray-cycle 4s linear infinite;
  animation-delay: var(--delay);
}

/* Horizontal line extending outward */
.ray-line {
  width: 120px;
  height: 2px;
  background: linear-gradient(to right, rgba(122,175,235,0.2), #7aafeb);
  border-radius: 999px;
  transform: scaleX(0);
  animation: ray-grow 0.8s ease-out forwards;
  animation-delay: calc(var(--delay) + .15s);
}

/* Icon always appears at END of ray */
.ray-icon {
  position: absolute;
  top: -15px;   /* vertically centers relative to line after rotation */
  left: calc(120px - 16px); /* end of line minus half icon width */
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 0;
  transform: scale(.4);
  animation: icon-pop .4s ease-out forwards;
  animation-delay: calc(var(--delay) + .35s);
}

@keyframes ray-grow {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes icon-pop {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Bottom text + pulse */
.analysis-footer {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(15,23,42,0.90), rgba(15,23,42,0.35));
  margin: 0 -14px -16px;
  padding: 14px 16px 13px;
  border-radius: 0 0 16px 16px;
  text-align: center;
}
.analysis-footer .loader-pulse {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.analysis-footer .loader-pulse span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #7aafeb;
  animation: pulse 1s infinite ease-in-out;
}
.analysis-footer .loader-pulse span:nth-child(2) { animation-delay: 0.2s; }
.analysis-footer .loader-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40%          { transform: scale(1.4); opacity: 1; }
}
.loader-text {
  font-size: 15px;
  font-weight: 600;
  color: #e5f0ff;
}
.loader-sub {
  font-size: 13px;
  color: #c0c9d4;
  margin-top: 2px;
  padding-left: 10px;
}

/* Make sure modal-content doesn't shrink too small */
.modal-content {
  flex: 1;
  min-height: 220px;
}


@media (max-width: 600px) {
  .ray-line {
    width: 100px; /* reduced from 120px */
  }

  .ray-icon {
    left: calc(100px - 16px); /* adjust icon to match shorter line */
  }
}


.pell-content:empty:before,
.pell-content[data-placeholder]:before {
    content: attr(data-placeholder);
    color: #9ca3af;     /* placeholder gray */
    pointer-events: none;
}


.upload-btn.disabled,
.upload-btn:disabled {
    background:#999 !important;
    color:#eee !important;
    cursor:not-allowed !important;
    filter:none !important;
    opacity:0.55 !important;
    border-color:#aaa !important;
}

.analyzing-transparent {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


.hide-header-border {
    border-bottom: none !important;
}


.upload-error-text {
    margin-top: 8px;
    font-size: 13px;
    color: #dc2626 !important;
    text-align: center;
}

.upload-box.upload-error {
    border-color: #dc2626;
    background: #fef2f2;
}