/* ==========================================================================
   JobJankari Resume Builder — style.css
   Tokens
   ========================================================================== */
:root{
  --navy:#16233F;
  --navy-2:#1F3358;
  --gold:#B4842A;
  --bg:#F3F5F8;
  --surface:#FFFFFF;
  --border:#DEE2E8;
  --border-strong:#C4CAD4;
  --text:#20242E;
  --text-muted:#5B6472;
  --danger:#B3261E;
  --danger-bg:#FBEAE9;
  --radius:10px;
  --font-ui:'Public Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif:'Lora', Georgia, serif;
  --shadow-card:0 1px 2px rgba(22,35,63,.06), 0 1px 1px rgba(22,35,63,.04);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-serif); color:var(--navy); line-height:1.25; margin:0 0 .5em;}
a{color:var(--navy-2);}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
img{max-width:100%;}

/* ==========================================================================
   Header / Footer
   ========================================================================== */
.site-header{background:var(--navy); color:#fff;}
.site-header__inner{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;}
.brand__mark{
  width:34px; height:34px; border-radius:8px; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:var(--navy);
}
.brand__name{font-weight:700; font-size:18px; letter-spacing:.2px;}
.site-nav{display:flex; gap:20px;}
.site-nav a{color:#D8DEEA; text-decoration:none; font-size:14px; font-weight:500;}
.site-nav a:hover{color:#fff;}

.site-footer{
  max-width:1200px; margin:0 auto; padding:28px 20px 60px;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  color:var(--text-muted); font-size:14px;
}
.site-footer nav{display:flex; gap:18px;}
.site-footer a{color:var(--text-muted);}

/* ==========================================================================
   Page intro
   ========================================================================== */
.page-intro{background:linear-gradient(180deg,var(--navy) 0%, #223963 100%); color:#fff; padding:36px 20px 44px;}
.page-intro__inner{max-width:760px; margin:0 auto; text-align:left;}
.page-intro__eyebrow{color:var(--gold); font-weight:600; font-size:14px; margin:0 0 8px;}
.page-intro h1{color:#fff; font-size:clamp(26px,3.4vw,38px); margin-bottom:12px;}
.page-intro__sub{color:#C9D2E3; font-size:16px; max-width:60ch; margin:0;}

/* ==========================================================================
   Ad + affiliate
   ========================================================================== */
.ad-container{
  max-width:1200px; margin:24px auto; padding:18px;
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:#fff; text-align:center; color:var(--text-muted);
  font-size:13px;
}
.ad-placeholder-label{text-transform:none; letter-spacing:.3px;}

.affiliate{max-width:1200px; margin:40px auto 0; padding:0 20px;}
.affiliate__disclosure{color:var(--text-muted); font-size:13px; max-width:70ch;}
.affiliate__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:16px;
}
.affiliate__card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-card);
}
.affiliate__card h3{font-size:16px; margin-bottom:6px;}
.affiliate__card p{font-size:14px; color:var(--text-muted); margin:0 0 14px;}

/* ==========================================================================
   SEO content + FAQ
   ========================================================================== */
.seo-content, .faq{max-width:760px; margin:40px auto 0; padding:0 20px;}
.seo-content h2{font-size:22px; margin-top:1.6em;}
.seo-content p{color:#3A3F4B; font-size:15.5px;}
.faq h2{font-size:22px;}
.faq__item{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; margin-bottom:10px;
}
.faq__item summary{font-weight:600; cursor:pointer; color:var(--navy);}
.faq__item p{color:var(--text-muted); margin:10px 0 2px; font-size:15px;}

/* ==========================================================================
   Builder shell
   ========================================================================== */
.builder{max-width:1300px; margin:0 auto; padding:0 20px 20px;}

.type-select{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.type-select__btn{
  border:1px solid var(--border-strong); background:#fff; color:var(--text);
  padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer;
}
.type-select__btn.is-active{background:var(--navy); border-color:var(--navy); color:#fff;}

.template-select{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:18px;
}
.template-swatch{
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:10px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:8px;
}
.template-swatch.is-active{border-color:var(--gold); box-shadow:0 0 0 3px rgba(180,132,42,.18);}
.template-swatch__preview{
  display:block; height:64px; border-radius:6px; background:var(--bg);
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.template-swatch__preview::before, .template-swatch__preview::after{content:""; position:absolute; background:var(--border-strong);}
.template-swatch__preview--classic::before{top:8px; left:8px; right:8px; height:6px; background:var(--navy);}
.template-swatch__preview--classic::after{top:22px; left:8px; right:24px; height:26px;}
.template-swatch__preview--modern::before{top:0; bottom:0; left:0; width:20px; background:var(--navy);}
.template-swatch__preview--modern::after{top:10px; left:28px; right:8px; height:34px;}
.template-swatch__preview--minimal::before{top:10px; left:10px; right:10px; height:3px;}
.template-swatch__preview--minimal::after{top:20px; left:10px; right:30px; height:24px;}
.template-swatch__preview--twocolumn::before{top:0; bottom:0; left:0; width:26px; background:var(--gold);}
.template-swatch__preview--twocolumn::after{top:10px; left:34px; right:8px; height:34px;}
.template-swatch__preview--biodata::before{top:8px; right:8px; width:14px; height:14px; border-radius:3px; background:var(--navy);}
.template-swatch__preview--biodata::after{top:10px; left:8px; right:30px; height:34px;}
.template-swatch__label{font-size:12.5px; font-weight:600; color:var(--text);}
.template-swatch__label em{display:block; font-style:normal; color:var(--gold); font-size:11px; font-weight:700;}

/* Toolbar */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 16px; margin-bottom:16px;
}
.toolbar__completion{display:flex; align-items:center; gap:10px;}
.completion-ring{
  --pct:0;
  width:44px; height:44px; border-radius:50%; flex:none;
  background:conic-gradient(var(--gold) calc(var(--pct)*1%), var(--border) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.completion-ring::before{content:""; position:absolute; inset:4px; border-radius:50%; background:#fff;}
.completion-ring span{position:relative; font-size:11px; font-weight:700; color:var(--navy);}
.toolbar__completion-label{font-size:13px; color:var(--text-muted);}
.toolbar__actions{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto;}
.toolbar__msg{flex-basis:100%; font-size:13px; color:var(--gold); font-weight:600; margin:0;}

/* Buttons */
.btn{
  font-family:var(--font-ui); font-size:14px; font-weight:600; border-radius:8px;
  padding:9px 14px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn--sm{padding:6px 10px; font-size:13px;}
.btn--primary{background:var(--gold); color:#26190B; border-color:var(--gold);}
.btn--primary:hover{background:#a4771f;}
.btn--outline{background:#fff; border-color:var(--border-strong); color:var(--navy);}
.btn--outline:hover{border-color:var(--navy);}
.btn--ghost{background:transparent; border-color:transparent; color:var(--text-muted);}
.btn--ghost:hover{color:var(--danger); }
.btn--danger{color:var(--danger);}
.btn--mobile-preview{display:none; width:100%; margin-bottom:14px;}

/* ==========================================================================
   Editor / Preview grid
   ========================================================================== */
.builder__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start;}

.editor{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; max-height:none;
}
.privacy-note{font-size:13px; color:var(--text-muted); background:#F0F4EF; border:1px solid #DCE8DA; padding:8px 12px; border-radius:8px; margin:0 0 14px;}

.acc{border-bottom:1px solid var(--border); padding:4px 0;}
.acc:last-child{border-bottom:none;}
.acc summary{
  font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--navy);
  padding:12px 4px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::before{content:"+"; color:var(--gold); font-size:18px; width:18px; text-align:center;}
.acc[open] summary::before{content:"–";}
.acc__body{padding:6px 4px 14px;}

.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--text-muted); font-weight:600;}
.field--wide{grid-column:1 / -1;}
.field input, .field select, .field textarea, .repeat-card input, .repeat-card select, .repeat-card textarea{
  font-family:var(--font-ui); font-size:14px; padding:9px 10px; border:1px solid var(--border-strong);
  border-radius:7px; color:var(--text); background:#fff; width:100%;
}
.field textarea{resize:vertical;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--text); margin:8px 0;}

.photo-upload{display:flex; gap:16px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.photo-upload__preview{
  width:76px; height:76px; border-radius:8px; background:var(--bg); border:1px dashed var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-muted); overflow:hidden; flex:none;
}
.photo-upload__preview img{width:100%; height:100%; object-fit:cover;}
.photo-upload__controls{display:flex; flex-direction:column; gap:8px;}
.photo-upload__controls .checkbox-row{margin:0;}

.segmented{display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; padding:3px; margin-bottom:10px;}
.segmented__btn{border:none; background:transparent; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer;}
.segmented__btn.is-active{background:var(--navy); color:#fff;}

.repeat-card{
  border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; background:#FAFBFC;
  display:grid; gap:10px; grid-template-columns:1fr 1fr;
}
.repeat-card--full{grid-template-columns:1fr;}
.repeat-card .field--wide{grid-column:1/-1;}
.repeat-card__row-full{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.repeat-card__remove{background:none; border:none; color:var(--danger); font-size:13px; font-weight:700; cursor:pointer;}
.btn--add{margin:4px;}

.tag-input{border:1px solid var(--border-strong); border-radius:8px; padding:8px; display:flex; flex-wrap:wrap; gap:6px;}
.tag-input__tags{display:flex; flex-wrap:wrap; gap:6px;}
.tag{
  background:var(--navy); color:#fff; font-size:12.5px; font-weight:600; padding:5px 8px 5px 10px;
  border-radius:999px; display:flex; align-items:center; gap:6px;
}
.tag button{background:none; border:none; color:#C9D2E3; cursor:pointer; font-size:13px; line-height:1;}
.tag-input input{border:none; outline:none; flex:1; min-width:120px; font-size:14px; padding:6px;}

/* ==========================================================================
   PREVIEW / RESUME (A4)
   ========================================================================== */
.preview{position:sticky; top:12px; align-self:start;}
.preview__stage{
  background:#E7E9EE; border-radius:var(--radius); padding:20px; display:flex; justify-content:center;
  max-height:calc(100vh - 24px); overflow:auto;
}
.resume{
  width:210mm; min-height:297mm; background:#fff; box-shadow:0 4px 18px rgba(20,30,50,.18);
  padding:16mm 15mm; color:#232733; font-family:var(--font-serif); font-size:12.5px; line-height:1.5;
}
.r-name{font-size:26px; font-weight:700; color:var(--navy); margin:0 0 2px;}
.r-title{font-size:14px; color:var(--gold); font-weight:600; margin:0 0 10px;}
.r-contact{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; color:#4A5160; margin-bottom:14px; font-family:var(--font-ui);}
.r-section{margin-bottom:14px;}
.r-heading{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--navy);
  border-bottom:1.5px solid var(--navy); padding-bottom:4px; margin-bottom:8px; font-family:var(--font-ui);
}
.r-item{margin-bottom:8px;}
.r-item__top{display:flex; justify-content:space-between; gap:10px; font-weight:700; font-size:12.5px;}
.r-item__sub{font-size:11.5px; color:#4A5160; font-style:italic; margin:1px 0 3px;}
.r-item__desc{font-size:11.8px; color:#333846; white-space:pre-line;}
.r-photo{width:88px; height:88px; object-fit:cover; border-radius:8px; float:right; margin-left:14px;}
.r-skills{display:flex; flex-wrap:wrap; gap:6px;}
.r-skill-chip{background:#EEF1F6; border-radius:5px; padding:3px 9px; font-size:11px; font-family:var(--font-ui);}
.r-declaration{font-size:11.5px; color:#3A3F4B; margin-top:6px;}
.r-decl-row{display:flex; justify-content:space-between; margin-top:18px; font-size:11.5px;}
.r-empty-hint{color:#8A93A3; font-style:italic; text-align:center; padding:40px 20px;}

/* --- Template: Classic Professional --- */
.resume[data-template="classic"] .r-header{border-bottom:3px double var(--navy); padding-bottom:10px; margin-bottom:14px;}
.resume[data-template="classic"] .r-name{text-align:left;}

/* --- Template: Modern --- */
.resume[data-template="modern"]{font-family:var(--font-ui); padding:0;}
.resume[data-template="modern"] .r-header{
  background:var(--navy); color:#fff; padding:16mm 15mm 14mm; margin-bottom:14px;
}
.resume[data-template="modern"] .r-name{color:#fff;}
.resume[data-template="modern"] .r-title{color:var(--gold);}
.resume[data-template="modern"] .r-contact{color:#C9D2E3;}
.resume[data-template="modern"] .r-body{padding:0 15mm 16mm;}
.resume[data-template="modern"] .r-heading{border-bottom:none; background:#EEF1F6; padding:6px 10px; border-radius:6px;}
.resume[data-template="modern"] .r-photo{border-radius:50%;}

/* --- Template: Simple / Minimal (ATS) --- */
.resume[data-template="minimal"]{font-family:var(--font-ui);}
.resume[data-template="minimal"] .r-name{color:#111; font-weight:700;}
.resume[data-template="minimal"] .r-title{color:#444; font-weight:500;}
.resume[data-template="minimal"] .r-heading{color:#111; border-bottom:1px solid #999; text-transform:none; letter-spacing:0;}
.resume[data-template="minimal"] .r-photo{display:none;}
.resume[data-template="minimal"] .r-header{border-bottom:1px solid #ccc; padding-bottom:8px;}

/* --- Template: Professional Two-Column --- */
.resume[data-template="twocolumn"]{
  font-family:var(--font-ui); padding:0; display:grid; grid-template-columns:62mm 1fr; min-height:297mm;
}
.resume[data-template="twocolumn"] .r-sidebar{
  background:var(--navy); color:#fff; padding:16mm 10mm; grid-column:1;
}
.resume[data-template="twocolumn"] .r-sidebar .r-heading{color:var(--gold); border-bottom:1px solid rgba(255,255,255,.3);}
.resume[data-template="twocolumn"] .r-sidebar .r-contact{flex-direction:column; color:#D8DEEA;}
.resume[data-template="twocolumn"] .r-sidebar .r-skill-chip{background:rgba(255,255,255,.12); color:#fff;}
.resume[data-template="twocolumn"] .r-main{grid-column:2; padding:16mm 14mm;}
.resume[data-template="twocolumn"] .r-photo{float:none; border-radius:50%; margin:0 auto 14px; display:block;}
.resume[data-template="twocolumn"] .r-name{color:#fff; font-size:20px; text-align:center;}
.resume[data-template="twocolumn"] .r-title{color:var(--gold); text-align:center;}

/* --- Template: Indian Bio-Data --- */
.resume[data-template="biodata"]{border:2px solid var(--navy);}
.resume[data-template="biodata"] .r-header{
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:2px solid var(--navy); padding-bottom:10px; margin-bottom:14px;
}
.resume[data-template="biodata"] .r-name{text-align:center; width:100%;}
.resume[data-template="biodata"] .r-title{text-align:center;}
.resume[data-template="biodata"] .r-bio-title{
  text-align:center; text-transform:uppercase; letter-spacing:2px; font-size:15px; font-weight:700;
  color:var(--navy); margin-bottom:6px; font-family:var(--font-ui);
}
.resume[data-template="biodata"] .r-bio-table{width:100%; border-collapse:collapse; font-size:12px;}
.resume[data-template="biodata"] .r-bio-table td{padding:4px 6px; border-bottom:1px solid #eee; vertical-align:top;}
.resume[data-template="biodata"] .r-bio-table td:first-child{font-weight:700; width:40%; color:var(--navy);}

/* ==========================================================================
   Print / PDF-safe layout
   ========================================================================== */
.field input, .field select, .field textarea,
.repeat-card input, .repeat-card select, .repeat-card textarea{
  cursor:text;
}
.repeat-card select,
.field select,
input[type="date"]{
  cursor:pointer;
}
.repeat-card .checkbox-row input[type="checkbox"]{
  cursor:pointer;
}
.r-personal-details,
.r-personal-info-table,
.r-hobbies{
  break-inside:auto;
}

@page{
  size:A4 portrait;
  margin:0;
}

/* Hidden helper used only while html2pdf captures a clean A4-flow clone. */
.pdf-export-holder{
  position:absolute;
  left:0;
  top:0;
  width:210mm;
  background:#fff;
  z-index:-10;
  overflow:visible;
}
.pdf-export-holder .resume-pdf-export{
  display:block;
  position:relative;
  width:210mm;
  min-height:0;
  height:auto;
  margin:0;
  box-shadow:none;
  overflow:visible;
  padding:14mm 15mm;
  background:#fff;
  box-sizing:border-box;
}
.pdf-export-holder .resume-pdf-export[data-template="modern"]{
  padding:0;
}
.pdf-export-holder .resume-pdf-export[data-template="twocolumn"]{
  padding:0;
  min-height:0;
}
.pdf-export-holder .resume-pdf-export[data-template="twocolumn"] .r-sidebar,
.pdf-export-holder .resume-pdf-export[data-template="twocolumn"] .r-main{
  break-inside:auto;
}

.r-personal-details{margin-top:0;}
.r-personal-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e8ebef;border-bottom:0;}
.r-personal-row{display:grid;grid-template-columns:minmax(95px,38%) 1fr;gap:8px;padding:5px 7px;border-bottom:1px solid #e8ebef;font-size:11.2px;min-width:0;}
.r-personal-row:nth-child(odd){border-right:1px solid #e8ebef;}
.r-personal-row strong{font-family:var(--font-ui);color:var(--navy);}
.r-personal-row span{overflow-wrap:anywhere;word-break:break-word;}

.resume-pdf-export .r-section{
  break-before:auto !important;
  break-after:auto !important;
}
.resume-pdf-export .r-item,
.resume-pdf-export .r-personal-row,
.resume-pdf-export .r-declaration{
  break-inside:avoid-page;
  page-break-inside:avoid;
}
@media print{
  html, body{
    width:100%;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }
  body{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Print ONLY the resume. Everything else is removed from the print flow. */
  .site-header,
  .page-intro,
  .ad-container,
  .builder > .type-select,
  .builder > .template-select,
  .toolbar,
  .btn--mobile-preview,
  #editorPanel,
  .affiliate,
  .seo-content,
  .faq,
  .site-footer{
    display:none !important;
  }

  main,
  .builder,
  .builder__grid,
  .preview,
  .preview__stage{
    display:block !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border:0 !important;
    box-shadow:none !important;
  }

  #resume{
    display:block !important;
    position:relative !important;
    width:210mm !important;
    min-width:210mm !important;
    max-width:210mm !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:14mm 15mm !important;
    box-shadow:none !important;
    overflow:visible !important;
    background:#fff !important;
  }

  #resume[data-template="modern"]{
    padding:0 !important;
  }
  #resume[data-template="modern"] .r-body{
    padding:0 15mm 14mm !important;
  }
  #resume[data-template="twocolumn"]{
    display:grid !important;
    grid-template-columns:62mm 1fr !important;
    width:210mm !important;
    max-width:210mm !important;
    padding:0 !important;
  }
  #resume[data-template="twocolumn"] .r-sidebar{
    grid-column:1;
    padding:14mm 10mm;
  }
  #resume[data-template="twocolumn"] .r-main{
    grid-column:2;
    padding:14mm 14mm;
  }
  #resume[data-template="biodata"]{
    padding:12mm 13mm !important;
  }

  .r-section{
    break-inside:auto;
    page-break-inside:auto;
  }
  .r-item,
  .r-personal-row,
  .r-declaration{
    break-inside:avoid-page;
    page-break-inside:avoid;
  }
  .r-heading{
    break-after:avoid-page;
    page-break-after:avoid;
  }
  .r-section .r-heading + *{
    orphans:2;
    widows:2;
  }
  img{
    max-width:100% !important;
  }
  a{
    color:inherit !important;
    text-decoration:none !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .builder__grid{grid-template-columns:1fr;}
  .preview{position:static;}
  .preview__stage{max-height:none;}
  .btn--mobile-preview{display:block;}
  #previewPanel{display:none;}
  #previewPanel.is-visible{display:block;}
  .resume{width:100%; min-height:auto;}
  .preview__stage{padding:10px; overflow:visible;}
  .template-select{grid-template-columns:repeat(2,1fr);}
  .toolbar__actions{margin-left:0; width:100%;}
  .toolbar__actions .btn{flex:1 1 45%;}
}
@media (max-width: 600px){
  .field-grid{grid-template-columns:1fr;}
  .repeat-card{grid-template-columns:1fr;}
  .site-nav{display:none;}
  .template-select{grid-template-columns:repeat(2,1fr);}
}


/* ===================== MONETIZATION ===================== */
.resume-adsense-wrap{
  width:min(100% - 2rem, 970px);
  min-height:90px;
  margin:1rem auto 1.5rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
.resume-affiliate-section{
  width:min(100% - 2rem, 980px);
  margin:1.5rem auto 2rem;
  text-align:center;
}
.resume-affiliate-label,
.resume-affiliate-sticky-label{
  color:#6b7280;
  font-size:.82rem;
  font-weight:600;
  margin-bottom:.45rem;
}
.resume-affiliate-section a,
.resume-affiliate-sticky a{
  display:block;
  text-decoration:none;
}
.resume-affiliate-image{
  display:block;
  width:min(100%, 760px);
  height:auto;
  max-height:520px;
  object-fit:contain;
  margin:0 auto;
  border:1px solid #d9e2ec;
  border-radius:14px;
  background:#fff;
}
.resume-affiliate-sticky{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%, 760px);
  max-height:300px;
  padding:8px 42px 8px 8px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #d9e2ec;
  border-bottom:0;
  border-radius:14px 14px 0 0;
  box-shadow:0 -5px 22px rgba(15,61,92,.16);
  z-index:9998;
  text-align:center;
}
.resume-affiliate-sticky img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:245px;
  object-fit:contain;
  margin:0 auto;
}
.resume-affiliate-close{
  position:absolute;
  top:6px;
  right:7px;
  width:30px;
  height:30px;
  border:1px solid #cbd5e1;
  border-radius:50%;
  background:#fff;
  color:#334155;
  font-size:22px;
  line-height:26px;
  cursor:pointer;
  z-index:2;
}
.resume-affiliate-close:hover{background:#f1f5f9;}
body.has-resume-affiliate-sticky{padding-bottom:305px;}

@media (max-width:760px){
  .resume-affiliate-image{max-height:360px;}
  .resume-affiliate-sticky{display:none !important;}
  body.has-resume-affiliate-sticky{padding-bottom:0;}
}

@media print{
  .resume-adsense-wrap,
  .resume-affiliate-section,
  .resume-affiliate-sticky{
    display:none !important;
  }
}