/* Click & Collect - checkout store picker
 *
 * Note on !important: the delivery step is rendered inside the active theme's
 * markup, and themes routinely centre or left-align everything under
 * .delivery-option with rules more specific than anything a module can write
 * without knowing the theme. The alignment declarations below are forced for
 * that reason. Everything else uses normal specificity.
 */

.cc-store-picker {
  margin-top: .75rem;
  padding: .75rem 0 .25rem;
  text-align: right !important;
}

.cc-store-picker__intro {
  font-weight: 600;
  margin-bottom: .5rem;
  text-align: right !important;
}

.cc-store-picker__feedback {
  margin-bottom: .5rem;
  font-size: .875rem;
  text-align: right !important;
}

.cc-store-picker__feedback--error {
  color: #dc3545;
}

.cc-store-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-store {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin-bottom: .5rem;
  transition: border-color .15s ease, background-color .15s ease;
}

.cc-store:hover {
  border-color: #bbb;
}

.cc-store--selected {
  border-color: #2fb5d2;
  background-color: #f6fdff;
}

/* Layout: radio | photo | details pushed to the right edge ---------------- */

.cc-store__label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: .75rem;
  cursor: pointer;
  width: 100%;
  text-align: right !important;
}

.cc-store__label > input[type="radio"] {
  flex: 0 0 auto;
  margin-top: .35rem;
}

/* 2x the 1.3.0 size. max-width keeps it from crowding out the details column
   on narrow desktop layouts, where the row can be under 500px wide. */
.cc-store__logo {
  width: 260px;
  height: 196px;
  flex: 0 1 260px;
  max-width: 45%;
  object-fit: cover;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ececec;
}

.cc-store__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right !important;
}

.cc-store__name {
  font-weight: 600;
}

.cc-store__address,
.cc-store__hours,
.cc-store__note,
.cc-store__phone {
  font-size: .875rem;
  color: #7a7a7a;
}

/* Street / town + postcode / county, one per line.
 *
 * The stacking is really done by .cc-store__body being a flex column — each
 * line is its own flex item. These declarations are belt and braces for themes
 * that reset flex on descendants of a label. Forced, because the theme rules
 * they are fighting are more specific than anything a module can target blind.
 */
.cc-store__address-line {
  display: block !important;
  width: 100%;
  flex: 0 0 auto;
}

.cc-store__phone a {
  color: inherit;
  text-decoration: none;
}

.cc-store__phone a:hover {
  text-decoration: underline;
}

.cc-store__map {
  font-size: .8125rem;
  margin-top: .25rem;
}

/* Missing-items warning -------------------------------------------------- */

.cc-store__warning {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .5rem .65rem;
  border-radius: 4px;
  border: 1px solid #f0d9a8;
  background: #fdf6e7;
  font-size: .8125rem;
  color: #8a6100;
  text-align: right !important;
}

.cc-store__warning-title {
  display: block;
  font-weight: 600;
  margin-bottom: .2rem;
}

.cc-store__warning-list {
  display: block;
}

.cc-store__warning-item {
  display: block;
}

.cc-store__warning-item em {
  font-style: normal;
  color: #a98a45;
}

.cc-store__warning-note {
  display: block;
  margin-top: .25rem;
  color: #a98a45;
}

/* A branch missing items is still selectable, just visually flagged. */
.cc-store--partial {
  border-color: #f0d9a8;
}

.cc-store--partial.cc-store--selected {
  border-color: #e0b45c;
  background-color: #fffdf7;
}

/* Opening hours ---------------------------------------------------------- */

.cc-store__hours {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed #e5e5e5;
  text-align: right !important;
}

.cc-store__hours--hidden {
  display: none;
}

.cc-store__hours-title {
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  margin-bottom: .25rem;
  color: #232323;
}

.cc-hours {
  border-collapse: collapse;
  font-size: .8125rem;
  margin-left: auto;
  margin-right: 0;
}

.cc-hours__row--today {
  font-weight: 600;
  color: #232323;
}

.cc-hours__day {
  text-align: right !important;
  font-weight: inherit;
  padding: .1rem 1.25rem .1rem 0;
  white-space: nowrap;
  color: inherit;
}

.cc-hours__time {
  text-align: right !important;
  padding: .1rem 0;
  white-space: nowrap;
  color: inherit;
}

.cc-hours__closed {
  color: #b5b5b5;
}

/* Order pages ------------------------------------------------------------ */

.cc-order-store__warning {
  padding: .5rem .65rem;
  border-radius: 4px;
  border: 1px solid #f0d9a8;
  background: #fdf6e7;
  color: #8a6100;
  font-size: .875rem;
}

/* Narrow screens ---------------------------------------------------------
 * A 260px photo is most of a phone's width, so it drops to full width above
 * the details rather than squeezing them into a column two words wide.
 */

@media (max-width: 767px) {
  .cc-store__logo {
    width: 180px;
    height: 136px;
    flex: 0 1 180px;
  }
}

@media (max-width: 520px) {
  .cc-store__label {
    flex-wrap: wrap;
    gap: .6rem;
    padding: .6rem;
  }

  .cc-store__logo {
    width: 100%;
    height: 160px;
    flex: 1 1 100%;
    max-width: 100%;
    order: 2;
  }

  .cc-store__body {
    flex: 1 1 100%;
    order: 3;
  }

  .cc-store__label > input[type="radio"] {
    order: 1;
  }
}