/* Interview Modal Styles */
/* Reutilizando estilos de jobs-description.css para el modal de interviews */

/* Modal Base */
#interviewModal.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  align-items: center;
  justify-content: center;
}

#interviewModal .modal-content.interview-modal-content {
  
  border-radius: 2rem;
  max-width: 60vw;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 0;

  @media (max-width: 1440px) {
    max-width: 75vw;
  }

    @media (max-width: 1280px) {
    max-width: 90vw;
  }
}

#interviewModal .close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  cursor: pointer;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background 0.2s;
  box-shadow: 0 0 9px 0px #00000008;
  @media (max-width: 900px) {
    top: 1rem;
    right: 0.5rem;
  }
}

#interviewModal .close:hover {
  background: rgba(255, 255, 255, 0.2);
}

#interviewModal .close-icon {
  width: 14px;
  height: 14px;
}

/* Job Details Container */
#interviewModal .job-details-container {
  flex: 1;
  /* background-color: rgba(249, 249, 249, 0.04);
  backdrop-filter: blur(50px); */
  border-radius: 2rem;
  overflow: clip;

}

#interviewModal .job-details-content {
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  padding-top: 2rem;
}

/* Header */
#interviewModal .jd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

#interviewModal .jd-header-info {
  flex: 1;
  min-width: 300px;
}

#interviewModal .breadcrumbs {
  font-size: 0.875rem;
  color: #007bff;
  margin-bottom: 1rem;
  color: var(--opaque-text);
}

#interviewModal .breadcrumbs .active-blue {
  color: #007bff;
}

#interviewModal .company-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

#interviewModal .company-logo {
  width: 5.625rem;
  height: 5.625rem;
  background: #4a4a4a98;
  border-radius: 0.75rem;
  overflow: hidden;
}

#interviewModal .company-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#interviewModal .company-name {
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  color: var(--text-color);
}

#interviewModal .job-title {
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

#interviewModal .company-meta {
  font-size: 0.85rem;
  color: var(--opaque-text);
}

#interviewModal .job-subtitle {
  color: var(--opaque-text);
  margin: 0;
}

/* Action Card */
#interviewModal .jd-action-card {
  background: linear-gradient(236.09deg, #0269AD 4.97%, #004075 95.25%);
  color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#interviewModal .jd-action-card.active-style {
  background: rgba(249, 249, 249, 0.06);
  backdrop-filter: blur(15.5px);
  padding: 1.5rem;
  border-radius: 1.4rem;
  box-shadow: 0px 0px 6.6px 3px rgba(16, 24, 32, 0.08);
  border: none;

 .job-meta-list li{
  color: var(--text);
 }

 .job-meta-list svg path {
  stroke: var(--svg-icon-color);
}

}

#interviewModal .job-meta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

#interviewModal .job-meta-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

#interviewModal .job-meta-list svg path {
  fill: none;
  stroke: #fff;
}

#interviewModal .menu-item-active-green {
  background: #5D8A4E;
  color: white;
  border-radius: 5rem;
  padding: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: filter 0.2s;
}

#interviewModal .menu-item-active-green:hover {
  filter: brightness(1.1);
}

#interviewModal .menu-item-google-meet {
  text-transform: capitalize;
  padding: 0.45rem;
  white-space: pre;
  text-decoration: none;
  border-radius: 5rem;
  font-size: 1.1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease-in;
  cursor: pointer;
  color: rgba(0, 17, 25, 1);
  background: white;
  box-shadow: 0px 0px 23.6px 0px rgba(38, 67, 95, 0.24);
  border: none;
  width: 100%;
}


#interviewModal .menu-item-google-meet img {
  width: 1.95rem;
  margin-right: 0.25rem;
}
#interviewModal .menu-item:hover {
  filter: brightness(0.85);
}

#interviewModal .menu-item svg.link-icon-arrow {
  width: 2.2rem;
  height: 2.2rem;
  margin-left: 0;
  fill: white;
  stroke: white;
  overflow: visible;
}

#interviewModal .menu-item svg.link-icon-arrow path {
  fill: white;
}

#interviewModal .menu-item svg.link-icon-arrow circle {
  fill: #4da3ff;
  opacity: 1;
  stroke: transparent;
}

