/* ==========================================================================
   Montreux HC — Styles DESIGN (Bootstrap 5.3)
   Objectif : très moderne, sportif, clean, responsive, facile à modifier.
   - Tout se règle dans :root (couleurs, rayons, ombres)
   ========================================================================== */

/* -----------------------------
   1) VARIABLES (MODIFIE ICI)
-------------------------------- */
:root{
  /* Couleurs club (ajuste si tu as un bleu exact) */
  --mhc-bleu: #0B4DA2;
  --mhc-bleu-2: #1D7BEA;     /* bleu plus clair pour dégradés */
  --mhc-fonce: #071225;      /* fond très sombre “sport” */
  --mhc-blanc: #ffffff;

  /* Neutres */
  --mhc-bg: #0A1222;         /* arrière-plan sombre très léger */
  --mhc-surface: rgba(255,255,255,.06); /* surface “glass” */
  --mhc-border: rgba(255,255,255,.12);
  --mhc-text: rgba(255,255,255,.90);
  --mhc-muted: rgba(255,255,255,.72);

  /* Rayons & ombres (look premium) */
  --mhc-radius: 18px;
  --mhc-radius-lg: 26px;
  --mhc-shadow: 0 20px 60px rgba(0,0,0,.35);
  --mhc-shadow-soft: 0 12px 30px rgba(0,0,0,.25);
  --mhc-shadow-card: 0 18px 45px rgba(0,0,0,.25);

  /* Largeur des lignes/espaces */
  --mhc-maxw: 1200px;

  /* Fond de page (Nuit par défaut) */
  --mhc-body-bg: #070F1E;

  /* Surfaces (cartes, navbar, footer) — Nuit */
  --mhc-surface: rgba(255,255,255,.06);
  --mhc-surface-2: rgba(255,255,255,.08);
  --mhc-border: rgba(255,255,255,.12);
  --mhc-navbar-bg: rgba(7,18,37,.55);
  --mhc-footer-bg: rgba(7,18,37,.55);
}

/* -----------------------------
   2) BASE
-------------------------------- */
html, body{
  height: 100%;
}

body{
  /* Fond global (piloté par une variable pour le mode Jour/Nuit) */
  background: var(--mhc-body-bg);
  color: var(--mhc-text);
}

.container{
  max-width: var(--mhc-maxw);
}

/* Texte Bootstrap par défaut → on harmonise */
.text-secondary{
  color: var(--mhc-muted) !important;
}

/* Liens */
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* Focus accessible */
:focus-visible{
  outline: 3px solid rgba(29,123,234,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* -----------------------------
   3) NAVBAR (glass + style)
-------------------------------- */
\.navbar{
  background: var(--mhc-navbar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, opacity .25s ease;
}
.navbar .navbar-collapse{
  justify-content: center;
}
.navbar .navbar-nav{
  justify-content: center;
}
@media (min-width: 992px){
  .navbar .container{
    position: relative;
  }
  .navbar .navbar-collapse{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }
}
.navbar.navbar-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.navbar-brand img{
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.navbar .nav-link{
  color: rgba(255,255,255,.80);
  font-weight: 600;
  letter-spacing: .2px;
}
.navbar .nav-link:hover{
  color: #fff;
}
.navbar .nav-link.active{
  color: #fff;
  position: relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left: .6rem;
  right: .6rem;
  bottom: .35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mhc-bleu-2), var(--mhc-bleu));
  opacity: .95;
}
.navbar .navbar-brand{
  color: var(--mhc-text);
}
:root[data-theme="light"] .navbar .navbar-brand{
  color: rgba(2, 8, 23, .92);
}

/* -----------------------------
   4) BOUTONS (plus premium)
-------------------------------- */
.btn{
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .2px;
}

.btn-mhc{
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255,255,255,.12);
  --bs-btn-color: #fff;
  border: 1px solid rgba(255,255,255,.14);

  background:
    linear-gradient(135deg, rgba(29,123,234,.95), rgba(11,77,162,.95));
  box-shadow: 0 18px 40px rgba(11,77,162,.25);
}
.btn-mhc:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-mhc:active{
  transform: translateY(0px);
}

