/*==========================================================
    BAHRAIN BOURSE CAREERS
    Common Styles (English)
==========================================================*/

/*------------- Layout -------------*/

.career-container {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #333;
}

/*------------- Header -------------*/

.career-header {
    margin-bottom: 35px;
}

.page-title {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    color: #7B174F;
}

.page-description {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.7;
    color: #666;
}

/*------------- No Jobs -------------*/

.empty-jobs {
    background: #fafafa;
    border: 1px dashed #d8d8d8;
    border-radius: 10px;
    padding: 50px;
    text-align: center;
}

.empty-title {
    font-size: 18px;
    color: #666;
}

/*------------- Card Common -------------*/

.career-card,
.career-details-container,
.career-form-container,
.success-box {

    background: #fff;

    border-radius: 10px;

    border: 1px solid #e8e8e8;

    box-shadow: 0 4px 12px rgba(0,0,0,.05);

}

/*------------- Buttons -------------*/

.btn-view,
.btn-apply,
.btn-submit {

    transition: all .30s ease;

}
.career-container input.red-btn {
    width: auto !important;
    height: auto !important;
    padding: 6px 22px !important;
    border-radius: 30px !important;
}
.career-container .red-btn {
    background: #d71920 !important;
    color: #fff !important;
}
/*------------- Links -------------*/

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/*------------- Back Button -------------*/

.back-link {
    margin-bottom: 20px;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7B174F;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all .20s ease;
}

.back-button:hover {
    color: #5a0f39;
    text-decoration: none;
    transform: translateX(-2px);
}

.back-arrow::before {
    content: "\2190";
    font-size: 20px;
    line-height: 1;
}

/*------------- Common Section Title -------------*/

.section-title {

    font-size: 20px;

    color: #7B174F;

    font-weight: 600;

    margin-bottom: 20px;

}

/*------------- Form Labels -------------*/

.field-label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #444;

}

/*------------- Validation -------------*/

.validation-summary {

    margin-bottom: 20px;

    padding: 15px;

    border-radius: 6px;

    background: #FFF8F8;

    border: 1px solid #F5C6CB;

    color: #C62828;

}

.field-error {

    display: block;

    margin-top: 5px;

    color: #D32F2F;

    font-size: 13px;

}

/*------------- Form Controls -------------*/

.form-control,
.form-control-file {

    border-radius: 6px;

    min-height: 44px;

    box-shadow: none;

}

.form-control:focus {

    border-color: #7B174F;

    box-shadow: 0 0 0 .15rem rgba(123,23,79,.15);

}
/*==========================================================
    CURRENT OPENINGS
==========================================================*/

/*------------- Job Card -------------*/

.career-card {
    margin-bottom: 20px;
    padding: 28px 30px;
    transition: all .30s ease;
}

.career-card:hover {
    box-shadow: 0 12px 25px rgba(0,0,0,.08);
    transform: translateY(-3px);
}

/*------------- Job Title -------------*/

.job-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #222;
}

/*------------- Department -------------*/

.job-department {
    margin-top: 10px;
    font-size: 16px;
    color: #777;
}

/*------------- Meta Information -------------*/

.job-meta {
    margin-top: 14px;
    font-size: 14px;
}

.meta-label {
    font-weight: 600;
    color: #7B174F;
    margin-right: 6px;
}

.meta-value {
    color: #666;
}

/*------------- View Button -------------*/

.btn-view {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 170px;

    height: 46px;

    padding: 0 28px;

    border-radius: 30px;

    background: #7B174F;

    color: #fff !important;

    font-size: 15px;

    font-weight: 600;

    border: none;

    cursor: pointer;

}

.btn-view:hover {

    background: #5B0E39;

    color: #fff;

}

/*------------- Arrow -------------*/

.btn-text {

    margin-right: 10px;

}

.arrow::before {

    content: "\2192";

    font-size: 18px;

    transition: all .30s ease;

}

.btn-view:hover .arrow::before {

    margin-left: 6px;

}

/*------------- Job Grid Alignment -------------*/

.career-card .row {

    min-height: 80px;

}

/*------------- Button Alignment -------------*/

.career-action{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/*------------- Divider (Optional) -------------*/

.career-card:not(:last-child) {

    margin-bottom: 18px;

}

/*------------- Animation -------------*/

.career-card {

    animation: fadeIn .35s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}
/*==========================================================
    JOB DETAILS PANEL
==========================================================*/

/*------------- Details Container -------------*/

.career-details-container{

    padding:40px;

    margin-top:15px;

}

/*------------- Job Header -------------*/

.job-header{

    margin-bottom:35px;

    border-bottom:1px solid #ECECEC;

    padding-bottom:20px;

}

.detail-title{

    margin:0;

    font-size:32px;

    font-weight:600;

    color:#222;

    line-height:1.4;

}

/*------------- Information Grid -------------*/

.detail-grid{

    margin-bottom:40px;

}

.detail-item{

    margin-bottom:25px;

}

.detail-label{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#7B174F;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:8px;

}

.detail-value{

    font-size:17px;

    color:#444;

    line-height:1.6;

}

/*------------- Detail Sections -------------*/

.detail-section{

    margin-top:40px;

}

.section-title{

    position:relative;

    margin-bottom:18px;

    padding-bottom:12px;

    font-size:22px;

    font-weight:600;

    color:#222;

}

.section-title:after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:70px;

    height:3px;

    background:#7B174F;

    border-radius:5px;

}

