:root {
      --accent-color: linear-gradient(180deg, #2D1B4E 0%, #1A0F2E 100%);
      --accent-hover: #E91E8C;
      --primary-pink: #E91E8C;
      --primary-pink-dark: #D11A7D;
}

.cookie-popup-container {
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      left: 0px;
      top: 0px;
      z-index: 9999999;
      padding: 20px;
      backdrop-filter: blur(4px);
}

.cookie-popup-container .cookie-popup {
      max-width: 1200px;
      width: 92%;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 0px;
      box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.15), 0px 8px 80px -10px rgba(45, 27, 78, 0.4);
      overflow: visible;
      -ms-overflow-style: none;
      scrollbar-width: none;
      border-radius: 28px;
      color: rgba(74, 85, 101, 0.9);
      overflow: hidden;
      background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      max-height: 90vh;
      min-height: auto;
}

.cookie-category {
      padding: 28px 32px;
      border-radius: 18px;
      margin: 0 0 20px;
      background: rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
}

.cookie-category:hover {
      border-color: rgba(233, 30, 140, 0.5);
      background: rgba(233, 30, 140, 0.15);
      box-shadow: 0 6px 20px rgba(233, 30, 140, 0.2);
      transform: translateY(-3px);
}



.cookie-popup-container .cookie-popup .cookie-popup-content-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;
      position: static;
      top: 0;
      left: 0;
      width: 100%;
      height: 0px;
      overflow: hidden;
      overflow-y: auto;
      color: #fff;
      transition: all 0.3s ease;
      border-radius: 0;
      background: linear-gradient(180deg, #2D1B4E 0%, #1A0F2E 100%);
      
}

.cookie-popup-container .cookie-popup .cookie-popup-content-container * {
      color: #fff;
}

.cookie-popup-container .cookie-popup .cookie-popup-content-container.open {
      height: auto !important;
      max-height: calc(90vh - 200px);
      flex: 1 1 auto;
      min-height: 300px;
}

.cookie-popup .cookie-panel {
      background: linear-gradient(180deg, rgba(233, 30, 140, 0.15) 0%, rgba(45, 27, 78, 0.1) 100%);
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 10;
}

.cookie-popup .cookie-panel ul {
      list-style-type: none;
      display: flex;
      padding-left: 0 !important;
      margin: 0 !important;
      gap: 0;
      background: rgba(255, 255, 255, 0.05);
}

.cookie-cookies-display {
      padding: 45px 60px;
      max-width: 100%;
}

.cookie-cookies-display h5 {
      margin-bottom: 20px;
      font-size: 22px;
      font-weight: 700;
      color: #fff;
}

.cookie-cookies-display > p {
      margin-bottom: 32px;
      font-size: 16px;
      line-height: 24px;
      opacity: 0.95;
      color: #fff;
}

.cookie-popup .cookie-panel ul li {
      width: 100%;
      text-align: center;
      font-weight: 600;
      cursor: pointer;
      font-size: 17px;
      line-height: 24px;
      padding: 22px 35px;
      margin-bottom: 0;
      transition: all 0.3s ease;
      border-bottom: 4px solid transparent;
      position: relative;
      letter-spacing: 0.3px;
}

.cookie-popup .cookie-panel ul li.active {
      color: #fff;
      border-bottom: 4px solid #E91E8C;
      background: rgba(233, 30, 140, 0.25);
      box-shadow: inset 0 -2px 0 rgba(233, 30, 140, 0.3);
      font-weight: 700;
}

.cookie-popup .cookie-panel ul li:hover:not(.active) {
      background: rgba(255, 255, 255, 0.12);
      border-bottom: 4px solid rgba(233, 30, 140, 0.4);
}




.cookie-cookies-display .cookie-category .choose {
      font-size: 16px;
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      border-radius: 6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      margin-right: 16px;
      cursor: pointer;
      position: relative;
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      flex-shrink: 0;
}

