/* ===== General Body ===== */
body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;margin:0;background:var(--color-bg);color:#222; line-height: 1.5; }
a { text-decoration:none;color:inherit }
*,*::before,*::after { box-sizing: border-box; }

/* ==== Shared catalogue styles =====*/
.meta { font-size: 1.1rem; line-height: 1.5; color: var(--color-text-secondary);}
.price {  color: var(--color-accent); }
.price::before { content: '£'; font-weight: 200; padding-right:5px; }

/* ===== Header ===== */
.header { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width:1200px; margin:0 auto; padding:5px 10px; }
.header img { height: 70px; }
.header h1 { font-weight: 500; font-size: 1.2rem; text-align: center; line-height: 1.4; }
.header nav {  display: flex; gap: 20px; }
.header nav a { color: var(--color-text-primary); text-decoration: none; padding: 6px 12px; border-radius: 6px; background: var(--color-bg); }

/* ===== Container ===== */
.container{max-width:1200px;margin:20px auto;padding:0 12px;}

/* ===== Search Row ===== */
.search-row{display:flex;gap:8px;margin-bottom:18px;  }
.search-row input,.search-row select{padding:10px;border:0px;border-radius:6px;font-size:1.1rem;color:(var(--color-text-primary));background-color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.search-row input{flex:1}

/* ===== All Lots / Summary Page ===== */
.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 14px; }
.list .item { display: grid; grid-template-columns: 185px 1fr; gap: 12px; background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.item .thumb { width: 180px; }
.item .thumb img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; }
.item h3 { margin: 0; font-size: 1.1rem; font-weight: 500; color: var(--color-text-primary); }
.item .item-details { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }
.item .price-group { display:flex; margin-top: auto; align-self: flex-end; text-align: right; align-items: baseline;}
.item .price-group .meta { margin-left: 8px; font-size: 0.9rem;}
.item .price { font-size: 1.5rem; font-weight: 700; color: var(--color-accent); }
#noResultRow { grid-column: 1 / -1; }

