/* Reserves · L'Aquàrium que no es veu · Setdedisseny
   Estils del bloc de reserves. Tot va aïllat sota #reserves-aquarium perquè es pugui
   incrustar dins d'aquariumbcn.com sense barallar-se amb el tema (Bootstrap 5 + themeLAQ).

   Sistema visual i ESCALA: els d'aquariumbcn.com, mesurats al seu CSS i a la seva web (7-09-2026):
   - base 16 px, interlineat 1,5; un sol punt de tall a 768 px (mobile first, com Bootstrap)
   - h2: 1,6 rem (mòbil) → 2 rem (escriptori), pes 600, caixa alta
   - h3: 1,3 rem → 1,5 rem
   - p:  1,1 rem / 1,8 rem, marge 1 rem → 1,2 rem / 1,8 rem, marge 2 rem
   - camps: 50 px d'alt, text com el paràgraf, només línia inferior cian al 50 %
   - botons: píndola de 25 px de radi, text 1 rem en caixa alta, 10 px 20 px (51 px d'alt)
   - casella: quadrat de 20 px amb vora cian de 2 px i quadrat interior de 10 px
   - contenidor: 12 px de marge lateral al mòbil */

/* La Nunito viatja amb el bloc (relatiu a aquest CSS: fonts/ del mateix directori). A aquariumbcn.com
   ja la tenen; en qualsevol altra web, així no depèn de res. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/nunito-var.woff2) format("woff2")}

/* El bloc porta el seu propi fons: a aquariumbcn.com es fon amb la pàgina (mateix blau);
   en una web clara queda com una peça fosca sencera, sempre llegible. */
#reserves-aquarium{
  --r-fons:#132f47; --r-cian:#62f4fc; --r-text:#fff; --r-mut:rgba(255,255,255,.72);
  --r-linia:rgba(98,244,252,.5); --r-omplert:rgba(98,244,252,.14);
  --r-gris:rgba(227,227,227,.45); --r-error:#ffb3a7;
  font-family:"Nunito",sans-serif; font-size:16px; line-height:1.5; color:var(--r-text);
  background:var(--r-fons);
  max-width:680px; margin:0 auto; padding:1.5rem 12px 2rem; box-sizing:border-box;
  -webkit-font-smoothing:antialiased; text-align:left;
}
#reserves-aquarium *,#reserves-aquarium *::before,#reserves-aquarium *::after{box-sizing:border-box}
#reserves-aquarium [hidden]{display:none!important}
#reserves-aquarium p{margin:0;font-size:1.1rem;line-height:1.8rem;color:inherit}

/* Títol: l'h2 de la web (1,6 rem → 2 rem, 600, caixa alta) amb el filet degradat del seu h1 */
#reserves-aquarium .res-titol{
  font:600 1.6rem/1.2 "Nunito",sans-serif; text-transform:uppercase; letter-spacing:0;
  color:#fff; margin:0 0 1rem; padding:0 0 10px; width:-moz-fit-content; width:fit-content;
  border-bottom:2px solid; border-image:repeating-linear-gradient(135deg,#62f4fc 50%,#132f47 100%) 2;
}
#reserves-aquarium .res-intro{font-size:1.1rem;line-height:1.8rem;color:var(--r-mut);margin:0 0 1rem}

/* Seccions: l'h3 de la web (1,3 rem → 1,5 rem) */
#reserves-aquarium fieldset{border:0;padding:0;margin:0 0 2rem;min-width:0}
#reserves-aquarium legend{
  float:none;width:auto;display:block;padding:0;margin:0 0 .75rem;line-height:1.3;
  font-size:1.3rem;font-weight:600;text-transform:uppercase;letter-spacing:0;color:var(--r-cian);
}
#reserves-aquarium legend small{display:block;font-weight:400;text-transform:none;font-size:1rem;line-height:1.5;color:var(--r-mut);margin-top:2px}

