/* =============================================================
   PES Copper Calculator — all styling for this plugin
   1. Calculator page          [spf_price_calculator]
   2. Saved-quotes page        [view_user_quotes_frontend]
   Colours: the live site's black / gold theme.
   pes-calc.php has no inline styles for the website. The quote PDFs
   keep their own <style> block inside pes-calc.php, because Dompdf
   cannot load this file.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- Colours (scoped to this plugin's two pages) --------------- */
#pes-calculator-container,
.pes-quote-view-container,
.pes-quotes-message{
  --pes-bg:#000000;          /* cards and page panels */
  --pes-surface:#111111;     /* shape area, footer row, row hover */
  --pes-field:#333333;       /* dropdowns, inputs, secondary buttons */
  --pes-ink:#ffffff;         /* main text */
  --pes-gold:#c5a059;        /* headings, labels, accents */
  --pes-line:#333333;        /* soft borders */
  --pes-line-strong:#555555; /* field borders */
  --pes-table-line:#ffffff;  /* bar table grid (as on the old design) */
  --pes-banner:#1a150a;      /* dark gold tint behind notices */
  --pes-radius:12px;
  --pes-radius-sm:8px;
}

/* =============================================================
   1. CALCULATOR PAGE — [spf_price_calculator]
   ============================================================= */

/* ---- Container -------------------------------------------------- */
#pes-calculator-container{
  position:relative;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:transparent;
  color:var(--pes-ink);
  padding:0;
  width:100%;
  max-width:1200px;
  box-sizing:border-box;
  margin:20px auto;
}
#pes-calculator-container *{box-sizing:border-box;}

/* ---- Page title ------------------------------------------------ */
#pes-calculator-container .calc-page-title{
  font-size:2.25rem !important;
  font-weight:800;
  line-height:1.15;
  color:var(--pes-gold);
  margin:0 0 20px;
  letter-spacing:-.01em;
}

/* ---- Disclaimer (flat cream banner, no accent bar) ------------- */
#pes-calculator-container .calculator-disclaimer-header{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  color:var(--pes-gold);
  background:var(--pes-banner);
  border:1px solid var(--pes-gold);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  padding:14px 18px;
  border-radius:var(--pes-radius-sm);
  margin:0 0 24px;
  text-align:left;
}

/* ---- Login notice ---------------------------------------------- */
#pes-calculator-container .login-warning{
  background:var(--pes-banner);
  border:1px solid var(--pes-gold);
  color:var(--pes-gold);
  padding:12px 16px;
  border-radius:var(--pes-radius-sm);
  font-size:14px;
  font-weight:600;
  margin-bottom:20px;
}
#pes-calculator-container .login-warning a{color:var(--pes-ink);font-weight:700;text-decoration:underline;}

/* ---- Keep the "+ Add Row" template row hidden (critical) -------- */
#pes-calculator-container .hidden-template{display:none;}

/* ---- Config card: plating + units on top, shape cards below ---- */
#pes-calculator-container .calc-config-card{
  border:1px solid var(--pes-line);
  border-radius:var(--pes-radius);
  padding:24px;
  margin-bottom:24px;
  background:var(--pes-bg);
}
#pes-calculator-container .calc-config-card .corner-reference{margin-bottom:0;}
#pes-calculator-container .config-top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
#pes-calculator-container .calc-config-card:hover{
  border-color:var(--pes-gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}
#pes-calculator-container .config-top-row .plating-selection-wrapper,
#pes-calculator-container .config-top-row .unit-toggle-wrapper{margin-bottom:0;}

/* ---- Plating selection (label stacked above the dropdown) ------ */
#pes-calculator-container .plating-selection-wrapper{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-bottom:22px;
}
#pes-calculator-container .plating-selection-wrapper .logistic-header{
  color:var(--pes-gold);
  font-size:.95rem !important;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  border-bottom:none;
  text-decoration:none;
}
#pes-calculator-container .custom-plating-btn{
  background:var(--pes-field);
  color:var(--pes-gold);
  border:1px solid var(--pes-gold);
  padding:9px 14px;
  min-width:180px;
  font-weight:600;
  border-radius:var(--pes-radius-sm);
  font-family:inherit;
  cursor:pointer;
}
#pes-calculator-container .custom-plating-btn:focus{
  outline:2px solid var(--pes-gold);
  outline-offset:1px;
}

