/* Brand-Specific Styling System for Dual Portal */

/* ===== BRAND VARIABLES ===== */

/* 上順資訊 (SS) Brand Colors */
:root {
  --ss-primary: #0066cc;
  --ss-primary-dark: #004080;
  --ss-secondary: #3399ff;
  --ss-accent: #6c63ff;
  --ss-success: #28a745;
  --ss-info: #17a2b8;
  --ss-gradient-start: #667eea;
  --ss-gradient-end: #764ba2;
  --ss-text-primary: #333333;
  --ss-text-secondary: #666666;
}

/* 信誠資訊 (SC) Brand Colors */
.brand-sc {
  --sc-primary: #5fc4b8;
  --sc-primary-dark: #4a9d94;
  --sc-secondary: #7dd3c0;
  --sc-accent: #45b7aa;
  --sc-success: #20c997;
  --sc-info: #0dcaf0;
  --sc-gradient-start: #5fc4b8;
  --sc-gradient-end: #4a9d94;
  --sc-text-primary: #2c3e50;
  --sc-text-secondary: #5a6c7d;
}

/* ===== BRAND-SPECIFIC CLASSES ===== */

/* 上順資訊 (SS) Styling */
.brand-ss {
  --brand-primary: var(--ss-primary);
  --brand-primary-dark: var(--ss-primary-dark);
  --brand-secondary: var(--ss-secondary);
  --brand-accent: var(--ss-accent);
  --brand-success: var(--ss-success);
  --brand-info: var(--ss-info);
  --brand-gradient-start: var(--ss-gradient-start);
  --brand-gradient-end: var(--ss-gradient-end);
  --brand-text-primary: var(--ss-text-primary);
  --brand-text-secondary: var(--ss-text-secondary);
}

/* 信誠資訊 (SC) Styling */
.brand-sc {
  --brand-primary: var(--sc-primary);
  --brand-primary-dark: var(--sc-primary-dark);
  --brand-secondary: var(--sc-secondary);
  --brand-accent: var(--sc-accent);
  --brand-success: var(--sc-success);
  --brand-info: var(--sc-info);
  --brand-gradient-start: var(--sc-gradient-start);
  --brand-gradient-end: var(--sc-gradient-end);
  --brand-text-primary: var(--sc-text-primary);
  --brand-text-secondary: var(--sc-text-secondary);
}

/* ===== BRAND-SPECIFIC BANNER DESIGNS ===== */

/* 上順資訊 Banner - Technology & Gaming Focus */
.brand-ss .masthead {
  position: relative;
  background-color: #343a40;
  background: url("../landing_page/assets/img/bg-masthead-new.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.brand-ss .masthead::before {
  content: "";
  position: absolute;
  background-color: #1c375e;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index: 1;
}

.brand-ss .masthead .container {
  position: relative;
  z-index: 2;
}

/* 信誠資訊 Banner - Professional & Stable Focus */
.brand-sc .masthead {
  position: relative;
  background-color: #343a40;
  background: url("../landing_page/assets/img/bg-masthead-new.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.brand-sc .masthead::before {
  content: "";
  position: absolute;
  background-color: #1c375e;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index: 1;
}

.brand-sc .masthead .container {
  position: relative;
  z-index: 2;
}

/* ===== BRAND-SPECIFIC COMPONENT STYLING ===== */

/* Primary Buttons */
.brand-ss .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  transition: all 0.3s ease;
}

.brand-ss .btn-primary:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.brand-sc .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  transition: all 0.3s ease;
}

.brand-sc .btn-primary:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(95, 196, 184, 0.3);
}

/* Outline Buttons */
.brand-ss .btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.brand-ss .btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.brand-sc .btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.brand-sc .btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

/* Text Colors */
.brand-ss .text-primary {
  color: var(--brand-primary) !important;
}

.brand-sc .text-primary {
  color: var(--brand-primary) !important;
}

/* Background Colors */
.brand-ss .bg-primary {
  background-color: var(--brand-primary) !important;
}

.brand-sc .bg-primary {
  background-color: var(--brand-primary) !important;
}

/* Border Colors */
.brand-ss .border-primary {
  border-color: var(--brand-primary) !important;
}

.brand-sc .border-primary {
  border-color: var(--brand-primary) !important;
}

/* ===== BRAND-SPECIFIC FEATURE ICONS ===== */

/* 上順資訊 Feature Icons - Gaming & E-commerce Focus */
.brand-ss .features-icons-icon i {
  color: var(--brand-primary);
  transition: all 0.3s ease;
}

.brand-ss .features-icons-item:hover .features-icons-icon i {
  color: var(--brand-accent);
  transform: scale(1.1);
}

/* 信誠資訊 Feature Icons - Professional & Stable Focus */
.brand-sc .features-icons-icon i {
  color: var(--brand-primary);
  transition: all 0.3s ease;
}

.brand-sc .features-icons-item:hover .features-icons-icon i {
  color: var(--brand-accent);
  transform: scale(1.1);
}

/* ===== BRAND-SPECIFIC SHOWCASE SECTIONS ===== */