/* Taula de marees: dies en columnes, hores en files. El nivell d'ocupació puja dins la píndola. */
#reserves-aquarium .res-marea{display:grid;grid-template-columns:repeat(var(--dies,4),minmax(0,1fr));gap:8px}
#reserves-aquarium .res-dia{font-size:.75rem;color:var(--r-mut);text-align:center;line-height:1.25;padding-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
#reserves-aquarium .res-dia b{display:block;color:#fff;font-weight:700;font-size:.95rem;letter-spacing:0;text-transform:none;white-space:nowrap;margin:0;padding:0;border:0;background:transparent}
#reserves-aquarium .res-dia span{display:block;margin:0;padding:0;border:0;background:transparent;white-space:nowrap}
#reserves-aquarium .res-dia .res-dia-l{display:none}   /* «19 de setembre»: només a escriptori */
#reserves-aquarium .res-dia .res-dia-c{display:block}  /* «19 set.»: mòbil */
#reserves-aquarium .res-torn{
  position:relative;overflow:hidden;display:block;width:100%;min-height:58px;margin:0;
  border:1px solid var(--r-linia);border-radius:29px;background:transparent;
  padding:9px 4px 10px;text-align:center;cursor:pointer;font:inherit;line-height:1.2;color:#fff;
  text-transform:none;-webkit-appearance:none;appearance:none;box-shadow:none;
  transition:border-color .15s,background-color .15s,color .15s;
}
/* El tema d'aquariumbcn.com pinta «button span» com una píndola i «button» com a flex: es neutralitza. */
#reserves-aquarium .res-torn .res-nivell{position:absolute;left:0;right:0;bottom:0;width:auto;background:var(--r-omplert);border:0;padding:0;margin:0;font-style:normal;transition:height .4s ease;z-index:0}
#reserves-aquarium .res-torn > span{position:relative;z-index:1;display:block;width:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-family:inherit;text-transform:none;letter-spacing:0;line-height:1.2;white-space:nowrap}
#reserves-aquarium .res-torn .res-h{font-weight:700;font-size:1.1rem}
#reserves-aquarium .res-torn .res-l{font-size:.8rem;color:var(--r-mut);margin-top:2px}
#reserves-aquarium .res-torn:hover{border-color:var(--r-cian);background:rgba(98,244,252,.08)}
#reserves-aquarium .res-torn[aria-pressed="true"]{background:var(--r-cian);border-color:var(--r-cian);color:var(--r-fons)}
#reserves-aquarium .res-torn[aria-pressed="true"] .res-l{color:rgba(19,47,71,.75)}
#reserves-aquarium .res-torn[aria-pressed="true"] .res-nivell{display:none}
#reserves-aquarium .res-torn:disabled{cursor:not-allowed;border-color:var(--r-gris);color:var(--r-gris);background:transparent}
#reserves-aquarium .res-torn:disabled .res-nivell{display:none}
#reserves-aquarium .res-torn:disabled .res-h{text-decoration:line-through;font-weight:400}
#reserves-aquarium .res-torn:disabled .res-l{color:var(--r-gris)}
#reserves-aquarium .res-torn:focus-visible{outline:2px solid var(--r-cian);outline-offset:3px}

/* Persones: píndoles de la mateixa alçada que els botons de la web (51 px) */
#reserves-aquarium .res-persones{display:flex;gap:8px}
#reserves-aquarium .res-persones button{
  display:block;flex:1;min-height:51px;margin:0;padding:0;border:1px solid var(--r-linia);border-radius:26px;background:transparent;
  font:inherit;font-weight:700;font-size:1.1rem;line-height:1;color:#fff;text-align:center;cursor:pointer;
  -webkit-appearance:none;appearance:none;box-shadow:none;transition:border-color .15s,background-color .15s,color .15s;
}
#reserves-aquarium .res-persones button:hover{border-color:var(--r-cian);background:rgba(98,244,252,.08)}
#reserves-aquarium .res-persones button[aria-pressed="true"]{background:var(--r-cian);border-color:var(--r-cian);color:var(--r-fons)}
#reserves-aquarium .res-persones button:disabled{border-color:var(--r-gris);color:var(--r-gris);background:transparent;cursor:not-allowed}
#reserves-aquarium .res-persones button:focus-visible{outline:2px solid var(--r-cian);outline-offset:3px}
#reserves-aquarium .res-nota{font-size:1rem;line-height:1.5;color:var(--r-mut);margin:.5rem 0 0}

