/* BSK Mobile Shell 0.3.0: phone Add property in three screens (Place and price, Details, Photos and contact).
   Phones only (below 721px). The new elements are hidden by default, so desktop does not change. Every rule starts with
   body.bsk-m-app and the listing form, so the plugin's own rules are overridden only on phones. */

.bsk-m-steps,
.bsk-m-next,
.bsk-m-amen,
.bsk-m-stepbar { display: none; }

@media (max-width: 720px) {
  /* The listing form fills the screen, with room at the bottom for the bar */
  body.bsk-m-app form.bskpl-listing-form {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  body.bsk-m-app form.bskpl-listing-form .bskpl-section { padding: 12px 14px 14px; }
  body.bsk-m-app form.bskpl-listing-form .bskpl-section > legend { display: none; }

  /* One screen at a time: the shell sets data-bsk-off on what is not on the current screen */
  body.bsk-m-app form.bskpl-listing-form [data-bsk-off] { display: none !important; }

  /* Step tabs: silver at rest, green when touched or chosen */
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps button {
    min-height: 56px;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps b { font-size: 16px; font-weight: 900; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps button:active,
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps button[aria-selected="true"] {
    background: var(--bsk-m-green);
    color: #fff;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps button:focus { outline: none; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-steps button:focus-visible { outline: 2px solid var(--bsk-m-green); outline-offset: 2px; }

  /* Next button at the end of screens 1 and 2 */
  body.bsk-m-app form.bskpl-listing-form .bsk-m-next { display: block; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-next button {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-next button:active { background: var(--bsk-m-green); color: #fff; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-next button:focus { outline: none; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-next button:focus-visible { outline: 2px solid var(--bsk-m-green); outline-offset: 2px; }

  /* The plugin's own buttons move to the bottom bar (copies with the same names and values) */
  body.bsk-m-app form.bskpl-listing-form .bskpl-actions { display: none; }
  body.bsk-m-app form.bskpl-listing-form .bskpl-submit { border-top: 0; padding-top: 0; }

  /* Bottom bar: Save draft (left) and Submit for review (right) on every screen */
  body.bsk-m-app form.bskpl-listing-form .bsk-m-stepbar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--bsk-m-line);
    box-shadow: 0 -6px 18px rgba(20, 30, 20, 0.08);
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-stepbar .bskpl-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-stepbar .bskpl-btn:active { background: var(--bsk-m-green); color: #fff; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-stepbar .bskpl-btn:focus { outline: none; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-stepbar .bskpl-btn:focus-visible { outline: 2px solid var(--bsk-m-green); outline-offset: 2px; }

  /* Touch-sized fields. 16px text stops iPhone Safari from zooming in when a field is tapped. */
  body.bsk-m-app form.bskpl-listing-form .bskpl-field > span { font-size: 15px; }
  body.bsk-m-app form.bskpl-listing-form .bskpl-field input:not([type="checkbox"]):not([type="file"]),
  body.bsk-m-app form.bskpl-listing-form .bskpl-field select {
    min-height: 48px;
    font-size: 16px;
  }
  body.bsk-m-app form.bskpl-listing-form .bskpl-field textarea {
    min-height: 110px;
    font-size: 16px;
  }
  body.bsk-m-app form.bskpl-listing-form .bskpl-flags label {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 15px;
  }
  body.bsk-m-app form.bskpl-listing-form .bskpl-flags input { width: 20px; height: 20px; }

  /* Photos: the file button is silver and turns green when touched */
  body.bsk-m-app form.bskpl-listing-form input[type="file"] { min-height: 48px; }
  body.bsk-m-app form.bskpl-listing-form input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 10px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
  }
  body.bsk-m-app form.bskpl-listing-form input[type="file"]::file-selector-button:active { background: var(--bsk-m-green); color: #fff; }

  /* Feature chips: coloured icons, green when chosen. They write into the Features box. */
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-head {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bsk-m-muted);
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--bsk-m-silver);
    color: var(--bsk-m-ink);
    font-family: var(--bsk-m-font);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-chip:active,
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-chip[aria-pressed="true"] {
    background: var(--bsk-m-green);
    color: #fff;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-chip:focus { outline: none; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-chip:focus-visible { outline: 2px solid var(--bsk-m-green); outline-offset: 2px; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-ic {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-chip[aria-pressed="true"] .bsk-m-amen-ic { box-shadow: 0 0 0 2px #fff; }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-ic svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.bsk-m-app form.bskpl-listing-form .bsk-m-amen-tx { min-width: 0; overflow-wrap: anywhere; }
}