:root {
  --wf-bg: #f8fafc;
   3 │   --wf-primary: #f39c12; /* Brighter Orange */
   4 │   --wf-primary-hover: #e67e22;
   5 │   --wf-accent: #f39c12; /* Match primary for consistency */
   6 │   --wf-accent-hover: #e67e22;
  --wf-text-main: #1e293b;
  --wf-text-secondary: #64748b;
  --wf-border: #e2e8f0;
  10 │   --wf-card-bg: #ffffff;
  11 │   --wf-radius-lg: 24px;
  12 │   --wf-radius-md: 16px;
  13 │   --wf-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  14 │ }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--wf-bg);
  color: var(--wf-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8)), url('https://images.unsplash.com/photo-1523050853063-bd8012fec046?auto=format&fit=crop&q=80&w=2000');
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  transform: scale(1.1);
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.header {
  padding: 1.5rem 0;
  text-align: center;
  border-bottom: 1px solid var(--wf-border);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

.header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.logo-box {
  background: white;
  padding: 0.75rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-text {
  font-weight: 800;
  font-size: 1.25rem;
  color: #1e293b;
  letter-spacing: 0.05em;
}

/* Banner Card */
.banner-card {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  border-radius: 24px;
  padding: 3rem 2rem;
  text-align: center;
  margin: 2rem 0;
  box-shadow: 0 20px 25px -5px rgba(230, 126, 34, 0.3);
  position: relative;
  overflow: hidden;
}

.banner-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.banner-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.school-logo-main {
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.school-logo-main img {
  width: 100%;
  height: auto;
}

.banner-contact {
  font-size: 1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.banner-heading {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.banner-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.banner-batch {
  font-size: 1rem;
  opacity: 0.8;
}

/* Grid Layout */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.card {
  background: var(--wf-card-bg);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--wf-border);
}

.card-title-area {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wf-border);
  padding-bottom: 1rem;
}

.card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.icon-yellow { background: #fef3c7; color: #d97706; }
.icon-blue { background: #dbeafe; color: #2563eb; }

.card-title-text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.card-title-text p {
  font-size: 0.875rem;
  color: var(--wf-text-secondary);
  margin: 0.25rem 0 0;
}

/* Instructions */
.instruction-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.instruction-item {
  display: flex;
  gap: 1rem;
}

.check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #10b981;
}

.instruction-content p:first-child {
  font-weight: 600;
  margin: 0;
}

.instruction-content p:last-child {
  font-size: 0.9rem;
  color: var(--wf-text-secondary);
  margin-top: 0.25rem;
}

.help-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--wf-border);
  text-align: center;
}

.help-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.help-hours {
  font-size: 0.875rem;
  color: var(--wf-text-secondary);
  margin-bottom: 1rem;
}

.help-contact {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Form Styles */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.form-label span {
  font-weight: normal;
  color: var(--wf-text-secondary);
  font-size: 0.85rem;
}

.name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .name-grid {
    grid-template-columns: 1fr;
  }
}

.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--wf-border);
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.2s;
  background: #f8fafc;
}