.btn-outline-mhc{
  --bs-btn-bg: transparent;
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-outline-mhc:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

/* -----------------------------
   5) HERO (ultra design)
-------------------------------- */
.hero{
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
.results-hero::before{
  background-image:
    linear-gradient(90deg, rgba(7,18,37,.92), rgba(7,18,37,.55)),
    url("club_montreux.jpg");
}

/* Fond hero : image + dégradés + texture */
.hero::before{
  content:"";
  position:absolute; inset:-2px;

  /* ✅ Image de fond HERO :
     - Tu peux mettre une image locale : url("../img/hero.jpg")
     - Ou laisser l'URL actuelle.
  */
  background-image:
    linear-gradient(90deg, rgba(7,18,37,.92), rgba(7,18,37,.55)),
    url("https://www.rollhockey.ch/fileadmin/_processed_/f/2/csm_438811731_924884416310919_2047596084188782549_n_2a7d09200e.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.15) contrast(1.05);
  transform: scale(1.03);
}

/* Image hero en mode Jour : sans filtre bleu */
:root[data-theme="light"] .hero::before{
  background-image:
    linear-gradient(90deg, rgba(7,18,37,.78), rgba(7,18,37,.45)),
    url("https://www.rollhockey.ch/fileadmin/_processed_/f/2/csm_438811731_924884416310919_2047596084188782549_n_2a7d09200e.jpg");
  filter: saturate(1.05) contrast(1.05);
}

/* Petite “brillance” en haut (effet premium) */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 120px at 50% 0%, rgba(255,255,255,.18), transparent 65%);
  pointer-events: none;
}

.hero .container{
  position: relative;
  z-index: 1;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.hero h1{
  color: #fff;
  text-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.hero .lead{
  color: rgba(255,255,255,.82);
  max-width: 60ch;
}

.hero-badges .badge{
  border-radius: 999px;
  padding: .55rem .85rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* KPI “sportif” */
/* KPI : suppression des pastilles bleues, look plus clean */
.kpi .dot{
  display: none;
}

/* -----------------------------
   6) SECTIONS (rythme & séparation)
-------------------------------- */
.section{
  padding: 4.2rem 0;
}
.section.section-tight{
  padding-top: 1rem;
}
.results-main{
  padding-top: 0.5rem;
}
.section-alt{
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

/* -----------------------------
   7) CARDS (glass premium)
-------------------------------- */
.card{
  border-radius: var(--mhc-radius);
  border: 1px solid var(--mhc-border);
  background: var(--mhc-surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--mhc-shadow-soft);
}

.card.shadow-soft{
  box-shadow: var(--mhc-shadow-card);
}

.card .card-body{
  padding: 1.3rem 1.35rem;
}

.card h3, .card h2{
  color: var(--mhc-text);
}

/* Étapes “Comment commencer ?” */
.step-card{
  border-radius: var(--mhc-radius);
  border: 1px solid var(--mhc-border);
  background: var(--mhc-surface);
  padding: 1.3rem 1.35rem;
  box-shadow: var(--mhc-shadow-soft);
}
.step-icon{
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--mhc-bleu-2), var(--mhc-bleu));
  box-shadow: 0 12px 28px rgba(11,77,162,.25);
  margin-bottom: .65rem;
}
.step-icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.step-icon svg.icon-fill{
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* Emplacements images prochains matchs */
.match-card{
  height: clamp(180px, 22vw, 260px);
  max-width: 100%;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.match-card-body{
  padding: 0;
  height: 100%;
}
.match-image{
  width: 100%;
  height: 100%;
  border-radius: var(--mhc-radius);
  overflow: hidden;
  display: block;
}
.match-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* News cards */
.news-card{
  overflow: hidden;
}
.news-image{
  width: 100%;
  height: clamp(180px, 22vw, 260px);
  border-radius: var(--mhc-radius);
  overflow: hidden;
  position: relative;
  margin-bottom: .75rem;
}
.news-card .news-image{
  border-radius: var(--mhc-radius) var(--mhc-radius) 0 0;
}

/* Effectif */
.player-card{
  border: 0;
  overflow: hidden;
  background: var(--mhc-surface);
  box-shadow: var(--mhc-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.player-photo{
  position: relative;
  height: auto;
  transition: transform .2s ease;
}
.player-photo img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.player-role{
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  letter-spacing: .03em;
}
.player-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  z-index: 2;
}
.player-card:hover .player-photo{
  transform: scale(1.03);
}
.player-meta{
  display: grid;
  gap: .3rem;
  color: var(--mhc-muted);
}
.player-name{
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: .01em;
}
.player-first{
  font-weight: 800;
  font-size: 1.15em;
}
.player-last{
  font-weight: 800;
  font-size: 1.15em;
}
.player-label{
  display: inline-block;
  min-width: 9.5rem;
  color: var(--mhc-text);
  font-weight: 600;
}
.news-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  display: block;
}

/* Images (arrondi + bord premium) */
img.rounded-4, .rounded-4{
  border-radius: var(--mhc-radius-lg) !important;
}
img.border, .border{
  border-color: rgba(255,255,255,.12) !important;
}

/* -----------------------------
   8) TABLEAUX (lisibles + “pro”)
-------------------------------- */
.table{
  color: var(--mhc-text);
}

.table thead th{
  background:
    linear-gradient(135deg, rgba(29,123,234,.35), rgba(11,77,162,.25)),
    rgba(255,255,255,.05);
  color: var(--mhc-text);
  border-color: rgba(255,255,255,.12);
}

.table tbody tr{
  border-color: rgba(255,255,255,.08);
}

.table tbody tr:hover{
  background: rgba(255,255,255,.05);
}

.table td, .table th{
  vertical-align: middle;
}
.result-lieu{
  color: var(--mhc-text);
  font-weight: 600;
}
.results-header{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7,18,37,.92), rgba(7,18,37,.55)),
    url("../../club_montreux.jpg");
  background-size: cover;
  background-position: center;
  padding: 3.6rem 0;
}
.results-header .container{
  position: relative;
  z-index: 1;
}
.results-header h1,
.results-header .form-label{
  color: #fff;
}
.results-header .text-secondary{
  color: rgba(255,255,255,.75) !important;
}
:root[data-theme="light"] .results-header h1,
:root[data-theme="light"] .results-header .form-label{
  color: rgba(2, 8, 23, .95);
}
:root[data-theme="light"] .results-header .text-secondary{
  color: rgba(2, 8, 23, .7) !important;
}
.contact-info .fw-semibold{
  color: var(--mhc-text);
}
.contact-header{
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center 35%;
}
.contact-header::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.contact-header .container{
  position: relative;
  z-index: 1;
}
.contact-header h1,
.contact-header .text-secondary{
  color: #fff;
}
:root[data-theme="light"] .contact-header h1,
:root[data-theme="light"] .contact-header .text-secondary{
  color: #fff;
}
:root[data-theme="light"] .contact-header::before{
  background: rgba(0,0,0,.2);
}

.badge.text-bg-primary{
  background: linear-gradient(135deg, var(--mhc-bleu-2), var(--mhc-bleu)) !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(11,77,162,.22);
}

.badge.text-bg-dark{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12);
}

/* -----------------------------
   9) ALERTS (plus clean)
-------------------------------- */
.alert-primary{
  background: rgba(29,123,234,.12) !important;
  border: 1px solid rgba(29,123,234,.22) !important;
  color: var(--mhc-text) !important;
}
.alert strong{
  color: var(--mhc-text);
}

/* -----------------------------
   10) FORM (contact)
-------------------------------- */
.form-control, .form-select, textarea{
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.55);
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: rgba(29,123,234,.55);
  box-shadow: 0 0 0 .2rem rgba(29,123,234,.18);
}

/* Labels un peu plus “sport” */
.form-label{
  font-weight: 700;
  color: rgba(255,255,255,.88);
}

/* -----------------------------
   11) FOOTER
-------------------------------- */
footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--mhc-footer-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--mhc-muted);
}
footer a{
  color: var(--mhc-text);
}
footer a:hover{
  color: #fff;
}
.footer-social .h6{
  font-weight: 800;
  letter-spacing: .02em;
}
.social-links{
  gap: .6rem;
}
.social-link{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.social-link svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.social-link:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

/* -----------------------------
   12) PETITES AMÉLIORATIONS MOBILE
-------------------------------- */
@media (max-width: 991.98px){
  .hero .container{
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }
  .navbar .nav-link.active::after{
    left: .2rem; right: .2rem;
  }
}

/* ==========================================================================
   13) MODE JOUR (LIGHT) — activé via :root[data-theme="light"]
   👉 Le JS ajoute data-theme="light" sur <html>.
   ========================================================================== */
:root[data-theme="light"]{
  /* Texte + fond */
  --mhc-text: rgba(2, 8, 23, .92);
  --mhc-muted: rgba(2, 8, 23, .62);

  /* Surfaces */
  --mhc-surface: rgba(255,255,255,.92);
  --mhc-surface-2: rgba(255,255,255,.98);
  --mhc-border: rgba(2, 8, 23, .12);

  /* Navbar/Footer en clair */
  --mhc-navbar-bg: rgba(255,255,255,.75);
  --mhc-footer-bg: rgba(255,255,255,.75);

  /* Fond clair premium */
  --mhc-body-bg: #F7FAFF;
}

/* Ajustements spécifiques quand on est en Jour */
:root[data-theme="light"] .navbar{
  border-bottom: 1px solid rgba(2, 8, 23, .08);
}
:root[data-theme="light"] .navbar .nav-link{
  color: rgba(2, 8, 23, .70);
}
:root[data-theme="light"] .navbar .nav-link:hover,
:root[data-theme="light"] .navbar .nav-link.active{
  color: rgba(2, 8, 23, .92);
}
:root[data-theme="light"] .navbar .text-white-50{
  color: rgba(2, 8, 23, .55) !important;
}

/* Boutons outline Bootstrap lisibles en clair (navbar) */
:root[data-theme="light"] .btn-outline-light{
  color: rgba(2, 8, 23, .92);
  border-color: rgba(2, 8, 23, .22);
}
:root[data-theme="light"] .btn-outline-light:hover{
  color: rgba(2, 8, 23, .92);
  background: rgba(2, 8, 23, .06);
  border-color: rgba(2, 8, 23, .32);
}

/* Boutons outline lisibles en clair */
:root[data-theme="light"] .btn-outline-mhc{
  --bs-btn-color: rgba(2, 8, 23, .92);
  --bs-btn-border-color: rgba(2, 8, 23, .22);
  border-color: rgba(2, 8, 23, .22);
  background: rgba(255,255,255,.70);
}
:root[data-theme="light"] .btn-outline-mhc:hover{
  background: rgba(255,255,255,.95);
  border-color: rgba(2, 8, 23, .32);
}

/* Section alternative un peu plus visible en clair */
:root[data-theme="light"] .section-alt{
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

/* Titre hero lisible en mode Jour */
:root[data-theme="light"] .hero h1{
  color: #fff;
  text-shadow: 0 20px 60px rgba(0,0,0,.65);
}
:root[data-theme="light"] .hero .lead{
  color: rgba(255,255,255,.9);
}

/* Badges “dark” lisibles en clair */
:root[data-theme="light"] .badge.text-bg-dark{
  background: rgba(2, 8, 23, .06) !important;
  color: rgba(2, 8, 23, .88) !important;
  border-color: rgba(2, 8, 23, .14);
}

/* KPI hero lisibles en clair (fond hero reste sombre) */
:root[data-theme="light"] .hero .kpi{
  color: rgba(255,255,255,.95);
}
:root[data-theme="light"] .hero .text-white-50{
  color: rgba(255,255,255,.72) !important;
}

/* Tableaux lisibles en clair */
:root[data-theme="light"] .table{
  color: rgba(2, 8, 23, .88);
}
:root[data-theme="light"] .table thead th{
  background:
    linear-gradient(135deg, rgba(29,123,234,.18), rgba(11,77,162,.12)),
    rgba(2, 8, 23, .03);
  color: rgba(2, 8, 23, .92);
  border-color: rgba(2, 8, 23, .10);
}
:root[data-theme="light"] .table tbody tr{
  border-color: rgba(2, 8, 23, .08);
}
:root[data-theme="light"] .table tbody tr:hover{
  background: rgba(2, 8, 23, .03);
}

/* Inputs en clair */
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] textarea{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(2, 8, 23, .12);
  color: rgba(2, 8, 23, .92);
}
:root[data-theme="light"] .form-control::placeholder,
:root[data-theme="light"] textarea::placeholder{
  color: rgba(2, 8, 23, .45);
}
:root[data-theme="light"] .form-label{
  color: rgba(2, 8, 23, .82);
}

/* Footer lisible en clair */
:root[data-theme="light"] footer a:hover{
  color: rgba(2, 8, 23, .92);
}
:root[data-theme="light"] footer .text-white-50{
  color: rgba(2, 8, 23, .55) !important;
}

/* ==========================================================================
   14) BOUTON JOUR/NUIT (Navbar)
   - Style compact, joli, utilisable au téléphone
   ========================================================================== */
.btn-theme{
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
}
.btn-theme:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
:root[data-theme="light"] .btn-theme{
  border-color: rgba(2, 8, 23, .12);
  background: rgba(255,255,255,.85);
  color: rgba(2, 8, 23, .88);
}
:root[data-theme="light"] .btn-theme:hover{
  background: rgba(255,255,255,.95);
}

/* ==========================================================================
   15) CARROUSEL “Idées” (sur l’accueil)
   ========================================================================== */
.carousel-mhc{
  border-radius: var(--mhc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mhc-border);
  box-shadow: var(--mhc-shadow-card);
  background: var(--mhc-surface);
}
.carousel-mhc .carousel-item img{
  width: 100%;
  height: auto;
  object-fit: unset;
  filter: saturate(1.12) contrast(1.05);
}
.carousel-mhc .carousel-item{
  background: transparent;
}
@media (max-width: 991.98px){
  .carousel-mhc .carousel-item img{ height: auto; }
}

/* Caption en “glass” (lisible) */
.carousel-mhc .carousel-caption{
  text-align: left;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(7,18,37,0) 0%, rgba(7,18,37,.55) 45%, rgba(7,18,37,.9) 100%);
  border: 0;
}
:root[data-theme="light"] .carousel-mhc .carousel-caption{
  background: linear-gradient(180deg, rgba(7,18,37,0) 0%, rgba(7,18,37,.55) 55%, rgba(7,18,37,.8) 100%);
  color: #fff;
}
.carousel-mhc .carousel-caption h3{
  margin: 0 0 .2rem 0;
  font-weight: 900;
}
.carousel-mhc .carousel-caption p{
  margin: 0;
  color: var(--mhc-muted);
}
.hero .kpi .fw-semibold{
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero .lead{
  text-align: center;
}
.hero-intro{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hero .social-link{
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
.hero .social-link:hover{
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.45);
}