/* ---- Units (boxed, with a fieldset-style caption) -------------- */
#pes-calculator-container .unit-toggle-wrapper{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:24px;
  border:1px solid var(--pes-line-strong);
  border-radius:var(--pes-radius-sm);
  padding:16px 20px 12px;
  margin-bottom:22px;
  color:var(--pes-gold);
}
#pes-calculator-container .unit-toggle-wrapper::before{
  content:"Units";
  position:absolute;
  top:-8px;
  left:14px;
  background:var(--pes-bg);
  padding:0 6px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--pes-gold);
}
#pes-calculator-container .unit-toggle-wrapper label{
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}
#pes-calculator-container .unit-toggle-wrapper input[type=radio]{accent-color:var(--pes-gold);}

/* ---- Shape reference cards (real diagrams, left-aligned caption) */
#pes-calculator-container .corner-reference{
  display:flex;
  justify-content:flex-start;
  align-items:stretch;
  background:var(--pes-surface);
  border:1px solid var(--pes-line);
  padding:22px;
  border-radius:var(--pes-radius-sm);
  margin-bottom:22px;
  gap:16px;
  flex-wrap:wrap;
}
#pes-calculator-container .corner-box{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  flex:1 1 210px;
  min-width:200px;
  background:var(--pes-bg);
  border:1px solid var(--pes-line);
  border-radius:var(--pes-radius-sm);
  padding:16px;
}
/* Shape picture: a grey bar whose corner radius shows the shape */
#pes-calculator-container .corner-shape{
  height:42px;
  width:100%;
  background:var(--pes-field);
  border:1px solid var(--pes-line-strong);
  margin-bottom:14px;
  box-sizing:border-box;
}

/* different radius per shape (order: S.C. → F.R.E. → R.C.) */
#pes-calculator-container .corner-box:nth-child(1) .corner-shape{ border-radius:0px; }    /* Square Corner */
#pes-calculator-container .corner-box:nth-child(2) .corner-shape{ border-radius:999px; }  /* Full Rounded Edge */
#pes-calculator-container .corner-box:nth-child(3) .corner-shape{ border-radius:12px; }   /* Rounded Corner */

/* Caption below the shape picture */
#pes-calculator-container .corner-desc{
  color:var(--pes-gold);
  font-weight:700;
  font-size:.9rem;
  text-align:left;
  margin:0;
}

/* ---- Main table ------------------------------------------------ */
#pes-calculator-container .form-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--pes-table-line);
  border-radius:10px;
  overflow:hidden;
}
#pes-calculator-container .form-table th{
  background:var(--pes-bg);
  color:var(--pes-gold);
  padding:12px 10px;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.03em;
  font-weight:700;
  border-bottom:1px solid var(--pes-table-line);
  border-right:1px solid var(--pes-table-line);
}
#pes-calculator-container .form-table th:last-child{border-right:none;}
#pes-calculator-container .form-table td{
  padding:10px;
  border-bottom:1px solid var(--pes-table-line);
  border-right:1px solid var(--pes-table-line);
  text-align:center;
  font-size:.9rem;
  color:var(--pes-ink);
}
#pes-calculator-container .form-table td:last-child{border-right:none;}
#pes-calculator-container .form-table tbody tr:hover{background:var(--pes-surface);}

#pes-calculator-container .form-table select,
#pes-calculator-container .form-table input{
  background:var(--pes-field);
  color:var(--pes-ink);
  border:1px solid var(--pes-gold);
  padding:8px;
  border-radius:6px;
  font-family:inherit;
  font-size:.9rem;
}
#pes-calculator-container .form-table select:focus,
#pes-calculator-container .form-table input:focus{
  outline:2px solid var(--pes-gold);
  outline-offset:1px;
  border-color:var(--pes-gold);
}
#pes-calculator-container .form-table input.qty{width:72px;}

#pes-calculator-container .weight-lb,
#pes-calculator-container .total-weight{font-weight:600;}
/* Stock count: the page script adds in-stock / out-of-stock */
#pes-calculator-container .row-availability{font-weight:700;}
#pes-calculator-container .row-availability.in-stock{color:#c5a059;}
#pes-calculator-container .row-availability.out-of-stock{color:#ff4d4d;}

/* ---- Footer totals row ("Total" label aligned right) ------------ */
#pes-calculator-container .table-total-row td{
  background:var(--pes-surface);
  color:var(--pes-gold);
  border-top:2px solid var(--pes-table-line);
  font-weight:800;
}
#pes-calculator-container .table-total-row td:first-child{ text-align:right; }

