/* ---- YOUTUBE SHORTS STYLING ---- */

.shorts-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-size: 350%;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--malmo-blue);
    padding: 4px; /* Hur brett mellanrummet ska vara */
    background-color: white; /* Färgen på mellanrummet */
    background-clip: content-box; /* Viktigast! Bilden ritas bara innanför padding. */
}

.shorts-circle svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

.shorts-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none; /* Dold som standard */
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.shorts-modal-content {
    position: relative;
    background-color: #000;
    width: 340px;
    height: 604px;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#youtube-player {
    width: 100%;
    flex-grow: 1; /* Tar upp allt tillgängligt utrymme */
}

#shorts-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1010;
    line-height: 30px;
    padding: 0;
    text-align: center;
}

.shorts-nav {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 1010;
}

.shorts-nav button {
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid white;
    padding: 8px 16px;
    border-radius: 20px;
    margin: 0 10px;
    cursor: pointer;
}

.shorts-trigger-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Mellanrum mellan cirklarna */
    margin: 2rem 0;
    padding: 5px 0;
    justify-content: center;
}


/* Container för varje cirkel + titel */
.short-item-container {
    display: flex;
    flex-direction: column; /* Lägger cirkel och titel ovanpå varandra */
    align-items: center;   /* Centrerar dem horisontellt */
    width: 80px;           /* Ge den en fast bredd för att texten ska radbrytas snyggt */
}

/* Stilar för själva titeln */
.short-title {
    color: #333; /* Välj en färg som passar din sajt */
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-top: 8px; /* Lite luft mellan cirkel och text */
    line-height: 1.2;
}


/* ---- RESPONSIV LAYOUT FÖR YOUTUBE SHORTS (MOBIL/TABLET) ---- */

/* Denna kod gäller endast för skärmar som är 1150px eller smalare */
@media (max-width: 1150px) {
  .shorts-trigger-wrapper {
    /* 1. Tvinga alla cirklar att stanna på en enda rad */
    flex-wrap: nowrap;

    /* 2. Aktivera horisontell scrollning när innehållet flödar över */
    overflow-x: auto;

    /* 3. Justera innehållet till vänster istället för centrerat */
    justify-content: flex-start;

    /* 4. Lägg till lite extra padding för att det ska se snyggare ut när man scrollar */
    padding-left: 20px;
    padding-right: 20px;

    /* 5. (Valfritt) Dölj den fula standard-scrollbar:en på webbläsare som stödjer det */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    margin: 1rem 0 0 0;
  }

  /* 6. (Valfritt) Dölj scrollbar:en för Chrome, Safari och Opera */
  .shorts-trigger-wrapper::-webkit-scrollbar {
    display: none;
  }
}



/* ---- HOVER- OCH KLICK-EFFEKTER FÖR SHORTS-CIRKLAR ---- */

/* 1. Förbered grundelementet för mjuka övergångar (transition) */
.shorts-circle {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* 2. Mouseover-effekt: Cirkeln blir större och skuggan tydligare */
.shorts-circle:hover {
  transform: scale(1.1); /* Zoomar in cirkeln till 110% */
  box-shadow: 0 8px 16px rgba(0,0,0,0.25); /* Gör skuggan större och mörkare */
}

/* 3. Klick-effekt: Cirkeln blir lite mindre för att simulera ett tryck */
.shorts-circle:active {
  transform: scale(0.95); /* Förminskar cirkeln till 95% */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Minskar skuggan */
  transition-duration: 0.05s; /* Gör "trycket" snabbt och responsivt */
}



/* ==========================================================================
   Styling för YouTube Cookie Consent Modal
   ========================================================================== */

/* 1. Själva overlayen (bakgrunden)
   Gör den mörkt halvtransparent istället för helsvart. */
#youtube-consent-modal.shorts-modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999; /* Se till att den ligger överst */
}

/* 2. Innehållsrutan (själva kortet)
   Här lånar vi stilen direkt från .ki-card. */
#youtube-consent-modal .shorts-modal-content {
  background: #fff; /* Vit bakgrund */
  border-radius: var(--ki-card-img-radius, 30px); /* Lånar radien från bilderna, 30px */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* En liknande, tydlig skugga */
  border: 1px solid rgba(0, 0, 0, 0.06); /* Subtil kantlinje */
  padding: 32px 40px; /* Generöst med luft inuti */
  box-sizing: border-box;
}

/* 3. Rubrik och text
   Anpassar typsnittet för att matcha resten av sidan. */
#youtube-consent-modal h3 {
  font-size: 1.5rem; /* Samma storlek som .ki-card__title */
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.2;
  color: #000;
}

#youtube-consent-modal p {
  font-size: 1.05rem; /* Samma storlek som .ki-card__meta-text */
  line-height: 1.5;
  font-weight: 400;
  color: #333;
  margin: 0 0 28px;
}

/* 4. Knapparna
   Här lånar vi stilen från .ki-card__btn och dess varianter. */
#youtube-consent-modal .consent-buttons {
  display: flex;
  gap: 12px; /* Litet avstånd mellan knapparna */
  justify-content: center;
}

/* Gemensam stil för båda knapparna */
#youtube-consent-accept,
#youtube-consent-decline {
  flex: 1; /* Får dem att ta upp lika mycket plats */
  padding: 12px 16px;
  border: none;
  border-radius: 50px; /* Helt runda hörn, precis som .ki-card__btn */
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease; /* Liten effekt vid klick */
}

#youtube-consent-accept:active,
#youtube-consent-decline:active {
    transform: scale(0.97); /* Förminskas lite vid klick */
}

/* Primär knapp för att acceptera */
#youtube-consent-accept {
  background: #E14831; /* Samma som .ki-card__btn--primary */
  color: #fff;
}

/* Sekundär knapp för att avböja */
#youtube-consent-decline {
  background: #DFDFDF; /* Samma som .ki-card__btn--secondary */
  color: #000;
}