body {
			margin: 0;
			font-family: 'Ambiguity Thrift';
			background: #f4f5f7;
			overflow-x: hidden;
		}
		
		.page-container {
			height: 100vh;
			width: 100vw;
			position: fixed;
			transform: translateX(100vw);
/*			transition: transform 0.1s ease-in-out;*/
			background: #f4f5f7;
		}
		
		.page-container.active {
			transform: translateX(0);
		}
		
		.page-container.previous {
			transform: translateX(-100vw);
		}
		
		.main-container {
			max-width: 834px;
			margin: 0 auto;
			padding: 1rem;
			box-sizing: border-box;
			height: 100vh;
			display: flex;
			flex-direction: column;
		}

		/* Welcome page styles */
		.welcome-page {
    background: linear-gradient(rgba(19, 56, 190, 0.8), rgba(19, 56, 190, 0.8)), url('flag.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    height: 100vh;
    position: relative;
}

		/* Ensure the container is properly centered */
.welcome-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 600px;
    text-align: center;
}

		.welcome-header {
			text-align: center;
		}

		.welcome-header h1 {
			font-size: 1.5rem;
			margin-bottom: 0.5rem;
		}

		.welcome-header h2 {
			font-size: 1.2rem;
			margin-top: 0;
		}

		.welcome-year {
			font-size: 8rem;
			font-weight: bold;
			margin: 2rem 0;
		}

		.start-circle {
    width: 60px;       /* Reduced from 80px */
    height: 60px;      /* Reduced from 80px */
    border-radius: 50%;
    border: 3px solid white;
    background: transparent;
    cursor: pointer;
    margin: 2rem auto;  /* Added auto horizontal margin to ensure centering */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-circle::after {
    content: '';
    width: 45px;       /* Increased from 40px to be closer to outer circle */
    height: 45px;      /* Increased from 40px to be closer to outer circle */
    border-radius: 50%;
    background: white;
    position: absolute;
}



		.headphones-icon {
			font-size: 2rem;
			margin: 1rem 0;
		}

		/* Get Started page styles */
		.get-started-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 2rem;
			text-align: center;
			flex-grow: 1;
		}

		.get-started-container h1 {
			font-size: 2rem;
			margin-bottom: 2rem;
		}

		.start-button-container {
			border: 1px solid black;
			padding: 1rem 2rem;
			margin: 2rem 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		.touch-icon {
			width: 24px;
			height: 24px;
		}

		/* Instruction page styles */
		.instruction-page {
			text-align: center;
			padding: 2rem;
			flex-grow: 1;
		}

		.instruction-title {
			font-size: 2rem;
			margin-bottom: 2rem;
		}

		.instruction-text {
			color: #666;
			margin-bottom: 1rem;
		}

		/* Navigation styles */
		.navigation {
			display: flex;
			justify-content: space-between;
			padding: 1rem;
			background: #f4f5f7;
			margin-top: auto;
		}

		.nav-button {
			background: white;
			border: 1px solid #000;
			padding: 0.75rem 2rem;
			font-size: 1rem;
			cursor: pointer;
			min-width: 120px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.single-nav-button {
			margin: 0 auto;
		}

		/* Top bar styles */
		.top-bar {
			display: flex;
			justify-content: space-between;
			padding: 1rem;
			background: white;
			border-bottom: 1px solid #eee;
		}

		.top-bar-button {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			background: none;
			border: none;
			cursor: pointer;
			color: #666;
		}

		.top-bar-button img {
			width: 24px;
			height: 24px;
		}

				.options-wrapper {
			flex: 1;
			overflow-y: auto;
			margin: 0 -1rem;
			padding: 0 1rem;
			-ms-overflow-style: none;
			scrollbar-width: none;
		}

		.options-wrapper::-webkit-scrollbar {
			display: none;
		}

		.options {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			padding: 0 1rem;
			padding-bottom: 1rem;
		}

		.option-button {
			background: white;
			border: 1px solid #000;
			padding: 1rem;
			text-align: left;
			font-size: 1rem;
			cursor: pointer;
			transition: all 0.2s;
			min-height: 3.5rem;
		}

		.option-button:hover {
			background: #f0f0f0;
		}

		.option-button.selected {
			background: #000;
			color: #fff;
			position: relative;
			padding-left: 45px;
		}

		.write-in-option {
			background: white;
			border: 1px dotted #000;
			padding: 1rem;
			text-align: left;
			font-size: 1rem;
			min-height: 3.5rem;
			color: #666;
		}

		.candidate-name {
/*			font-weight: bold;*/
			margin-bottom: 0.25rem;
		}

		.candidate-description {
			font-size: 0.9rem;
			color: #333;
		}

		.category {
			color: #666;
			font-size: 0.9rem;
			margin-bottom: 0.5rem;
		}

		.title {
			font-size: 1.4rem;
			font-weight: bold;
			margin-bottom: 1rem;
			line-height: 1.2;
		}

		.vote-instructions {
			display: flex;
			justify-content: space-between;
			margin-bottom: 1rem;
			font-size: 0.9rem;
		}

		.contest-number {
			color: #666;
			text-align: right;
			font-size: 0.9rem;
			margin-bottom: 0.5rem;
		}

		.measure-text {
			font-size: 0.9rem;
			line-height: 1.4;
			margin-bottom: 1rem;
			padding: 0 1rem;
		}

		.review-page {
  padding: 1rem;
  flex-grow: 1;
  overflow-y: auto;
}

.review-page h1 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.review-page h2 {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2rem;
}


.review-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
}

.review-item {
  background: white;
  border: 1px solid #000;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.review-contest {
  flex: 1;
}

.review-contest-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #666;
}

