/**
 * Unique Theme Styles for takarakuji-officiali.com
 * This file contains unique styling to differentiate from the original site
 */

/* =============================================
   GLOBAL UNIQUE ADJUSTMENTS
   ============================================= */

/* Different border-radius values */
.mx_box,
.mx_list2,
.mx_accordion,
.lx_sub,
.mx_carouselCard,
.mx_thumbSet {
  border-radius: 12px !important;
}

.mx_btn,
.lx_sub_btn,
.mx_link,
.mx_label {
  border-radius: 20px !important;
}

/* Unique shadows */
.mx_box,
.mx_list2,
.lx_sub {
  box-shadow: 0 4px 20px rgba(26, 95, 180, 0.15) !important;
}

.mx_btn:hover,
.lx_sub_btn:hover {
  box-shadow: 0 6px 25px rgba(26, 95, 180, 0.3) !important;
  transform: translateY(-3px);
}

/* Unique transitions */
.mx_btn,
.lx_sub_btn,
.mx_link,
.mx_carouselCard {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =============================================
   UNIQUE COLOR SCHEME - BLUE/PURPLE THEME
   ============================================= */

/* Primary gradient backgrounds */
.lx_globalNav,
.page-header {
  background: linear-gradient(135deg, #1a5fb4 0%, #3584e4 50%, #1e3a8a 100%) !important;
}

/* Accent colors */
.mx_label__new {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
}

/* Button gradients */
.mx_btn__primary,
.cta-button {
  background: linear-gradient(135deg, #1a5fb4 0%, #3584e4 100%) !important;
}

.mx_btn__secondary {
  background: linear-gradient(135deg, #9b59b6 0%, #a855f7 100%) !important;
}

/* =============================================
   UNIQUE TYPOGRAPHY
   ============================================= */

/* Slightly different font weights */
.mx_ttl,
.mx_ttl2,
.page-section h2 {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* Different line heights */
.mx_txt,
.lx_content p {
  line-height: 1.9 !important;
}

/* =============================================
   UNIQUE SPACING
   ============================================= */

/* Increased padding - preserve left offset for fixed nav */
@media all and (min-width: 769px) {
  .lx_container_main {
    padding: 20px 20px 40px 250px !important;
  }
}
@media all and (max-width: 768px) {
  .lx_container_main {
    padding: 20px 12px !important;
  }
}

.mx_list2_item {
  padding: 16px !important;
}

.lx_sub_sec {
  padding: 18px !important;
}

/* =============================================
   UNIQUE HEADER STYLES
   ============================================= */

.lx_globalNav_logo img {
  filter: brightness(1.1) !important;
}

.lx_globalNav_list li a {
  padding: 14px 20px !important;
  border-radius: 8px !important;
  margin: 4px !important;
}

.lx_globalNav_list li a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* =============================================
   UNIQUE CARD STYLES
   ============================================= */

.lottery-card,
.mx_carouselCard {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #1a5fb4, #9b59b6) border-box !important;
}

.lottery-card:hover,
.mx_carouselCard:hover {
  border-color: #3584e4 !important;
  transform: translateY(-5px) scale(1.02) !important;
}

/* =============================================
   UNIQUE FOOTER STYLES
   ============================================= */

.lx_container_footer {
  background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%) !important;
}

.lx_footer_link a {
  color: #93c5fd !important;
}

.lx_footer_link a:hover {
  color: #bfdbfe !important;
}

/* =============================================
   UNIQUE SIDEBAR STYLES
   ============================================= */

.lx_sub {
  border-left: 4px solid #3584e4 !important;
}

.lx_sub_ttl {
  background: linear-gradient(135deg, #1a5fb4 0%, #3584e4 100%) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* =============================================
   UNIQUE FORM STYLES
   ============================================= */

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  border: 2px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: #3584e4 !important;
  box-shadow: 0 0 0 4px rgba(53, 132, 228, 0.2) !important;
}

/* =============================================
   UNIQUE ANIMATION EFFECTS
   ============================================= */

@keyframes uniquePulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 95, 180, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(26, 95, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 95, 180, 0); }
}

.mx_btn__primary:hover {
  animation: uniquePulse 1.5s infinite !important;
}

/* =============================================
   UNIQUE SCROLLBAR STYLES
   ============================================= */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1a5fb4, #3584e4);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1e3a8a, #1a5fb4);
}

/* =============================================
   UNIQUE PAGE SECTION STYLES
   ============================================= */

.page-section {
  border-left: 5px solid #1a5fb4 !important;
  border-radius: 0 12px 12px 0 !important;
  background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%) !important;
}

.page-section h2 {
  color: #1a5fb4 !important;
  border-bottom: 3px solid #3584e4 !important;
}

/* =============================================
   UNIQUE TABLE STYLES
   ============================================= */

.results-table th {
  background: linear-gradient(135deg, #1a5fb4 0%, #1e3a8a 100%) !important;
}

.results-table tr:nth-child(even) {
  background: #eff6ff !important;
}

/* =============================================
   UNIQUE FAQ STYLES
   ============================================= */

.faq-question {
  background: linear-gradient(135deg, #1a5fb4 0%, #3584e4 100%) !important;
  border-radius: 12px 12px 0 0 !important;
}

.faq-question::before {
  background: #fff !important;
  color: #1a5fb4 !important;
}

.faq-answer::before {
  background: #1a5fb4 !important;
  color: #fff !important;
}

/* =============================================
   RESPONSIVE UNIQUE ADJUSTMENTS
   ============================================= */

@media (max-width: 768px) {
  .lx_globalNav {
    padding: 12px !important;
  }
  
  .mx_box,
  .mx_list2 {
    border-radius: 8px !important;
  }
  
  .mx_btn {
    padding: 14px 24px !important;
  }
}