/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Karla:wght@300;400;500;600;700&display=swap');

/* Fonts */
/* Title/Header Fonts - El Messiri */
.hero-section,
.job-header-info,
.job-title-main,
.job-badge,
.post-date,
.job-meta,
.logo,
.section-title,
.subsection-title,
.application-form-container h2,
.main-title {
   font-family: 'El Messiri', sans-serif;
}

/* Content Fonts - Karla */
.main-content,
.intro-text,
.description-list,
.description-list li,
.bullet-list,
.bullet-list li,
.apply-btn,
.application_button.button,
.apply_with_resume p,
.submit-cv-btn,
.awsm-job-form-field,
.awsm-job-form-group label,
.awsm-application-submit-btn,
.awsm-success-message p,
.job-manager-applications-applied-notice,
.account-btn,
.language-selector,
.footer-link,
.footer-nav,
.copyright,
.main-message,
.secondary-message,
.btn-return,
.meta-item {
   font-family: 'Karla', sans-serif !important;
}

/* Additional specificity for main content area */
html body .main-content *:not(.section-title):not(.subsection-title):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-family: 'Karla', sans-serif !important;
}

/* Ensure all elements within the main content block use Karla font */
.main-content,
.main-content *,
.main-content button,
.main-content input,
.main-content textarea,
.main-content select,
.main-content label,
.main-content p,
.main-content span,
.main-content div,
.main-content li,
.main-content a,
.main-content strong,
.main-content em,
.main-content small,
.main-content big,
.main-content cite,
.main-content code,
.main-content pre {
    font-family: 'Karla', sans-serif !important;
}

/* Consistent font sizing for main content elements */
.main-content {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.main-content *{
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Specific element sizing within main content */
.main-content p,
.main-content span,
.main-content div:not(.application-form-container):not(.application-message-container),
.main-content li,
.main-content a,
.main-content label,
.main-content strong,
.main-content em,
.main-content small,
.main-content code,
.main-content pre {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Form elements sizing */
.main-content input,
.main-content textarea,
.main-content select,
.main-content button,
.main-content .apply-btn,
.main-content .awsm-job-form-field,
.main-content .awsm-application-submit-btn {
    font-size: 15px !important;
}

/* List items specific sizing */
.main-content ul li,
.main-content ol li,
.main-content .description-list li,
.main-content .bullet-list li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Consistent color for main content (preserving font-weight for important elements) */
.main-content p,
.main-content span:not(strong):not(b),
.main-content div,
.main-content li {
    color: #4a5568 !important;
}

/* Ensure regular text has normal weight */
.main-content p,
.main-content span:not(strong):not(b),
.main-content div:not(.section-title):not(.subsection-title),
.main-content li {
    font-weight: 400 !important;
}

/* Preserve bold/strong elements - don't override their weight */
.main-content strong,
.main-content b {
    color: #1a202c !important;
}

/* Ensure links have consistent color but preserve their weight */
.main-content a {
    color: #4a5568 !important;
}

.menu-icon {
   color: white;
   font-size: 24px;
   cursor: pointer;
   padding: 8px;
   font-family: 'Karla', sans-serif;
}

.logo {
   color: white;
   font-size: 28px;
   font-weight: 300;
   letter-spacing: 6px;
   text-align: center;
   flex: 1;
   font-family: 'El Messiri', sans-serif;
}

.language-selector {
   color: white;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.3);
   padding: 8px 15px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 13px;
   font-family: 'Karla', sans-serif;
}

.account-btn {
    background: white;
    color: #0a2834;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-family: 'Karla', sans-serif;
}

.account-btn:hover {
   background: #f0f0f0;
}

/* Hero Section */
.hero-section {
    background: #0a2834;
    padding: 50px 20px;
}

.hero-container {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 40px;
}

.job-icon-wrapper {
   background: white;
   padding: 30px;
   border-radius: 8px;
   flex-shrink: 0;
}

.job-icon {
   width: 100px;
   height: 100px;
}

.job-icon svg {
    width: 100%;
    height: 100%;
    fill: #0a2834;
}

.job-header-info {
   color: white;
   flex: 1;
}

.favorite-icon {
   color: rgba(255, 255, 255, 0.7);
   font-size: 20px;
   margin-bottom: 5px;
}

.post-date {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 10px;
}

.job-title-main {
   font-size: 36px;
   font-weight: 600;
   margin-bottom: 15px;
   line-height: 1.2;
}

.job-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.2);
   padding: 6px 16px;
   border-radius: 20px;
   font-size: 12px;
   margin-bottom: 15px;
   font-weight: 500;
}

