/* Vistulo Color Scheme */
:root {
    --vistulo-primary: #416975;
    --vistulo-accent: #5C83EE;
    --vistulo-dark: #10182F;
    --vistulo-text: #4E4F5C;
    --vistulo-text-muted: rgba(78, 79, 92, 0.678);
    --vistulo-border: rgba(0, 0, 0, 0.122);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base Typography */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: var(--vistulo-text);
    background-color: #FFFFFF;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--vistulo-primary);
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

a {
    color: var(--vistulo-accent);
    text-decoration: none;
}

a:hover {
    color: var(--vistulo-dark);
    text-decoration: underline;
}

/* Header */
.vistulo-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--vistulo-border);
    padding: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vistulo-logo {
    height: 40px;
    width: auto;
}

.vistulo-header-content {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--vistulo-primary);
}

/* Buttons */
.btn-vistulo-primary {
    background-color: var(--vistulo-primary);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 2.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-vistulo-primary:hover {
    background-color: var(--vistulo-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 105, 117, 0.3);
}

.btn-vistulo-outline {
    background-color: transparent;
    border: 2px solid var(--vistulo-primary);
    color: var(--vistulo-primary);
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 2.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-vistulo-outline:hover {
    background-color: var(--vistulo-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 105, 117, 0.3);
}

.btn-vistulo-accent {
    background-color: var(--vistulo-accent);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 2.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-vistulo-accent:hover {
    background-color: var(--vistulo-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(92, 131, 238, 0.3);
}

/* Layout */
.vistulo-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    background-color: #FFFFFF;
}

.vistulo-card {
    background-color: #F9F8F6;
    border: 1px solid var(--vistulo-border);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Forms */
.form-label {
    font-weight: 500;
    color: var(--vistulo-primary);
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border: 1px solid var(--vistulo-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--vistulo-accent);
    box-shadow: 0 0 0 0.2rem rgba(92, 131, 238, 0.25);
}

.vistulo-card form .form-group {
    margin-bottom: 1.5rem;
}

.vistulo-card form button[type="submit"],
.vistulo-card form input[type="submit"] {
    background-color: var(--vistulo-primary);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 2.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 1rem;
}

.vistulo-card form button[type="submit"]:hover:not(:disabled),
.vistulo-card form input[type="submit"]:hover:not(:disabled) {
    background-color: var(--vistulo-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 105, 117, 0.3);
}

.vistulo-card form button[type="submit"]:disabled,
.vistulo-card form input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.vistulo-card .helptext {
    font-size: 0.875rem;
    color: var(--vistulo-text-muted);
    margin-top: 0.25rem;
}

.vistulo-card .alert {
    margin-bottom: 1.5rem;
}

.vistulo-card textarea {
    min-height: 150px;
}

/* Alerts */
.alert {
    border-radius: 0.5rem;
    border: none;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

/* Badges */
.badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.bg-vistulo-primary {
    background-color: var(--vistulo-primary) !important;
}

.bg-vistulo-accent {
    background-color: var(--vistulo-accent) !important;
}

/* Referral Banner */
.referral-banner {
    background-color: #f8f9fa;
    border-left: 4px solid var(--vistulo-accent);
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
}

.referral-banner h5 {
    color: var(--vistulo-primary);
    font-weight: 500;
    font-size: 1.125rem;
}

.referral-banner p {
    color: var(--vistulo-text-muted);
    font-size: 0.9375rem;
}

/* Ad Content */
.ad-content {
    font-size: 1.0625rem;
    line-height: 1.8;
}

.ad-content h1,
.ad-content h2,
.ad-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.ad-content p {
    margin-bottom: 1.25rem;
}

.ad-content ul,
.ad-content ol {
    margin-bottom: 1.25rem;
    padding-left: 2rem;
}

.ad-content li {
    margin-bottom: 0.5rem;
}

.ad-content strong {
    font-weight: 500;
    color: var(--vistulo-primary);
}

.ad-content code {
    background-color: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* Ad Details Compensation Badge */
.ad-compensation-badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

/* Thank You Page */
.thank-you-icon {
    font-size: 4rem;
    color: var(--vistulo-accent);
    margin-bottom: 1.5rem;
}

.thank-you-card {
    margin-top: 4rem;
}

.thank-you-footer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vistulo-border);
}

.thank-you-footer p {
    font-size: 0.9375rem;
    color: var(--vistulo-text-muted);
}

/* Thank You Text Sizes */
.thank-you-text {
    font-size: 1.125rem;
    color: var(--vistulo-text);
}

/* Intro Text */
.intro-text {
    font-size: 1.0625rem;
}

/* Content Divider */
.content-divider {
    border-color: var(--vistulo-border);
    margin: 3rem 0;
}

/* Large CTA Button */
.btn-large-cta {
    padding: 1rem 3rem;
    font-size: 1.125rem;
}

/* Mobile Responsive Buttons */
.btn-mobile-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Referral Pages */
.referral-bonus-card {
    border-left: 4px solid var(--vistulo-accent);
}

.qr-code-image {
    max-width: 200px;
}

.input-group .btn-vistulo-outline {
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Please don't copy the written exercise description into an AI-assisted tool. We want to see how you think, not if you know how to copy and paste. Using AI is OK on the job, but don't use it to write code during this recruitment process. */
.no-copy-because-trust-is-important-when-working-together {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}