/* ==================================================================
   MARINESTAR — AUTHORIZATION / REGISTRATION
   ================================================================== */

.auth-page {
    background: #f5f7f9;
    min-height: 60vh;
}


.auth-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding: 55px 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 16, 28, .94),
            rgba(7, 27, 45, .72)
        ),
        url('../img/ship_bridge.jpg')
        center / cover no-repeat;
}


.auth-hero .section-kicker {
    color: var(--gold-400);
}


.auth-hero h1 {
    max-width: 800px;
    margin: 10px 0 14px;

    color: #fff;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;

    text-transform: uppercase;
}


.auth-hero p {
    max-width: 680px;
    margin: 0;

    color: rgba(255, 255, 255, .72);

    font-size: 15px;
    line-height: 1.75;
}


.auth-section {
    padding: 75px 0 90px;
}


.auth-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, .7fr);

    gap: 55px;

    align-items: start;
}


.auth-layout-login {
    grid-template-columns:
        minmax(0, 600px)
        minmax(280px, .7fr);
}


.auth-card {
    padding: 42px;

    background: #fff;

    border-top: 3px solid var(--gold-500);

    box-shadow:
        0 14px 45px rgba(7, 27, 45, .08);
}


.auth-card-heading {
    margin-bottom: 28px;
}


.auth-card-heading h2,
.auth-success h2,
.auth-result h2 {
    margin: 8px 0 0;

    color: #071b2d;

    font-size: 26px;
    line-height: 1.15;

    text-transform: uppercase;
}


.auth-form {
    display: grid;
    gap: 19px;
}


.auth-form label {
    display: grid;
    gap: 8px;
}


.auth-form label span {
    color: #071b2d;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.auth-form input {
    width: 100%;
    height: 48px;

    padding: 0 14px;

    border: 1px solid #d9e0e6;

    outline: 0;

    background: #fafbfc;
    color: #071b2d;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.auth-form input:focus {
    border-color: var(--gold-500);

    box-shadow:
        0 0 0 3px rgba(190, 151, 66, .12);
}


.auth-submit {
    width: 100%;

    margin-top: 8px;

    border: 0;

    cursor: pointer;
}


.auth-switch {
    margin: 25px 0 0;

    color: #6c7782;

    font-size: 12px;
    line-height: 1.7;
}


.auth-switch a {
    color: #071b2d;

    font-weight: 800;

    text-decoration: none;
}


.auth-switch a:hover {
    color: var(--gold-500);
}


.auth-errors {
    margin-bottom: 25px;

    padding: 14px 17px;

    border-left: 3px solid #a33;

    background: #fff3f3;

    color: #7d2424;

    font-size: 12px;
    line-height: 1.65;
}


.auth-errors div + div {
    margin-top: 4px;
}


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


