/* Base styles with defaults */
:root {
  --default-color: #808080; /* Fallback color */
  --profile-color: var(--default-color);
  --theme-color: #484747;
  --radius-drawn-1: 255px 15px 225px 15px / 5px 225px 15px 255px;
  --radius-drawn-2: 125px 10px 20px 185px / 5px 205px 205px 15px;
  --radius-drawn-3: 5px 255px 5px 225px / 225px 5px 255px 15px;
  --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
  --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
  --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
  
  /* Updated SVGs with hardcoded primary color */
  --sketch-underline-1: url("data:image/svg+xml,%3Csvg width='100' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,5 Q25,4 50,5 T100,5' stroke='%233f60a0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --sketch-underline-2: url("data:image/svg+xml,%3Csvg width='100' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,5 Q20,6 40,5 T80,4.5 T100,5' stroke='%233f60a0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --sketch-underline-3: url("data:image/svg+xml,%3Csvg width='100' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,5 Q30,4 60,5 T100,4.5' stroke='%233f60a0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* Add the themed loader styles */
.loader {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
    0%  {box-shadow: 40px 0 #484747, -40px 0 #48474733; background: #484747; }
    33% {box-shadow: 40px 0 #484747, -40px 0 #48474733; background: #48474733; }
    66% {box-shadow: 40px 0 #48474733, -40px 0 #484747; background: #48474733; }
    100%{box-shadow: 40px 0 #48474733, -40px 0 #484747; background: #484747; }
}

/* Add irregular borders to interest options and filter options */
interest-option:nth-child(6n+1),
.filter-option:nth-child(6n+1) span {
  border-radius: var(--radius-drawn-1);
}

interest-option:nth-child(6n+2),
.filter-option:nth-child(6n+2) span {
  border-radius: var(--radius-drawn-2);
}

interest-option:nth-child(6n+3),
.filter-option:nth-child(6n+3) span {
  border-radius: var(--radius-drawn-3);
}

interest-option:nth-child(6n+4),
.filter-option:nth-child(6n+4) span {
  border-radius: var(--radius-drawn-4);
}

interest-option:nth-child(6n+5),
.filter-option:nth-child(6n+5) span {
  border-radius: var(--radius-drawn-5);
}

interest-option:nth-child(6n+6),
.filter-option:nth-child(6n+6) span {
  border-radius: var(--radius-drawn-6);
}

[data-profile-type].text, [data-profile-type] .text {
  -webkit-text-stroke: 4px var(--profile-color);
  text-shadow: 2px 2px 0 var(--profile-color);
}

.text{
  font-family: 'Mont', sans-serif !important; 
  color: white;
  font-size:0.9rem;
  font-weight:bold;
  letter-spacing: -0.05em;
  paint-order: stroke fill;
}

/* Fallback for devices that don't support paint-order */
.no-paint-order [data-profile-type].text,
.no-paint-order [data-profile-type] .text {
  -webkit-text-stroke: unset !important;
  text-shadow: unset !important;
  color: var(--profile-color);
  font-size: 1rem;
}

.no-paint-order .text {
  paint-order: unset !important;
}

.profile-type-section .filter-option[data-checked="true"] [data-profile-type].text {
  background: var(--profile-color);
}

[data-profile-type].border {
  border: 0.2rem solid var(--profile-color);
}
.profile-image {
    background-color: var(--profile-color);
    width: 40px;
    height: 40px;
}
section#announcements comment-post,
#add-comment-popover comment-post{
  background-color: var(--profile-color);
  color: white;
  box-shadow: 3px 3px 0 black;
  margin-top: 0.5rem;
  border: 2px solid black;
}
section#announcements comment-post comment-content{
  padding:8px;
  padding-top:0;
}
section#announcements comment-post pre,
#add-comment-popover comment-post pre{
  color: white;
}
[data-profile-type].background {
  background-color: var(--profile-color);
  color: white;
}

.flip-card .top {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: var(--theme-color);
  border-radius: 4px;
  position: absolute;
  backface-visibility: hidden;
}

.flip-card.time-remaining .top {
  background: white;
  border: 1.5px solid var(--theme-color);
  color: var(--theme-color);
}

.view-toggle-container {
  display: flex;
  height: 46.05px; /* To match the search-container input */
  border-radius: var(--radius-drawn-5);
  border: 4px solid var(--theme-color);
}

.view-toggle {
  display: flex;
  flex:1;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--theme-color);
  background: white;
  cursor: pointer;
  font-size:0.9rem;
  font-weight: bold;
}

.view-toggle img {
  width: 20px;
  height: 20px;
}

.view-toggle.active {
  background: var(--theme-color);
  color: white;
}


/* Dynamic Profile Type Styles */
[data-profile-type="Attendee"] {
  --profile-color: #000;
  border-radius: var(--radius-drawn-1) !important;
}
[data-profile-type="Speaker"] {
  --profile-color: #ff2600;
  border-radius: var(--radius-drawn-2) !important;
}

/* Updated sketch-underline class */
.sketch-underline {
  border-bottom: none !important;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 100px 10px;
  padding-bottom: 4px;
}

.sketch-underline:nth-of-type(3n+1) {
  background-image: var(--sketch-underline-1);
}

.sketch-underline:nth-of-type(3n+2) {
  background-image: var(--sketch-underline-2);
}

.sketch-underline:nth-of-type(3n+3) {
  background-image: var(--sketch-underline-3);
}

/* For profile-type specific underlines */
.sketch-underline[data-profile-type] {
  color: inherit; /* Reset color to parent's color for profile-typed elements */
  background-image: linear-gradient(90deg, var(--profile-color) 100%, var(--profile-color) 100%);
  background-position: bottom;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  text-decoration-style: wavy;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--profile-color);
}