.job-meta {
   display: flex;
   gap: 25px;
   flex-wrap: wrap;
   font-size: 14px;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 8px;
}

.meta-icon {
   font-size: 16px;
}

/* Main Content */
.main-content {
   max-width: 1100px;
   margin: 0 auto;
   padding: 60px 20px;
}

.section {
   margin-bottom: 50px;
}

.section-title {
   font-size: 32px;
   font-weight: 600;
   color: #1a202c;
   margin-bottom: 30px;
   line-height: 1.3;
}

.intro-text {
   font-size: 16px;
   line-height: 1.8;
   margin-bottom: 25px;
   color: #4a5568;
}

.intro-highlight {
   font-weight: 600;
   color: #1a202c;
}

.subsection-title {
   font-size: 18px;
   font-weight: 700;
   color: #1a202c;
   margin: 30px 0 15px 0;
}

.description-list {
   list-style: none;
   margin-left: 0;
}

.description-list li {
   margin-bottom: 12px;
   padding-left: 20px;
   position: relative;
   line-height: 1.7;
   color: #4a5568;
}

.description-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #0a2834;
    font-weight: bold;
}

.bullet-list {
   list-style: none;
   margin-top: 20px;
}

.bullet-list li {
   margin-bottom: 20px;
   padding-left: 25px;
   position: relative;
   line-height: 1.8;
   color: #4a5568;
}

.bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #0a2834;
    font-weight: bold;
    font-size: 20px;
}

.apply-btn {
    background: #0a2834;
    color: white;
    border: none;
    padding: 18px 50px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    margin-top: 40px;
    font-family: 'Karla', sans-serif !important;
}

/* Ensure form elements within main content use Karla */
.main-content .application-form-container *,
.main-content .application-message-container * {
    font-family: 'Karla', sans-serif !important;
}

.apply-btn:hover {
    background: #0a2834;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 40, 52, 0.4);
}

/* Application Button Styling */
.application_button.button {
    background: #0a2834;
    color: white;
    border: none;
    padding: 18px 50px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    margin-top: 40px;
    font-family: 'Karla', sans-serif !important;
}

.application_button.button:hover {
    background: #0a2834;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 40, 52, 0.4);
}