.auth-message-kicker {
    display: block;

    margin-bottom: 15px;

    color: var(--gold-500);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.auth-success p,
.auth-result p {
    max-width: 520px;

    margin: 18px auto 25px;

    color: #68737d;

    font-size: 13px;
    line-height: 1.75;
}


.auth-aside {
    padding: 25px 0;
}


.auth-aside .section-kicker {
    color: var(--gold-500);
}


.auth-aside h2 {
    margin: 10px 0 17px;

    color: #071b2d;

    font-size: 28px;
    line-height: 1.1;

    text-transform: uppercase;
}


.auth-aside p {
    margin: 0;

    color: #68737d;

    font-size: 13px;
    line-height: 1.8;
}


.auth-points {
    margin: 25px 0 0;

    padding: 0;

    list-style: none;
}


.auth-points li {
    position: relative;

    padding: 13px 0 13px 25px;

    border-bottom: 1px solid #dfe5e9;

    color: #071b2d;

    font-size: 12px;
}


.auth-points li::before {
    content: '→';

    position: absolute;
    left: 0;

    color: var(--gold-500);

    font-weight: 800;
}


.auth-result {
    text-align: center;
}


.auth-result-icon {
    display: inline-flex;

    width: 55px;
    height: 55px;

    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border: 1px solid var(--gold-500);

    color: var(--gold-500);

    font-size: 25px;
    font-weight: 700;
}

.remember-me {
    margin: 15px 0 20px;
    padding-left: 55px;
}


.remember-me label {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    color: #333;

    cursor: pointer;
}


.remember-me input[type="checkbox"] {

    appearance: none;
    -webkit-appearance: none;

    width: 12px !important;
    height: 12px !important;

    min-width: 12px;
    max-width: 12px;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff;

    border: 1px solid #000;

    border-radius: 0;

    display: inline-block;

    position: relative;

    cursor: pointer;

    flex-shrink: 0;
}


.remember-me input[type="checkbox"]:checked::after {

    content: "✓";

    position: absolute;

    left: 1px;
    top: -5px;

    font-size: 13px;

    font-weight: 700;

    color: #000;
}


/* Защита формы регистрации от ботов */

.auth-honeypot {
    position: absolute !important;

    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


@media (max-width: 900px) {

    .auth-layout,
    .auth-layout-login {
        grid-template-columns: 1fr;
    }


    .auth-aside {
        padding-top: 0;
    }

}


@media (max-width: 600px) {

    .auth-hero {
        min-height: 260px;

        padding: 40px 0;
    }


    .auth-section {
        padding: 45px 0 60px;
    }


    .auth-card {
        padding: 28px 22px;
    }


    .auth-hero h1 {
        font-size: 35px;
    }

}


/* ==================================================================
   MARINESTAR — PERSONAL CABINET
   ================================================================== */
.cabinet-page {
    background: #f5f7f9;
    min-height: 60vh;
}


.cabinet-hero {
    position: relative;

    min-height: 300px;

    display: flex;
    align-items: flex-end;

    padding: 55px 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 16, 28, .94),
            rgba(7, 27, 45, .72)
        ),
        url('../img/marine_bg_sunset.jpg')
        center / cover no-repeat;
}


.cabinet-hero-content {
    max-width: 850px;
}


.cabinet-kicker,
.cabinet-card-kicker {
    display: block;

    color: var(--gold-500);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.cabinet-hero h1 {
    margin: 10px 0 14px;

    color: #fff;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;

    text-transform: uppercase;
}


.cabinet-hero p {
    max-width: 680px;

    margin: 0;

    color: rgba(255, 255, 255, .72);

    font-size: 15px;
    line-height: 1.75;
}


.cabinet-content {
    padding: 75px 0 90px;
}


.cabinet-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .38fr);

    gap: 30px;

    align-items: start;
}


.cabinet-main {
    min-width: 0;
}


.cabinet-sidebar {
    display: grid;
    gap: 30px;
}


.cabinet-card {
    background: #fff;

    border-top: 3px solid var(--gold-500);

    box-shadow:
        0 14px 45px rgba(7, 27, 45, .08);
}


.cabinet-profile {
    padding: 36px;
}


.cabinet-card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding-bottom: 28px;

    border-bottom: 1px solid #e2e7eb;
}


.cabinet-card-header h2 {
    margin: 8px 0 0;

    color: #071b2d;

    font-size: 28px;
    line-height: 1.15;

    text-transform: uppercase;
}


.cabinet-avatar {
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--gold-500);

    background: #071b2d;
    color: #fff;

    font-size: 25px;
    font-weight: 800;
}


.cabinet-profile-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1px;

    margin-top: 28px;

    background: #e2e7eb;
}


.cabinet-field {
    min-width: 0;

    padding: 20px;

    background: #fff;
}


.cabinet-field-label {
    display: block;

    margin-bottom: 8px;

    color: #7a858e;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.cabinet-field strong {
    display: block;

    overflow-wrap: anywhere;

    color: #071b2d;

    font-size: 14px;
    line-height: 1.5;
}


