/**
 * 2025-11-25 - Mandar - Modern form styling with gradient theme
 */

body
{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: #f5f7fa !important;
   min-height: 100vh;
   padding: 20px;
}

.modern-form-container
{
   max-width: 800px;
   margin: 0 auto;
   background: white;
   border-radius: 15px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
   overflow: hidden;
}

.modern-form-header
{
   background: linear-gradient(135deg, #337ab7 0%, #2c5f8d 100%);
   color: white;
   padding: 40px 30px;
   text-align: center;
}

.modern-form-header img
{
   max-width: 250px;
   height: auto;
   margin-bottom: 20px;
   background: white;
   padding: 15px;
   border-radius: 10px;
}

.modern-form-header h1
{
   margin: 0;
   font-size: 28px;
   font-weight: 600;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modern-form-header p
{
   margin: 10px 0 0 0;
   font-size: 16px;
   opacity: 0.9;
}

.modern-form-body
{
   padding: 40px 30px;
}

.form-section
{
   margin-bottom: 30px;
}

.form-section h3
{
   color: #337ab7;
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid #e8e8e8;
}

.form-group
{
   margin-bottom: 20px;
}

.form-group label
{
   display: block;
   margin-bottom: 8px;
   color: #333;
   font-weight: 500;
   font-size: 14px;
}

.form-group label.required::after
{
   content: ' *';
   color: #d9534f;
}

.form-control
{
   width: 100%;
   padding: 12px 15px;
   border: 2px solid #e0e0e0;
   border-radius: 8px;
   font-size: 15px;
   transition: all 0.3s ease;
   box-sizing: border-box;
}

.form-control:focus
{
   border-color: #337ab7;
   outline: none;
   box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
}

.form-control.error
{
   border-color: #d9534f;
}

.help-block
{
   color: #d9534f;
   font-size: 13px;
   margin-top: 5px;
}

select.form-control
{
   cursor: pointer;
   background-color: white;
   padding-right: 40px !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   line-height: 1.5 !important;
   height: auto !important;
   min-height: 46px !important;
}

select.form-control option
{
   padding: 10px 8px !important;
   background: white !important;
   color: #333 !important;
   line-height: 1.6 !important;
   min-height: 40px !important;
}

textarea.form-control
{
   min-height: 100px;
   resize: vertical;
}

.form-row
{
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
}

.form-row .form-group
{
   flex: 1;
   margin-bottom: 0;
}

@media (max-width: 768px)
{
   .form-row
   {
      flex-direction: column;
      gap: 0;
   }

   .form-row .form-group
   {
      margin-bottom: 20px;
   }
}

.btn-submit
{
   background: linear-gradient(135deg, #337ab7 0%, #2c5f8d 100%);
   color: white;
   padding: 15px 40px;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   width: 100%;
   margin-top: 20px;
}

.btn-submit:hover
{
   background: linear-gradient(135deg, #2c5f8d 0%, #337ab7 100%);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(51, 122, 183, 0.3);
}

.btn-submit:active
{
   transform: translateY(0);
}

.success-message
{
   text-align: center;
   padding: 60px 30px;
}

.success-message .icon
{
   font-size: 64px;
   color: #5cb85c;
   margin-bottom: 20px;
}

.success-message h2
{
   color: #337ab7;
   font-size: 28px;
   margin-bottom: 15px;
}

.success-message p
{
   color: #666;
   font-size: 16px;
   line-height: 1.6;
}

.alert
{
   padding: 15px;
   margin-bottom: 20px;
   border-radius: 8px;
   border: 1px solid transparent;
}

.alert-danger
{
   background-color: #f8d7da;
   border-color: #f5c6cb;
   color: #721c24;
}

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

.has-error .form-control
{
   border-color: #d9534f;
}

.has-error .help-block
{
   display: block;
}

@media (max-width: 768px)
{
   .modern-form-container
   {
      margin: 10px;
   }

   .modern-form-header
   {
      padding: 30px 20px;
   }

   .modern-form-header h1
   {
      font-size: 24px;
   }

   .modern-form-body
   {
      padding: 30px 20px;
   }
}