#interviewModal .menu-item .empty-span {
  width: 1rem;
}

/* Grid Layout */
#interviewModal .jd-grid-layout {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 1.5rem;
  align-items: stretch;
  background-color: rgba(249, 249, 249, 0.04);
  padding: 1rem;
  border-radius: 1.75rem;
  box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08);
    @media (max-width:900px) {
        padding: 0;
        box-shadow: none;
        background: none;
    }

}

#interviewModal .jd-column-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08); */
border-radius: 1.75rem;
}

#interviewModal .jd-column-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  /* box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08); */
border-radius: 1.75rem;
}
.large-text-card-text {
  padding: 1.5rem;
  box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08); 
  border-radius: 1.25rem;
  p{
    color: var(--text);
  }
      @media (max-width:900px) {
        padding: 0;
        box-shadow: none;
        background: none;
    }

}
#interviewModal .jd-column-right .info-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: rgba(249, 249, 249, 0.06);
  box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08);
border-radius: 1.75rem;
    @media (max-width:900px) {
        padding: 0;
        /* box-shadow: none;
        background: none; */
    
}
}

/* Info Cards */
#interviewModal .info-card {
  background: rgba(249, 249, 249, 0.06);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08);
    @media (max-width:900px) {
        padding: 0;
        box-shadow: none;
        background: none;
    }
}

#interviewModal .card-title {
  font-size: 1.25rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
  @media (max-width:900px) {
        font-size: 1rem;
        color:rgba(20, 151, 223, 1) ;

  }
}

#interviewModal .highlight-box {
  background: rgba(249, 249, 249, 0.06);
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08);
      @media (max-width:900px) {
        padding: 0;
        box-shadow: none;
        background: none;
    }

}

  #interviewModal .highlight-box h3 {
    font-size: 1.1rem;
  }

#interviewModal .no-margin-bottom h2 {
  margin-bottom: 0;
}

#interviewModal .skills-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#interviewModal .skill-tag {
  background: linear-gradient(270deg, #1497DF 0%, #006692 100%);
  box-shadow: 0px 0px 23.6px 0px rgba(38, 67, 95, 0.24);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
}

#interviewModal .info-card-text {
  color: var(--opaque-text);
  font-size: 0.875rem;
  margin: 0.5rem 0;
}

#interviewModal .check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#interviewModal .check-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

#interviewModal .check-list img {
  width: 1.5rem;
  margin-right: 0.75rem;
}

/* Rating Card */
#interviewModal .rating-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#interviewModal .rating-score {
  background: linear-gradient(270deg, #1497DF 0%, #006692 100%);
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

#interviewModal .score-text {
  font-size: 0.875rem;
  font-weight: 200;
}

#interviewModal .rating-text {
  display: flex;
  flex-direction: column;
}

#interviewModal .rating-title {
  font-size: 1rem;
}

#interviewModal .rating-subtitle {
  font-size: 0.875rem;
  color: var(--opaque-text);
}

#interviewModal .rating-comments {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: bold;
  display: none;
}

/* Large Text Card */
#interviewModal .large-text-card p {
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1rem;
}

#interviewModal .jd-column-right .large-text-card {
  flex: 1;
}

/* Activities List */
#interviewModal .activities-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

#interviewModal .activity-item {
  display: flex;
  gap: 1rem;
  background: rgba(249, 249, 249, 0.06);
  padding: 1rem;
  border-radius: 0.75rem;
  align-items: center;
  flex: 1;
  box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08);
}

#interviewModal .activity-icon {
  font-size: 1.2rem;
}

#interviewModal .activity-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Ellipsis decorations */
#interviewModal .ellipsis {
  position: absolute;
  width: 20%;
  height: 20%;
  border-radius: 30%;
  filter: blur(5rem);
  z-index: -1;
}

#interviewModal .green {
  left: 5%;
  top: 15%;
  background-color: rgba(113, 194, 59, 0.32);
}

#interviewModal .blue {
  left: 0%;
  top: 2.5%;
  background: linear-gradient(270deg, rgba(20, 151, 223, 0.56) 0%, rgba(22, 73, 97, 0.56) 100%);
}