/* Camps de text: com el formulari de contacte de la web (50 px, text del paràgraf, línia inferior) */
#reserves-aquarium .res-camp{position:relative;margin-bottom:1.25rem}
#reserves-aquarium .res-etiqueta{display:block;font-size:1rem;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--r-mut);margin:0}
#reserves-aquarium input[type=text],#reserves-aquarium input[type=email]{
  display:block;width:100%;height:50px;margin:0;padding:1px 2px;font:inherit;font-size:1.1rem;line-height:1.8rem;color:#fff;
  background:transparent;border:0;border-bottom:1px solid var(--r-linia);border-radius:0;outline:0;box-shadow:none;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s;
}
#reserves-aquarium input[type=text]:focus,#reserves-aquarium input[type=email]:focus{border-bottom-color:var(--r-cian);box-shadow:0 1px 0 0 var(--r-cian)}
#reserves-aquarium input::placeholder{color:rgba(98,244,252,.5);opacity:1}
#reserves-aquarium input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px var(--r-fons) inset;transition:background-color 9999s}

/* Casella de verificació: la de la web (quadrat 20 px, vora cian de 2 px, quadrat interior de 10 px, text a 30 px) */
#reserves-aquarium .res-cond{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0;font-weight:400;font-size:1.1rem;line-height:1.5;color:var(--r-mut)}
#reserves-aquarium .res-cond input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#reserves-aquarium .res-caixa{flex:none;position:relative;display:block;width:20px;height:20px;margin-top:3px;border:2px solid var(--r-cian)}
#reserves-aquarium .res-caixa::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;background:var(--r-cian);opacity:0;transform:scale(.01);transition:all .2s}
#reserves-aquarium .res-cond input:checked + .res-caixa::after{opacity:1;transform:scale(1)}
#reserves-aquarium .res-cond input:focus-visible + .res-caixa{outline:2px solid var(--r-cian);outline-offset:3px}
#reserves-aquarium .res-cond a{color:var(--r-cian);text-decoration:underline;text-underline-offset:2px}
#reserves-aquarium .res-cond a:hover{color:#fff}

/* Informació bàsica de protecció de dades, sota la casella de privacitat */
#reserves-aquarium .res-legal{margin:.5rem 0 0 30px;font-size:.85rem;line-height:1.5;color:var(--r-mut)}
#reserves-aquarium .res-legal b{font-weight:700;color:#fff}

/* Errors */
#reserves-aquarium .res-err{display:none;color:var(--r-error);font-size:1rem;line-height:1.5;margin-top:6px}
#reserves-aquarium .res-camp.invalid .res-err{display:block}
#reserves-aquarium .res-camp.invalid input[type=text],#reserves-aquarium .res-camp.invalid input[type=email]{border-bottom-color:var(--r-error)}
#reserves-aquarium .res-camp.invalid .res-caixa{border-color:var(--r-error)}
#reserves-aquarium .res-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#reserves-aquarium .res-avis{display:none;border-left:3px solid var(--r-error);background:rgba(255,179,167,.1);padding:10px 14px;margin:0 0 1.25rem;color:#fff;font-size:1.1rem;line-height:1.8rem}
#reserves-aquarium .res-avis.show{display:block}

