/**
 * SWISS POST VISUAL ENHANCEMENTS v2
 * High-specificity overrides for post.ch design system
 * Targets actual DOM structure from login.php, carte.php, infos.php, etc.
 */

/* =====================================================
   1. CSS CUSTOM PROPERTIES - Override existing variables
   ===================================================== */
:root {
  --sp-yellow: #FFCC00;
  --sp-yellow-rgb: 255, 204, 0;
  --sp-red: #FF0000;
  --sp-nightblue: #004976;
  --sp-nightblue-bright: #0076A8;
  --sp-nightblue-rgb: 0, 73, 118;
  --sp-dark: #333333;
  --sp-gray: #F4F3F1;
  --sp-light: #FAF9F8;
  --sp-white: #FFFFFF;
  --sp-success: #2C871D;
  --sp-warning: #F49E00;
  --sp-error: #A51728;
  --sp-focus-ring: rgba(0, 118, 168, 0.25);
  --sp-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sp-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --sp-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --sp-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --sp-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  --sp-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --sp-radius-sm: 4px;
  --sp-radius-md: 8px;
  --sp-radius-lg: 12px;
  --sp-radius-xl: 16px;
  --sp-radius-full: 9999px;
}

/* =====================================================
   2. GLOBAL BODY & APP-ROOT IMPROVEMENTS
   ===================================================== */
body,
body[cz-shortcut-listen="true"],
html body {
  background-color: var(--sp-light) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

app-root,
app-root[_nghost-ng-c1137462336],
body > app-root {
  display: block;
  min-height: 100vh;
}

/* =====================================================
   3. HEADER HOST ELEMENTS (outside shadow DOM)
   ===================================================== */
swisspost-internet-header,
swisspost-internet-header.hydrated,
swisspost-internet-header.header-loaded,
.post-internet-header,
header.post-internet-header {
  display: block;
  position: relative;
  z-index: 1000;
  overflow: visible !important;
}

swisspost-internet-header {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: box-shadow var(--sp-transition-normal);
}

swisspost-internet-header.scrolling-up {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Meta navigation host and alignment */
post-meta-navigation,
post-meta-navigation.hydrated,
post-meta-navigation.hidden-lg {
  display: block;
}

.meta-container,
.meta-container.horizontal,
div.meta-container {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: flex-start !important;
}

.meta-list,
ul.meta-list,
nav.meta-navigation ul {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  justify-content: flex-start !important;
}

.meta-list li,
.meta-navigation li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.meta-link,
a.meta-link,
.meta-navigation a.meta-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.5rem 0.75rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  min-height: 40px !important;
}

/* Language switch host */
post-language-switch,
post-language-switch.hydrated,
post-language-switch#post-language-switch-desktop {
  display: block;
}

/* Header logo host - fix clipping and sizing */
post-header-logo,
post-header-logo.hydrated {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 80px !important;
  min-width: 80px !important;
  height: 80px !important;
  width: 80px !important;
  overflow: visible !important;
  aspect-ratio: 1 / 1 !important;
}

/* Override logo scale to prevent clipping */
swisspost-internet-header {
  --logo-scale: 1.0 !important;
}

/* Breadcrumbs host */
swisspost-internet-breadcrumbs,
swisspost-internet-breadcrumbs.hydrated {
  display: block;
  margin-bottom: 8px;
}

/* =====================================================
   4. MAIN CONTENT CONTAINER
   ===================================================== */
