/*basic reset*/
* {margin: 0; padding: 0;}

html {
	height: 100%;
	/*Image only BG fallback*/
	
	/*background = gradient + image pattern combo*/

}

body {
    font-family: 'Dosis', sans-serif;
}

/*form styles*/
.msform {
	width: 600px;
	margin: 50px auto;
	text-align: center;
	position: relative;
}

.msform fieldset {
    background: white;
	border: 0 none;
    -ms-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px #000000;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	width: 80%;
	margin: 0 10%;
	
	/*stacking fieldsets above each other*/
	position: relative;
}

/*inputs*/
    .msform input, .msform textarea {
        padding: 15px;
        border: 1px solid #ccc;
        -ms-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 10px;
        width: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: montserrat;
        color: #2C3E50;
        font-size: 16px;
        font-family: 'Dosis', sans-serif;
    }

/*buttons*/
.msform .action-button {
    width: 100px;
	background: #133C57;
	font-weight: bold;
	color: white;
	border: 0 none;
    -ms-border-radius: 1px;
    border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

.msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #133C57;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
    content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
    -ms-border-radius: 3px;
    border-radius: 3px;
	margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #133C57;
	color: white;
}

.error {
    display: inherit;
    text-align: left;
    margin-bottom: 25px;
    color: red;
   

}

.msform label {
    display: inherit;
    text-align: left;
    float: left;
    font-size: 14px;
}

.checkboxLabel { 
    float: left;
}

#agb .label {
    margin-left: 5px;
    margin-top: 2px;
    float: left;
}

.checkboxHiddenLabel {
    float: left;
    margin-left: 5px;
    margin-top: 3px;
    margin-left: 10px;
}

.clearWithMargin {
    clear: both;
    margin-top: 60px;
    margin-bottom: 70px;
    
}

.clear {
    clear: both;
   
    
}

.link {
    width: auto;
    float: left;
    
}

#hiddenRecaptcha-error {
    margin-top: -35px;
}

#newsletterDiv {
        margin-top: -20px;
            clear: both;
}

/*This is a trick. We need a input field in order to perform validation
    with jquery. However, if we use display:none validation plugin will 
    ignore this field. So we need to hide it without using this option
    Therefore we apply a margin to the left that is much bigger than
    any screen.
*/
.hiddenRecaptcha {
    width: 0;
    height: 0;
    margin-left: -9999px;

}

.hideElement {
    display: none;
}

#registrationDiv {

    position: absolute;
    margin: auto;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 600px;
    height: 900px;
}

/* ====== SHIP REGISTRATION STYLES ====== */

.ship-registration-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ship-registration-container {
    width: 100%;
    max-width: 500px;
}

.registration-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.registration-card .card-header {
    text-align: center;
    margin-bottom: 30px;
}

.registration-card .card-header h1 {
    font-size: 28px;
    color: #133C57;
    margin-bottom: 5px;
    letter-spacing: 3px;
}

.registration-card .card-header h2 {
    font-size: 18px;
    color: #666;
    font-weight: 400;
}

.registration-card .email-display {
    text-align: center;
    background: #f0f7ff;
    border: 1px solid #cce5ff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
}

.registration-card .email-display p {
    margin: 0 0 5px 0;
    color: #666;
    font-size: 14px;
}

.registration-card .email-display strong {
    color: #133C57;
    font-size: 16px;
}

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

.registration-card .form-group label {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 500;
    color: #333;
}

.registration-card .code-input-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.registration-card .code-digit {
    width: 60px;
    height: 70px;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #133C57;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.registration-card .code-digit:focus {
    outline: none;
    border-color: #133C57;
    box-shadow: 0 0 0 3px rgba(19, 60, 87, 0.2);
}

.registration-card .expiry-timer {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin: 20px 0;
}

.registration-card .expiry-timer span {
    font-weight: 600;
    color: #e67e22;
}

.registration-card .btn-primary {
    width: 100%;
    padding: 15px;
    background: #133C57;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.registration-card .btn-primary:hover {
    background: #1a5070;
}

