/*
  The site admin's Add Company drawer (class.admin_company_drawer.php) — its own pieces on
  top of the process drawer look (process_drawer.css): the brand card that follows the
  fields, the confirm row in the footer and the done mark.

  NOTE: px throughout — lib/bootstrap_old makes a rem 10px on this site.
*/

/* ---- fields: plain inputs, stacked, a two-up row where two short ones pair ---- */

.acd_fields
{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.acd_fields .form-control
{
  height: 44px;
  padding: 8px 12px;
  font-size: 16px;   /* 16px stops ios zooming the page on focus */
  color: var(--pd_ink);
  background: #ffffff;
  border: 1.5px solid var(--pd_line);
  border-radius: 8px;
  box-shadow: none;
}
.acd_fields .form-control:focus { border-color: var(--pd_brand); box-shadow: none; }
.acd_fields .form-control::placeholder { color: var(--pd_faint); }
.acd_fields .acd_company { font-weight: 600; }
.acd_row
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 420px)
{
  .acd_row { grid-template-columns: 1fr; }
}
.admin_company_drawer_container .pd_label { margin-top: 14px; }

/* ---- the brand card: the company as it will read on the site ---- */

.acd_brand
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin: 0 0 16px;
  background: #ffffff;
  border: 1.5px solid var(--pd_line);
  border-radius: var(--pd_radius);
}
.acd_mark
{
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--pd_brand);
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.acd_mark_3 { font-size: 18px; letter-spacing: 0.3px; }
.acd_mark_4 { font-size: 15px; letter-spacing: 0; }
.acd_mark_empty { background: var(--pd_brand_wash); border: 1.5px dashed var(--pd_brand_edge); }
.acd_brand_text { min-width: 0; flex: 1; }
.acd_brand_name
{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pd_ink);
  overflow-wrap: anywhere;
}
.acd_brand_tags
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.acd_brand_tags:empty { display: none; }
.acd_tag
{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.6;
}
.acd_tag_abbr  { background: var(--pd_brand_wash); color: var(--pd_brand_deep); border: 1px solid var(--pd_brand_edge); }
.acd_tag_short { background: #f1f4f5; color: var(--pd_muted); border: 1px solid var(--pd_line); text-transform: none; letter-spacing: 0; }

/* ---- the confirm row in the footer, over the button ---- */

.acd_confirm_row
{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 4px 2px;
}
.acd_confirm_row .acd_confirm_box { flex: none; margin: 0; border-radius: 6px; }
.acd_confirm_row .acd_confirm_box .custom_checkbox_checker { top: 0; line-height: 1; }
.acd_confirm_text { font-size: 14px; font-weight: 700; line-height: 1.3; cursor: pointer; }

/* ---- done ---- */

.acd_done { text-align: center; padding: 28px 8px 8px; }
.acd_done .pd_question { margin-bottom: 8px; }
.acd_done_mark
{
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--pd_brand_wash);
  color: var(--pd_brand);
  font-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}