.cabinet-status {
    display: inline-block;
}


.cabinet-status-approved {
    color: #2f6f46 !important;
}


.cabinet-status-pending {
    color: #9a6a19 !important;
}


.cabinet-status-rejected,
.cabinet-status-blocked {
    color: #9b3434 !important;
}


.cabinet-actions-card {
    margin-top: 30px;

    padding: 36px;
}


.cabinet-actions-card h2 {
    margin: 8px 0 25px;

    color: #071b2d;

    font-size: 26px;
    line-height: 1.15;

    text-transform: uppercase;
}


.cabinet-action-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.cabinet-action {
    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 0;

    padding: 18px;

    border: 1px solid #dfe5e9;

    background: #fff;
    color: #071b2d;

    text-decoration: none;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.cabinet-action:hover {
    border-color: var(--gold-500);

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(7, 27, 45, .08);
}


.cabinet-action-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--gold-500);

    color: var(--gold-500);

    font-size: 17px;
}


.cabinet-action-content {
    min-width: 0;

    flex: 1;
}


.cabinet-action-content strong {
    display: block;

    color: #071b2d;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .4px;

    text-transform: uppercase;
}


.cabinet-action-content small {
    display: block;

    margin-top: 5px;

    color: #78838c;

    font-size: 11px;
    line-height: 1.5;
}


.cabinet-action-arrow {
    flex: 0 0 auto;

    color: var(--gold-500);

    font-weight: 800;
}


.cabinet-sidebar-card,
.cabinet-logout-card {
    padding: 30px;
}


.cabinet-sidebar-card h2 {
    margin: 10px 0 15px;

    color: #071b2d;

    font-size: 24px;
    line-height: 1.15;

    text-transform: uppercase;
}


.cabinet-sidebar-card p,
.cabinet-logout-card p {
    margin: 0;

    color: #68737d;

    font-size: 13px;
    line-height: 1.75;
}


.cabinet-logout-card {
    border-top-color: #071b2d;
}


.cabinet-logout-card h3 {
    margin: 0 0 12px;

    color: #071b2d;

    font-size: 18px;

    text-transform: uppercase;
}


.cabinet-logout-card form {
    margin-top: 22px;
}


.cabinet-logout-button {
    width: 100%;
    min-height: 46px;

    border: 1px solid #071b2d;

    background: #071b2d;
    color: #fff;

    font: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.cabinet-logout-button:hover {
    border-color: var(--gold-500);

    background: var(--gold-500);

    color: #071b2d;
}

/* Поле пароля с кнопкой отображения */
.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 52px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;

    width: 30px;
    height: 30px;

    padding: 0;
    border: 0;
    background: transparent;

    color: inherit;
    cursor: pointer;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
}

.password-eye {
    position: relative;

    display: block;

    width: 20px;
    height: 13px;

    border: 2px solid currentColor;
    border-radius: 50% / 60%;
}

.password-eye::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: currentColor;

    transform: translate(-50%, -50%);
}

.password-toggle.is-visible .password-eye::before {
    content: "";

    position: absolute;
    top: 50%;
    left: -3px;

    width: 26px;
    height: 2px;

    background: currentColor;

    transform: rotate(-35deg);
}

.password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


@media (max-width: 900px) {

    .cabinet-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .cabinet-hero {
        min-height: 260px;

        padding: 40px 0;
    }


    .cabinet-content {
        padding: 45px 0 60px;
    }


    .cabinet-profile,
    .cabinet-actions-card,
    .cabinet-sidebar-card,
    .cabinet-logout-card {
        padding: 26px 22px;
    }


    .cabinet-profile-grid,
    .cabinet-action-grid {
        grid-template-columns: 1fr;
    }


    .cabinet-card-header {
        align-items: flex-start;
    }


    .cabinet-avatar {
        flex-basis: 58px;

        width: 58px;
        height: 58px;
    }


    .cabinet-hero h1 {
        font-size: 35px;
    }

}