.input-field:focus {
  outline: none;
  border-color: var(--wf-accent);
  background: white;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.file-upload-container {
  border: 2px dashed var(--wf-border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s;
}

.file-upload-container:hover {
  border-color: var(--wf-accent);
  background: #f0f7ff;
}

.phone-span {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .phone-span {
    grid-column: span 1;
  }
}

.upload-icon {
  margin-bottom: 0.5rem;
}

.upload-btn-text {
  color: #3b82f6;
  font-weight: 600;
}

.hidden-input {
  display: none;
}

.upload-hint {
  font-size: 0.85rem;
  color: var(--wf-text-secondary);
  margin-top: 0.5rem;
}

.submit-btn {
  width: 100%;
  background: var(--wf-accent);
  color: white;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

 382 │ .submit-btn:hover {
 383 │   background: var(--wf-accent-hover);
 384 │   transform: translateY(-1px);
 385 │   box-shadow: 0 10px 15px -3px rgba(243, 156, 18, 0.4);
 386 │ }
 385 │ 
 386 │ /* Auth Specific Styles */
 387 │ .auth-layout {
 388 │   min-height: 100vh;
 389 │   display: flex;
 390 │   align-items: center;
 391 │   justify-content: center;
 392 │   padding: 2rem 1rem;
 393 │   position: relative;
 394 │   overflow: hidden;
 395 │ }
 396 │ 
 397 │ .auth-card {
 398 │   width: 100%;
 399 │   max-width: 480px;
 400 │   background: white;
 401 │   border-radius: var(--wf-radius-lg);
 402 │   padding: 3rem;
 403 │   box-shadow: var(--wf-shadow);
 404 │   border: 1px solid var(--wf-border);
 405 │   z-index: 10;
 406 │   animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 407 │ }
 408 │ 
 409 │ @keyframes slideUp {
 410 │   from { opacity: 0; transform: translateY(20px); }
 411 │   to { opacity: 1; transform: translateY(0); }
 412 │ }
 413 │ 
 414 │ .auth-header {
 415 │   text-align: center;
 416 │   margin-bottom: 2.5rem;
 417 │ }
 418 │ 
 419 │ .auth-logo {
 420 │   width: 64px;
 421 │   height: 64px;
 422 │   margin: 0 auto 1.5rem;
 423 │   background: var(--wf-primary);
 424 │   border-radius: 16px;
 425 │   display: flex;
 426 │   align-items: center;
 427 │   justify-content: center;
 428 │   color: white;
 429 │   box-shadow: 0 8px 16px -4px rgba(230, 126, 34, 0.3);
 430 │ }
 431 │ 
 432 │ .auth-title {
 433 │   font-size: 1.875rem;
 434 │   font-weight: 800;
 435 │   margin: 0 0 0.5rem;
 436 │   color: var(--wf-text-main);
 437 │   letter-spacing: -0.025em;
 438 │ }
 439 │ 
 440 │ .auth-subtitle {
 441 │   color: var(--wf-text-secondary);
 442 │   font-size: 1rem;
 443 │ }
 444 │ 
 445 │ .auth-link {
 446 │   color: var(--wf-accent);
 447 │   text-decoration: none;
 448 │   font-weight: 600;
 449 │   transition: color 0.2s;
 450 │ }
 451 │ 
 452 │ .auth-link:hover {
 453 │   color: var(--wf-accent-hover);
 454 │   text-decoration: underline;
 455 │ }
 456 │ 
 457 │ .auth-footer {
 458 │   margin-top: 2rem;
 459 │   text-align: center;
 460 │   font-size: 0.95rem;
 461 │   color: var(--wf-text-secondary);
 462 │ }
 463 │ 
 464 │ .input-wrapper {
 465 │   position: relative;
 466 │   margin-bottom: 1.5rem;
 467 │ }
 468 │ 
 469 │ .input-icon {
 470 │   position: absolute;
 471 │   left: 1rem;
 472 │   top: 50%;
 473 │   transform: translateY(-50%);
 474 │   color: var(--wf-text-secondary);
 475 │   pointer-events: none;
 476 │ }
 477 │ 
 478 │ .input-with-icon {
 479 │   padding-left: 3rem !important;
 480 │ }
 481 │ 
 482 │ .checkbox-group {
 483 │   display: flex;
 484 │   align-items: center;
 485 │   justify-content: space-between;
 486 │   margin-bottom: 2rem;
 487 │   font-size: 0.9rem;
 488 │ }
 489 │ 
 490 │ .checkbox-label {
 491 │   display: flex;
 492 │   align-items: center;
 493 │   gap: 0.5rem;
 494 │   cursor: pointer;
 495 │   color: var(--wf-text-secondary);
 496 │ }
 497 │ 
 498 │ .social-login {
 499 │   margin-top: 2.5rem;
 500 │   padding-top: 2rem;
 501 │   border-top: 1px solid var(--wf-border);
 502 │   text-align: center;
 503 │ }
 504 │ 
 505 │ .social-title {
 506 │   font-size: 0.85rem;
 507 │   text-transform: uppercase;
 508 │   letter-spacing: 0.05em;
 509 │   color: var(--wf-text-secondary);
 510 │   margin-bottom: 1.5rem;
 511 │   display: block;
 512 │ }
 513 │ 
 514 │ .social-btns {
 515 │   display: flex;
 516 │   gap: 1rem;
 517 │   justify-content: center;
 518 │ }
 519 │ 
 520 │ .social-btn {
 521 │   flex: 1;
 522 │   display: flex;
 523 │   align-items: center;
 524 │   justify-content: center;
 525 │   padding: 0.75rem;
 526 │   border: 1px solid var(--wf-border);
 527 │   border-radius: 12px;
 528 │   background: white;
 529 │   cursor: pointer;
 530 │   transition: all 0.2s;
 531 │ }
 532 │ 
 533 │ .social-btn:hover {
 534 │   background: #f8fafc;
 535 │   border-color: #cbd5e1;
 536 │ }
 537 │ 
 538 │ .decorative-shape {
 539 │   position: absolute;
 540 │   border-radius: 50%;
 541 │   filter: blur(80px);
 542 │   z-index: -1;
 543 │   opacity: 0.5;
 544 │ }
 545 │ 
 546 │ .shape-1 {
 547 │   width: 400px;
 548 │   height: 400px;
 549 │   background: #fbbf24;
 550 │   top: -100px;
 551 │   right: -100px;
 552 │ }
 553 │ 
 554 │ .shape-2 {
 555 │   width: 300px;
 556 │   height: 300px;
 557 │   background: #3b82f6;
 558 │   bottom: -50px;
 559 │   left: -50px;
 560 │ }
 561 │ 
 562 │ .footer {
  text-align: center;
  padding: 2rem 0;
  color: var(--wf-text-secondary);
  font-size: 0.875rem;
  border-top: 1px solid var(--wf-border);
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.8);
}

.footer strong {
  color: #3b82f6;
}

.required {
  color: #ef4444;
}

.placeholder-image {
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.placeholder-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
}