.review-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.review-selection {
  color: #000;
  font-size: 0.9rem;
}

.change-selection-button {
  background: white;
  border: 1px solid #000;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.change-selection-button:hover {
  background: #f0f0f0;
}

/* Modify existing navigation styles for submit button */
.submit-button {
  background: #1338BE;
  color: white;
  border-color: #1338BE;
}

.submit-button:hover {
  background: #0f2c9e;
  border-color: #0f2c9e;
}







/* Update existing body style */
body {
    margin: 0;
    font-family: 'Ambiguity Thrift';
    background: #f4f5f7;
    overflow-x: hidden;
}

/* Add specific styles for dynamic content */
.candidate-name,
.candidate-description,
.measure-text,
.review-selection,
.review-title,
.review-contest-number,
.review-category,
.contest-number,
.category,
.title,
.vote-instructions,
.vote-instructions span,
.option-button,
.write-in-option,
.nav-button,
.top-bar-button,
.instruction-title,
.instruction-text,
.get-started-container h1,
.start-button-container,
.welcome-header h1,
.welcome-header h2,
.welcome-year,
.review-page h1,
.review-page h2,
.review-summary,
.change-selection-button {
    font-family: 'Ambiguity Thrift';
}

/* Ensure form elements also use the font */
button,
input,
select,
textarea {
    font-family: 'Ambiguity Thrift';
}

/* Print styles update */
@media print {
    .review-page::before,
    .review-page::after {
        font-family: 'Ambiguity Thrift';
    }
}


Updated CSS for Text Formatting
/* Add these styles to your existing CSS */

.candidate-description {
    font-size: 0.9rem;
    color: #333;
    white-space: pre-line; /* This allows line breaks */
}

.measure-text {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    padding: 0 1rem;
    white-space: pre-line; /* This allows line breaks */
}

.measure-text strong,
.vote-instructions strong {
    font-weight: bold;
}

/* Update review page styles to handle formatting */
.review-selection {
    color: #000;
    font-size: 0.9rem;
    white-space: pre-line;
}

/* Add these new styles to your existing CSS */

.presidential-ticket {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
}