/* ---- Buttons (neutral outline, matching the reference) --------- */
#pes-calculator-container .button-container{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:26px;
  gap:16px;
  flex-wrap:wrap;
}
#pes-calculator-container .add-row-btn,
#pes-calculator-container .main-calc-btn{
  background:var(--pes-field);
  color:var(--pes-gold);
  border:1px solid var(--pes-gold);
  padding:11px 22px;
  cursor:pointer;
  font-weight:700;
  font-family:inherit;
  border-radius:var(--pes-radius-sm);
  text-transform:none;
  letter-spacing:0;
  transition:background .15s ease, border-color .15s ease;
}
#pes-calculator-container .main-calc-btn{font-weight:800;padding:12px 32px;background:var(--pes-gold);color:#000;text-transform:uppercase;}
#pes-calculator-container .add-row-btn:hover{ background:#444444; }
#pes-calculator-container .main-calc-btn:hover{ background:#ffffff; border-color:#ffffff; }

#pes-calculator-container .remove-row-btn{
  background:var(--pes-gold);
  color:#ffffff;
  border:1px solid var(--pes-gold);
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer;
  font-weight:700;
  font-size:.78rem;
  font-family:inherit;
  text-transform:none;
}
#pes-calculator-container .remove-row-btn:hover{
  background:#ffffff;
  color:#000000;
}

/* ---- Phones: the wide table scrolls instead of overflowing ------ */
@media (max-width:768px){
  #pes-calculator-container{padding:20px;}
  #pes-calculator-container .config-top-row{flex-direction:column;}
  #pes-calculator-container .unit-toggle-wrapper{width:100%;}
  #pes-calculator-container .form-table{display:block;overflow-x:auto;white-space:nowrap;}
}
/* =============================================================
   2. SAVED-QUOTES PAGE — [view_user_quotes_frontend]
   ============================================================= */

/* Short messages: login needed / access restricted / no quotes yet */
.pes-quotes-message{
  color:var(--pes-gold) !important;
  background:var(--pes-banner);
  border:1px solid var(--pes-gold);
  border-radius:var(--pes-radius-sm);
  padding:16px 20px;
  margin:20px 0;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:16px;
  font-weight:600;
}

/* ---- Quote cards --------------------------------------------------------------
   Black / gold, matching the calculator. Colours use !important because the
   theme overrides text colours on this page.
   ---------------------------------------------------------------------------- */
.pes-quote-view-container,
.pes-quote-view-container *{
  color:#ffffff !important;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important;
}

/* One card per quote */
.pes-quote-view-container{
  background:#000000 !important;
  border:1px solid #333333;
  border-radius:12px;
  padding:24px;
  margin:0 0 32px;
  box-shadow:none;
  box-sizing:border-box;
}

/* Quote ID and section headings */
.pes-quote-view-container .pes-quote-id{
  font-size:1.35rem !important;
  font-weight:800 !important;
  line-height:1.2;
  margin:0 0 10px;
}
.pes-quote-view-container h4{
  font-size:1rem !important;
  font-weight:700 !important;
  margin:24px 0 10px;
}

/* Customer / company / email / phone / date line */
.pes-quote-view-container .quote-info-line{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  font-size:.9rem;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid #333333;
}
.pes-quote-view-container .quote-info-line span{ white-space:nowrap; }
.pes-quote-view-container .quote-info-line strong{ color:#c5a059 !important; font-weight:700; }

.pes-quote-view-container .pes-quote-plating{
  font-weight:700;
  font-size:.95rem;
  margin-bottom:4px;
}

/* Tables: scroll sideways on small screens instead of overflowing */
.pes-quote-view-container .pes-quote-scroll{
  overflow-x:auto;
  border:1px solid #555555;
  border-radius:10px;
}
.pes-quote-view-container table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  background:#000000 !important;
}
.pes-quote-view-container th{
  background:#333333 !important;
  color:#c5a059 !important;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:10px;
  border:1px solid #333333;
  text-align:center;
  white-space:nowrap;
}
.pes-quote-view-container td{
  background:#000000 !important;
  padding:9px 10px;
  border:1px solid #333333;
  text-align:center;
  font-size:.85rem;
}

/* Highlighted cells */
.pes-quote-view-container td.pes-cost-ddp{ background:#111111 !important; }
.pes-quote-view-container th.pes-grand-th{ background:#c5a059 !important; color:#000000 !important; }
.pes-quote-view-container td.pes-grand-td{ font-weight:800; font-size:1.05rem; color:#c5a059 !important; }