/* Application Details Section Styling */
.application_details {
   background: #f8f9fa;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 30px;
   margin-top: 30px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.apply_with_resume p {
   font-family: 'Karla', sans-serif !important;
   font-size: 15px;
   line-height: 1.7;
   color: #4a5568;
   margin-bottom: 20px;
}

.apply_with_resume p:last-of-type {
   margin-bottom: 0;
}

.submit-cv-btn {
    background: white;
    color: #0a2834;
    border: 2px solid #0a2834;
    padding: 14px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    font-family: 'Karla', sans-serif !important;
}

.submit-cv-btn:hover {
    background: #0a2834;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 40, 52, 0.2);
}

@media (max-width: 480px) {
   .application_details {
      padding: 20px;
   }
   
   .submit-cv-btn {
      width: 100%;
      padding: 12px 30px;
   }
}

/* Footer */
.footer {
    background: #0a2834;
    color: white;
    padding: 50px 20px 30px;
    margin-top: 80px;
}

.footer-content {
   max-width: 1400px;
   margin: 0 auto;
}

.social-links {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-bottom: 30px;
}

.social-icon {
   color: white;
   font-size: 20px;
   transition: color 0.3s;
}

.social-icon:hover {
   color: #cbd5e0;
}

.footer-nav {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 30px;
   margin-bottom: 30px;
}

.footer-link {
   color: white;
   text-decoration: none;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: color 0.3s;
}

.footer-link:hover {
   color: #cbd5e0;
}

.copyright {
   text-align: center;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 992px) {
   .hero-container {
      flex-direction: column;
      align-items: flex-start;
   }

   .job-header-info {
      text-align: left;
      width: 100%;
   }

   .favorite-icon {
      text-align: left;
   }

   .post-date {
      text-align: left;
   }

   .job-title-main {
      font-size: 28px;
      text-align: left;
   }

   .job-badge {
      text-align: left;
   }

   .job-meta {
      justify-content: flex-start;
   }

   .section-title {
      font-size: 28px;
   }
}

@media (max-width: 768px) {
   .header-container {
      gap: 15px;
   }

   .logo {
      font-size: 22px;
      letter-spacing: 4px;
   }

   .hero-section {
      padding: 40px 20px;
   }

   .job-icon-wrapper {
      padding: 20px;
   }

   .job-icon {
      width: 80px;
      height: 80px;
   }

   .job-title-main {
      font-size: 24px;
   }

   .main-content {
      padding: 40px 20px;
   }

   .section-title {
      font-size: 24px;
   }

   .subsection-title {
      font-size: 16px;
   }

   .intro-text,
   .description-list li,
   .bullet-list li {
      font-size: 15px;
   }

   .footer-nav {
      gap: 15px;
   }

   .footer-link {
      font-size: 11px;
   }
}

@media (max-width: 480px) {
   .account-btn {
      padding: 8px 15px;
      font-size: 11px;
   }

   .language-selector {
      padding: 6px 12px;
      font-size: 12px;
   }

   .job-title-main {
      font-size: 20px;
   }

   .job-meta {
      flex-direction: column;
      gap: 10px;
      align-items: center;
   }

   .section-title {
      font-size: 22px;
   }

   .apply-btn {
      width: 100%;
      padding: 16px 30px;
   }

   .footer-nav {
      flex-direction: column;
      align-items: center;
      gap: 12px;
   }
}

/* Applied Notice Styling */
.job-manager-applications-applied-notice {
   background: #e8f5e9;
   border-left: 4px solid #4caf50;
   padding: 15px 20px;
   margin: 20px 0;
   border-radius: 4px;
   color: #2e7d32;
   font-size: 15px;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 10px;
}

.job-manager-applications-applied-notice::before {
   content: "✓";
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   background: #4caf50;
   color: white;
   border-radius: 50%;
   font-weight: bold;
   font-size: 16px;
   flex-shrink: 0;
}

@media (max-width: 768px) {
    .job-manager-applications-applied-notice {
       font-size: 14px;
       padding: 12px 15px;
    }
}

/* Application Form Container */
.application-form-container {
    margin-top: 40px;
    background: white;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.application-form-container h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 30px;
    text-align: center;
    font-family: 'El Messiri', sans-serif;
}

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

.awsm-job-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    font-family: 'Karla', sans-serif;
}

.awsm-job-form-field {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Karla', sans-serif;
    transition: border-color 0.3s;
}

.awsm-job-form-field:focus {
    outline: none;
    border-color: #0a2834;
}

.awsm-job-form-group.awsm-job-inline-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.awsm-job-form-group.awsm-job-inline-group input[type="checkbox"] {
    width: auto;
    margin-top: 2px;
}

.awsm-job-form-group.awsm-job-inline-group label {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.5;
}

.awsm-application-submit-btn {
    background: #0a2834;
    color: white;
    border: none;
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    font-family: 'Karla', sans-serif;
}

.awsm-application-submit-btn:hover {
    background: #0a2834;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 40, 52, 0.3);
}

/* Application Message Container */
.application-message-container {
    margin-top: 20px;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
}

.awsm-success-message {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.awsm-success-message p {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 768px) {
    .application-form-container {
        padding: 30px 20px;
    }

    .awsm-application-submit-btn {
        width: 100%;
    }
}

/* Success/Fail Page Styles */
.hero-background {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #0d2b3a 0%, #1a4a5c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hero-background.fail {
    background: linear-gradient(135deg, #0d2b3a 0%, #1a4a5c 100%);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
}

.content-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 600px;
    width: 100%;
}

.message-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.success-icon::before {
    content: "✓";
    font-weight: bold;
}

.fail .success-icon {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

.fail .success-icon::before {
    content: "✗";
}

.main-title {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1.2;
    letter-spacing: 1px;
    color: white;
    font-family: 'El Messiri', sans-serif;
}

.main-message {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
    font-family: 'Karla', sans-serif;
}

.secondary-message {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    font-family: 'Karla', sans-serif;
}

.btn-return {
    display: inline-block;
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    font-family: 'Karla', sans-serif;
}

.btn-return:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .message-box {
        padding: 40px 30px;
    }

    .main-title {
        font-size: 28px;
    }

    .main-message {
        font-size: 16px;
    }

    .secondary-message {
        font-size: 14px;
    }

    .btn-return {
        padding: 14px 35px;
        font-size: 15px;
    }

    .success-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .hero-background {
        padding: 15px;
    }

    .message-box {
        padding: 30px 20px;
    }

    .main-title {
        font-size: 24px;
    }
}