.candidate-role {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.party-affiliation {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Update existing styles */
.candidate-name {
/*    font-weight: bold;*/
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.option-button {
    background: white;
    border: 1px solid #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 3.5rem;
    width: 100%;
}

.option-button.selected {
    background: #000;
    color: #fff;
}

.option-button.selected .candidate-role,
.option-button.selected .party-affiliation {
    color: #fff;
}

.candidate-description {
    font-size: 0.9rem;
    color: #333;
    white-space: pre; /* This will respect the \n literally */
    line-height: 1.4;
}

.option-button {
    background: white;
    border: 1px solid #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 3.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.option-button.selected .candidate-description {
    color: #fff;
}

.presidential-ticket {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
}

.candidate-name {
/*    font-weight: bold;*/
    margin-bottom: 0.25rem;
}

/* Ensure proper spacing in the button */
.option-button > * {
    width: 100%;
}

/* Existing styles remain unchanged */

/* Add divider to top bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #ddd;
}

/* Add container for header content */
.header {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

/* Update measure text container */
.measure-text {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

/* Update options wrapper */
.options-wrapper {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-bottom: 1px solid #ddd;
}

/* Update navigation */
.navigation {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #f4f5f7;
    margin-top: auto;
}

/* Update options container spacing */
.options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
}

/* Ensure proper spacing for contest info */
.contest-number {
    color: #666;
    text-align: right;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.category {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.vote-instructions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.content-wrapper {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-bottom: 1px solid #ddd;
}

.content-wrapper::-webkit-scrollbar {
    display: none;
}

.options-wrapper {
    flex: 0 0 auto;
    margin: 0;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.measure-text {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 1rem;
    background: #f9f9f9;
    flex: 0 0 auto;
}

/* Ensure proper spacing */
.options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Update main container to ensure proper layout */
.main-container {
    max-width: 834px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Update body background */
body {
    margin: 0;
    font-family: 'Ambiguity Thrift';
    background: #fff;
    overflow-x: hidden;
}

/* Update main container */
.main-container {
    max-width: 834px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Update top bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

/* Update navigation */
.navigation {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    margin-top: auto;
}

/* Update measure text background */
.measure-text {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 1rem;
    background: #fff;
    flex: 0 0 auto;
}

/* Update option buttons */
.option-button {
    background: #fff;
    border: 1px solid #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 3.5rem;
    width: 100%;
}

.option-button:hover {
    background: #f0f0f0;
}

/* Update write-in option */
.write-in-option {
    background: #fff;
    border: 1px dotted #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    min-height: 3.5rem;
    color: #666;
}

/* Update review items */
.review-item {
    background: #fff;
    border: 1px solid #000;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Update change selection button */
.change-selection-button {
    background: #fff;
    border: 1px solid #000;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.change-selection-button:hover {
    background: #f0f0f0;
}

/* Update nav buttons */
.nav-button {
    background: #fff;
    border: 1px solid #000;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #eee;
}

.top-bar-button {
    display: flex;
    flex-direction: column;  /* Stack children vertically */
    align-items: center;     /* Center items horizontally */
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 0.9rem;
    padding: 0.5rem;
}

.top-bar-button img {
    width: 52px;            /* Increased from 24px */
    height: 52px;           /* Increased from 24px */
    display: block;         /* Ensure proper display */
}

.top-bar-button:hover {
    color: #333;
}

/* Update options wrapper padding */
.options-wrapper {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem;  /* Reduced from 1rem */
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-bottom: 1px solid #ddd;
}

/* Update options padding */
.options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;  /* Removed padding */
}

/* Update option button styles */
.option-button {
    background: white;
    border: 1px solid #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 3.5rem;
    width: 100%;
    position: relative;  /* Added for tick positioning */
}

/* Add tick mark for selected buttons */
.option-button.selected::before {
    content: "";
    position: absolute;
    left: 1rem;
    width: 1.2rem; /* Set width to fit the SVG */
    height: 1.2rem; /* Set height to fit the SVG */
    background-image: url('check.svg');
    background-size: contain; /* Ensure the SVG scales properly */
    background-repeat: no-repeat;
}
✓
/* Adjust padding for selected buttons to accommodate tick */
.option-button.selected {
    background: #000;
    color: #fff;
    padding-left: 3rem;  /* Increased left padding to make room for tick */
}

/* Update write-in option to match spacing */
.write-in-option {
    background: white;
    border: 1px dotted #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    min-height: 3.5rem;
    color: #666;
    width: 100%;
}

/* Presidential ticket specific adjustments */
.presidential-ticket {
    padding-left: 3rem;  /* Match the selected state padding */
}

.presidential-ticket.selected {
    padding-left: 3rem;
}
















/* Get Started page styles */
.get-started-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    flex-grow: 1;
}

/* Get Started page navigation */
.get-started-container + .navigation {
    display: flex;
    justify-content: flex-end; /* Align single button to right */
    background: #fff;
    margin-top: auto;
}


.get-started-container h1 {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    margin-top: 2rem; /* Add space above the title */
}

.options-wrapper.get-started {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.start-button-container {
    background: white;
    border: 1px solid #000;
    padding: 2rem;  /* Extra padding */
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* Space between text and icon */
    transition: all 0.2s;
    margin: 0;
    width: 100%;  /* Full width */
}

.start-button-container:hover {
    background: #f0f0f0;
}

.start-button-container.selected {
    background: #000;
    color: #fff;
    padding-left: 3rem;
    position: relative;
}

.start-button-container.selected::before {
    position: absolute;
    left: 1rem;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Settings icon styles */
.start-button-container img {
    width: 96px;
    height: 96px;
}

/* Add to your existing styles.css */













.ballot-summary-page {
    padding: 0.25in;
    background: white;
    width: 8.5in;
    min-height: 11in;
    margin: 0 auto;
    font-family: 'Ambiguity Thrift', sans-serif;
    box-sizing: border-box;
    position: relative;
}

/* Add watermark styling */
.ballot-summary-page::after {
    content: "";
    position: absolute;
    bottom: 0; /* Adjust as needed for exact placement */
    right: 0in; /* Adjust as needed for exact placement */
    width: 5in; /* Size of the watermark */
    height: 5in;
    background: url('bear.svg') no-repeat;
    background-size: contain;
    opacity: 0.1; /* Adjust opacity for watermark effect */
    pointer-events: none;
}

.ballot-grid {
    display: flex;
    gap: 0.25in; /* Reduced from 0.5in */
    height: 100%;
    max-width: 100%;
}

.ballot-year {
    font-size: 2.5rem; /* Reduced from 3rem */
    font-weight: bold;
    margin: 0.5rem 0; /* Reduced from 1rem */
    align-self: flex-start;
}

.ballot-date {
    font-size: 1.1rem; /* Slightly reduced */
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    align-self: flex-start;
}

.ballot-info {
    flex: 0 0 1.75in;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative;
    background-color: #ffffff;
    overflow: visible;
}
.ballot-pattern {
    position: absolute;
    top: -4px;
    left: -8px;
    right: -8px;
    bottom: 0px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 10"><path d="M0 5c5 0 5-5 10-5s5 5 10 5 5-5 10-5 5 5 10 5" fill="none" stroke="%23c0c0c0" stroke-width="1.5"/></svg>');
    background-size: 20px 8px;  /* Reduced vertical size to bring lines closer */
    background-repeat: repeat;
    opacity: 0.8;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 2px,
        rgba(0, 0, 0, 1) calc(100% - 2in),
        rgba(0, 0, 0, 0) calc(100% - 1.75in)
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 2px,
        rgba(0, 0, 0, 1) calc(100% - 2in),
        rgba(0, 0, 0, 0) calc(100% - 1.75in)
    );
}

/* Keep other elements unchanged */
.ballot-qr {
    position: relative;
    z-index: 2;
    background: white;
    width: 100%;
    aspect-ratio: 1;
    margin: 0.5rem 0;
    align-self: flex-start;
}

.black-line,
.ballot-year,
.ballot-date,
.county-seal,
.ballot-county {
    position: relative;
    z-index: 2;
}

.black-line {
    width: 100%;
    height: 2px;
    background: black;
    margin: 0.5rem 0;
}

/* Update the image-related styles in your CSS */

.county-seal {
    width: 50%;
    aspect-ratio: 1;  /* Maintains square shape */
    margin: 0.5rem 0;
    align-self: flex-start;
}

.county-seal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ballot-qr {
    width: 100%;
    aspect-ratio: 1;  /* Maintains square shape */
    margin: 0.5rem 0;
    align-self: flex-start;
}

.ballot-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Update the info column width to ensure proper image sizing */
.ballot-info {
    flex: 0 0 1.75in;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.selections-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-title {
    font-size: 1.2rem; /* Reduced from 1.4rem */
    font-weight: bold;
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    text-transform: uppercase;
    border-bottom: 2px solid black;
    padding-bottom: 0.25rem; /* Reduced from 0.5rem */
}

.selections-columns {
    display: flex;
    gap: 0.25rem; /* Reduced from 1rem */
}

.selections-column {
    flex: 1;
    padding: 0 0.25rem; /* Reduced from 0.5rem */
}

.selections-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Reduced from 1rem */
}

.ballot-contest {
    margin-bottom: 0.25rem; /* Reduced from 0.5rem */
}

.contest-title {
    font-size: 0.7rem; /* Reduced from 0.8rem */
    margin-bottom: 0.125rem; /* Reduced from 0.25rem */
    text-transform: uppercase;
}

.contest-selection {
    font-size: 0.8rem; /* Reduced from 0.9rem */
    font-weight: bold;
}

/* Keep the print styles the same */
@media print {
    .page-container,
    .review-page {
        display: none !important;
    }
    
    .ballot-summary-page {
        display: block !important;
        position: static;
        transform: none;
    }
    
    @page {
        size: letter;
        margin: 0;
    }
    
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}












/* Add these styles to your existing CSS */

/* Print confirmation page styles */
.get-started-container h2 {
    font-size: 1rem;
    color: #666;
    padding: 0 1rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

/* Ensure consistent spacing for confirmation page */
.get-started-container .options-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Style for the print confirmation button */
.print-confirmation .start-button-container {
    background: #1338BE;
    color: white;
    border-color: #1338BE;
}

.print-confirmation .start-button-container:hover {
    background: #0f2c9e;
    border-color: #0f2c9e;
}


/* Specific style for print confirmation page navigation */
.print-confirmation-page .navigation {
    justify-content: flex-start;  /* Aligns items to the left */
}

/* If needed, add some right margin to the back button */
.print-confirmation-page .navigation .nav-button {
    margin-right: auto;  /* Pushes everything else to the right */
}

.headphones-icon {
    margin: 1rem 0;
}

.headphones-icon img {
    display: block;
    margin: 0 auto;
}

















/* Fix write-in option to be clickable and match other buttons */
.write-in-option {
    background: white;
    border: 1px dotted #000;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer; /* Make clickable */
    min-height: 3.5rem;
    width: 100%;
    color: #666;
    transition: all 0.2s;
}

.write-in-option:hover {
    background: #f0f0f0;
}

.write-in-option.active {
    border-style: solid;
    color: #000;
}

.write-in-option.selected {
    background: #000;
    color: #fff;
    border-style: solid;
    padding-left: 3rem;
    position: relative;
}

.write-in-option.selected::before {
    position: absolute;
    left: 1rem;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Style the write-in form */
.write-in-form {
/*    margin-top: 0.75rem;*/
    display: none; /* Hide by default */
}

.write-in-form-content {
    border: 1px solid #000;
    padding: 1rem;
    background: white;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    font-size: 1rem;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.write-in-cancel {
    background: white;
    border: 1px solid #000;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.write-in-submit {
    background: black;
    color: white;
    border: 1px solid #000;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}























/* Update main container */
.main-container {
    width: 100%;
    max-width: 834px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    padding-bottom: 80px;
}

/* Base navigation styles */
.navigation {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
    background: #fff;
    height: 80px;
    width: 100%;
    max-width: inherit;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    align-items: center;
}

/* Mobile-first: Fixed navigation for smaller screens */
@media screen and (max-width: 834px) {
    .navigation {
        position: fixed;
        bottom: 40px; /* Move up significantly from bottom */
        left: 0;
        right: 0;
        z-index: 1000;
    }
    
    .main-container {
        padding-bottom: 120px; /* Increase padding to account for nav position */
    }
    
    /* Add a pseudo-element below the navigation to ensure content below is visible */
    .navigation::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: #fff;
        z-index: -1;
    }
}

/* Desktop: Navigation stays within container */
@media screen and (min-width: 835px) {
    .navigation {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .main-container {
        padding-bottom: 80px;
    }
}

/* Content area adjustments */
.content-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.options-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.review-page {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
}

.get-started-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    flex: 1;
}

.welcome-page {
    min-height: calc(100vh - 120px); /* Adjust for new nav position */
}

/* Navigation buttons */
.nav-button {
    background: #fff;
    border: 1px solid #000;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    min-width: 100px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
}

/* Mobile adjustments */
@media screen and (max-width: 480px) {
    .nav-button {
        min-width: 80px;
        font-size: 0.9rem;
        padding: 10px 16px;
    }
    
    .navigation {
        padding-left: 16px;
        padding-right: 16px;
    }
}




/* Base option button styles with consistent left padding */
.option-button {
    background: white;
    border: 1px solid #000;
    padding: 1rem 3rem;  /* Updated to have consistent left padding */
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 3.5rem;
    width: 100%;
    position: relative;
}

/* Selected state maintains the same padding */
.option-button.selected {
    background: #000;
    color: #fff;
    padding-left: 3rem;  /* Maintain consistent padding */
}

/* Add tick mark for selected buttons */
.option-button.selected::before {
    position: absolute;
    left: 1rem;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Presidential ticket specific styles - now matches other options */
.presidential-ticket {
    padding-left: 3rem;
}

.presidential-ticket.selected {
    padding-left: 3rem;
}

/* Write-in option styles with consistent padding */
.write-in-option {
    background: white;
    border: 1px dotted #000;
    padding: 1rem 3rem;  /* Updated to match other options */
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    min-height: 3.5rem;
    width: 100%;
    color: #666;
    transition: all 0.2s;
    position: relative;
}

.write-in-option.selected {
    background: #000;
    color: #fff;
    border-style: solid;
    padding-left: 3rem;
}

.write-in-option.selected::before {
    position: absolute;
    left: 1rem;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Ensure content within buttons is properly aligned */
.candidate-name,
.candidate-description,
.candidate-role,
.party-affiliation {
    width: 100%;
    padding-right: 1rem;  /* Add some right padding for better text alignment */
}
/* Remove padding from options wrapper */
.options-wrapper {
    margin: 0;
    padding: 0;
}

/* Update options container to have edge-to-edge border */
.options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 1rem 1rem 1rem;
    margin: 0;
    border-bottom: 1px solid #ddd;
}

/* Update measure text to align with edges */
.measure-text {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 1rem;
    margin: 0;
}




/* Styles ONLY for the non-voting pages */
.get-started-container h1,
.instruction-page h1,
.review-page h1,
.print-confirmation-page h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 3rem 0 0.5rem 0;  /* Push heading down and add space below */
    padding: 1rem;
    border-bottom: none;
    text-align: center;
}

.get-started-container h2,
.instruction-page h2,
.review-page h2,
.print-confirmation-page h2 {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
    padding: 0.5rem 1rem 2rem 1rem;
    text-align: center;
    border: none;
}

/* Ensure the containers themselves don't affect layout */
.get-started-container,
.instruction-page,
.review-page,
.print-confirmation-page {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Instruction text specific centering */
.instruction-page .instruction-text {
    text-align: center;
    margin: 0;
    padding: 1rem;
    color: #666;
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
    .get-started-container h1,
    .instruction-page h1,
    .review-page h1,
    .print-confirmation-page h1 {
        font-size: 1.8rem;
    }
}

/* Update review summary to be the main status message */
.review-summary {
    background: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 0 1rem 1.5rem 1rem;
    border-radius: 4px;
    font-size: 1.1rem;  /* Increased from 0.9rem to match other subtitles */
    color: #666;
    text-align: center;
}

/* Rest of the review page styles remain the same */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem 1rem;
}

.review-item {
    background: #fff;
    border: 1px solid #000;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Update all option buttons to have 3px borders */
.option-button {
    border: 3px solid #000;
}

.option-button.selected {
    border: 3px solid #000;
}

/* Update write-in options */
.write-in-option {
    border: 3px dotted #000;
}

.write-in-option.selected {
    border: 3px solid #000;
}

/* Update write-in form */
.write-in-form-content {
    border: 3px solid #000;
}

/* Update review items */
.review-item {
    border: 3px solid #000;
}

/* Update nav buttons */
.nav-button {
    border: 3px solid #000;
}

/* Update start button container */
.start-button-container {
    border: 3px solid #000;
}
/* Create a container for the review summary that allows edge-to-edge line */
.review-summary {
    border: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    color: #666;
    text-align: center;
    position: relative;
    overflow: hidden; /* Prevent horizontal scroll */
}

/* Add the edge-to-edge line below the heading */
.review-summary::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    background-color: #ddd;
    margin-top: 1rem;
    width: 100%;
    left: -100vw;
    right: -100vw;
    padding: 0 100vw; /* This extends the background */
}

/* Add spacing below the line */
.review-summary {
    padding-bottom: 2rem; /* Space for the line and gap below it */
}

/* Format the review page header like other non-voting pages */
.review-page h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 3rem 0 0.5rem 0;
    padding: 1rem;
    border-bottom: none;
    text-align: center;
}

.review-page h2 {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
    padding: 0.5rem 1rem 0 1rem;
    text-align: center;
    border: none;
}




/* Write-in form container adjustments */
.write-in-option {
    background: white;
    border: 2px dashed #000; /* Change from dotted to dashed for more spacing */
    border-style: dashed;    /* Explicitly set style */
    border-spacing: 2px;     /* Add border spacing */
    padding: 1rem 3rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    min-height: 3.5rem;
    width: 100%;
    color: #666;
    position: relative;
    box-sizing: border-box;
    margin: 0;
}

/* Form content wrapper adjustments */
.write-in-form-content {
    border: 3px solid #000;
    padding: 1rem;
    background: white;
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Form group adjustments */
.form-group {
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* Input field adjustments */
.form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

/* Form buttons container adjustments */
.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* Button adjustments */
.write-in-cancel,
.write-in-submit {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    border: 3px solid #000;
}

.write-in-cancel {
    background: white;
}

.write-in-submit {
    background: black;
    color: white;
}

/* Write-in option adjustments */
.write-in-option {
    margin: 0; /* Remove margins to align with other options */
    width: 100%;
    box-sizing: border-box;
}

/* Update options container to maintain consistent spacing */
.options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 1rem 1rem 1rem;
    margin: 0;
    border-bottom: 1px solid #ddd;
}

/* Ensure all option buttons have consistent width */
.option-button,
.write-in-option,
.write-in-form {
    width: 100%;
    box-sizing: border-box;
}


/* Base option button styles */
.option-button {
    background: white;
    border: 3px solid #000;
    padding: 1.5rem 3rem;  /* Increased padding for more height */
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 5rem;     /* Set minimum height */
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Presidential ticket specific adjustments */
.presidential-ticket {
    min-height: 8rem;    /* Larger minimum height for presidential tickets */
    padding: 1.5rem 3rem;
}

/* Write-in option styles */
.write-in-option {
    background: white;
    border: 2px dashed #000;
    padding: 1.5rem 3rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    min-height: 5rem;    /* Match regular option buttons */
    width: 100%;
    color: #666;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Write-in form adjustments */
.write-in-form-content {
    border: 3px solid #000;
    padding: 1.5rem;
    background: white;
    width: 100%;
    box-sizing: border-box;
    min-height: 5rem;    /* Match other buttons */
}

/* Ensure content within buttons is properly aligned */
.candidate-name,
.candidate-description,
.candidate-role,
.party-affiliation {
    width: 100%;
    padding-right: 1rem;
}

/* Selected state styling */
.option-button.selected,
.write-in-option.selected {
    background: #000;
    color: #fff;
    padding-left: 3rem;
}

/* Selected state icon positioning */
.option-button.selected::before,
.write-in-option.selected::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    background-image: url('check.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Adjust description text color in selected state */
.option-button.selected .candidate-description,
.option-button.selected .candidate-role,
.option-button.selected .party-affiliation {
    color: #fff;
}
/* Review item container */
.review-item {
    background: white;
    border: 3px solid #000;
    padding: 0;
    display: grid;
    grid-template-columns: 60px 1fr 100px; /* Adjusted to ensure consistent width */
    align-items: stretch;
    min-height: 60px;
    position: relative;
}

/* Checkbox container */
.review-item::before {
    content: '';
    width: 60px;
    height: 100%;
    background: #000;
    display: block;
}

/* Checkmark using SVG */
.review-item::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Contest content container */
.review-contest {
    display: grid;
    grid-template-columns: 45px 1fr; /* Reduced from 60px to 45px */
    align-items: start;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
}

/* Contest number container */
.review-contest-number {
    color: #666;
    font-size: 0.9rem;
    grid-row: 1 / 3;
    padding-top: 0.75rem;
}

/* Right side content wrapper */
.review-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.75rem;
}

/* Contest title */
.review-title {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    margin: 0;
}

/* Selected option */
.review-selection {
    color: #000;
    font-weight: bold;
    font-size: 1rem;
    margin: 0;
}

/* Change button */
.change-selection-button {
    background: white;
    border: 0;
    border-left: 3px solid #000;
    height: 100%;
    width: 100px; /* Match the grid column width */
    padding: 0;
    font-size: 0.9rem;
    cursor: pointer;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: bold;
}

.change-selection-button:hover {
    background: #f0f0f0;
}

/* Review list container */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem 1rem;
}