.registration-card .resend-section {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.registration-card .resend-section p {
    color: #888;
    margin-bottom: 10px;
    font-size: 14px;
}

.registration-card .btn-link {
    background: none;
    border: none;
    color: #133C57;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

.registration-card .btn-link:disabled {
    color: #aaa;
    cursor: not-allowed;
    text-decoration: none;
}

.registration-card .validation-summary-errors,
.registration-card .field-validation-error {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
}

/* ====== SHIP REGISTRATION FORM (Ship.cshtml) ====== */

.ship-form-container {
    max-width: 600px;
    margin: 80px auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.ship-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.ship-form-header h1 {
    font-size: 32px;
    font-weight: 300;
    color: #1D425D;
    margin-bottom: 10px;
}

.ship-form-header p {
    font-size: 16px;
    color: #666;
}

.ship-form-container .form-group {
    margin-bottom: 25px;
}

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

.ship-form-container .form-group input[type="text"],
.ship-form-container .form-group input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.3s;
}

.ship-form-container .form-group input:focus {
    outline: none;
    border-color: #1D425D;
}

.ship-form-container .validation-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

.ship-form-container .submit-button {
    width: 100%;
    padding: 14px;
    background: #1D425D;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.ship-form-container .submit-button:hover {
    background: #0f2c3d;
}

.ship-form-container .info-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 4px solid #1D425D;
}

.ship-form-container .info-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

.ship-form-container .back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #1D425D;
    text-decoration: none;
    font-size: 14px;
}

.ship-form-container .back-link:hover {
    text-decoration: underline;
}

.ship-form-container .alert-danger {
    padding: 15px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    margin-bottom: 20px;
    color: #721c24;
}

/* ====== HELPER CLASSES FOR INLINE STYLE REMOVAL ====== */

.text-muted {
    color: #666;
}

.text-small {
    font-size: 13px;
}

.text-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    display: block;
}

