.code-validator-form {
max-width: 628px;
margin: 0 auto;
}
.cv-title {
text-align: center;
line-height: 1.3;
font-weight: 700;
margin-bottom: 0.5rem !important;
font-size: clamp(1.125rem, 0.855vw + 0.816rem, 1.5rem);
}
.cv-description {
margin-bottom: clamp(2rem, 1.14vw + 1.588rem, 2.5rem);
font-size: 1rem;
text-align: center;
}
.cv-form-container {
border-radius: 6px;
margin-bottom: 20px;
}
.cv-form-row-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr 1fr;
margin-bottom: clamp(2rem, 1.14vw + 1.588rem, 2.5rem);
}
.cv-form-row {
margin-bottom: 1rem;
}
.cv-form-row label {
display: block;
margin-top: 0.75rem;
margin-bottom: 0 !important;
font-weight: 700;
text-align: center;
}
.cv-form-row input[type="text"] {
width: 100%;
padding: 12px;
border-radius: 8px;
font-size: clamp(1rem, 0.57vw + 0.794rem, 1.25rem);
height: 64px;
text-align: center;
letter-spacing: 0.2em;
transition: border-color 0.3s ease;
}
.cv-form-row input[type="text"]:focus {
outline: none;
}
.cv-verify-button {
padding: 12px 30px;
border: none;
font-size: clamp(1.125rem, -0.285vw + 1.228rem, 1rem);
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
height: 50px;
}
.cv-help-section {
margin: 0;
padding: 0;
}
.cv-help-text {
text-align: center;
font-size: 14px;
margin-bottom: 15px;
}
.cv-help-text a {
text-decoration: none;
display: inline-flex;
gap: 0.25rem;
color: inherit;
align-items: center;
}
.cv-help-text a svg path {
fill: currentColor;
}
.cv-help-text a:hover {
text-decoration: underline;
}
.cv-help-image {
text-align: center;
margin-bottom: 20px;
}
.cv-help-image img {
max-width: 100%;
height: auto;
}
.cv-notice {
margin-top: clamp(2.5rem, 3.419vw + 1.265rem, 4rem);
text-align: center;
font-size: 1rem;
}
.cv-result-container {
background: white;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.cv-product-info {
text-align: center;
padding: 15px;
margin-bottom: 20px;
}
.cv-product-info h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.cv-product-info p {
margin: 8px 0;
}
.cv-verification-message {
margin-bottom: 20px;
line-height: 1.6;
text-align: center;
}
.cv-verification-message.cv-success {
text-align: center;
}
.cv-verification-message.cv-failure {
text-align: center;
}
.cv-loading {
text-align: center;
padding: 40px;
background: white;
border-radius: 6px;
}
.cv-loading p {
font-size: 18px;
color: #666;
margin: 0;
} @media (max-width: 768px) {
.code-validator-form {
margin: 10px;
padding: 15px;
}
.cv-form-container,
.cv-result-container {
padding: 15px;
}
.cv-title {
font-size: 20px;
}
} .form-table th {
width: 200px;
}
.form-table td {
padding: 15px 10px;
}
#image-preview img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
background: white;
}
.card {
background: white;
border: 1px solid #ccd0d4;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.card h2 {
margin-top: 0;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
#code-verification-form {
margin-bottom: 0 !important;
}