/* ==========================================================================
   Order form redesign - ported from the collegeessay.org order page
   (new-land/css/order-form-redesign.min.css) and recoloured to this site's
   brand teal. Structure, spacing and sizing are kept identical; only the
   palette changes:

     #233F8C / #3B82F6 / #7C97EB  (CollegeEssay blue)  ->  #05ADA3  (brand teal)
     #2563EB            (button hover)                 ->  #048E86
     #F0F8FF / #EFF6FF  (pale blue fill)               ->  #EAFBF9
     #DBEAFE / #BFDBFE  (pale blue border)             ->  #B2E6E3
     #1E40AF            (tips copy)                    ->  #046761

   Neutrals (slate greys), the required-field red and the urgent-deadline
   amber are unchanged, as on the reference.
   ========================================================================== */

:root {
  --ofr-teal: #05ADA3;
  --ofr-teal-d: #048E86;
  --ofr-teal-pale: #EAFBF9;
  --ofr-teal-bd: #B2E6E3;
  --ofr-teal-ink: #046761;
}

/* ---------- step 1: heading ---------- */
.calculatePrice .form-main-title {
  font-size: 32px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 1.2;
}
.calculatePrice .form-subtitle {
  font-size: 15px;
  color: #7c8ca3;
  margin-bottom: 36px;
  margin-top: 0;
}

/* ---------- labels ---------- */
.calculatePrice .inputGroup label {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 1px;
}
.calculatePrice .inputGroup label .required { color: #df4d4d; margin-left: 2px; }

/* ---------- tooltips ---------- */
.tooltip-icon {
  display: inline-flex;
  cursor: help;
  opacity: .6;
  transition: opacity .2s;
  position: relative;
}
.tooltip-icon:hover { opacity: 1; }
.tooltip-icon[title] { position: relative; top: 4px; }
.tooltip-icon[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  z-index: 1000;
  pointer-events: none;
}
.tooltip-icon[title]:hover::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  border: 4px solid transparent;
  border-top-color: #1e293b;
  z-index: 1000;
  pointer-events: none;
}

/* ---------- selects ---------- */
.calculatePrice .inputGroup select {
  font-size: 14px;
  color: #202124;
  padding: 13px 40px 13px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: all .2s;
}
.calculatePrice .inputGroup select:hover { border-color: var(--ofr-teal); }
.calculatePrice .inputGroup select:focus { border: 1px solid var(--ofr-teal); }

.calculatePrice .formGroup { display: flex; flex-direction: column; gap: 20px; }
.calculatePrice .formGroup > .inputGroup.selectGroup { width: 100%; }

.calculatePrice .dateGroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
}
.calculatePrice .dateGroup .inputGroup { margin-bottom: 0; width: 100%; }
.calculatePrice .dateGroup .inputGroup:first-child { flex-basis: auto; }

/* ---------- pages stepper ---------- */
.calculatePrice .pageInput {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  max-width: 100%;
  width: 100%;
}
/* order-new.css caps .freePagesWrapper at 270px, which leaves the plus button
   stranded outside the field; the redesign wants it to fill .pageInput */