.mt-10 {
    margin-top: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* ====== DEVICE ID / HARDWARE ID DISPLAY ====== */

.device-info-box {
    background: linear-gradient(135deg, #1D425D 0%, #2d5a7b 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.device-info-box i {
    font-size: 20px;
    opacity: 0.8;
}

.device-info-box .device-label {
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.device-info-box .device-id {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* ====== TWO-COLUMN REGISTRATION LAYOUT ====== */

.registration-layout {
    display: flex;
    max-width: 1100px;
    margin: 40px auto;
    min-height: 580px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.registration-sidebar {
    flex: 0 0 38%;
    background: linear-gradient(135deg, #1D425D 0%, #2d5a7b 100%);
    color: white;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.registration-sidebar .sidebar-logo {
    width: 180px;
    margin-bottom: 30px;
}

.registration-sidebar h2 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.registration-sidebar .sidebar-tagline {
    font-size: 15px;
    opacity: 0.85;
    margin-bottom: 35px;
}

.registration-sidebar .sidebar-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.registration-sidebar .sidebar-benefits li {
    font-size: 14px;
    padding: 10px 0;
    padding-left: 28px;
    position: relative;
    opacity: 0.9;
}

.registration-sidebar .sidebar-benefits li::before {
    content: "\f00c"; /* FontAwesome 5 check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #7ec8e3;
}

.registration-content {
    flex: 1;
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.registration-content .form-header {
    text-align: left;
    margin-bottom: 30px;
}

.registration-content .form-header h1 {
    font-size: 26px;
    font-weight: 400;
    color: #1D425D;
    margin-bottom: 8px;
}

.registration-content .form-header p {
    font-size: 15px;
    color: #666;
}

.registration-content .form-group {
    margin-bottom: 22px;
}

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

.registration-content .form-group input[type="text"],
.registration-content .form-group input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s;
}

.registration-content .form-group input:focus {
    outline: none;
    border-color: #1D425D;
}

/* Consent Section - Terms & Newsletter */
.consent-section {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.consent-links {
    margin-bottom: 12px;
    font-size: 13px;
}

.consent-links a {
    color: #1D425D;
    text-decoration: underline;
}

.consent-links a:hover {
    color: #0f2c3d;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.checkbox-group:last-child {
    margin-bottom: 0;
}

.checkbox-group .checkbox-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-group .checkbox-label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-group.required .checkbox-label::after {
    content: " *";
    color: #dc3545;
}

.checkbox-group .validation-message {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.registration-content .submit-button {
    width: 100%;
    padding: 14px;
    background: #1D425D;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.registration-content .submit-button:hover {
    background: #0f2c3d;
}

.registration-content .info-box {
    background: #f8f9fa;
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 4px solid #1D425D;
}

.registration-content .info-box p {
    margin: 0;
    font-size: 13px;
    color: #555;
}

.registration-content .back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #1D425D;
    text-decoration: none;
    font-size: 14px;
}

.registration-content .back-link:hover {
    text-decoration: underline;
}

.registration-content .alert-danger {
    padding: 14px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    margin-bottom: 20px;
    color: #721c24;
    font-size: 14px;
}

.registration-content .validation-message {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

/* Device ID in two-column layout */
.registration-content .device-info-box {
    background: linear-gradient(135deg, #1D425D 0%, #2d5a7b 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Responsive: Single column on mobile */
@media (max-width: 900px) {
    .registration-layout {
        flex-direction: column;
        max-width: 550px;
        margin: 20px auto;
    }

    .registration-sidebar {
        padding: 30px;
        flex: 0 0 auto;
    }

    .registration-sidebar .sidebar-benefits {
        display: none;
    }

    .registration-content {
        padding: 30px;
    }
}

@media (max-width: 600px) {
    .registration-sidebar {
        display: none;
    }

    .registration-layout {
        margin: 10px;
        border-radius: 8px;
    }
}

/* ====== EMAIL VERIFICATION SPECIFIC ====== */

.email-display-box {
    text-align: center;
    background: #f0f7ff;
    border: 1px solid #cce5ff;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 25px;
}

.email-display-box p {
    margin: 0 0 5px 0;
    color: #666;
    font-size: 14px;
}

.email-display-box strong {
    color: #1D425D;
    font-size: 16px;
}

.registration-content .code-input-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.registration-content .code-digit {
    width: 55px;
    height: 65px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #1D425D;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.registration-content .code-digit:focus {
    outline: none;
    border-color: #1D425D;
    box-shadow: 0 0 0 3px rgba(29, 66, 93, 0.15);
}

.registration-content .expiry-timer {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin: 20px 0;
}

.registration-content .expiry-timer span {
    font-weight: 600;
    color: #e67e22;
}

.registration-content .resend-section {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.registration-content .resend-section p {
    color: #888;
    margin-bottom: 10px;
    font-size: 14px;
}

.registration-content .btn-link {
    background: none;
    border: none;
    color: #1D425D;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
    padding: 5px 10px;
}

.registration-content .btn-link:disabled {
    color: #aaa;
    cursor: not-allowed;
    text-decoration: none;
}

/* ====== SHIP INFO SIDEBAR (for Complete pages) ====== */

.ship-info-sidebar {
    padding: 35px 30px;
}

.ship-info-sidebar .sidebar-ship-header {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.ship-info-sidebar .sidebar-ship-header i {
    margin-right: 8px;
}

.ship-info-sidebar .sidebar-info-item {
    margin-bottom: 20px;
}

.ship-info-sidebar .sidebar-info-item:last-child {
    margin-bottom: 0;
}

.ship-info-sidebar .sidebar-info-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 4px;
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
}

.ship-info-sidebar .sidebar-info-item .value {
    font-size: 16px;
    font-weight: 500;
}

.ship-info-sidebar .sidebar-info-item .value.hardware-id {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.1);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* ====== OFFICE INFO SIDEBAR ====== */

.office-info-sidebar {
    padding: 35px 30px;
}

.office-info-sidebar .sidebar-info-item {
    margin-bottom: 18px;
}

.office-info-sidebar .sidebar-info-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.office-info-sidebar .sidebar-info-item .value {
    font-size: 14px;
    line-height: 1.5;
}

.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 20px 0;
}

.sidebar-license-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-license-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.sidebar-license-badge i {
    color: #7ec8e3;
}

.sidebar-ships-section .ships-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.sidebar-ships-section .ships-toggle:hover {
    background: rgba(255,255,255,0.1);
}

.sidebar-ships-section .ships-toggle i {
    transition: transform 0.2s;
}

.sidebar-ships-section .ships-toggle.expanded i {
    transform: rotate(180deg);
}

.sidebar-ships-section .ships-list {
    display: none;
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.sidebar-ships-section .ships-list.show {
    display: block;
}

.sidebar-ships-section .ship-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    margin-right: 6px;
    margin-bottom: 6px;
}

.sidebar-ships-section .ship-badge i {
    margin-right: 5px;
    opacity: 0.8;
}

/* ====== WIDE LAYOUT VARIANT ====== */

.registration-layout-wide {
    max-width: 1000px;
}

/* ====== FORM TWO-COLUMN ROW ====== */

.registration-content .form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.registration-content .form-row-2col .form-group {
    margin-bottom: 22px;
}

@media (max-width: 900px) {
    .registration-content .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* Input type password styling */
.registration-content .form-group input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s;
}

.registration-content .form-group input[type="password"]:focus {
    outline: none;
    border-color: #1D425D;
}

.registration-content .form-group input[readonly] {
    background: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

/* ====== INFO/ERROR PAGES (NoLicense, NoMatch, Success) ====== */

.info-page-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.info-page-icon {
    margin-bottom: 15px;
}

.info-page-icon i {
    font-size: 42px;
    color: #17a2b8;
}

.info-page-icon.success i {
    font-size: 80px;
    color: #28a745;
}

.info-page-icon.warning i {
    color: #f0ad4e;
}

.info-box-warning {
    background: #fff3cd;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 3px solid #f0ad4e;
}

.info-box-warning p {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

.info-page-container h1 {
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
}

.info-page-container .message {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.info-box-highlight {
    background: #f0f8ff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 3px solid #17a2b8;
    text-align: left;
}

.info-box-highlight h3 {
    font-size: 15px;
    font-weight: 500;
    color: #0c5460;
    margin-bottom: 8px;
}

.info-box-highlight p {
    margin: 4px 0;
    color: #0c5460;
    font-size: 14px;
}

.contact-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.contact-box h3 {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.contact-box p {
    margin: 5px 0;
    font-size: 14px;
    color: #555;
}

.contact-box a {
    color: #1D425D;
    text-decoration: none;
    font-weight: 500;
}

.contact-box a:hover {
    text-decoration: underline;
}

.action-buttons-center {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-action-primary {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: #1D425D;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action-primary:hover {
    background: #0f2c3d;
}

.btn-action-secondary {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: #e0e0e0;
    color: #333;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action-secondary:hover {
    background: #d0d0d0;
}

/* ====== SUCCESS PAGE SIDEBAR ====== */

.success-sidebar {
    text-align: center;
}

.success-sidebar .success-icon-large {
    margin-bottom: 25px;
}

.success-sidebar .success-icon-large i {
    font-size: 70px;
    color: #7ec8e3;
}

.success-sidebar h2 {
    margin-bottom: 25px;
}

.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.success-content .form-header {
    text-align: center;
}

.success-content .submit-button {
    max-width: 300px;
}

.support-info-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #666;
}

.support-info-box a {
    color: #1D425D;
    text-decoration: none;
    font-weight: 500;
}

.support-info-box a:hover {
    text-decoration: underline;
}

/* ====== ACCOUNT TYPE SELECTION (Index.cshtml) ====== */

.account-type-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.account-type-option {
    display: flex;
    align-items: center;
    padding: 25px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.account-type-option:hover {
    border-color: #1D425D;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.option-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.option-icon.office {
    background: linear-gradient(135deg, #1D425D 0%, #2a5a7a 100%);
}

.option-icon.ship {
    background: linear-gradient(135deg, #0099cc 0%, #00b8e6 100%);
}

.option-icon i {
    font-size: 24px;
    color: #fff;
}

.option-content {
    flex: 1;
}

.option-content h3 {
    font-size: 20px;
    font-weight: 500;
    color: #1D425D;
    margin: 0 0 5px 0;
}

.option-content p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.option-arrow {
    color: #ccc;
    font-size: 18px;
    transition: color 0.3s, transform 0.3s;
}

.account-type-option:hover .option-arrow {
    color: #1D425D;
    transform: translateX(5px);
}

.login-link-box {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.login-link-box p {
    color: #666;
    font-size: 15px;
    margin: 0;
}

.login-link-box a {
    color: #1D425D;
    font-weight: 500;
    text-decoration: none;
}

.login-link-box a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   NoMatch / Error Pages (OfficeNoMatch, ShipNoMatch)
   ========================================================================== */

.error-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.error-icon {
    margin-bottom: 15px;
}

.error-icon i {
    font-size: 42px;
    color: #17a2b8;
}

.error-container h1 {
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
}

.error-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Info boxes (email-info, imo-info) */
.email-info,
.imo-info {
    background: #f0f8ff;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 3px solid #17a2b8;
}

.email-info p,
.imo-info p {
    margin: 0;
    color: #0c5460;
    font-size: 14px;
}

.email-info strong,
.imo-info strong {
    font-weight: 600;
}

/* Reasons checklist box */
.reasons-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: left;
}

.reasons-box h3 {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.reasons-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reasons-box li {
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
}

.reasons-box li:last-child {
    border-bottom: none;
}

.reasons-box i {
    color: #1D425D;
    margin-right: 8px;
    width: 16px;
    font-size: 11px;
}

/* Contact info box */
.error-container .contact-info {
    background: #f0f8ff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 3px solid #17a2b8;
}

.error-container .contact-info h3 {
    font-size: 15px;
    font-weight: 500;
    color: #0c5460;
    margin-bottom: 8px;
}

.error-container .contact-info p {
    margin: 4px 0;
    font-size: 14px;
    color: #0c5460;
}

.error-container .contact-info a {
    color: #0c5460;
    font-weight: 600;
    text-decoration: none;
}

.error-container .contact-info a:hover {
    text-decoration: underline;
}

/* Action buttons in error pages */
.error-container .action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.error-container .btn-primary,
.error-container .btn-secondary {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.error-container .btn-primary {
    background: #1D425D;
    color: white;
}

.error-container .btn-primary:hover {
    background: #0f2c3d;
}

.error-container .btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.error-container .btn-secondary:hover {
    background: #d0d0d0;
}

/* ==========================================================================
   Office Selection (SelectContract pages)
   ========================================================================== */

.office-selection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.office-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.office-option:hover {
    border-color: #0066cc;
    background: #f0f7ff;
}

.office-option input[type="radio"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
}

.office-option input[type="radio"]:checked + .office-name {
    font-weight: 600;
    color: #0066cc;
}

.office-option:has(input:checked) {
    border-color: #0066cc;
    background: #f0f7ff;
}

.office-name {
    font-size: 16px;
    color: #333;
}

/* ==========================================================================
   LOGIN PAGE STYLES
   ========================================================================== */

.login-page-wrapper {
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: transparent;
}

.login-content {
    max-width: 420px;
}

.login-content .form-group input.form-control {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Dosis', sans-serif;
}

.login-content .form-group input.form-control:focus {
    outline: none;
    border-color: #1D425D;
    box-shadow: 0 0 0 3px rgba(29, 66, 93, 0.1);
}

.login-content .form-group input.form-control::placeholder {
    color: #aaa;
}

/* Login options row (remember me + forgot password) */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #555;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1D425D;
    cursor: pointer;
}

.forgot-password {
    color: #1D425D;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
}

/* Login submit button */
.login-content .submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1D425D 0%, #2d5a7b 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Dosis', sans-serif;
    letter-spacing: 0.5px;
}

.login-content .submit-button:hover {
    background: linear-gradient(135deg, #0f2c3d 0%, #1D425D 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 66, 93, 0.3);
}

.login-content .submit-button i {
    font-size: 18px;
}

/* Divider */
.login-divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.login-divider span {
    padding: 0 15px;
    color: #888;
    font-size: 14px;
    white-space: nowrap;
}

/* Activate License Button (prominent orange button) */
.activate-license-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #E18A07 0%, #f5a623 100%);
    color: white;
    border: 2px solid #FFD700;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    font-family: 'Dosis', sans-serif;
    letter-spacing: 0.5px;
}

.activate-license-btn:hover {
    background: linear-gradient(135deg, #c77a06 0%, #E18A07 100%);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transform: translateY(-1px);
    color: white;
}

.activate-license-btn i {
    font-size: 16px;
}

/* Trial link */
.trial-link {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.trial-link p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.trial-link a {
    color: #1D425D;
    font-weight: 500;
    text-decoration: none;
}

.trial-link a:hover {
    text-decoration: underline;
}

/* Alert styling for login errors */
.login-content .alert-danger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #dc2626;
    font-size: 14px;
}

.login-content .alert-danger i {
    font-size: 18px;
    flex-shrink: 0;
}

/* Validation message styling */
.login-content .validation-message {
    color: #dc3545;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

/* ==========================================================================
   INVITATION PAGES (Error, Already Registered)
   ========================================================================== */

/* Error sidebar variant (red gradient) */
.error-sidebar {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}

/* Info sidebar variant (blue gradient) */
.info-sidebar {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

/* Large icons for invitation pages */
.error-icon-large,
.info-icon-large {
    font-size: 64px;
    color: #fff;
    margin-bottom: 24px;
}

/* Error message styling in content area */
.error-content .error-message {
    color: #dc2626;
    font-size: 16px;
}

/* Action buttons row (shared) */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.action-buttons .submit-button.secondary {
    background: #6b7280;
}

.action-buttons .submit-button.secondary:hover {
    background: #4b5563;
}