@charset "utf-8";

/*
   New Perspectives on HTML and CSS
   
   Blackplug Web Project

   Tables Style Sheet
   Author:Robert Webber 
   Date:3-23-19   

   Filename: bp_tables.css

*/

/* Table Styles */

table.products {
  width: 100%;
  border: 15px outset rgb(15, 15, 15,);
  border-collapse: collapse;
  font-family: Arial, Verdana, sans-serif;
}

table.products height {
  height: 25px;
}

table.products th, table.products td {
  border: white solid 1px;
  padding: 5px;
}

/* Table Caption Styles */

table.products caption {
  caption-side: bottom;
  text-align: center;
}

/* Table Column Styles */

table.ProductsColumns th {
  background: rgb(215, 205, 151);
  width: 10%;
}

table.products ShirtColumns {
  width: 11%;
  background: rgb(236, 255, 211);
}

table.products PromoColumns {
  width: 17%;
}

/* Table Header Styles */

table.products thead {
  color: white;
  background: linear-gradient(to right, black 30%, white, gold);
}

/* Table Footer Styles */

table.products tfoot {
  background: linear-gradient(to right, black 30%, white, gold);
  color: white;
}
/* === Contact Table Styling for BLACKPLUG === */
table.products {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  font-family: Verdana, Geneva, sans-serif;
  background-color: #f8f8f8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 6px;
  overflow: hidden;
}

/* Header */
table.products thead {
  background-color: #000;
  color: #ffcc00; /* gold accent */
  text-transform: uppercase;
  letter-spacing: 1px;
}

table.products th, 
table.products td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

table.products th:first-child,
table.products td:first-child {
  width: 35%;
}

/* Alternating row colors */
table.products tbody tr:nth-child(even) {
  background-color: #eaeaea;
}

/* Hover highlight */
table.products tbody tr:hover {
  background-color: #ddd;
  transition: background-color 0.2s ease-in-out;
}

/* Links inside table */
table.products a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

table.products a:hover {
  color: #ffcc00; /* gold hover */
}

/* Footer */
table.products tfoot {
  background-color: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  height: 40px;
}

/* Responsive behavior */
@media (max-width: 600px) {
  table.products, 
  table.products thead, 
  table.products tbody, 
  table.products th, 
  table.products td, 
  table.products tr {
    display: block;
  }

  table.products thead {
    display: none; /* hide header on small screens */
  }

  table.products tr {
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    background: #fefefe;
  }

  table.products td {
    border: none;
    position: relative;
    padding-left: 45%;
    text-align: left;
  }

  table.products td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 40%;
    padding-right: 10px;
    font-weight: bold;
    color: #000;
  }
}
/* === BLACKPLUG Premium Contact Table === */
table.products {
  width: 100%;
  border-collapse: collapse;
  margin: 25px auto;
  font-family: Verdana, Geneva, sans-serif;
  background-color: #f8f8f8;
  border: 2px solid #000; /* solid black border frame */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

/* Gradient Header with Gold Text */
table.products thead {
  background: linear-gradient(to right, #1a1a1a, #333);
  color: #ffcc00; /* gold */
  text-transform: uppercase;
  letter-spacing: 1px;
}

table.products th,
table.products td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

table.products th:first-child,
table.products td:first-child {
  width: 35%;
}

/* Alternating Row Colors */
table.products tbody tr:nth-child(even) {
  background-color: #eaeaea;
}
table.products tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

/* Hover Highlight Effect */
table.products tbody tr:hover {
  background-color: #fffae6; /* pale gold glow */
  transition: background-color 0.25s ease-in-out;
}

/* Gold Borders for Rows */
table.products tr {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
table.products tbody tr:hover {
  border-left-color: #ffcc00;
  border-right-color: #ffcc00;
}

/* Links Inside Table */
table.products a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
table.products a:hover {
  color: #ffcc00; /* gold hover */
}

/* Footer */
table.products tfoot {
  background: linear-gradient(to right, #000, #333);
  color: #ffcc00;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  height: 40px;
  border-top: 2px solid #ffcc00;
}

/* Responsive Table (Mobile-Friendly) */
@media (max-width: 600px) {
  table.products,
  table.products thead,
  table.products tbody,
  table.products th,
  table.products td,
  table.products tr {
    display: block;
  }

  table.products thead {
    display: none; /* Hide table header */
  }

  table.products tr {
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background: #fefefe;
  }

  table.products td {
    border: none;
    position: relative;
    padding-left: 45%;
    text-align: left;
  }

  table.products td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 40%;
    padding-right: 10px;
    font-weight: bold;
    color: #000;
  }

  /* Add gold accent borders on mobile too */
  table.products tr {
    border-left: 3px solid #ffcc00;
    border-right: 3px solid #ffcc00;
  }
}
/* === BLACKPLUG Premium Table Glow Enhancements === */

/* Header Glow */
table.products thead th {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #1a1a1a, #333);
  color: #ffcc00;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 18px;
  transition: all 0.4s ease-in-out;
}

/* Gold shimmer sweep on hover */
table.products thead th::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 204, 0, 0.15) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 204, 0, 0.15) 100%
  );
  transition: all 0.7s ease-in-out;
}

table.products thead th:hover::after {
  left: 100%;
}

/* Footer Glow */
table.products tfoot {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #000, #333);
  color: #ffcc00;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  height: 40px;
  border-top: 2px solid #ffcc00;
  transition: box-shadow 0.4s ease-in-out, transform 0.3s ease;
}

/* Subtle glow when hovered */
table.products tfoot:hover {
  box-shadow: 0 0 18px rgba(255, 204, 0, 0.6);
  transform: scale(1.02);
}

/* Glow outline on hover for entire table */
table.products:hover {
  box-shadow: 0 0 25px rgba(255, 204, 0, 0.4);
  transition: box-shadow 0.4s ease-in-out;
}
/* === BLACKPLUG CONTACT TABLE DARK THEME === */

/* Base table look */
.products {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  font-family: Verdana, Geneva, sans-serif;
  background: #000;
  color: #fff;
  border: 1px solid #222;
  box-shadow: 0 0 25px rgba(255, 204, 0, 0.25);
}

/* Header row */
.products thead th {
  background: linear-gradient(to right, #111, #1e1e1e);
  color: #ffcc00;
  font-size: 1em;
  font-weight: bold;
  padding: 12px 16px;
  border-bottom: 2px solid #ffcc00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
.products thead {
  border-bottom: 2px solid #ffcc00;
}

}

/* Body rows — dark gold branding */
.products tbody tr th {
  background: linear-gradient(to right, #000, #1a1a1a);
  color: #ffcc00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 14px;
  border-bottom: 1px solid #222;
}

.products tbody td {
  background: #0d0d0d;
  padding: 10px 14px;
  border-bottom: 1px solid #222;
}

/* Link colors */
.products a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.products a:hover {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

/* Hover glow for entire row */
.products tbody tr:hover th,
.products tbody tr:hover td {
  background: linear-gradient(to right, #1a1a1a, #2a2a2a);
  box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.3);
  transition: all 0.3s ease-in-out;
}

/* Footer styling */
.products tfoot td {
  background: linear-gradient(to right, #111, #000);
  color: #ffcc00;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  border-top: 2px solid #ffcc00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.products tfoot:hover td::after {
  animation: bp-gold-shimmer 1.2s ease-out 0s 1 forwards;
}