/* Responsive Styles */
@media (max-width: 1600px) {
  #interviewModal .jd-action-card {
    max-width: 280px;
    padding: 1rem;
  }

  #interviewModal .job-meta-list {
    margin: 0 0 1rem 0;
  }

  #interviewModal .job-meta-list li {
    font-size: 0.8rem;
  }

  #interviewModal .jd-grid-layout {
    gap: 1rem;
  }

  #interviewModal .jd-column-left,
  #interviewModal .jd-column-right {
    gap: 0.75rem;
  }

  #interviewModal .info-card {
    padding: 1rem;
  }

  #interviewModal .highlight-box {
    padding: 0.75rem;
  }

  #interviewModal .highlight-box p {
    font-size: 0.75rem;
  }

  #interviewModal .highlight-box h3 {
    font-size: 0.8rem;
  }

  #interviewModal .skills-wrapper {
    gap: 0.25rem;
  }

  #interviewModal .skill-tag {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }

  #interviewModal .info-card-text {
    font-size: 0.75rem;
    margin: 0.25rem 0;
  }

  #interviewModal .check-list li {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
  }

  #interviewModal .check-list img {
    width: 1rem;
    margin-right: 0.5rem;
  }

  #interviewModal .rating-card {
    gap: 0.5rem;
  }

  #interviewModal .rating-score {
    font-size: 2rem;
    padding: 0.5rem;
  }

  #interviewModal .score-text {
    font-size: 0.75rem;
  }

  #interviewModal .rating-title {
    font-size: 0.875rem;
  }

  #interviewModal .rating-subtitle {
    font-size: 0.75rem;
  }

  #interviewModal .rating-comments {
    font-size: 0.75rem;
  }

  #interviewModal .large-text-card p {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }

  #interviewModal .activities-list {
    gap: 0.5rem;
  }

  #interviewModal .activity-item {
    padding: 0.75rem;
  }

  #interviewModal .activity-icon {
    font-size: 1rem;
  }

  #interviewModal .activity-item p {
    font-size: 0.75rem;
  }

  #interviewModal .company-name {
    font-size: 1.1rem;
  }

  #interviewModal .job-title {
    font-size: 1.45rem;
  }

  #interviewModal .company-meta {
    font-size: 0.75rem;
  }

  #interviewModal .job-subtitle {
    font-size: 0.75rem;
  }
}

@media (max-width: 1440px) {
  #interviewModal .menu-item {
    font-size: 0.77rem;
  }

  #interviewModal .menu-item svg.link-icon-arrow {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-width: 900px) {
  #interviewModal .modal-content.interview-modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }

  #interviewModal .jd-grid-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #interviewModal .jd-header {
    flex-direction: column;
  }

  #interviewModal .jd-action-card {
    max-width: 100%;
  }

  #interviewModal .jd-column-right {
    height: auto;
  }

  #interviewModal .jd-column-right .info-card {
    flex: none;
    background-color: transparent;
    box-shadow: none;
  }

  #interviewModal .highlight-box {
    padding: 0;
  }

  #interviewModal .breadcrumbs {
    font-size: 0.7rem;
  }

  #interviewModal .company-name {
    font-size: 1rem;
    margin-bottom: 0;
  }

  #interviewModal .job-title {
    font-size: 1.075rem;
  }

  #interviewModal .company-meta {
    font-size: 0.7rem;
  }

  #interviewModal .job-subtitle {
    font-size: 0.5rem;
  }

  #interviewModal .menu-item {
    padding: 0.30rem;
    font-size: 0.75rem;
  }

  #interviewModal .ellipsis {
    width: 40%;
    filter: blur(4rem);
    height: 10%;
  }

  #interviewModal .green {
    right: 7.5%;
    top: 10%;
  }

  #interviewModal .blue {
    left: 0%;
    top: 2.55%;
  }
}

/* Scrollbar for modal content */
#interviewModal .interview-modal-content::-webkit-scrollbar {
  width: 10px;
}

#interviewModal .interview-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

#interviewModal .interview-modal-content::-webkit-scrollbar-thumb {
  background: var(--scroll-color);
  border-radius: 5px;
}