/* =========================================================
   MALAK VENTURES - INTERNSHIP PAGE DESIGN RESTORE
   Restores the original premium internship layout.
   Backend / application logic is intentionally untouched.
========================================================= */

/* HERO */
.internship-hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 88px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.08));
  background:
    radial-gradient(circle at 86% 14%,rgba(88,192,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 70%);
}
.internship-hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-190px;
  bottom:-300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.11),transparent 68%);
  pointer-events:none;
}
.internship-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);
  gap:54px;
  align-items:center;
}
.internship-hero h1{
  margin:24px 0 26px;
  max-width:12.5ch;
  font-size:clamp(3rem,5.1vw,5rem);
  line-height:1.08;
}
.internship-hero .lead{
  max-width:42rem;
  line-height:1.75;
}

/* PROGRAM SUMMARY */
.program-summary{
  padding:34px;
  border:1px solid rgba(126,183,255,.18);
  border-radius:30px;
  background:
    linear-gradient(155deg,rgba(29,63,103,.74),rgba(12,34,61,.86));
  box-shadow:
    0 28px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.program-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.program-summary-item{
  min-width:0;
  padding:24px 25px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
.program-summary-item.full{
  grid-column:1/-1;
}
.program-summary-item b{
  display:block;
  color:#fff;
  font-size:1.05rem;
  line-height:1.35;
}
.program-summary-item span{
  display:block;
  margin-top:9px;
  color:#a9bdd5;
  line-height:1.55;
}

/* TRACK CARDS */
.track-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}
.track-card{
  position:relative;
  min-width:0;
  padding:42px;
  overflow:hidden;
  border:1px solid rgba(126,183,255,.15);
  border-radius:30px;
  background:
    linear-gradient(155deg,rgba(27,57,92,.82),rgba(12,31,55,.9));
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.track-card::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-120px;
  bottom:-130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(88,192,255,.09),transparent 70%);
  pointer-events:none;
}
.track-number{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  margin-bottom:28px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--blue,#3b82f6),var(--blue-2,#58c0ff));
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
  box-shadow:0 14px 32px rgba(59,130,246,.22);
}
.track-card h3{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  color:#fff;
  font-size:clamp(1.45rem,2vw,1.85rem);
}
.track-card p{
  position:relative;
  z-index:1;
  max-width:58ch;
  margin:0;
  color:#afc0d8;
  font-size:1rem;
  line-height:1.7;
}
.specialization-list{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.specialization-list span{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:9px 16px;
  border:1px solid rgba(88,192,255,.22);
  border-radius:999px;
  background:rgba(59,130,246,.07);
  color:#d7e6f8;
  font-size:.92rem;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.track-note{
  position:relative;
  z-index:1;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#c5d6ea;
  line-height:1.65;
}


/* LIVE TRACK AVAILABILITY */
.track-title-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.track-title-row h3{margin:0}
.track-availability{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:84px;padding:8px 12px;border-radius:999px;border:1px solid rgba(126,183,255,.18);background:rgba(255,255,255,.045);color:#cbd9e9;font-size:.75rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.track-availability.open{border-color:rgba(52,211,153,.28);background:rgba(52,211,153,.10);color:#a7f3d0}
.track-availability.closed{border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.09);color:#fecaca}
.track-card.track-closed{opacity:.78}
@media(max-width:560px){.track-title-row{align-items:flex-start;flex-direction:column;gap:10px}}

/* HOW IT WORKS */
.flow-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.flow-item{
  min-width:0;
  min-height:300px;
  padding:34px;
  border:1px solid rgba(126,183,255,.14);
  border-radius:28px;
  background:
    linear-gradient(155deg,rgba(27,56,89,.74),rgba(13,31,54,.88));
  box-shadow:0 18px 48px rgba(0,0,0,.15);
}
.flow-no{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:24px;
  border:1px solid rgba(88,192,255,.22);
  border-radius:16px;
  background:rgba(59,130,246,.14);
  color:#d5e8ff;
  font-size:1rem;
  font-weight:900;
}
.flow-item strong{
  display:block;
  color:#fff;
  font-size:1.05rem;
  line-height:1.35;
}
.flow-item>span:last-child{
  display:block;
  margin-top:18px;
  color:#a9bdd5;
  line-height:1.75;
}

/* APPLICATION AREA */
.application-shell{
  display:grid;
  grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);
  gap:34px;
  align-items:start;
}
.application-aside{
  display:grid;
  gap:24px;
}
.application-aside .program-summary{
  padding:32px;
}
.fee-card{
  padding:34px;
  border:1px solid rgba(126,183,255,.2);
  border-radius:30px;
  background:
    linear-gradient(155deg,rgba(25,68,119,.78),rgba(9,31,58,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.fee-label{
  display:block;
  color:#9fc7f5;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.fee-value{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:14px 0 14px;
}
.fee-value span{
  color:#fff;
  font-size:clamp(2.7rem,4vw,3.6rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
}
.fee-value small{
  padding-bottom:7px;
  color:#8fcfff;
  font-size:1rem;
  font-weight:900;
}
.fee-card>p{
  color:#b4c6dc;
  line-height:1.7;
}
.payment-qr{
  display:flex;
  justify-content:center;
  margin-top:24px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(255,255,255,.035);
}
.payment-qr img{
  width:min(100%,260px);
  height:auto;
  border-radius:16px;
  background:#fff;
}
.payment-warning{
  margin-top:20px;
  padding:18px;
  border:1px solid rgba(255,190,92,.18);
  border-radius:18px;
  background:rgba(255,174,67,.07);
  color:#c8d7e8;
  line-height:1.65;
}
.payment-warning strong{
  display:block;
  margin-bottom:6px;
  color:#fff;
}

/* APPLICATION FORM CARD */
.internship-form{
  min-width:0;
  padding:40px;
  border:1px solid rgba(126,183,255,.16);
  border-radius:30px;
  background:
    linear-gradient(155deg,rgba(20,45,76,.9),rgba(8,27,50,.96));
  box-shadow:0 26px 80px rgba(0,0,0,.24);
}
.internship-form .form-heading h2{
  color:#fff;
  font-size:clamp(2rem,3.2vw,3.25rem);
}
.form-section{
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.08);
}
.form-section:first-of-type{
  border-top:0;
  padding-top:0;
}
.form-section-title{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:26px;
}
.form-section-title i{
  display:grid;
  place-items:center;
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:15px;
  background:linear-gradient(135deg,var(--blue,#3b82f6),var(--blue-2,#58c0ff));
  color:#fff;
  font-style:normal;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 12px 26px rgba(59,130,246,.22);
}
.form-section-title h3{
  color:#fff;
}
.internship-form .field small{
  color:#91a9c4;
}
.internship-form input,
.internship-form textarea,
.internship-form select{
  min-height:58px;
}
.internship-form textarea{
  min-height:150px;
}
.internship-form input[type="file"]{
  padding:14px 16px;
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.check-row input[type="checkbox"]{
  flex:0 0 20px;
  width:20px;
  min-height:20px;
  height:20px;
  margin-top:3px;
  padding:0;
  border-radius:6px;
}
.check-row label{
  color:#c7d6e8;
  line-height:1.6;
}
.internship-form .form-actions{
  margin-top:30px;
}
.internship-form .submit-primary{
  min-width:230px;
}

/* SUCCESS / STATUS / LOOKUP */
.application-result{
  grid-column:1/-1;
  padding:42px;
  border:1px solid rgba(126,183,255,.16);
  border-radius:30px;
  background:linear-gradient(155deg,rgba(20,45,76,.9),rgba(8,27,50,.96));
  text-align:center;
  box-shadow:0 26px 80px rgba(0,0,0,.24);
}
.application-result h2{
  color:#fff;
}
.result-id{
  display:inline-flex;
  margin:20px auto;
  padding:12px 18px;
  border:1px solid rgba(88,192,255,.22);
  border-radius:14px;
  background:rgba(59,130,246,.1);
  color:#bfe0ff;
  font-weight:900;
  letter-spacing:.04em;
}
.lookup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.lookup-item{
  padding:18px;
  border:1px solid rgba(126,183,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.lookup-item b{
  display:block;
  margin-bottom:7px;
  color:#fff;
}
.lookup-item span{
  color:#adc1d8;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
}
.status-pending{background:rgba(245,174,66,.12);border:1px solid rgba(245,174,66,.22);color:#ffd38b}
.status-paid{background:rgba(52,211,153,.11);border:1px solid rgba(52,211,153,.2);color:#a7f3d0}
.status-rejected{background:rgba(248,113,113,.11);border:1px solid rgba(248,113,113,.2);color:#fecaca}
.status-active{background:rgba(59,130,246,.13);border:1px solid rgba(88,192,255,.22);color:#b9dcff}

/* RESPONSIVE */
@media (max-width:1120px){
  .internship-hero-grid{
    grid-template-columns:1fr;
  }
  .internship-hero h1{
    max-width:14ch;
  }
  .internship-hero .program-summary{
    max-width:760px;
  }
  .flow-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .application-shell{
    grid-template-columns:1fr;
  }
  .application-aside{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:860px){
  .internship-hero{
    padding:72px 0;
  }
  .track-grid,
  .flow-grid{
    grid-template-columns:1fr;
  }
  .flow-item{
    min-height:0;
  }
  .application-aside{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .internship-hero{
    padding:58px 0;
  }
  .internship-hero h1{
    max-width:none;
    font-size:clamp(2.55rem,12vw,3.7rem);
  }
  .program-summary,
  .track-card,
  .flow-item,
  .fee-card,
  .internship-form,
  .application-result{
    padding:24px;
    border-radius:22px;
  }
  .program-summary-grid{
    grid-template-columns:1fr;
  }
  .program-summary-item.full{
    grid-column:auto;
  }
  .track-number{
    width:56px;
    height:56px;
    border-radius:16px;
  }
  .specialization-list{
    gap:9px;
  }
  .specialization-list span{
    white-space:normal;
  }
  .lookup-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   MALAK VENTURES - CERTIFICATE DESIGN
========================================================= */

.certificate-section {
    padding: 60px 0;
}

.certificate-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   CERTIFICATE PAPER
========================================================= */

.certificate-paper {
    position: relative;
    width: 100%;
    aspect-ratio: 1491 / 1055;
    overflow: hidden;
    background: #ffffff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
    color: #061536;
    container-type: inline-size;
}


/* =========================================================
   CERTIFICATE TEMPLATE IMAGE
========================================================= */

.certificate-template-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}


/* =========================================================
   INTERN NAME
========================================================= */

.certificate-name {
    position: absolute;
    top: 45.5%;
    left: 24%;
    width: 56%;
    height: 11%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 2%;
    margin: 0;
    background: transparent;
    color: #061536;
    text-align: center;
    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size: clamp(14px, 4.2vw, 64px);
    font-size: clamp(14px, 4.2cqw, 64px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
}


/* =========================================================
   CERTIFICATE ID
========================================================= */

.certificate-id-value {
    position: absolute;
    left: 42.1%;
    bottom: 14.3%;
    width: 21.4%;
    height: 4.2%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0 1%;
    background: transparent;
    color: #07152f;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(7px, 1.35vw, 21px);
    font-size: clamp(7px, 1.35cqw, 21px);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    z-index: 5;
}


/* =========================================================
   DATE OF ISSUE
========================================================= */

.certificate-date-value {
    position: absolute;
    right: 17.6%;
    bottom: 19.5%;
    width: 19%;
    height: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0.5%;
    background: transparent;
    color: #07152f;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(7px, 1.25vw, 19px);
    font-size: clamp(7px, 1.25cqw, 19px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    z-index: 5;
}


/* =========================================================
   DYNAMIC QR CODE
========================================================= */

.certificate-qr {
    position: absolute;
    right: 6.95%;
    bottom: 15.95%;
    width: 7%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    padding: 0.25%;
    z-index: 6;
}

.certificate-qr canvas,
.certificate-qr img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}


/* =========================================================
   HIDDEN BACKEND DATA
========================================================= */

.certificate-hidden-data {
    display: none !important;
}


/* =========================================================
   CERTIFICATE ACTION BUTTONS
========================================================= */

.certificate-actions {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .certificate-section {
        padding: 40px 0;
    }

    .certificate-wrap {
        max-width: 100%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
    .certificate-section {
        padding: 26px 0;
    }

    .certificate-wrap {
        width: 100%;
    }

    .certificate-paper {
        border-radius: 4px;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
    }

    .certificate-name {
        padding: 0 1%;
    }

    .certificate-qr {
        padding: 0.15%;
    }

    .certificate-actions {
        margin-top: 18px;
        gap: 10px;
    }
}


/* =========================================================
   PRINT / SAVE AS PDF
========================================================= */

@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .site-header,
    .footer,
    .back-top,
    .certificate-actions,
    .page-hero,
    #certificatePageMessage {
        display: none !important;
    }

    main,
    .section,
    .certificate-section,
    .container,
    .certificate-wrap {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .certificate-paper {
        display: block !important;
        position: relative !important;
        width: 297mm !important;
        height: 210mm !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        page-break-before: avoid;
        page-break-after: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .certificate-template-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .certificate-name,
    .certificate-id-value,
    .certificate-date-value,
    .certificate-qr {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .certificate-qr canvas,
    .certificate-qr img {
        width: 100% !important;
        height: 100% !important;
    }
}