/* =========================================================
   SOCIAL ARMAGH — SUBSCRIBER ACCOUNT
   Minimal utility styling
   ========================================================= */


/* =========================================================
   MY DETAILS
   ========================================================= */

.subscriber-details {
    max-width: 600px;
    margin: 8px 0 18px;
    padding: 14px 18px;

    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.subscriber-details p {
    margin: 0;
    padding: 7px 0;

    color: #555555;
    font-size: 14px;
    line-height: 1.4;

    border-bottom: 1px solid #f0f0f0;
}

.subscriber-details p:last-child {
    border-bottom: none;
}

.subscriber-details strong {
    display: inline-block;
    min-width: 105px;

    color: #222222;
    font-weight: 600;
}


/* =========================================================
   CHANGE PASSWORD
   Keep this deliberately small.
   ========================================================= */

.subscriber-password {
    margin: 8px 0 14px;
}


/* Small Change Password link/button */

.subscriber-password-toggle {
    padding: 0;

    background: transparent;
    border: 0;

    color: #666666;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
}

.subscriber-password-toggle:hover {
    color: #ff6a00;
}


/* Password form */

.subscriber-password-form {
    max-width: 400px;
    margin-top: 12px;
    padding: 14px 16px;

    background: #fafafa;
    border: 1px solid #eeeeee;
    border-radius: 5px;
}

.subscriber-password-form p {
    margin: 0 0 10px;
}


/* Labels */

.subscriber-password-form label {
    display: block;
    margin-bottom: 3px;

    color: #666666;
    font-size: 12px;
    font-weight: 500;
}


/* Inputs */

.subscriber-password-form input[type="password"] {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;

    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;

    color: #222222;
    font-size: 13px;
}

.subscriber-password-form input[type="password"]:focus {
    border-color: #00bcd4;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.10);
}


/* Password buttons */

.subscriber-password-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.subscriber-password-actions button {
    padding: 7px 13px;

    border: 0;
    border-radius: 4px;

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

    cursor: pointer;
}


/* Main password button */

.subscriber-password-actions button[type="submit"] {
    background: #ff6a00;
    color: #ffffff;
}

.subscriber-password-actions button[type="submit"]:hover {
    background: #e85d00;
}


/* Cancel */

.subscriber-password-actions .cancel-button {
    background: transparent;
    color: #777777;
}

.subscriber-password-actions .cancel-button:hover {
    color: #ff6a00;
}


/* Disabled */

.subscriber-password-actions button:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* =========================================================
   PASSWORD MESSAGES
   ========================================================= */

.password-message-container {
    margin-top: 8px;
}

.password-success,
.password-error {
    margin: 0;
    padding: 7px 9px;

    border-radius: 4px;

    font-size: 12px;
}

.password-success {
    background: #edf8f0;
    border: 1px solid #d2ead7;
    color: #176b35;
}

.password-error {
    background: #fff2f2;
    border: 1px solid #efd0d0;
    color: #b32626;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .subscriber-details {
        padding: 12px 15px;
    }

    .subscriber-details strong {
        min-width: 95px;
    }

    .subscriber-password-form {
        width: 100%;
        box-sizing: border-box;
    }

}