.container.my-big,
body .container.my-big,
app-root .container.my-big {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* =====================================================
   5. CARD ENHANCEMENTS (product-card, info-card)
   ===================================================== */
.card,
.card.product-card,
.card.info-card,
body .card,
app-root .card,
[_nghost-ng-c3734797008] .card,
[_nghost-ng-c696835924] .card,
.card.product-card.cursor-hand {
  border-radius: var(--sp-radius-lg) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: var(--sp-shadow-sm) !important;
  transition: box-shadow var(--sp-transition-normal), transform var(--sp-transition-normal) !important;
  overflow: hidden !important;
}

/* Preserve bg-light background */
.card.bg-light,
.card.product-card.bg-light,
.card.product-card.cursor-hand.bg-light {
  background: var(--sp-gray) !important;
}

/* Default white background for cards without bg-* class */
.card:not([class*="bg-"]),
.card.product-card:not([class*="bg-"]) {
  background: var(--sp-white) !important;
}

.card:hover,
.card.product-card:hover,
.card.info-card:hover,
.card.product-card.cursor-hand:hover {
  box-shadow: var(--sp-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Card body padding - only apply when no specific padding classes exist */
.card-body:not([class*="pe-"]):not([class*="ps-"]):not([class*="py-"]),
.card .card-body:not([class*="pe-"]):not([class*="ps-"]):not([class*="py-"]) {
  padding: 1.5rem !important;
}

/* Product title inside cards */
.product-title,
#productName,
.product-title.mb-0,
[_nghost-ng-c3734797008] .product-title {
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: var(--sp-dark) !important;
  line-height: 1.3 !important;
}

/* Description text */
.description-title,
.description-title.my-0,
[_nghost-ng-c3734797008] .description-title {
  font-size: 0.875rem !important;
  color: var(--sp-secondary, #666) !important;
  line-height: 1.5 !important;
  margin-top: 0.25rem !important;
}

/* =====================================================
   6. BUTTON ENHANCEMENTS
   ===================================================== */
.btn,
button.btn,
a.btn,
input.btn,
body .btn,
app-root .btn,
[_nghost-ng-c3734797008] .btn,
[_nghost-ng-c696835924] .btn {
  border-radius: var(--sp-radius-md) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  transition: all var(--sp-transition-normal) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
}

/* Preserve block display for grid buttons */
.btn.col-12,
.btn[class*="col-"],
a.btn.col-12,
a.btn[class*="col-"] {
  display: flex !important;
  width: 100% !important;
}

.btn:active,
button.btn:active,
a.btn:active {
  transform: translateY(0) !important;
  box-shadow: var(--sp-shadow-xs) !important;
}

/* Primary button - Swiss Post Yellow */
.btn-primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-primary.btn-animated,
.btn-primary.button-height,
body .btn-primary,
app-root .btn-primary,
[_nghost-ng-c3734797008] .btn-primary {
  background: linear-gradient(135deg, var(--sp-yellow) 0%, #FFE033 100%) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(var(--sp-yellow-rgb), 0.3) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn-primary.btn-animated:hover,
.btn-primary.button-height:hover {
  background: linear-gradient(135deg, #E6B800 0%, var(--sp-yellow) 100%) !important;
  box-shadow: 0 4px 16px rgba(var(--sp-yellow-rgb), 0.4) !important;
  transform: translateY(-2px) !important;
  color: #000000 !important;
}

/* Secondary button */
.btn-secondary,
.btn.btn-secondary,
a.btn-secondary,
button.btn-secondary,
body .btn-secondary {
  background: linear-gradient(135deg, var(--sp-nightblue) 0%, var(--sp-nightblue-bright) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(var(--sp-nightblue-rgb), 0.25) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
a.btn-secondary:hover {
  background: linear-gradient(135deg, #003a5c 0%, #00608a 100%) !important;
  box-shadow: 0 4px 16px rgba(var(--sp-nightblue-rgb), 0.35) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Tertiary / Ghost button */
.btn-tertiary,
.btn.btn-tertiary,
.btn-link,
a.btn-link,
button.btn-tertiary {
  background: transparent !important;
  color: var(--sp-nightblue) !important;
  border: 2px solid var(--sp-nightblue) !important;
  box-shadow: none !important;
}

.btn-tertiary:hover,
.btn.btn-tertiary:hover,
.btn-link:hover,
a.btn-link:hover {
  background: var(--sp-nightblue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(var(--sp-nightblue-rgb), 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Default button override */
.btn-default,
.btn.btn-default,
button.btn-default {
  background: linear-gradient(135deg, var(--sp-yellow) 0%, #FFE033 100%) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(var(--sp-yellow-rgb), 0.3) !important;
}

.btn-default:hover,
.btn.btn-default:hover {
  background: linear-gradient(135deg, #E6B800 0%, var(--sp-yellow) 100%) !important;
  box-shadow: 0 4px 16px rgba(var(--sp-yellow-rgb), 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Danger / Red button */
.btn-danger,
.btn.btn-danger,
button.btn-danger {
  background: linear-gradient(135deg, var(--sp-error) 0%, #c41e32 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(165, 23, 40, 0.25) !important;
}

.btn-danger:hover,
.btn.btn-danger:hover {
  background: linear-gradient(135deg, #8a1321 0%, var(--sp-error) 100%) !important;
  box-shadow: 0 4px 16px rgba(165, 23, 40, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Button with span text */
.btn > span,
.btn-primary > span,
.btn-secondary > span {
  position: relative;
  z-index: 1;
}

/* =====================================================
   7. FORM INPUT ENHANCEMENTS
   ===================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
textarea,
select,
.form-control,
.form-control-lg,
.form-select,
.search-form input,
.needs-validation input,
input.form-control {
  border-radius: var(--sp-radius-md) !important;
  border: 2px solid #e5e5e5 !important;
  padding: 0.875rem 1rem !important;
  font-size: 1rem !important;
  transition: all var(--sp-transition-normal) !important;
  background: var(--sp-white) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: "Swiss Post Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.5 !important;
  color: var(--sp-dark) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-control-lg:focus,
.search-form input:focus,
.needs-validation input:focus,
input.form-control:focus {
  border-color: var(--sp-nightblue-bright) !important;
  box-shadow: 0 0 0 4px var(--sp-focus-ring) !important;
  outline: none !important;
  background: var(--sp-white) !important;
}

input:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus),
.form-control:hover:not(:focus) {
  border-color: #c0c0c0 !important;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

/* Search form specific */
.search-form:not([class*="row"]):not([class*="d-flex"]),
form.search-form:not([class*="row"]):not([class*="d-flex"]),
form.needs-validation:not([class*="row"]):not([class*="d-flex"]) {
  background: var(--sp-white) !important;
  border-radius: var(--sp-radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: var(--sp-shadow-sm) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  margin-bottom: 1.5rem !important;
}

/* Form labels */
label,
.form-label,
.form-check-label,
.col-form-label,
[_nghost-ng-c813462227] label {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--sp-dark) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Form validation states */
.was-validated .form-control:valid,
.form-control.is-valid,
.needs-validation .ng-valid {
  border-color: var(--sp-success) !important;
  background-image: none !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.needs-validation .ng-invalid.ng-dirty {
  border-color: var(--sp-error) !important;
  background-image: none !important;
}

/* =====================================================
   8. ALERTS & NOTIFICATIONS
   ===================================================== */
.alert,
.notification,
.message,
.toast,
body .alert {
  border-radius: var(--sp-radius-md) !important;
  padding: 1rem 1.25rem !important;
  border-left: 4px solid !important;
  margin-bottom: 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  box-shadow: var(--sp-shadow-xs) !important;
}

.alert-success,
.notification-success,
.alert-success.alert {
  background: #e8f5e4 !important;
  border-left-color: var(--sp-success) !important;
  color: #1a5c10 !important;
}

.alert-warning,
.notification-warning,
.alert-warning.alert {
  background: #fef5e7 !important;
  border-left-color: var(--sp-warning) !important;
  color: #7a4a00 !important;
}

.alert-error,
.alert-danger,
.notification-error,
.alert-danger.alert {
  background: #fde8ea !important;
  border-left-color: var(--sp-error) !important;
  color: #7a0f1a !important;
}

.alert-info,
.notification-info,
.alert-info.alert {
  background: #e8f4f8 !important;
  border-left-color: var(--sp-nightblue-bright) !important;
  color: #003a5c !important;
}

/* =====================================================
   9. LOADING & SPINNER ENHANCEMENTS
   ===================================================== */
.loader,
.loading-overlay,
.spinner-container {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.spinner-border,
.spinner-border.text-primary,
.loader .spinner-border {
  width: 3rem !important;
  height: 3rem !important;
  border: 0.3em solid var(--sp-yellow) !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  animation: spin 0.75s linear infinite !important;
  box-shadow: 0 4px 12px rgba(var(--sp-yellow-rgb), 0.25) !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   10. FOOTER & COPYRIGHT
   ===================================================== */
.copyright,
.copyright.container,
body .copyright,
app-root .copyright,
.footer,
body .footer {
  background: linear-gradient(180deg, var(--sp-dark) 0%, #1a1a1a 100%) !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 2.5rem 0 !important;
  margin-top: 3rem !important;
  font-size: 0.875rem !important;
  border-top: 3px solid var(--sp-yellow) !important;
}

.copyright span,
.copyright .bold,
.copyright.container span,
.copyright.container .bold {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 600 !important;
}

/* Footer links */
.footer a,
.copyright a,
.footer .nav-link,
.copyright .nav-link {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  transition: color var(--sp-transition-fast) !important;
}

.footer a:hover,
.copyright a:hover {
  color: var(--sp-yellow) !important;
}

/* =====================================================
   11. TYPOGRAPHY IMPROVEMENTS
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
body h1, body h2, body h3,
app-root h1, app-root h2, app-root h3 {
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--sp-dark) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 1rem !important;
}

h1, .h1, body h1 { font-size: 2rem !important; }
h2, .h2, body h2 { font-size: 1.625rem !important; }
h3, .h3, body h3 { font-size: 1.375rem !important; }
h4, .h4, body h4 { font-size: 1.125rem !important; }

p, span, div,
body p, body span,
app-root p {
  line-height: 1.6 !important;
}

/* Lead / intro text */
.lead,
.text-lead,
.intro-text {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: var(--sp-secondary, #555) !important;
}

/* =====================================================
   12. LINK ENHANCEMENTS
   ===================================================== */
a:not(.btn):not(.nav-link):not(.meta-link):not(.main-link):not(.flyout-link),
.link,
.text-link,
body a:not(.btn) {
  color: var(--sp-nightblue) !important;
  text-decoration: none !important;
  transition: color var(--sp-transition-fast), box-shadow var(--sp-transition-fast) !important;
  box-shadow: inset 0 -2px 0 0 transparent !important;
}

a:not(.btn):not(.nav-link):hover,
.link:hover,
.text-link:hover {
  color: var(--sp-nightblue-bright) !important;
  box-shadow: inset 0 -2px 0 0 var(--sp-yellow) !important;
}

/* =====================================================
   13. BADGES & LABELS
   ===================================================== */
.badge,
.label,
.tag,
.status-badge,
body .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: var(--sp-radius-full) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.4 !important;
  gap: 0.25rem !important;
}

.badge-yellow,
.badge-warning,
.badge.bg-warning {
  background: var(--sp-yellow) !important;
  color: #000 !important;
}

.badge-blue,
.badge-info,
.badge.bg-info {
  background: var(--sp-nightblue) !important;
  color: #fff !important;
}

.badge-green,
.badge-success,
.badge.bg-success {
  background: var(--sp-success) !important;
  color: #fff !important;
}

.badge-red,
.badge-error,
.badge-danger,
.badge.bg-danger {
  background: var(--sp-error) !important;
  color: #fff !important;
}

/* =====================================================
   14. LIST GROUPS & MENUS
   ===================================================== */
.list-group,
.list-unstyled,
ul.list-group,
ul.list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
}

.list-group-item,
li.list-group-item {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  padding: 1rem 1.25rem !important;
  transition: background var(--sp-transition-fast) !important;
}

.list-group-item:last-child {
  border-bottom: none !important;
}

.list-group-item:hover,
li.list-group-item:hover {
  background: var(--sp-light) !important;
}

/* =====================================================
   15. MODAL / DIALOG ENHANCEMENTS
   ===================================================== */
.modal-content,
.dialog-content,
.modal .modal-content {
  border-radius: var(--sp-radius-xl) !important;
  border: none !important;
  box-shadow: var(--sp-shadow-xl) !important;
  overflow: hidden !important;
}

.modal-header,
.modal .modal-header {
  background: var(--sp-light) !important;
  border-bottom: 2px solid var(--sp-yellow) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-body,
.modal .modal-body {
  padding: 1.5rem !important;
}

.modal-footer,
.modal .modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
}

/* =====================================================
   16. SCROLLBAR STYLING
   ===================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sp-light);
}

::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: var(--sp-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 var(--sp-light);
}

/* =====================================================
   17. SELECTION & ACCESSIBILITY
   ===================================================== */
::selection {
  background: rgba(var(--sp-yellow-rgb), 0.3) !important;
  color: var(--sp-dark) !important;
}

*:focus-visible {
  outline: 3px solid var(--sp-nightblue-bright) !important;
  outline-offset: 2px !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   18. RESPONSIVE IMPROVEMENTS
   ===================================================== */
@media (max-width: 768px) {
  h1, .h1, body h1 { font-size: 1.5rem !important; }
  h2, .h2, body h2 { font-size: 1.375rem !important; }
  h3, .h3, body h3 { font-size: 1.125rem !important; }
  
  .card:hover,
  .card.product-card:hover {
    transform: translateY(-1px) !important;
  }
  
  .btn,
  button.btn,
  a.btn {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.9375rem !important;
  }
  
  .container.my-big,
  body .container.my-big {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  .search-form,
  form.search-form {
    padding: 1rem !important;
  }
}

/* =====================================================
   19. UTILITY CLASSES
   ===================================================== */
.shadow-sm { box-shadow: var(--sp-shadow-sm) !important; }
.shadow-md { box-shadow: var(--sp-shadow-md) !important; }
.shadow-lg { box-shadow: var(--sp-shadow-lg) !important; }

.rounded-sm { border-radius: var(--sp-radius-sm) !important; }
.rounded-md { border-radius: var(--sp-radius-md) !important; }
.rounded-lg { border-radius: var(--sp-radius-lg) !important; }
.rounded-xl { border-radius: var(--sp-radius-xl) !important; }

/* =====================================================
   20. PRINT STYLES
   ===================================================== */
@media print {
  .card,
  .card.product-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  
  .btn,
  button.btn {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
  
  .copyright,
  .footer {
    background: #fff !important;
    color: #000 !important;
    border-top: 2px solid #000 !important;
  }
}