:root {
    --header-height: 73px; /* adjust to match your theme */
	--container-margin-top: clamp(1rem, 2vw, 2rem);
	--container-margin-bottom: clamp(1rem, 2vw, 2rem);
	--container-padding-top: clamp(1.75rem, 4vw, 3rem);
	--container-padding-bottom: clamp(1.75rem, 4vw, 3rem);
	--sub-header-height: 0px;
	--remaining-height: calc(100vh 
		- var(--header-height) 
		- var(--container-margin-top)
		- var(--container-margin-bottom)
		- var(--container-padding-top)
		- var(--container-padding-bottom)
		- var(--sub-header-height)
		- 1px
		);
}

.iframe-max {
	width: 100%; 
	height: var(--remaining-height);
}

#body-wrapper {
    padding-top: var(--container-margin-top);
    padding-bottom: var(--container-margin-bottom);
    margin-bottom: 0rem;
}

/******* TABS ********/
:root[data-theme="light"] {
  --tabs-bg: #f2f2f2;          /* neutral background for inactive pills */
  --tabs-hover-bg: #e6e6e6;    /* subtle hover */
  --tabs-color: #333;          /* text color */
  --tabs-active-bg: #4a6cf7;   /* primary accent (blue/purple) */
  --tabs-active-color: #fff;   /* active text */
  --tabs-panel-bg: #fafafa;    /* panel background */
  --tabs-border: #ddd;         /* border lines */
}

:root[data-theme="dark"] {
  --tabs-bg: #2e2e2e;          /* neutral dark background for inactive pills */
  --tabs-hover-bg: #3a3a3a;    /* hover highlight */
  --tabs-color: #ddd;          /* light text */
  --tabs-active-bg: #ff9800;   /* warm accent (orange) */
  --tabs-active-color: #000;   /* active text on orange */
  --tabs-panel-bg: #1e1e1e;    /* panel background */
  --tabs-border: #444;         /* border lines */
}

.tabs-pill {
  font-family: inherit;
  width: 100%;
}

/* Hide radios */
.tabs-pill input {
  display: none;
}

/* Navigation bar */
.tabs-pill-nav {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.tabs-pill-nav li {
  list-style: none;
  margin: 0;
}

/* Tab labels */
.tabs-pill-nav li label {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--tabs-bg, #f2f2f2);
  cursor: pointer;
  transition: all .25s ease;
  font-weight: 600;
  color: var(--tabs-color, #444);
  box-shadow: inset 0 0 0 0 transparent;
}

/* Hover */
.tabs-pill-nav li label:hover {
  background: var(--tabs-hover-bg, #e6e6e6);
}

/* Active pill */
#tab-1:checked ~ .tabs-pill-nav li label[for="tab-1"],
#tab-2:checked ~ .tabs-pill-nav li label[for="tab-2"],
#tab-3:checked ~ .tabs-pill-nav li label[for="tab-3"] {
  background: var(--tabs-active-bg, #4a6cf7);
  color: var(--tabs-active-color, #fff);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Panels */
.tabs-pill-panel {
  display: none;
  padding: 20px;
  border-radius: 12px;
  background: var(--tabs-panel-bg, #fafafa);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  animation: fade .25s ease;
}

#tab-1:checked ~ #panel-1,
#tab-2:checked ~ #panel-2,
#tab-3:checked ~ #panel-3 {
  display: block;
}

@keyframes fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/******* BUTTONS ********/

:root {
  --button-bg: #ff9800;
  --button-text: #000;
  --button-border: #ff9800;

  --button-bg-secondary: #e0e0e0;
  --button-text-secondary: #000;
  --button-border-secondary: #bdbdbd;

  --button-hover-bg: #ffa733;
  --button-hover-text: #000;
}

:root[data-theme="dark"] {
  --button-bg: #ff9800;
  --button-text: #000;
  --button-border: #ff9800;

  --button-bg-secondary: #333;
  --button-text-secondary: #fff;
  --button-border-secondary: #555;

  --button-hover-bg: #ffa733;
  --button-hover-text: #000;
}

/* Primary buttons */
.button,
.btn,
.btn-primary {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-border);
}

.button:hover,
.btn:hover,
.btn-primary:hover {
  background-color: var(--button-hover-bg);
  color: var(--button-hover-text);
}

/* Secondary buttons */
.btn-secondary,
.button-secondary {
  background-color: var(--button-bg-secondary);
  color: var(--button-text-secondary);
  border: 1px solid var(--button-border-secondary);
}

.btn-secondary:hover,
.button-secondary:hover {
  background-color: var(--button-hover-bg);
  color: var(--button-hover-text);
}
.btn, button:not([role="button"]).btn, a.btn, [type="button"].btn, [type="submit"].btn {
  border: 1px solid;
}