/* =========================================================================
   UASK.UK — Material Design 3 layer over Bootstrap 3 (OpenCart 3.0.5.0)
   material.css — design tokens + base component restyle
   Self-contained, no external runtime dependency.
   ========================================================================= */

:root {
  /* ---- Color: brand (refurbished-tech teal, echoing stonerefurb) ---- */
  --md-primary:        #00796b;
  --md-primary-dark:   #004c40;
  --md-primary-light:  #4db6ac;
  --md-on-primary:     #ffffff;

  --md-accent:         #ff6d00;   /* CTA / sale highlight */
  --md-accent-dark:    #c43e00;
  --md-on-accent:      #ffffff;

  --search-btn:        #00c389;   /* stonerefurb-style green search button */
  --search-btn-dark:   #00a674;

  --md-surface:        #ffffff;
  --md-surface-2:      #f5f7f8;
  --md-background:     #eceff1;
  --md-on-surface:     #1c2b2a;
  --md-on-surface-med: #55605f;
  --md-outline:        #dfe4e5;

  --md-success:        #2e7d32;
  --md-warning:        #f9a825;
  --md-error:          #c62828;

  /* condition grades */
  --grade-aplus: #1b8a5a;
  --grade-a:     #2e7d32;
  --grade-b:     #f9a825;
  --grade-c:     #ef6c00;

  /* ---- Shape ---- */
  --md-radius-sm: 6px;
  --md-radius:    12px;
  --md-radius-lg: 20px;
  --md-radius-pill: 999px;

  /* ---- Elevation (Material shadows) ---- */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
  --md-elev-2: 0 2px 4px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.08);
  --md-elev-3: 0 5px 10px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.10);
  --md-elev-4: 0 10px 20px rgba(0,0,0,.15), 0 14px 28px rgba(0,0,0,.12);

  /* ---- Spacing (8px grid) ---- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px;

  --md-font: "Roboto", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------------- base --- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--md-font);
  background: var(--md-background);
  color: var(--md-on-surface);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--md-font); font-weight: 500; color: var(--md-on-surface); letter-spacing: .1px; }
h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; }
a { color: var(--md-primary); transition: color .15s ease; }
a:hover, a:focus { color: var(--md-primary-dark); text-decoration: none; }
hr { border-top-color: var(--md-outline); }

/* --------------------------------------------------------- buttons ------- */
.btn {
  font-family: var(--md-font);
  font-weight: 500;
  letter-spacing: .3px;
  border: none;
  border-radius: var(--md-radius-pill);
  padding: 9px 20px;
  text-transform: none;
  box-shadow: var(--md-elev-1);
  transition: box-shadow .18s ease, background-color .18s ease, transform .05s ease;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:active:focus { outline: none; }

.btn-primary,
.btn-lg.btn-default > i.fa-search,
.buttons .btn-primary {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--md-primary-dark);
  color: #fff;
  box-shadow: var(--md-elev-2);
}
.btn-default {
  background: var(--md-surface);
  color: var(--md-on-surface);
  box-shadow: var(--md-elev-1);
}
.btn-default:hover, .btn-default:focus { background: var(--md-surface-2); color: var(--md-primary-dark); }

.btn-warning, .btn-danger { color:#fff; }
.btn-warning { background: var(--md-accent); }
.btn-warning:hover { background: var(--md-accent-dark); color:#fff; }
.btn-link { box-shadow: none; text-transform: none; }
.btn-link:hover { box-shadow: none; }
.btn-block { border-radius: var(--md-radius); }

/* ripple ink (driven by uaskuk.js) */
.ripple-ink {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.5); pointer-events: none;
  animation: md-ripple .6s linear;
}
.btn-default .ripple-ink, .btn-link .ripple-ink { background: rgba(0,121,107,.25); }
@keyframes md-ripple { to { transform: scale(2.6); opacity: 0; } }

/* --------------------------------------------------------- forms --------- */
.form-control {
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  box-shadow: none;
  height: auto;
  padding: 10px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  color: var(--md-on-surface);
}
.form-control:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(0,121,107,.15);
}
.input-group-addon {
  background: var(--md-surface-2);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface-med);
}
select.form-control { -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cpath%20fill='%2355605f'%20d='M5%208l5%205%205-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }

/* --------------------------------------------------------- cards / panels */
.panel {
  border: none;
  border-radius: var(--md-radius);
  box-shadow: var(--md-elev-1);
  background: var(--md-surface);
  overflow: hidden;
}
.panel-heading { background: var(--md-surface); border-bottom: 1px solid var(--md-outline); font-weight: 500; }
.panel-default > .panel-heading { color: var(--md-on-surface); }
.well { border: none; border-radius: var(--md-radius); box-shadow: var(--md-elev-1); background: var(--md-surface); }
.thumbnail { border: none; border-radius: var(--md-radius); box-shadow: var(--md-elev-1); }

/* --------------------------------------------------------- alerts -------- */
.alert {
  border: none; border-radius: var(--md-radius); box-shadow: var(--md-elev-1);
  padding: 14px 18px;
}
.alert-success { background:#e6f4ea; color: var(--md-success); }
.alert-danger  { background:#fdeaea; color: var(--md-error); }
.alert-info    { background:#e7f3f4; color: var(--md-primary-dark); }

/* --------------------------------------------------------- tables -------- */
.table > thead > tr > td, .table > thead > tr > th { border-bottom: 2px solid var(--md-outline); }
.table-bordered { border-radius: var(--md-radius-sm); overflow: hidden; }

/* --------------------------------------------------------- badges/labels - */
.label { border-radius: var(--md-radius-pill); font-weight: 500; padding: .3em .7em; letter-spacing:.2px; }

/* --------------------------------------------------------- breadcrumb ---- */
.breadcrumb {
  background: transparent; padding: 12px 0; margin-bottom: var(--sp-2);
  font-size: 13px;
}
.breadcrumb > li + li:before { content: "\203A"; color: var(--md-on-surface-med); }
.breadcrumb > .active { color: var(--md-on-surface-med); }

/* --------------------------------------------------------- pagination ---- */
.pagination > li > a, .pagination > li > span {
  border: 1px solid var(--md-outline); color: var(--md-on-surface);
  margin: 0 3px; border-radius: var(--md-radius-sm) !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > li > a:hover { background: var(--md-primary); border-color: var(--md-primary); color:#fff; }

/* --------------------------------------------------------- utilities ----- */
.rating .fa-star { color: var(--md-warning); }
.rating .fa-star-o { color: #cfd8dc; }
::selection { background: rgba(0,121,107,.2); }