/*
Theme Name: LotteryChecker Pro Child
Theme URI: https://lotterychecker.co.uk/
Author: LotteryChecker Team
Author URI: https://lotterychecker.co.uk/
Description: Child theme for GeneratePress tailored for LotteryChecker Pro – clean, modern and data-focused.
Template: generatepress
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotterycheckerpro-child
*/

/* ?? Base styles */
body {
  background-color: #f8fafc;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: #222;
  line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5 {
  color: #0073aa;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Buttons */
button,
input[type=submit],
.wp-block-button__link,
a.button {
  background-color: #0073aa;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

button:hover,
input[type=submit]:hover,
.wp-block-button__link:hover,
a.button:hover {
  background-color: #005f8a;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: center;
}

th {
  background-color: #0073aa;
  color: white;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #f4f8fc;
}

/* Cards */
.card, .lcpro-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Links */
a {
  color: #0073aa;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Dashboard sections */
.lcpro-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.lcpro-dashboard a {
  display: block;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 1.5rem;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #0073aa;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lcpro-dashboard a:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Footer / Note */
.lcpro-note {
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-top: 3rem;
}
/* --- LotteryChecker Pro color refinements --- */
body {
  background-color: #f2f5f9;
}

.site-main {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Page titles */
.entry-title {
  color: #0073aa;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Cards */
.lcpro-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid #e5ecf4;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Buttons */
button,
input[type="submit"],
.wp-block-button__link {
  background-color: #0073aa;
  border: none;
  border-radius: 8px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 20px;
  transition: all 0.2s ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: #005f8a;
  transform: translateY(-1px);
}

/* Tables */
table {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
tr:nth-child(even) { background: #f4f8fc; }
th { background: #0073aa; color: white; }
td, th { padding: 10px 12px; border: 1px solid #e0e6ef; }

/* Footer note */
.lcpro-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 14px;
  color: #555;
}
.site-header {
  background: linear-gradient(90deg, #0073aa 0%, #00a8ff 100%);
  color: white;
}
/* --- Make header and nav a seamless single gradient --- */
.site-header,
.main-navigation,
.main-navigation .inside-navigation {
  background: linear-gradient(90deg, #0073aa 0%, #00a8ff 100%) !important;
  color: #fff !important;
}

.main-navigation a {
  color: #fff !important;
  font-weight: 500;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: #ffeb3b !important; /* soft gold hover */
}

.main-navigation {
  border: none !important;
  box-shadow: none !important;
}
/* --- LotteryChecker Custom Menu Styling --- */

/* Make nav background match header (transparent over header background) */
.main-navigation {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* If your header has a specific color and you want it solid instead: */
/* .main-navigation {
  background-color: #0073aa !important;  /* same as header blue */
} */

/* Menu link text color and hover state */
.main-navigation .main-nav ul li a {
  color: #000000 !important;           /* readable black text */
  font-weight: 600;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: #0073aa !important;           /* on hover = your blue accent */
}

/* If your header uses flex or sticky nav, ensure transparency remains */
.site-header {
  background-color: #ffffff !important; /* or transparent if you prefer */
  border-bottom: 1px solid #ddd;
}

/* === LotteryChecker Pro – Header & Menu Style Fix === */

/* Remove gradient & match header background */
.main-navigation,
.inside-navigation,
.navigation-branding,
.main-nav,
.site-header {
  background: inherit !important; /* use same as header background */
  background-color: inherit !important;
  box-shadow: none !important;
}

/* If your header uses a solid colour (e.g. blue), set it here explicitly: */
/* .main-navigation,
.inside-navigation {
  background-color: #0073aa !important; 
} */

/* Fix link colors in nav */
.main-navigation .main-nav ul li a {
  color: #000000 !important;        /* default = solid black text */
  font-weight: 600;
  text-shadow: none !important;     /* remove any light gradient effect */
}

/* Hover, focus, current menu item */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: #0073aa !important;        /* your accent blue on hover */
  background: transparent !important;
}

/* Remove any leftover background rectangles behind nav area */
.main-navigation .inside-navigation {
  background-image: none !important;
  border: none !important;
}

/* Ensure transparency looks seamless on sticky header too */
.site-header,
.main-navigation.is_sticky,
.site-header.sticky-enabled {
  background: inherit !important;
  background-color: #0073aa !important;
  background-color: inherit !important;
}



/* === Gradient Blue Header + Menu === */
.site-header,
.main-navigation,
.inside-navigation {
  background: linear-gradient(90deg, #0073aa 0%, #0099cc 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* === Gradient Header with Transparent Navigation === */

/* Give the header the blue gradient */
.site-header {
  background: linear-gradient(90deg, #0073aa 0%, #0099cc 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make the navigation transparent so it blends with header */
.main-navigation,
.inside-navigation {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Navigation link styles */
.main-navigation .main-nav ul li a {
  color: black !important;
  font-weight: 600;
  text-shadow: none !important;
  transition: color 0.9s ease;
}

/* Hover and current item styling */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: black !important; /* soft yellow-white on hover */
  background: transparent !important;
}

/* Optional: remove bottom border or line below menu */
.main-navigation .inside-navigation {
  border: none !important;
  background-image: none !important;
}

/* Ensure sticky nav also inherits transparency */
.main-navigation.is_sticky,
.site-header.sticky-enabled {
  background: linear-gradient(90deg, #0073aa 0%, #0099cc 100%) !important;
}

/* ? CONTAINER */
.lcpro-tickets-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

/* ? FORM TABLE */
.lcpro-tickets-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto 1rem auto;
}

.lcpro-tickets-container th,
.lcpro-tickets-container td {
  text-align: center;
  padding: 0.6rem;
  border: 1px solid #ddd;
  font-size: 1rem;
}

.lcpro-tickets-container input[type="text"],
.lcpro-tickets-container input[type="number"] {
  width: 60px;
  text-align: center;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

/* ? BUTTONS */
.lcpro-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.lcpro-btn-primary {
  background: #0073aa;
  color: #fff;
}

.lcpro-btn-primary:hover {
  background: #005b88;
}

.lcpro-btn-danger {
  background: #e74c3c;
  color: #fff;
}

.lcpro-btn-danger:hover {
  background: #c0392b;
}

/* ? RESPONSIVE BEHAVIOUR */
@media (max-width: 768px) {
  /* Stack headings & inputs vertically */
  .lcpro-tickets-container table,
  .lcpro-tickets-container tbody,
  .lcpro-tickets-container tr,
  .lcpro-tickets-container td,
  .lcpro-tickets-container th {
    display: block;
    width: 100%;
  }

  .lcpro-tickets-container tr {
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0.5rem;
    background: #fff;
  }

  .lcpro-tickets-container th {
    background: none;
    color: #0073aa;
    font-weight: bold;
    text-align: left;
    padding: 0.3rem 0;
  }

  .lcpro-tickets-container td {
    text-align: left;
    padding: 0.3rem 0;
    border: none;
  }

  .lcpro-tickets-container input[type="text"],
  .lcpro-tickets-container input[type="number"] {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
  }

  /* Buttons full width */
  .lcpro-btn,
  .lcpro-tickets-container button {
    width: 100%;
    margin-top: 0.3rem;
  }

  select {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 6px;
  }
}
/* Scoped to Pro tables only */
.lcpro-tickets-container .table-scroll table {
  min-width: 700px !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.lcpro-tickets-container table th,
.lcpro-tickets-container table td {
  border: 1px solid #ddd !important;
  padding: 10px !important;
  font-size: 1rem !important;
  text-align: center !important;
}

.lcpro-tickets-container input[type="number"] {
  width: 60px !important;
  border-radius: 6px !important;
  border: 1px solid #ccc !important;
  text-align: center !important;
}

/* Scroll container */
.lcpro-tickets-container .table-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  width: 100% !important;
}

/* Buttons */
.lcpro-tickets-container .lcpro-btn {
  background: #0073aa !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-size: 1rem !important;
}
.lcpro-tickets-container .lcpro-btn:hover {
  background: #005b88 !important;
}

/* Mobile responsive behaviour */
@media (max-width: 768px) {
  .lcpro-tickets-container table {
    font-size: 0.9rem !important;
  }

  .lcpro-tickets-container input[type="number"] {
    width: 45px !important;
  }

  .lcpro-tickets-container .lcpro-btn {
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
  }
}

/* ? Ticket Table – Desktop Default */
.lcpro-tickets-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.lcpro-tickets-table th,
.lcpro-tickets-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.lcpro-tickets-table th {
  background: #0073aa;
  color: white;
  font-weight: 600;
}

.lcpro-tickets-table tr:nth-child(even) {
  background: #f9f9f9;
}

/* ? Buttons */
.lcpro-btn {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

.lcpro-btn-primary {
  background: #0073aa;
  color: white;
}

.lcpro-btn-primary:hover {
  background: #005b88;
}

.lcpro-btn-danger {
  background: #e74c3c;
  color: white;
}

.lcpro-btn-danger:hover {
  background: #c0392b;
}

/* ? Mobile view: stacked cards instead of table */
@media (max-width: 768px) {
  .lcpro-tickets-table,
  .lcpro-tickets-table thead,
  .lcpro-tickets-table tbody,
  .lcpro-tickets-table th,
  .lcpro-tickets-table td,
  .lcpro-tickets-table tr {
    display: block;
  }

  .lcpro-tickets-table thead {
    display: none;
  }

  .lcpro-tickets-table tr {
    background: #fff;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 0.8rem;
  }

  .lcpro-tickets-table td {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.95rem;
  }

  .lcpro-tickets-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #0073aa;
  }

  .lcpro-tickets-table-wrapper {
    overflow-x: hidden;
  }

  /* Forms & Buttons stacked neatly */
  .lcpro-tickets-table form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .lcpro-btn {
    width: 100%;
    padding: 10px;
  }
}
/* ?? Saved Tickets - Card Layout */
.lcpro-tickets-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* ===========================================
   Responsive Saved Tickets – Desktop vs Mobile
   =========================================== */

/* ? Base card style (shared between desktop + mobile) */
.lcpro-tickets-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ticket-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.2s ease;
}

.ticket-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Header & numbers */
.ticket-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.5rem;
}
.ticket-numbers {
  text-align: center;
  font-weight: bold;
  color: #0073aa;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  letter-spacing: 1px;
}

/* Form & buttons */
.ticket-form {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0.8rem;
}
.ticket-form select {
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.ticket-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ticket-actions form { margin: 0; }
.share-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0073aa;
  font-size: 0.9rem;
  cursor: pointer;
}
.share-toggle input { accent-color: #0073aa; }

/* ===========================
   Desktop refinement (>=769px)
   =========================== */
@media (min-width: 769px) {
  .ticket-card {
    padding: 0.75rem 1rem;
  }

  .ticket-form select {
    font-size: 0.85rem;
    padding: 3px 4px;
  }

  .ticket-form button,
  .ticket-actions button {
    padding: 5px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    background: #0073aa;
    color: #fff;
    border: none;
  }

  .ticket-actions button.lcpro-btn-danger {
    background: #e74c3c;
  }

  .ticket-actions button:hover {
    opacity: 0.9;
  }

  /* Compact grid */
  .lcpro-tickets-list {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

/* ===========================
   Mobile adjustments (<768px)
   =========================== */
@media (max-width: 768px) {
  .ticket-card {
    padding: 1rem;
  }
  .ticket-form {
    flex-direction: column;
    align-items: center;
  }
  .ticket-form select,
  .ticket-form button {
    width: 100%;
    font-size: 1rem;
  }
  .ticket-actions {
    flex-direction: column;
    gap: 8px;
  }
  .ticket-actions button {
    width: 100%;
    font-size: 1rem;
  }
}