/*------------- Section Content -------------*/

.section-content{

    font-size:16px;

    color:#555;

    line-height:1.9;

}

/* Paragraph */

.section-content p{

    margin-bottom:15px;

}

/* Lists */

.section-content ul{

    margin:15px 0;

    padding-left:22px;

}

.section-content li{

    margin-bottom:10px;

}

/*------------- Apply Area -------------*/

.apply-area{

    margin-top:50px;

    text-align:center;

}

/*------------- Apply Button -------------*/

.btn-apply{

    min-width:220px;

    height:52px;

    border:none;

    border-radius:30px;

    background:#7B174F;

    color:#FFF;

    font-size:17px;

    font-weight:600;

    padding:0 35px;

    cursor:pointer;

    transition:.30s;

}

.btn-apply:hover{

    background:#5B0E39;

    box-shadow:0 10px 18px rgba(123,23,79,.25);

}

/*------------- Highlight Box -------------*/

.detail-highlight{

    background:#F9F9F9;

    border-left:4px solid #7B174F;

    padding:20px;

    margin:25px 0;

    border-radius:6px;

}

/*------------- Rich Text Images -------------*/

.section-content img{

    max-width:100%;

    height:auto;

    border-radius:6px;

}

/*------------- Tables (if HR uses tables) -------------*/

.section-content table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.section-content table td,
.section-content table th{

    border:1px solid #DDD;

    padding:12px;

}

.section-content table th{

    background:#F5F5F5;

    font-weight:600;

}

/*------------- Fade Animation -------------*/

.career-details-container{

    animation:fadeIn .35s ease;

}
/*==========================================================
    APPLICATION FORM
==========================================================*/

/*------------- Form Container -------------*/

.career-form-container{

    padding:40px;

    margin-top:15px;

}

/*------------- Form Header -------------*/

.career-form-header{

    margin-bottom:35px;

    border-bottom:1px solid #ECECEC;

    padding-bottom:20px;

}

/*------------- Form Sections -------------*/

.form-section{

    margin-bottom:40px;

}

.form-section:last-child{

    margin-bottom:20px;

}

/*------------- Form Group -------------*/

.form-group{

    margin-bottom:25px;

}

.field-label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#444;

}

/*------------- TextBox -------------*/

.form-control{

    width:100%;

    height:48px;

    border:1px solid #D8D8D8;

    border-radius:8px;

    padding:0 15px;

    font-size:15px;

    background:#FFF;

    transition:all .25s ease;

}

.form-control:hover{

    border-color:#BDBDBD;

}

.form-control:focus{

    border-color:#7B174F;

    box-shadow:0 0 0 3px rgba(123,23,79,.10);

    outline:none;

}

/*------------- DropDown -------------*/

select.form-control{

    cursor:pointer;

}

/*------------- File Upload -------------*/

.form-control-file{

    display:block;

    width:100%;

    padding:10px;

    border:1px dashed #CCC;

    border-radius:8px;

    background:#FAFAFA;

}

.form-control-file:hover{

    border-color:#7B174F;

}

/*------------- Validation Summary -------------*/

.validation-summary{

    margin-bottom:30px;

    padding:18px;

    border-radius:8px;

    background:#FFF4F4;

    border:1px solid #F1B5B5;

    color:#B00020;

}

.validation-summary ul{

    margin:10px 0 0;

    padding-left:20px;

}

/*------------- Field Error -------------*/

.field-error{

    display:block;

    margin-top:6px;

    color:#C62828;

    font-size:13px;

}

/*------------- Placeholder -------------*/

.form-control::placeholder{

    color:#AAA;

}

/*------------- Buttons Area -------------*/

.form-buttons{

    margin-top:45px;

    text-align:center;

}

/*------------- Submit Button -------------*/

.btn-submit{

    min-width:240px;

    height:52px;

    border:none;

    border-radius:30px;

    background:#7B174F;

    color:#FFF;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:all .30s ease;

}

.btn-submit:hover{

    background:#5B0E39;

    box-shadow:0 12px 22px rgba(123,23,79,.25);

}

.btn-submit:focus{

    outline:none;

}

/*------------- Disabled Button -------------*/

.btn-submit:disabled{

    background:#CCC;

    cursor:not-allowed;

}

/*------------- Required Symbol -------------*/

.required{

    color:#D32F2F;

    margin-left:3px;

}

/*------------- Section Divider -------------*/

.form-section:not(:last-child){

    padding-bottom:20px;

    border-bottom:1px solid #EFEFEF;

}

/*------------- Upload Hint -------------*/

.upload-note{

    margin-top:8px;

    font-size:13px;

    color:#888;

}

/*------------- Animation -------------*/

.career-form-container{

    animation:fadeIn .35s ease;

}
/*==========================================================
    SUCCESS PANEL
==========================================================*/

.success-box{

    max-width:650px;

    margin:60px auto;

    padding:45px;

    background:#FFF;

    border:1px solid #EAEAEA;

    border-radius:10px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

    text-align:center;

}

.success-title{

    margin:0 0 20px;

    color:#7B174F;

    font-size:32px;

    font-weight:600;

}

.success-message{

    margin:0;

    color:#666;

    font-size:17px;

    line-height:1.8;

}

.success-box .btn-submit{

    margin-top:35px;

}
.employment-radio td {
    padding-right: 20px;
}

.employment-radio input[type="radio"] {
    margin-right: 4px;
}