/* 上順資訊 Showcase - Dynamic & Modern */
.brand-ss .showcase .showcase-img {
  transition: all 0.3s ease;
}

.brand-ss .showcase .row:hover .showcase-img {
  transform: scale(1.02);
}

/* 信誠資訊 Showcase - Professional & Stable */
.brand-sc .showcase .showcase-img {
  transition: all 0.3s ease;
  filter: brightness(1.1);
}

.brand-sc .showcase .row:hover .showcase-img {
  filter: brightness(1.2);
}

/* ===== BRAND-SPECIFIC CARDS ===== */

/* 上順資訊 Cards - Gaming Style */
.brand-ss .card {
  border-radius: 15px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.brand-ss .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
  border-color: var(--brand-primary);
}

/* 信誠資訊 Cards - Professional Style */
.brand-sc .card {
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid rgba(95, 196, 184, 0.2);
}

.brand-sc .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(95, 196, 184, 0.15);
  border-color: var(--brand-primary);
}

/* ===== BRAND-SPECIFIC TESTIMONIALS ===== */

/* 上順資訊 Testimonials - Dynamic Style */
.brand-ss .testimonial-item {
  transition: all 0.3s ease;
}

.brand-ss .testimonial-item:hover {
  transform: translateY(-5px);
}

.brand-ss .testimonial-item img {
  border-radius: 15px;
  transition: all 0.3s ease;
}

.brand-ss .testimonial-item:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

/* 信誠資訊 Testimonials - Professional Style */
.brand-sc .testimonial-item {
  transition: all 0.3s ease;
}

.brand-sc .testimonial-item:hover {
  transform: translateY(-3px);
}

.brand-sc .testimonial-item img {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.brand-sc .testimonial-item:hover img {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(95, 196, 184, 0.15);
}

/* ===== BRAND-SPECIFIC NAVBAR ===== */

/* 上順資訊 Navbar */
.brand-ss .navbar-brand {
  color: var(--brand-primary) !important;
  font-weight: 700;
  transition: all 0.3s ease;
}

.brand-ss .navbar-brand:hover {
  color: var(--brand-accent) !important;
  transform: scale(1.05);
}

.brand-ss .nav-link.active {
  color: var(--brand-primary) !important;
  font-weight: 600;
}

/* 信誠資訊 Navbar */
.brand-sc .navbar-brand {
  color: var(--brand-primary) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.brand-sc .navbar-brand:hover {
  color: var(--brand-accent) !important;
}

.brand-sc .nav-link.active {
  color: var(--brand-primary) !important;
  font-weight: 600;
}

/* ===== BRAND-SPECIFIC FORMS ===== */

/* Form Focus States */
.brand-ss .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.brand-sc .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(95, 196, 184, 0.25);
}

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

@media (max-width: 768px) {
  .brand-ss .masthead,
  .brand-sc .masthead {
    padding: 5rem 0;
  }
  
  .brand-ss .masthead h1,
  .brand-sc .masthead h1 {
    font-size: 2rem;
  }
  
  .brand-ss .showcase-text,
  .brand-sc .showcase-text {
    padding: 2rem;
  }
  
  .brand-ss .card:hover,
  .brand-sc .card:hover {
    transform: translateY(-3px);
  }
}

@media (min-width: 768px) {
  .brand-ss .masthead,
  .brand-sc .masthead {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  .brand-ss .masthead h1, .brand-ss .masthead .h1,
  .brand-sc .masthead h1, .brand-sc .masthead .h1 {
    font-size: 3rem;
  }
}

/* ===== BRAND-SPECIFIC ANIMATIONS ===== */

/* 上順資訊 Animations - More Dynamic */
@keyframes ss-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.brand-ss .features-icons-icon i:hover {
  animation: ss-pulse 1s ease-in-out;
}

/* 信誠資訊 Animations - More Subtle */
@keyframes sc-glow {
  0% { box-shadow: 0 0 5px rgba(95, 196, 184, 0.3); }
  50% { box-shadow: 0 0 20px rgba(95, 196, 184, 0.5); }
  100% { box-shadow: 0 0 5px rgba(95, 196, 184, 0.3); }
}

.brand-sc .btn-primary:hover {
  animation: sc-glow 2s ease-in-out infinite;
}

/* ===== UTILITY CLASSES ===== */

/* Brand-specific utility classes */
.brand-ss .text-brand-primary { color: var(--brand-primary) !important; }
.brand-ss .text-brand-secondary { color: var(--brand-secondary) !important; }
.brand-ss .bg-brand-primary { background-color: var(--brand-primary) !important; }
.brand-ss .bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.brand-ss .border-brand-primary { border-color: var(--brand-primary) !important; }

.brand-sc .text-brand-primary { color: var(--brand-primary) !important; }
.brand-sc .text-brand-secondary { color: var(--brand-secondary) !important; }
.brand-sc .bg-brand-primary { background-color: var(--brand-primary) !important; }
.brand-sc .bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.brand-sc .border-brand-primary { border-color: var(--brand-primary) !important; }