.status {background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary);margin:0 10px 0 0;padding:4px;border-radius:6px; font-size: .9em; position: relative;  top: -3px;  }
.status-winning {background:#eaf7ea;border:1px solid #cfead1;color:#0a6f2a; }
.status-outbid {background:#ffecec;border:1px solid #f5c2c2;color:#a11; }

/* ===== Not results and all auction ===== */
.info { display: block; width:100%; background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.info a {text-decoration: underline;  }

/* ===== Banners ===== */
.info-banner { padding:10px; background: linear-gradient(90deg, #f4e4fa, #faf2fd); border:1px solid #702466; margin-bottom:1rem; color:#4a184f;text-align: center;}
.admin-preview-banner { padding:10px; background:#fffae6; border:1px solid #ffc107; margin-bottom:1rem;position:sticky;top:0;z-index:1000; }
.hidden-lots-banner { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--color-text-primary); background:#fff; position:sticky; bottom:-5px; z-index:1000; width:fit-content; text-align:center; border:1px solid var(--color-border); border-radius:8px; padding:0.5rem 1rem; margin:10px auto 0 auto; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-size:0.9rem; }
.hidden-lots-banner input[type="checkbox"] { margin:0; transform:scale(1.2); accent-color:var(--color-primary); vertical-align:middle; border:none; box-shadow:none; outline:none; background:#fff; cursor:pointer; }

/* ===== Lot Detail Page ===== */
.lot{display:flex;gap:20px;margin-bottom:10px; }
.gallery{flex:1;background:#fff;padding:12px;border-radius:8px;position:relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.main-img{width:100%;border-radius:6px; }
.thumb-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px;}
.thumb-img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.thumb-img:hover{opacity:0.85}

/* ===== Lot Details Panel ===== */
.details{width:380px;flex-shrink:0;background:#fff;padding:16px;border-radius:8px;display:flex;flex-direction:column;gap:10px;position:relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.details h2{margin:0;font-size:1.6rem; font-weight: 500;}
.details p{font-size:1.1rem; }
.details .price{font-weight:700;font-size:2rem;display:inline-block;margin:10px 10px 0 0;}
.details a { display: inline-block; align-self: flex-end;  text-align:right; margin-right:1rem; text-decoration: underline; }

.msg-info { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); margin: 10px 0; padding: 10px; border-radius: 6px;}
.msg-success{background:#eaf7ea;border:1px solid #cfead1;margin:10px 0;padding:10px;border-radius:6px;color:#0a6f2a;}
.msg-error{background:#ffecec;border:1px solid #f5c2c2;margin:10px 0;padding:10px;border-radius:6px;color:#a11;}
.msg-progress{background:linear-gradient(90deg,rgb(255,235,179),rgb(255,247,204));background-size:25% 100%;animation:runningBackground 5s linear infinite;border:1px solid #ffd8a8;margin:10px 0;padding:10px;border-radius:6px;color:#8a4b00;}
@keyframes runningBackground{0%{background-position:-100% 0;}100%{background-position:100% 0;}}

.bid-panel{background:#fff;border:1px solid var(--color-bg);padding:5px 12px 5px 12px;border-radius:8px;margin:10px 0;line-height: 2;font-size:1rem;font-size: 1rem;}
.bid-panel input {margin-top:8px; width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--color-border);display:block;box-sizing:border-box; font-size:1rem;}
.bid-panel button{margin-top:8px;width:100%;padding:10px;border:none;background:var(--color-accent);color:#fff;border-radius:6px;cursor:pointer; font-size:1.1rem;}
.bid-panel a:hover { text-decoration: underline; }

.reserve { font-size: 1rem; margin-left:10px; }

.admin-panel { font-size: 0.9em; margin: 10px 0 0 0; padding: 12px 14px; border-radius: 6px; background: linear-gradient(90deg,var(--color-bg), #fff ); border: 1px solid var(--color-border); color: var(--color-text-secondary);}
.admin-panel strong { font-weight: 600; color: var(--color-text-primary); }

/* ===== Image spinner ===== */
.gallery { display:inline-block; }
.main-img-wrap { position:relative; display:block; background:#f6f6f6; aspect-ratio:4/3; }
.main-img { display:block; width:100%; height:auto; position:relative; z-index:2; transition:opacity 0.3s ease; }
.main-img.loading { opacity:0.6; }
.spinner { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; width:100px; height:100px; pointer-events:none; display:none; opacity:0.8; }
.spinner.show { display:block; }

/* ===== Account navigation tabs ===== */
.account nav { display: flex; justify-content: left; gap: 0.4rem; margin: 0 auto -1px auto; max-width: 700px;}
.account nav a { padding: 0.5rem 1rem; border-radius: 8px 8px 0 0; background: rgba(0, 0, 0, 0.05); color: var(--color-text-secondary); text-decoration: none; font-weight: 500; border-top:2px solid rgba(0, 0, 0, 0.04); border-bottom: 1px solid #fff;}
.account nav a:hover {background: rgba(0, 0, 0, 0.1); }
.account .active { padding: 0.5rem 1rem 0.5rem; border-radius: 8px 8px 0 0; background: #fff; border-bottom: none; color: var(--color-text-primary);position: relative;z-index: 1;box-shadow: -6px -6px 12px rgba(0, 0, 0, 0.05); }

/* ===== Account card ===== */
.account .card { max-width: 700px; margin: 0 auto 3rem; padding: 1.5rem 2rem 1.5rem 2rem; background: #fff; border-radius: 0 12px 12px 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; }
.account label { display: block; margin-bottom: 0.3rem; font-weight: 500; color: var(--color-text-secondary); }
.account input[type="text"],.account input[type="email"],.account input[type="password"],.account textarea,.account fieldset { width: 100%; padding: 12px 14px; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: inherit; box-sizing: border-box; }
.account fieldset { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; color: var(--color-text-secondary);  }
.account legend { font-weight: 600; padding: 0 0.5rem;}
.account fieldset label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-weight: 400; color: var(--color-text-secondary); }
.account button { background-color: var(--color-accent); color: #fff; border: none; border-radius: 8px; padding: 0.75rem 1.5rem; font-size: 1.1rem; cursor: pointer; min-width: 200px; margin:10px 10px 10px 0;}
.account button:hover { background-color: #702466;}
.account a { text-decoration: underline; }
.account .forgot {font-size: 0.9rem;text-align: right; margin-top: -0.5rem;}
.account summary {text-decoration: underline; cursor: pointer;}
.account i {font-size: 0.9rem;margin:5px 0;font-style: italic; color: var(--color-text-secondary)}

/* ===== Bids card ===== */
.account h2 { font-size: 1.1rem; font-weight: bold;margin-top:5px;}
.bid-card { display: flex; flex-direction: row; align-items: center; text-decoration: none !important; color: inherit; line-height: 1.8; }
.bid-card .bid-image { width: 100px; height: 100px; object-fit: cover;  border-radius: 8px;}
.bid-card .bid-details h3 { font-size: 1rem; font-weight: 500; color: var(--color-text-primary);}
.bid-card .bid-details { flex: 1; padding: 10px; font-size: 0.9rem; color: var(--color-text-secondary);}
.bid-card .win { color: green; font-weight: bold; }
.bid-card .lose { color: red; font-weight: bold; }
#cancelBtn {background:#888; }

/* ===== Footer section ===== */
footer{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:10px; text-align:center; font-size:0.8rem; line-height: 1.8; color:var(--color-text-secondary); }
footer a:hover{ text-decoration: underline; }
footer ul{list-style:none; padding:0; margin:0;flex:1; min-width:250px; text-align:left;}
footer p{width:100%;text-align:center;}
footer strong{font-weight: bolder;}

/* generic */
.hidden{display:none !important;}
.green { color: green; }
.red { color: red; }

/* ===== Responsive ===== */
@media(max-width:768px){

  /* Header */
  .header-content { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px; }
  .header img {height: 60px; }
  .header nav { display: flex;  }

  /* Lot details */
  .lot {flex-direction: column; gap:0; }
  .gallery { width: 100%; padding: 12px 12px 4px 12px; border-radius: 8px 8px 0 0;}
  .details { width: 100%; padding: 4px 12px 12px 12px; border-radius: 0 0 8px 8px;}
  .details a { text-align:center; margin: 0 auto 0.7rem auto;}

  /* Summary page*/
  .list {display: inherit;}
  .list .item { display: grid; grid-template-columns: 125px 1fr;}
  .item .thumb img { width: 120px; }

  /* Account section */
  .account nav { gap: 0.3rem; margin: 0 auto -1px auto; }
  .account nav a { padding: 0.5rem 0.5rem; }
  .account {padding: 0; }
  .account button { width:100%; }
  .account .card { margin: 0 auto 3rem; padding: 1rem 1rem 0.5rem 1rem;}
  .bid-card { margin: 0.5rem 0 0.5rem 0; }
  .bid-card .bid-details h3{ font-size: 0.9rem; }
  .bid-card .bid-image { width: 70px; margin-right:0.5rem;}
  .bid-card .bid-details { padding: 5px; font-size: 0.8rem; }

  /* Footer */
  footer a{text-decoration: underline;}
  footer ul{width:100%; text-align:center;}

}

/** Very small screens */
@media (max-width: 500px) {
  .search-row { flex-direction: column; }
  .search-row input, .search-row select { width: 100%; }
}