/* V247 — Mobile Orders:
   Make the CURRENT status visually obvious before opening the dropdown. */

@media(max-width:1100px){

  /* The visible current-status control */
  .v193-order-mobile-card .v231-order-status-trigger,
  .v246-order-mobile-card .v231-order-status-trigger{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 40px 0 13px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;

    border-width:1px!important;
    border-style:solid!important;
    border-radius:11px!important;

    font-size:12px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.015em!important;

    box-shadow:
      0 1px 2px rgba(15,23,42,.045),
      0 4px 12px rgba(15,23,42,.035)!important;

    overflow:hidden!important;
  }

  /* Small status indicator dot on the left */
  .v193-order-mobile-card .v231-order-status-trigger::before,
  .v246-order-mobile-card .v231-order-status-trigger::before{
    content:"";
    width:7px;
    height:7px;
    min-width:7px;
    border-radius:999px;
    margin-right:8px;
    background:currentColor;
    opacity:.82;
    box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent);
  }

  /* Arrow kept in its own right-side area */
  .v193-order-mobile-card .v231-order-status-trigger svg,
  .v246-order-mobile-card .v231-order-status-trigger svg{
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;

    width:16px!important;
    height:16px!important;
    min-width:16px!important;

    padding:2px!important;
    border-radius:5px!important;
    background:color-mix(in srgb,currentColor 8%,transparent)!important;
    opacity:.8!important;
  }

  /* Left aligned text looks cleaner on card preview */
  .v193-order-mobile-card .v231-order-status-trigger > span,
  .v246-order-mobile-card .v231-order-status-trigger > span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  /* Read-only status uses a badge-like look instead of looking disabled */
  .v193-order-mobile-card .v231-order-status-readonly,
  .v246-order-mobile-card .v231-order-status-readonly{
    width:auto!important;
    min-width:118px!important;
    max-width:100%!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 12px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border-radius:999px!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.015em!important;
    box-shadow:0 1px 2px rgba(15,23,42,.035)!important;
  }

  /* Subtle tap feedback */
  .v193-order-mobile-card .v231-order-status-trigger:active,
  .v246-order-mobile-card .v231-order-status-trigger:active{
    transform:scale(.99)!important;
    filter:brightness(.985)!important;
  }

  /* Ensure the status area itself has breathing room */
  .v193-order-mobile-card .v231-order-status,
  .v246-order-mobile-card .v231-order-status{
    margin-top:5px!important;
    margin-bottom:5px!important;
  }
}

@media(max-width:560px){
  .v193-order-mobile-card .v231-order-status-trigger,
  .v246-order-mobile-card .v231-order-status-trigger{
    height:42px!important;
    min-height:42px!important;
    padding-left:11px!important;
    padding-right:38px!important;
    border-radius:10px!important;
    font-size:11.5px!important;
  }

  .v193-order-mobile-card .v231-order-status-trigger::before,
  .v246-order-mobile-card .v231-order-status-trigger::before{
    width:6px;
    height:6px;
    min-width:6px;
    margin-right:7px;
  }

  .v193-order-mobile-card .v231-order-status-trigger svg,
  .v246-order-mobile-card .v231-order-status-trigger svg{
    right:10px!important;
    width:15px!important;
    height:15px!important;
  }
}