/* Botó principal: el botó de la web (1 rem caixa alta, 10 px 20 px, radi 25 px), ple de cian; en passar-hi s'inverteix */
#reserves-aquarium .res-enviar{
  display:block;width:100%;margin:0;padding:10px 20px;
  font:inherit;font-size:1rem;line-height:1.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--r-fons);background:var(--r-cian);border:1px solid var(--r-cian);border-radius:25px;cursor:pointer;
  -webkit-appearance:none;appearance:none;box-shadow:none;transition:background-color .15s,color .15s;
}
#reserves-aquarium .res-enviar:hover{background:transparent;color:var(--r-cian)}
#reserves-aquarium .res-enviar:active{position:relative;top:1px}
#reserves-aquarium .res-enviar:disabled{background:transparent;border-color:var(--r-gris);color:var(--r-gris);cursor:wait}
#reserves-aquarium .res-enviar:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Confirmació i reserves tancades */
#reserves-aquarium .res-fet{border:1px solid var(--r-cian);padding:1.5rem 1.25rem}
#reserves-aquarium .res-fet h2{font:600 1.6rem/1.2 "Nunito",sans-serif;text-transform:uppercase;letter-spacing:0;color:var(--r-cian);margin:0 0 .75rem;padding:0;border:0}
#reserves-aquarium .res-fet dl{margin:1rem 0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:1.1rem;line-height:1.5}
#reserves-aquarium .res-fet dt{color:var(--r-mut);font-weight:400;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;padding-top:3px}
#reserves-aquarium .res-fet dd{margin:0;font-weight:700}
#reserves-aquarium .res-fet p{margin:0 0 .75rem}
#reserves-aquarium .res-fet .res-nota{margin-top:.5rem}
#reserves-aquarium .res-carregant{color:var(--r-mut);padding:1.5rem 0}
#reserves-aquarium .res-tancat{border:1px solid var(--r-cian);padding:1.5rem 1.25rem;font-size:1.1rem;line-height:1.8rem;color:#fff}

/* Escriptori: el mateix salt que fa la web a 768 px */
@media (min-width:768px){
  #reserves-aquarium{padding:2rem 24px 2.5rem}
  #reserves-aquarium p{font-size:1.2rem}
  #reserves-aquarium .res-titol{font-size:2rem;margin-bottom:1.25rem}
  #reserves-aquarium .res-intro{font-size:1.2rem;margin-bottom:2rem}
  #reserves-aquarium legend{font-size:1.5rem}
  #reserves-aquarium .res-dia{font-size:.8rem}
  #reserves-aquarium .res-dia b{font-size:1.1rem}
  #reserves-aquarium .res-dia .res-dia-l{display:block}
  #reserves-aquarium .res-dia .res-dia-c{display:none}
  #reserves-aquarium .res-torn{min-height:62px;border-radius:31px}
  #reserves-aquarium .res-torn .res-h{font-size:1.2rem}
  #reserves-aquarium .res-torn .res-l{font-size:.85rem}
  #reserves-aquarium .res-persones button{font-size:1.2rem}
  #reserves-aquarium .res-etiqueta{font-size:1.1rem}
  #reserves-aquarium input[type=text],#reserves-aquarium input[type=email]{font-size:1.2rem}
  #reserves-aquarium .res-cond{font-size:1.2rem}
  #reserves-aquarium .res-legal{font-size:.9rem}
  #reserves-aquarium .res-avis{font-size:1.2rem}
  #reserves-aquarium .res-fet h2{font-size:2rem}
  #reserves-aquarium .res-fet dl,#reserves-aquarium .res-tancat{font-size:1.2rem}
}

/* Mòbils molt estrets: només perquè els quatre dies hi càpiguen */
@media (max-width:360px){
  #reserves-aquarium .res-dia{font-size:.7rem;letter-spacing:0}
  #reserves-aquarium .res-dia b{font-size:.85rem}
  #reserves-aquarium .res-torn{padding:8px 0 9px;min-height:54px}
  #reserves-aquarium .res-torn .res-h{font-size:1rem}
  #reserves-aquarium .res-torn .res-l{font-size:.72rem}
  #reserves-aquarium .res-persones{gap:6px}
  #reserves-aquarium .res-legal{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  #reserves-aquarium .res-torn .res-nivell,#reserves-aquarium .res-caixa::after{transition:none}
}