.calculatePrice .freePagesWrapper { position: relative; width: 100%; max-width: none; }
.calculatePrice .pageInput input {
  max-width: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #202124;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 13px 55px;
  margin: 0;
  background: #fff;
  height: 48px;
}
.calculatePrice .pageInput input:hover { border-color: var(--ofr-teal); }
.calculatePrice .pageInput input:focus { border: 1px solid var(--ofr-teal); outline: 0; }
.calculatePrice .pageInput a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 48px;
  border-radius: 6px;
  background: 0 0;
  transition: all .2s;
  cursor: pointer;
  position: absolute;
  padding: 0;
  border: none;
}
.calculatePrice .pageInput a#minusPage { left: 0; z-index: 1; border-radius: 6px 0 0 6px; }
.calculatePrice .pageInput a#plusPage { right: 0; border-radius: 0 6px 6px 0; }
.calculatePrice .pageInput a:hover:not([disabled]) { background: var(--ofr-teal-pale); }
.calculatePrice .pageInput a:hover:not([disabled]) svg path { fill: var(--ofr-teal); }
.calculatePrice .pageInput a[disabled] { pointer-events: none; opacity: 1; cursor: not-allowed; }
.calculatePrice .pageInput a[disabled] svg path { fill: #CBD5E1 !important; }
/* order-new.css swaps two stacked icons inside #minusPage - a normal one and a
   greyed one - by hiding `#minusPage svg:last-child` and, when disabled,
   `#minusPage svg:first-child`. The redesign ships a single icon, which is both
   the first and the last child, so it matched a hide rule in either state and
   never drew. One icon, always shown; the disabled tint below does the rest. */
.calculatePrice .pageInput a#minusPage svg,
.calculatePrice .pageInput a#minusPage[disabled] svg { display: block; }

.calculatePrice .pageInput a svg { width: 16px; height: 16px; }
.calculatePrice .pageInput a svg path { fill: var(--ofr-teal) !important; transition: fill .2s; }
.calculatePrice .pageInput a#minusPage svg path { fill: var(--ofr-teal) !important; }
.calculatePrice .pageInput a#minusPage[disabled] svg path { fill: #94A3B8 !important; }
.calculatePrice .pageInput a#plusPage svg path { fill: var(--ofr-teal) !important; }
.calculatePrice .pageInput a#plusPage[disabled] svg path { fill: #94A3B8 !important; }
.calculatePrice .pageToWord {
  font-size: 12px;
  color: #a1acb9;
  margin-top: 6px;
  margin-bottom: 0;
  text-align: left;
  display: block;
}

/* ---------- deadline button grid ---------- */
.deadline-section .deadLabel {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.deadline-buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.deadline-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #fff;
  border: 1.5px solid #e6f4f3;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  min-height: 88px;
}
.deadline-btn:hover {
  border-color: var(--ofr-teal);
  background: var(--ofr-teal-pale);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 173, 163, .16);
}
.deadline-btn.active {
  border-color: var(--ofr-teal);
  background: var(--ofr-teal-pale);
  box-shadow: 0 4px 12px rgba(5, 173, 163, .2);
}
.deadline-btn.urgent { border-color: #fef3c7; background: #fffbeb; }
.deadline-btn.urgent.active,
.deadline-btn.urgent:hover { border-color: #f59e0b; background: #fef3c7; }
.deadline-btn .deadline-time {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
  display: block;
}
.deadline-btn .deadline-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ofr-teal);
  background: var(--ofr-teal-pale);
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
  display: inline-block;
}
.deadline-btn.urgent .deadline-badge { background: #fef3c7; color: #d97706; }
.deadline-btn .deadline-date { font-size: 12px; color: #a1acb9; margin-top: 2px; }

/* ---------- unlock price ---------- */
.unlock-price-header {
  text-align: center;
  margin: 20px 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unlock-price-header::after,
.unlock-price-header::before { content: ''; flex: 1; border-bottom: 1px solid #e5e7eb; }
.unlock-price-header::before { margin-right: 24px; }
.unlock-price-header::after { margin-left: 24px; }
.unlock-price-header h3 {
  font-size: 12px;
  font-weight: 400;
  color: #c7ccd1;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.unlock-price-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--ofr-teal-pale);
  border: 1px solid var(--ofr-teal-bd);
  border-radius: 8px;
  margin: 20px 0 0 0;
}
.unlock-price-info svg { flex-shrink: 0; margin-top: 2px; }
.unlock-price-info svg rect { fill: var(--ofr-teal-pale); }
.unlock-price-info svg path { stroke: var(--ofr-teal); }
.unlock-price-info p { margin: 0; font-size: 14px; line-height: 1.6; color: #0f172a; }
.unlock-price-info strong { font-weight: 600; color: var(--ofr-teal-ink); }

.contact-fields-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 0;
  margin-bottom: 0;
}
.contact-fields-group .inputGroup { margin-bottom: 0; }
.contact-fields-group input {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 13px 16px;
  font-size: 14px;
  color: #202124;
}
.contact-fields-group input::placeholder { color: #a1acb9; }
.contact-fields-group input:hover { border: 1px solid var(--ofr-teal); }
.contact-fields-group input:focus { border: 1px solid var(--ofr-teal); }

/* ---------- which step panel occupies the layout ----------
   order-new.css hides a panel with `visibility:hidden`, which still reserves
   its full 770px slot in the .formBody flex row. With three panels in the
   markup the row wrapped, so the Extras panel rendered on a new line *below*
   the invisible step 1 - about 960px of blank space above "Enhance Your Order".
   #step2-2 already toggles `display` rather than visibility; this brings the
   other panels in line so only the active one takes up space. The legacy
   position:absolute juggling in validation.js exists to work around the same
   problem and is now redundant, but harmless. */
.formBody > .orderForm:not(.show) { display: none; }

/* ---------- step 2: sectioned cards ---------- */
#step2 .provideDetails .formGroup { display: flex; flex-direction: column; gap: 32px; }

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.section-header-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-header-icon svg { width: 20px; height: 20px; }
.section-header h3 { font-size: 16px; font-weight: 600; color: #1e293b; margin: 0; }

.paper-settings-section,
.essay-details-section,
.attachments-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
.paper-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.paper-settings-grid .inputGroup { margin-bottom: 0; }
.essay-details-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.citation-sources-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.attachments-section .attachLbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 2px dashed var(--ofr-teal-bd);
  border-radius: 12px;
  padding: 48px 24px;
  background: #f8fafc;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.attachments-section .attachLbl:hover { border-color: var(--ofr-teal); background: var(--ofr-teal-pale); }
.attachments-section .attachLbl svg { margin-bottom: 8px; }
.attachments-section .attachLbl .text { display: flex; flex-direction: column; gap: 8px; }
.attachments-section .attachLbl .main { font-size: 15px; font-weight: 500; color: var(--ofr-teal); margin: 0; }
.attachments-section .attachLbl .desc { font-size: 13px; color: #9fb5d3; margin: 0; }

#step2 .inputGroup label {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#step2 .inputGroup input[type=text],
#step2 .inputGroup select,
#step2 .inputGroup textarea {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 13px 16px;
  font-size: 14px;
  color: #202124;
  transition: all .2s;
  width: 100%;
}
#step2 .inputGroup input:hover,
#step2 .inputGroup select:hover,
#step2 .inputGroup textarea:hover { border-color: var(--ofr-teal); }
#step2 .inputGroup input:focus,
#step2 .inputGroup select:focus,
#step2 .inputGroup textarea:focus { border: 1px solid var(--ofr-teal); outline: 0; }
#step2 .inputGroup textarea { min-height: 120px; resize: vertical; }
#step2 .inputGroup .optional { font-size: 13px; font-weight: 400; color: #64748b; }
#step2 .inputGroup .required { color: #ef4444; }
#step2 input[type=file] { display: none; }

#step2 .orderBtns { display: flex; justify-content: space-between; gap: 16px; }
#step2 .orderBtns .prevBtn {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #1e293b;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
}
#step2 .orderBtns .prevBtn:hover { background: #f8fafc; border-color: var(--ofr-teal); }
#step2 .orderBtns .nextBtn {
  background: var(--ofr-teal);
  border: none;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
}
#step2 .orderBtns .nextBtn:hover { background: var(--ofr-teal-d); }

/* ---------- select2 inside the new grids ----------
   The themed selects are select2 widgets: the native <select> is collapsed to
   1px and the visible control is the sibling .select2-container, which select2
   sizes with an inline width at init. The legacy full-width rule keyed off the
   old markup, so the rebuilt rows (paper settings, citation/sources, admission
   preferences) need it restated - hence !important, to beat the inline width. */
.calculatePrice .inputGroup .select2-container,
.admissionFieldsRow .select2-container,
.paper-settings-grid .select2-container,
.citation-sources-row .select2-container,
.admission-preferences-row .select2-container,
#step2 .inputGroup .select2-container,
#step2-admission .inputGroup .select2-container { width: 100% !important; }

/* ---------- Work Type: collapsible option groups ----------
   Scoped to .wt-dd, which order-worktype.js puts on this one select's select2
   dropdown. Collapsing in CSS (rather than from JS after paint) is what stops
   the full 41-item list flashing open before it folds shut. */
.wt-dd .select2-results__options--nested { display: none; }
.wt-dd .select2-results__option[role="group"].wt-open > .select2-results__options--nested { display: block; }

.wt-dd .select2-results__group {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 10px 34px 10px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ofr-teal-ink);
  background: var(--ofr-teal-pale);
  border-bottom: 1px solid var(--ofr-teal-bd);
  user-select: none;
}
.wt-dd .select2-results__group:hover { background: #ddf6f4; }

/* caret, rotated when the group is open */
.wt-dd .select2-results__group::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s;
  opacity: .7;
}
.wt-dd .select2-results__option[role="group"].wt-open > .select2-results__group::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.wt-dd .select2-results__options--nested .select2-results__option { padding-left: 26px; }

@media (prefers-reduced-motion: reduce) {
  .wt-dd .select2-results__group::after { transition: none; }
}

/* ---------- admission branch ---------- */
.admissionFieldsRow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admissionFieldsRow .inputGroup { margin-bottom: 0; }

.admission-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
.section-header-with-icon { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.section-header-with-icon svg { flex-shrink: 0; width: 24px; height: 24px; }
.section-title { font-size: 18px; font-weight: 600; color: #1e293b; margin: 0; }
.section-description {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
  margin-top: 0;
  line-height: 1.5;
}
.admission-preferences-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.upload-area {
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all .2s;
}
.upload-area:hover { background: #f3f4f6; border-color: var(--ofr-teal); }
.upload-area svg { margin: 0 auto 12px; width: 40px; height: 40px; }
.upload-area p { margin: 0; font-size: 14px; color: #6b7280; }
.upload-area p.main { font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.upload-area p.desc { font-size: 13px; color: #9ca3af; margin-top: 4px; }

.admission-tips-section {
  background: var(--ofr-teal-pale);
  border: 1px solid var(--ofr-teal-bd);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.tips-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tips-header svg { flex-shrink: 0; width: 20px; height: 20px; }
.tips-header h4 { font-size: 15px; font-weight: 600; color: var(--ofr-teal-ink); margin: 0; }
.tips-list { margin: 0; list-style: none; padding-left: 0; }
.tips-list li {
  font-size: 14px;
  color: var(--ofr-teal-ink);
  line-height: 1.6;
  margin-bottom: 6px;
  position: relative;
  padding-left: 20px;
}
.tips-list li:last-child { margin-bottom: 0; }
ul.tips-list li svg { position: absolute; left: 0; top: 5px; }

.characterCount { text-align: right; font-size: 12px; color: #6b7280; margin-top: 4px; }
.admission-section .inputGroup { margin-bottom: 24px; }
.admission-section .inputGroup:last-of-type { margin-bottom: 0; }
#target_schools_group { margin-bottom: 20px; }
#intended_major_group { margin-bottom: 20px; }

/* the admission panel reuses the #step2 field styling */
#step2-admission .inputGroup label {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#step2-admission .inputGroup input[type=text],
#step2-admission .inputGroup select,
#step2-admission .inputGroup textarea {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 13px 16px;
  font-size: 14px;
  color: #202124;
  transition: all .2s;
  width: 100%;
}
#step2-admission .inputGroup input:hover,
#step2-admission .inputGroup select:hover,
#step2-admission .inputGroup textarea:hover { border-color: var(--ofr-teal); }
#step2-admission .inputGroup input:focus,
#step2-admission .inputGroup select:focus,
#step2-admission .inputGroup textarea:focus { border: 1px solid var(--ofr-teal); outline: 0; }
#step2-admission .inputGroup textarea { min-height: 120px; resize: vertical; }
#step2-admission .inputGroup .optional { font-size: 13px; font-weight: 400; color: #64748b; }
#step2-admission .inputGroup .required { color: #ef4444; }
#step2-admission input[type=file] { display: none; }
#step2-admission .attachLbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--ofr-teal-bd);
  border-radius: 12px;
  padding: 28px 24px;
  background: #f8fafc;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
#step2-admission .attachLbl:hover { border-color: var(--ofr-teal); background: var(--ofr-teal-pale); }
#step2-admission .attachLbl .main { font-size: 15px; font-weight: 500; color: var(--ofr-teal); margin: 0 0 4px; }
#step2-admission .attachLbl .desc { font-size: 13px; color: #9fb5d3; margin: 0; }
#step2-admission .orderBtns { display: flex; justify-content: space-between; gap: 16px; }
#step2-admission .orderBtns .prevBtn {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #1e293b;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
}
#step2-admission .orderBtns .prevBtn:hover { background: #f8fafc; border-color: var(--ofr-teal); }
#step2-admission .orderBtns .nextBtn {
  background: var(--ofr-teal);
  border: none;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
}
#step2-admission .orderBtns .nextBtn:hover { background: var(--ofr-teal-d); }

/* the word-count stepper mirrors the pages stepper */
.wordCountInput { display: flex; align-items: center; position: relative; width: 100%; }
.wordCountInput input {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #202124;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 13px 55px;
  margin: 0;
  background: #fff;
  height: 48px;
}
.wordCountInput input:hover { border-color: var(--ofr-teal); }
.wordCountInput input:focus { border: 1px solid var(--ofr-teal); outline: 0; }
.wordCountInput a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 48px;
  border-radius: 6px;
  transition: all .2s;
  cursor: pointer;
  position: absolute;
  padding: 0;
  border: none;
}
.wordCountInput a#minusWordCount { left: 0; z-index: 1; }
.wordCountInput a#plusWordCount { right: 0; }
.wordCountInput a:hover { background: var(--ofr-teal-pale); }
.wordCountInput a svg { width: 16px; height: 16px; }
.wordCountInput a svg path { fill: var(--ofr-teal) !important; }
/* the plus glyph ships white so it reads on a filled button; here it sits on
   the input's white ground, so it needs the teal fill like the minus */
.wordCountInput a#plusWordCount svg path { fill: var(--ofr-teal) !important; }

/* ---------- extras (add-ons) ---------- */
.formFields.bonuses .boostHead {
  font-size: 22px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}
.formFields.bonuses .boostDesc { font-size: 15px; color: #7c8ca3; margin: 0 0 24px; }
.addons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

/* orderBonus.css builds .singlebonus as a full-width horizontal row - icon,
   then text, then a fixed 186px button pushed right with margin-left:auto.
   At half width in this grid its minimum content width overflows the column
   (cards spilled ~27px past the grid and slid under the sidebar), so inside
   the grid the card becomes a two-row layout instead: icon + copy on top, the
   price button full width underneath. Selectors carry .formFields.bonuses so
   they outrank the originals rather than relying on load order. */
.formFields.bonuses .addons-grid .singlebonus {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 16px;
  margin-bottom: 0;              /* the grid gap spaces the cards now */
  padding: 22px 20px;
  height: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.formFields.bonuses .addons-grid .singlebonus:hover {
  border-color: var(--ofr-teal);
  box-shadow: 0 6px 18px -8px rgba(5, 173, 163, .4);
}
.formFields.bonuses .addons-grid .singlebonus .bonusSvg { grid-column: 1; grid-row: 1; }
.formFields.bonuses .addons-grid .singlebonus .bonus-about {
  grid-column: 2;
  grid-row: 1;
  padding-left: 0;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}
.formFields.bonuses .addons-grid .bonus-about p.head {
  display: block;
  font-size: 15.5px;
  line-height: 1.35;
  margin: 0;
}
.formFields.bonuses .addons-grid .bonus-about .desc {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.formFields.bonuses .addons-grid .bonus-about .bonusUSP {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  align-self: flex-start;
}

/* the price button drops to its own full-width row, pinned to the card foot so
   buttons line up across a row of unequal-height cards */
.formFields.bonuses .addons-grid .singlebonus .pricing {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  margin-left: 0;
  justify-content: stretch;
  flex-direction: column;
  gap: 4px;
}
.formFields.bonuses .addons-grid .singlebonus .pricing a.addOnBtn {
  width: 100%;
  max-width: none;
  height: 40px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
}

/* The remove badge shown on a selected add-on. orderBonus.css pinned it to
   a.addOnBtn with offsets measured for the old horizontal card, which in this
   grid put it in the middle. It is now a direct child of .singlebonus (already
   position:relative), so it anchors to the card's own top-right corner and
   stays there whatever height the card's copy takes. */
.formFields.bonuses .addons-grid .singlebonus > img.remove {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  width: 20px;
  height: 20px;
  display: none;
  z-index: 5;
  transition: transform .3s;
}
.formFields.bonuses .addons-grid .singlebonus.clicked > img.remove { display: block; }
.popular-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  background: var(--ofr-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}
.addons-grid .price-container { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.addons-grid .strikethrough { text-decoration: line-through; color: #94a3b8; font-weight: 500; }
.addons-grid .discount-badge {
  display: inline-block;
  margin-top: 4px;
  background: #fef3c7;
  color: #d97706;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}

/* ---------- stepper ----------
   Deliberately not styled here. order-stepper.css owns the progress row;
   duplicating the reference block in this sheet made two stylesheets fight
   over the same element (28px vs 36px circles, and white numerals landing
   on the light-grey idle fill). ---------- */

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .deadline-buttons-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .calculatePrice .form-main-title { font-size: 24px; }
  .calculatePrice .form-subtitle { font-size: 14px; }
  #step2 .orderBtns .prevBtn { font-size: 14px; }
  #step2 .orderBtns .nextBtn { border-radius: 5px !important; }
  .deadline-buttons-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .deadline-btn { padding: 14px 10px; min-height: 80px; }
  .deadline-btn .deadline-time { font-size: 14px; }
  .deadline-btn .deadline-badge { font-size: 10px; padding: 2px 8px; }
  .contact-fields-group { grid-template-columns: 1fr; gap: 16px; }
  .calculatePrice .dateGroup { grid-template-columns: 1fr; gap: 20px; }
  .calculatePrice .dateGroup .inputGroup { width: 100%; }
  .citation-sources-row,
  .paper-settings-grid { display: flex; grid-template-columns: 1fr; gap: 20px; flex-direction: column; }
  .attachments-section,
  .essay-details-section,
  .paper-settings-section { padding: 20px; }
  .addons-grid { grid-template-columns: 1fr; }

  .formGroup.contact-fields-group { padding: 14px 0 0; }
  #step2 .orderBtns { display: flex; justify-content: space-between; gap: 0; flex-direction: column; }
  .essay-details-grid { display: flex; grid-template-columns: 1fr; gap: 14px; flex-direction: column; }

  .admission-section { padding: 20px; }
  .attachments-section .attachLbl { padding: 40px 13px; }
  .attachments-section .attachLbl .desc { font-size: 12px; margin: 0; }
  .admission-preferences-row { grid-template-columns: 1fr; gap: 15px; }
  .admissionFieldsRow { grid-template-columns: 1fr; gap: 15px; }
  .section-title { font-size: 16px; }
  .section-description { font-size: 13px; }
  .attachments-section .attachLbl .main { font-size: 14px; color: var(--ofr-teal); }
  .tooltip-icon[title]:hover::after {
    white-space: unset;
    z-index: 1;
    max-width: max-content;
    width: 215px;
  }
}

@media (max-width: 480px) {
  .orderForm { padding: 30px 20px 60px 20px; }
  .calculatePrice .form-main-title { font-size: 20px; }
  .deadline-buttons-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .deadline-btn { padding: 12px 8px; min-height: 75px; }
  .deadline-btn .deadline-time { font-size: 13px; }
  .addons-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .deadline-btn,
  .calculatePrice .pageInput a,
  .attachments-section .attachLbl,
  #step2 .orderBtns .prevBtn,
  #step2 .orderBtns .nextBtn { transition: none; }
  .deadline-btn:hover { transform: none; }
}

/* ---------- no delivery strip on Extras ----------
   #step2-2 repeats the delivery promise under the nav buttons, but by this step
   the summary card already carries the deadline and the total, so the strip is
   duplicate copy sitting outside the card. JS writes an inline display on
   .deliveryDate when it fills it, hence !important on the wrapper. */
#step2-2 .deliveryWrapper { display: none !important; }

/* ---------- academic-only fields ----------
   Academic Level and Number of Pages price the academic branch only - admission
   work is priced from its service level and word count - so the whole row goes
   on that branch. A class rather than jQuery .hide()/.show(): .show() writes an
   inline display:block that would beat the grid above and stack the two fields
   on top of each other. Hiding the row rather than its two children also drops
   the .formGroup gap an empty grid would still have drawn. */
.calculatePrice .dateGroup.branch-hidden { display: none !important; }