/*
 * Send Listy Core 0.714 — Complete List Optional Fields Icons
 * Parent: Core 0.713
 *
 * Add/Edit List only. No generic modal or global Core CSS is modified.
 */

/* Dedicated List Optional Fields identity directly below List Type. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-list-optional-primary > summary {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary .sl-list-optional-primary-icon {
  display:inline-grid !important;
  place-items:center !important;
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:10px !important;
  background:#edf8ef !important;
  color:#239944 !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary > summary > strong {
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:15px !important;
  font-weight:800 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary > summary .sl-optional-chevron {
  margin-inline-start:auto !important;
}

/* The existing Advanced Options disclosure remains closed by default; give the tab
   an explicit gear identity without changing its open/close mechanics. */
.send-list-app .sl-editor-actions-portal.sl-editor-actions-redesign
.sl-advanced-options-toggle .sl-advanced-options-tab-gear,
.send-list-app .sl-modal.is-create-list-modal
.sl-advanced-options-toggle .sl-advanced-options-tab-gear {
  display:inline-grid !important;
  place-items:center !important;
  width:27px !important;
  height:27px !important;
  flex:0 0 27px !important;
  border-radius:9px !important;
  background:#edf8ef !important;
  color:#24983c !important;
  font-size:21px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.send-list-app .sl-editor-actions-portal.sl-editor-actions-redesign
.sl-advanced-options-toggle,
.send-list-app .sl-modal.is-create-list-modal
.sl-advanced-options-toggle {
  min-width:205px !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

.send-list-app .sl-editor-actions-portal.sl-editor-actions-redesign
.sl-advanced-options-toggle .sl-advanced-options-state,
.send-list-app .sl-modal.is-create-list-modal
.sl-advanced-options-toggle .sl-advanced-options-state {
  margin-inline-start:auto !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-list-optional-primary .sl-list-optional-primary-icon,
.send-list-app.sl-dark-mode .sl-editor-actions-portal.sl-editor-actions-redesign
.sl-advanced-options-toggle .sl-advanced-options-tab-gear,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-advanced-options-toggle .sl-advanced-options-tab-gear {
  background:#213629 !important;
  color:#79df97 !important;
}

@media(max-width:767px){
  .send-list-app .sl-modal.is-create-list-modal
  .sl-list-optional-primary .sl-list-optional-primary-icon {
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    font-size:21px !important;
  }
  .send-list-app .sl-editor-actions-portal.sl-editor-actions-redesign
  .sl-advanced-options-toggle,
  .send-list-app .sl-modal.is-create-list-modal
  .sl-advanced-options-toggle {
    min-width:195px !important;
    padding-left:9px !important;
    padding-right:8px !important;
  }
  .send-list-app .sl-editor-actions-portal.sl-editor-actions-redesign
  .sl-advanced-options-toggle .sl-advanced-options-tab-gear,
  .send-list-app .sl-modal.is-create-list-modal
  .sl-advanced-options-toggle .sl-advanced-options-tab-gear {
    width:25px !important;
    height:25px !important;
    flex-basis:25px !important;
    font-size:20px !important;
  }
}


/* 0.712 — Canonical row geometry shared by List Type and List Optional Fields.
   The native select arrow is replaced visually so both rows use the same end column
   across Android/browser engines. Behavior remains the native <select>. */
.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-reference-body > .sl-list-type-field {
  position:relative !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-reference-body > .sl-list-type-field select {
  appearance:none !important;
  -webkit-appearance:none !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  padding-inline-start:14px !important;
  padding-inline-end:46px !important;
  line-height:1.2 !important;
  font-size:15px !important;
  font-weight:800 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-reference-body > .sl-list-type-field::after {
  content:"⌄";
  position:absolute !important;
  inset-inline-end:14px !important;
  bottom:14px !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none !important;
  color:#239944 !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform:rotate(90deg) !important;
  transform-origin:center !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-create-list-settings-host > .sl-list-optional-primary > summary {
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) 24px !important;
  align-items:center !important;
  column-gap:8px !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 14px !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary .sl-list-optional-primary-icon {
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  flex:0 0 24px !important;
  margin:0 !important;
  border-radius:7px !important;
  font-size:17px !important;
  line-height:1 !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary > summary > strong {
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  text-align:start !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary > summary .sl-optional-chevron {
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  justify-self:end !important;
  color:#239944 !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-reference-body > .sl-list-type-field select {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-create-list-reference-body > .sl-list-type-field::after,
.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-list-optional-primary > summary .sl-optional-chevron {
  color:#79df97 !important;
}

@media(max-width:767px){
  .send-list-app .sl-modal.is-create-list-modal
  .sl-create-list-settings-host > .sl-list-optional-primary > summary {
    grid-template-columns:24px minmax(0,1fr) 24px !important;
    column-gap:8px !important;
    padding:0 14px !important;
  }

  .send-list-app .sl-modal.is-create-list-modal
  .sl-list-optional-primary .sl-list-optional-primary-icon {
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    flex-basis:24px !important;
    font-size:17px !important;
  }
}


/* 0.714 — Complete icon coverage for List Optional Fields only.
   The checkbox uses <span>; label icons deliberately use <i> so the existing
   checkbox geometry remains untouched. */
.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary .sl-option-switches label > .sl-option-label-icon {
  display:inline-grid !important;
  place-items:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  padding:0 !important;
  font-style:normal !important;
  font-size:13px !important;
  line-height:1 !important;
  text-align:center !important;
  background:transparent !important;
  border:0 !important;
  color:inherit !important;
}

.send-list-app .sl-modal.is-create-list-modal
.sl-list-optional-primary .sl-option-switches label > .sl-option-label-icon-text {
  color:#4f9f69 !important;
  font-weight:900 !important;
}

.send-list-app.sl-dark-mode .sl-modal.is-create-list-modal
.sl-list-optional-primary .sl-option-switches label > .sl-option-label-icon-text {
  color:#79df97 !important;
}