.cookie-cookies-display .cookie-category .choose.active {
      border-color: #E91E8C;
      background: linear-gradient(180deg, #E91E8C 0%, #D11A7D 100%);
}

.cookie-cookies-display .cookie-category .choose.active::before {
      content: "\2713";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(15deg);
      color: #fff;
}

/*.cookie-cookies-display .cookie-category .choose.active + .cookie-cat-name{
    color:#04383d;
}*/

.cookie-cookies-display .cookie-category .choose.always-on {
      border-color: #E91E8C;
      background: linear-gradient(180deg, #E91E8C 0%, #D11A7D 100%);
      cursor: auto;
}

.cookie-cookies-display .cookie-category .choose.always-on::before {
      content: "\2713";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(15deg);
      color: #fff;
}

/*.cookie-cookies-display .cookie-category .choose.always-on + .cookie-cat-name {
    color: #04383d;
}*/
.cookie-cookies-display .cookie-category .data .data-resume .cat-main,
.cookie-cookies-display .cookie-category .data .data-resume .cat-main>div {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.cookie-cookies-display .cookie-category .data .data-resume .cat-main {
      margin-bottom: 10px;
}

.data-resume .cookie-cat-name {
      font-weight: 600;
      cursor: pointer;
      transition: 300ms;
      font-size: 16px;
      line-height: 22px;
      font-weight: 600;
      margin-bottom: 4px;
}

.cookie-cookies-display .cookie-category .data .data-resume .cat-describe {
      font-size: 15px;
      line-height: 22px;
      opacity: 0.9;
      margin-top: 8px;
}

.cookie-decide {
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(180deg, #2D1B4E 0%, #1A0F2E 100%);
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 0;
      transition: all 0.3s ease;
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
      z-index: 1;
      align-items: stretch;
      flex-shrink: 0;
}

/* When content container is open, make cookie-decide full width */
.cookie-popup-content-container.open ~ .cookie-decide {
      grid-template-columns: 1fr;
      display: flex;
      flex-direction: column;
}

.cookie-decide .pre-cookie-box {
      padding: 50px 60px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right: 2px solid rgba(255, 255, 255, 0.15);
}

/* When content is open, remove border and adjust padding */
.cookie-popup-content-container.open ~ .cookie-decide .pre-cookie-box {
      border-right: none;
      padding: 40px 60px 30px;
}

.cookie-decide .pre-cookie-box h3 {
      font-size: 26px;
      margin-bottom: 18px;
      font-weight: 700;
      line-height: 1.3;
}

.cookie-decide .pre-cookie-box p {
      font-size: 16px;
      line-height: 26px;
      opacity: 0.95;
      margin: 0;
}

.cookie-decide .pre-cookie-box * {
      color: #fff;
      -webkit-text-fill-color: #fff;
}

.cookie-decide .pre-cookie-box a {
      color: #E91E8C;
      transition: color 0.2s ease;
}

.cookie-decide .pre-cookie-box a:hover {
      color: #D11A7D;
}

.cookie-decide .imgBox {
      position: absolute;
      width: 300px;
      margin: 0 auto 20px;
      top: 0;
      right: 0;
      z-index: -1;
      opacity: 0.2;
}

.cookie-decide .btnList {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: stretch;
      justify-content: center;
      margin: 0 !important;
      padding: 50px 60px;
      background: rgba(255, 255, 255, 0.08);
}

/* When content is open, buttons in row */
.cookie-popup-content-container.open ~ .cookie-decide .btnList {
      flex-direction: row;
      gap: 16px;
      padding: 30px 60px 40px;
}

.cookie-decide .btnList li {
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      padding: 18px 28px;
      border-radius: 14px;
      transition: all 0.3s ease;
      text-align: center;
      cursor: pointer;
}

.cookie-popup-content-container.open ~ .cookie-decide .btnList li {
      width: 50%;
      flex: 1;
}




.cookie-decide .btnList li.allow-selection {
      display: none;
}

@media (max-width: 768px) {
      .cookie-popup-container {
            padding: 15px;
      }

      .cookie-popup-container .cookie-popup {
            max-width: 100%;
            width: 100%;
            top: auto;
            bottom: 0;
            transform: translateY(0);
            border-radius: 20px 20px 0 0;
            max-height: 95vh;
      }

      .cookie-decide {
            grid-template-columns: 1fr;
            bottom: 0;
      }

      .cookie-decide .pre-cookie-box {
            padding: 30px 25px 25px;
            border-right: none;
      }

      .cookie-decide .pre-cookie-box h3 {
            font-size: 20px;
            margin-bottom: 12px;
      }

      .cookie-decide .pre-cookie-box p {
            font-size: 14px;
            line-height: 20px;
      }

      .cookie-decide .btnList {
            padding: 25px;
            gap: 12px;
      }

      .cookie-decide .btnList li {
            font-size: 14px;
            padding: 14px 20px;
      }

      .cookie-cookies-display {
            padding: 30px 25px;
      }

      .cookie-popup-container .cookie-popup .cookie-popup-content-container.open {
            height: auto !important;
            max-height: calc(95vh - 250px);
            min-height: 300px;
      }

      .cookie-popup-content-container.open ~ .cookie-decide .btnList {
            flex-direction: column;
            gap: 12px;
      }

      .cookie-popup-content-container.open ~ .cookie-decide .btnList li {
            width: 100%;
      }

      .cookie-category {
            padding: 20px 24px;
            margin-bottom: 16px;
      }

      .cookie-popup .cookie-panel ul li {
            padding: 18px 25px;
            font-size: 15px;
      }
}