/* ============================================================================
   storefront-widths.css -- control widths that used to be inline style=
   ----------------------------------------------------------------------------
   Loaded immediately after mobile.css in _LayoutHead.cshtml and, like it,
   BEFORE the per-purchasing-organization GlobalStyles block:

     ... global.css, responsive*.css, ..., _DynamicCss, mobile.css,
         storefront-widths.css, GlobalStyles

   That position is the whole point of the file. These declarations used to sit
   in inline style= attributes, which beat every stylesheet rule that does not
   use !important -- so a store could not restyle these controls at all. Here
   they still win over global.css / responsive.css on load order (nothing in
   this file needs !important), but a store's own CSS now overrides them.
   PROV-139505.

   Rules here are BASE rules and deliberately carry no media query: they replace
   inline attributes that applied at every viewport. Breakpoint-scoped mobile
   work belongs in mobile.css, not here.

   Keep selectors down to a single class wherever the cascade allows it. Every
   extra id or class raises the bar a store has to clear to override the rule,
   which is the opposite of what this file is for.

   NOTE: a page stylesheet that a view pulls in itself (addresses.css, cart.css,
   product.css, authentication.css, ...) renders in the body and therefore lands
   AFTER GlobalStyles. A width put in one of those is not store-overridable,
   which is why these rules live here instead.

   NOTE FOR ADDING FILES: every theme asset is an explicit <Content Include> in
   OrderForge.MarketFlux.Web.csproj. A stylesheet that is not listed there is
   present in the repo and MISSING in a deployed environment.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Address selectors -- SelectAddress/Index.cshtml (delivery + billing) and
   SelectAddress/MultiAddress.cshtml (per-cart shipping + billing). 269px is
   the width all four wrappers already carried inline.

   Nothing else in the theme sets a width on div.selector -- global.css:4981 and
   :7358 and print.css:16 only set display/background -- so a single class is
   enough to land the value.

   The inner <select> is separately pinned to 269px by id at global.css:4849
   (#id_address_delivery.form-control, #id_address_invoice.form-control). That
   one is a stylesheet rule rather than an inline attribute, so it is outside
   this ticket, but it is the reason changing only this wrapper does not visibly
   move anything.
   --------------------------------------------------------------------------- */
.address-selector {
    width: 269px;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Payment form controls -- Payment/Index.cshtml. Both were 200px inline.
   .form-control (global.css:831) carries "display: block; width: 100%"; these
   rules load later at the same specificity, so they win without !important.
   Neither control sits inside .input-group, .cheque-box or #password, so the
   higher-specificity .form-control widths in global.css do not reach them.
   --------------------------------------------------------------------------- */
.giftcard-code-input,
.payment-type-select {
    width: 200px;
    max-width: 100%;
}

/* Shares a line with the Redeem Gift Card button, so it has to beat the
   display: block of .form-control. The payment-type select above is a plain
   .form-control and must stay block -- which is why this is its own rule and
   not folded into the shared one. */
.giftcard-code-input {
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   Guest-checkout button pair -- Login/Partials/UserProfileCreationForm.cshtml.
   Two buttons sharing one row at 47% each, with the gap between them.

   authentication.css has "#create-account_form .submit .btn_primary
   { width: 100% }" for the SINGLE-button variant of the same row. That file is
   included from Login/Index.cshtml, so it lands after this one, and at (1,2,0)
   it would beat these rules outright -- the inline widths are what used to mask
   it. It is narrowed with :not() so it skips this pair; see the note there.

   The floats move too. They are half of the same two-column row as the widths,
   and splitting them would leave a style= attribute behind for no gain.
   --------------------------------------------------------------------------- */
.submit-create,
.guest-checkout-action {
    width: 47%;
}

.submit-create {
    float: left;
}

.guest-checkout-action {
    float: right;
}

/* ---------------------------------------------------------------------------
   Order approval address selects -- OrderApprovalDetail/Index.cshtml. Fluid
   rather than fixed, but inline all the same, so a store could not touch these
   either. Values are unchanged.
   --------------------------------------------------------------------------- */
.approval-address-select {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Searchable address selector -- app/templates/selectAddressList.html, the
   ui-select the address step renders when a purchasing organization has
   searchable addresses turned on. It carried style="width: 215px" inline, the
   last fixed width left on that page after PROV-139505 did the two views.
   215px is unchanged here.

   The attribute sits on <ui-select>, and that directive is replace: true
   (select.js:1070), so Angular merges the element's class onto the container it
   renders -- the class lands where the inline style used to. Worth an eyeball
   on a store that has searchable addresses enabled: if the merge ever stopped
   happening the control would fall back to its content width rather than break.
   --------------------------------------------------------------------------- */
.address-searchable-select {
    width: 215px;
}